Accesibilidad

El equipo de Next.js está comprometido a hacer que Next.js sea accesible para todos los desarrolladores (y sus usuarios finales). Al agregar características de accesibilidad en Next.js por defecto, buscamos hacer que la Web sea más inclusiva para todos.

Anuncios de ruta

Al navegar entre páginas renderizadas en el servidor (por ejemplo, usando la etiqueta <a href>), los lectores de pantalla y otras tecnologías de asistencia anuncian el título de la página cuando esta se carga, para que los usuarios comprendan que la página ha cambiado.

Además de las navegaciones tradicionales entre páginas, Next.js también soporta transiciones del lado del cliente para mejorar el rendimiento (usando next/link). Para asegurar que las transiciones del lado del cliente también sean anunciadas a las tecnologías de asistencia, Next.js incluye un anunciador de rutas por defecto.

El anunciador de rutas de Next.js busca el nombre de la página para anunciar, primero inspeccionando document.title, luego el elemento <h1>, y finalmente la ruta URL. Para la mejor experiencia de usuario accesible, asegúrese de que cada página en su aplicación tenga un título único y descriptivo.

Linting

Next.js proporciona una experiencia integrada con ESLint lista para usar, incluyendo reglas personalizadas para Next.js. Por defecto, Next.js incluye eslint-plugin-jsx-a11y para ayudar a detectar problemas de accesibilidad tempranamente, incluyendo advertencias sobre:

• aria-props
• aria-proptypes
• aria-unsupported-elements
• role-has-required-aria-props
• role-supports-aria-props

Por ejemplo, este plugin ayuda a asegurar que agregue texto alternativo a las etiquetas img, use atributos aria-* correctos, use atributos role apropiados, y más.

Recursos de accesibilidad

• Lista de verificación WCAG de WebAIM
• Pautas WCAG 2.2
• The A11y Project
• Verifique las proporciones de contraste de color entre elementos de primer plano y fondo
• Use prefers-reduced-motion cuando trabaje con animaciones