Accesibilidad

El puntaje de accesibilidad es un promedio ponderado de todas las auditorías de accesibilidad. Las auditorías más pesadas tienen un mayor impacto en su puntaje. Cada auditoría de accesibilidad es aprobada o no. A diferencia de las auditorías de rendimiento, una página no obtiene puntos por pasar parcialmente una auditoría de accesibilidad. Por ejemplo, si algunos elementos tienen nombres amigables para lectores de pantalla, pero otros no, esa página obtiene un 0 para la auditoría de nombres amigables para lectores de pantalla.

Accesibilidad: Estas pruebas incluyen consejos para mejorar la accesibilidad de tu aplicación web. Solo se pueden detectar un subconjunto de problemas de accesibilidad de forma automática.

La recomendación general es que tu sitio web sea:

  • Perceptible: ¿pueden los usuarios percibir el contenido? Esto nos ayuda a tener en cuenta que solo porque algo sea perceptible con un sentido, como la vista, no significa que todos los usuarios puedan percibirlo.

  • Manejable: ¿pueden los usuarios componentes de IU y navegar por el contenido? Por ejemplo, alguien que no puede usar mouse o pantalla táctil no puede manejar algo que demanda interacción de desplazamiento.

  • Comprensible: ¿pueden los usuarios comprender el contenido? ¿Pueden los usuarios comprender la interfaz y es esta lo suficientemente consistente como para evitar confusiones?

  • Sólido: ¿puede una amplia variedad de usuarios-agentes (navegadores) consumir el contenido? ¿Funciona con tecnología asistencial?

Prácticas recomendadas

Para mejorar la accesibilidad de tu sitio, te recomendamos seguir las pautas de accesibilidad al contenido web (WCAG). Estos elementos destacan las prácticas recomendadas de accesibilidad más habituales.

Meta Viewport

  • id: duplicate-id | weight:1 | group: a11y-best-practices

  • id: meta-refresh | weight:0 | group: a11y-best-practices

Internacionalización y localización

(a11y-language): A continuación se indican consejos para que los usuarios con diversas configuraciones regionales puedan interpretar mejor el contenido de las páginas.

  • id: html-has-lang | weight:3 | group: a11y-language

  • id: html-lang-valid | weight:3 | group: a11y-language

  • id: valid-lang | weight:0 | group: a11y-language

ARIA

(a11y-aria): A continuación se indican consejos para optimizar el uso de ARIA en tu aplicación, lo que puede mejorar la experiencia de los usuarios de tecnologías de asistencia, como los lectores de pantalla.

  • id: aria-allowed-attr | weight:10 | group:a11y-aria

  • id: aria-required-attr | weight:10 group:a11y-aria

  • id: aria-required-children | weight:10 | group:a11y-aria

  • id: aria-required-parent | weight:10 |group: a11y-aria

  • id: aria-roles | weight:10 | group: a11y-aria

  • id: aria-valid-attr-value | weight:10 | group: a11y-aria

  • id: aria-valid-attr | weight:10 | group: a11y-aria

Audio y vídeo

(a11y-audio-video): Aquí tienes consejos para proporcionar contenido alternativo para audio y vídeo. Así se puede mejorar la experiencia de los usuarios con dificultades auditivas o visuales.

  • id: audio-caption | weight:0 | group: a11y-audio-video

  • id: video-caption | weight:0 | group: a11y-audio-video

  • id: video-description | weight:0 | group: a11y-audio-video

Navegación

(a11y-navigation): Aquí tienes consejos para facilitar el desplazamiento con el teclado en tu aplicación.

  • id: accesskeys | weight:0 | group: a11y-navigation

  • id: bypass | weight:3 | group: a11y-navigation

  • id: tabindex | weight:0 | group: a11y-navigation

Contraste

(a11y-color-contrast): A continuación se indican consejos para facilitar la lectura del contenido.

  • id: color-contrast | weight:3 | group: a11y-color-contrast

Nombres y etiquetas

(a11y-names-labels): A continuación se indican consejos para mejorar la semántica de los controles de tu aplicación. Estos consejos pueden mejorar la experiencia de los usuarios de tecnologías de asistencia, como los lectores de pantalla.

Botones accesibles

Para botones con etiquetas visibles, agregue texto interno al elemento del button. Haga que la etiqueta sea un claro llamado a la acción. Por ejemplo:

<button>Book room</button>

Para botones sin etiquetas visibles, como botones de iconos, use el atributo aria-label para describir claramente la acción a cualquiera que use una tecnología de asistencia.

<button class="btn" aria-label="Right Align">
<span class="material-icons" aria-hidden="true">format_align_right</span>
</button>

Titulo de documento

Agregue un elemento <title> al <head> de su página. Asegúrese de que el título indique claramente de qué trata la página. Por ejemplo:

<!doctype html>
<html lang="en">
<head>
<title>20-week training schedule for your first marathon</title>
</head>
<body>
</body>
</html>

Recomendación: No ser ambiguo y ser descriptivo

Títulos de Marcos (Frames)

Identifica los elementos <frame> y <iframe> que no tienen títulos

Proporcione atributos de title únicos y descriptivos para todos los elementos frame e iframe.

Además, la mejor práctica es dar al documento adjunto un elemento de título con contenido idéntico al atributo de título. Por ejemplo:

<iframe title="My Daily Marathon Tracker" src="https://www.mydailymarathontracker.com/"></iframe>

id: image-alt | weight:10 | group: a11y-names-labels

Descripciones alternativoas para entradas de formulario

Proporcione un atributo alt para cada elemento <input type="image"> . Describa la acción que ocurre cuando el usuario hace clic en el botón en el texto alt:

<form>
<label>
Username:
<input type="text">
</label>
<input type="image" alt="Sign in" src="./sign-in-button.png">
</form>

Más información.

  • id: label | weight:10 | group: a11y-names-labels

  • id: link-name | weight:3 | group: a11y-names-labels

  • id: object-alt | weight:0 | group: a11y-names-labels

Tablas y listas

(a11y-tables-lists): Aquí tienes consejos para mejorar la lectura de datos en tablas o listas con tecnologías de asistencia como los lectores de pantalla.

  • id: definition-list | weight:0 | group:a11y-tables-lists

  • id: dlitem | weight:0 | group: a11y-tables-lists

  • id: layout-table | weight:0 | group :a11y-tables-lists

  • id: list | weight:3 | group: a11y-tables-lists

  • id: listitem | weight:3 | group: a11y-tables-lists

  • id: td-headers-attr | weight:0 | group: a11y-tables-lists

  • id: th-has-data-cells | weight:0 | group: a11y-tables-lists

Otras Pruebas:

  • id: logical-tab-order | weight:0

  • id: focusable-controls | weight:0

  • id: interactive-element-affordance | weight:0

  • id: managed-focus | weight:0

  • id: focus-traps | weight:0

  • id: custom-controls-labels | weight:0

  • id: custom-controls-roles | weight:0

  • id: visual-order-follows-dom | weight:0

  • id: offscreen-content-hidden | weight:0

  • id: heading-levels | weight:0

  • id: use-landmarks | weight:0

Consulta más información sobre cómo revisar la accesibilidad.