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 funciones de accesibilidad en Next.js por defecto, nuestro objetivo es 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 entiendan 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 (client-side) para mejorar el rendimiento (usando next/link). Para asegurar que estas transiciones 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 anunciarlo, primero inspeccionando document.title, luego el elemento <h1>, y finalmente la ruta URL. Para la mejor experiencia de usuario accesible, asegúrate de que cada página en tu 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 agregues texto alternativo a las etiquetas img, uses atributos aria-* correctos, uses atributos role apropiados, y más.

Recursos de accesibilidad

• Lista de verificación WCAG de WebAIM
• Directrices WCAG 2.2
• The A11y Project
• Verifica las proporciones de contraste de color entre elementos de primer plano y fondo
• Usa prefers-reduced-motion cuando trabajes con animaciones