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 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 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 a anunciar primero inspeccionando document.title, luego el elemento <h1>, y finalmente la ruta de la 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 correctos, y más.

Recursos de Accesibilidad

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