Lista de verificación de accesibilidad web

La accesibilidad es la práctica de garantizar que los sitios web estén igualmente disponibles para las personas con discapacidad, de modo que tengan el mismo acceso a los bienes y servicios que proporcionan esos sitios. Es una parte integral del diseño y desarrollo web profesional..


Contents

¿Por qué debería preocuparte? Accesibilidad?

Hay muchas razones por las cuales los desarrolladores, diseñadores y sus empleadores / clientes deben garantizar que la accesibilidad sea una parte temprana e integral del proceso de desarrollo web.

  • En muchos territorios, como los EE. UU., La UE, el Reino Unido, Israel y Japón, es un requisito legal no discriminar a las personas debido a su discapacidad. En los Estados Unidos el año pasado, Se presentaron 2.235 nuevas demandas de ADA en el sitio web en la corte federal. Eso es uno por hora.
  • Los sitios accesibles tienden a estar mejor codificados, son más robustos y se clasifican bien en los motores de búsqueda..
  • Los sitios accesibles tienden a ser más utilizable para visitantes no discapacitados, conduciendo a una mayor satisfacción y conversión.
  • Los sitios inaccesibles son malos para los negocios. En 2019, un Encuesta del Reino Unido descubrieron que más de 4 millones de personas abandonaron un sitio web minorista debido a las barreras de accesibilidad que encontraron. Ese negocio perdido, la “libra de clic”, fue de £ 17.1 mil millones. Eso es mil millones. Solo en el Reino Unido.
  • Es un mal negocio rechazar voluntariamente a clientes potenciales.

Las normas comunes y los problemas

Afortunadamente, el W3C (el organismo que produce muchos de los estándares en los que se basa la web) tiene un estándar sobre cómo hacer que los sitios web sean accesibles. Se llama Pautas de accesibilidad al contenido web (WCAG) Hay tres niveles de conformidad (A, AA, AAA) con “A” como el nivel más bajo de accesibilidad. Te recomiendo que apuntes al nivel AA.

Desafortunadamente, WCAG es una lectura larga, seca y muy técnica, así que echemos un vistazo a lo que puede hacer con relativa facilidad y obtenga el mayor rendimiento de su inversión. Esta no es una lista de verificación Todo lo que necesita saber; es una lista de verificación de los errores más comunes, y los errores que las personas con discapacidad dicen que son sus principales bloqueadores, con sugerencias prácticas para resolver los problemas. Todos los enlaces externos se abren en una pestaña nueva.

En la encuesta Click-Away Pound, se preguntó a los encuestados con discapacidades cuáles eran los principales obstáculos para completar las compras. Estas son las principales barreras (se permitieron múltiples respuestas):

  1. Páginas abarrotadas con demasiado contenido: 66%
  2. Pruebas reCAPTCHA: 59%
  3. Mala legibilidad (contraste, diseño de texto) 56%
  4. La distracción de imágenes en movimiento y gráficos: 53%
  5. Información de enlace deficiente: 59% (77% para usuarios de lectores de pantalla)
  6. Formulario de llenado 56%

Cómo mejorar la accesibilidad del sitio web

En primer lugar, tenga en cuenta que ninguno de los 5 principales son problemas técnicos: son errores de diseño o redacción.

1) Demasiado contenido

En resumen: divida el texto en secciones con encabezados y listas con viñetas. Usa lenguaje simple.

Es bien sabido que a medida que aumenta el número de opciones, también lo hace el esfuerzo requerido para recopilar información y toma buenas decisiones. Es lo mismo con demasiado contenido: pronto se vuelve abrumador. Reducir el contenido a lo esencial es una tarea que requiere mucho tiempo; como Mark Twain (supuestamente) escribió: “No tuve tiempo para escribir una carta corta, así que escribí una larga”.

El libro reciente Escribir es diseñar sugiere

Las personas desean poder leer largos bloques de texto, independientemente de la vista o el audio, por lo que es extremadamente importante estructurar su escritura de formato largo con encabezados, párrafos cortos y otras mejores prácticas de diseño de contenido..

Entonces:

  • Tener solo uno

    en una página.

  • Utilice subtítulos libremente; divide una “losa” de texto para usuarios videntes, mientras que los usuarios de tecnologías de asistencia, como lectores de pantalla, pueden usar una tecla de acceso directo para saltar entre encabezados u obtener un mapa mental del contenido de la estructura del encabezado.
  • No omita un nivel de encabezados. Por ejemplo, si usa un

    , asegúrese de que esté precedido por un

    .

  • Utilice listas con viñetas (¡como esta!) Marcadas correctamente en HTML como
      ,

    • . Los lectores de pantalla anunciarán “Lista de 10 elementos” (y permitirán al usuario saltar sobre ellos).

    Use inglés simple

    Monzo Bank’s Guía “Nuestro tono de voz” explica la importancia del lenguaje sencillo:

    En 2010, el fiscal estadounidense Sean Flammer realizó un experimento. Pidió a 800 jueces de circuito que se pusieran del lado de un argumento tradicional de “legalidad” o uno en lo que llamó “inglés simple”..

    Los jueces prefirieron abrumadoramente la versión simple en inglés (66% a 34%), y esa preferencia se mantuvo sin importar su edad o antecedentes..

    Notas de Flammer (PDF) de la versión sencilla en inglés:

    Es más corto en casi una página, por lo que obviamente elimina oraciones y palabras innecesarias. Sus oraciones promedian 17.8 palabras, en lugar de 25.2 palabras.

    Él concluye:

    Ahora tenemos 25 años de investigación empírica que conducen a una conclusión ineludible: si desea complacer y persuadir a su lector, escriba en inglés sencillo.

    2) ReCAPTCHA

    En resumen: no haga que sus usuarios salten a través de aros potencialmente imposibles para ahorrar tiempo al desarrollador.

    Los encuestados a menudo hablaban de un viejo Versión ReCAPTCHA:

    versiones de reCAPTCHA con texto tambaleante que debe volver a escribir

    Lucho con las imágenes y tener que escribir los números o letras. En el tipo en el que tengo que hacer clic en las imágenes que tienen una tienda o lo que sea, siempre extraño algunas o me confundo y uso la energía que no tengo …

    El estilo de letras tambaleantes de reCAPTCHA ahora está en desuso. Es mucho más común ver una nueva encarnación llamada “No CAPTCHA reCAPTCHA” (también conocida como “No soy un robot “Casilla de verificación) que requiere que el usuario marque una casilla que confirma que no es un robot y que utiliza vudú secreto para calificar al usuario. Si pasan, no se requiere más interacción. Sin embargo, si fallan, se mostrará un desafío adicional:

    Captura de pantalla parcial de un captcha que exige que el usuario haga clic en todos los cuadrados que muestran naranjas

    Tenga en cuenta que el tipo de CAPTCHA que requiere que un usuario haga clic en todos los cuadrados con (digamos) un cartel de la calle no es necesariamente internacional. Como escribe Terence Eden, Los CAPTCHA no prueban que eres humano, sino que demuestran que eres estadounidense.

    La forma más accesible de reCAPTCHA es reCAPTCHA v3 que no requiere interacción del usuario, pero necesita que haga más trabajo para lidiar con las visitas que no pasan la prueba:

    Es una API de JavaScript pura que devuelve un puntaje, lo que le brinda la capacidad de tomar medidas en el contexto de su sitio: por ejemplo, requiere factores adicionales de autenticación, enviar una publicación a moderación o limitar los bots que pueden estar raspando contenido.

    3) Legibilidad pobre

    En resumen: asegúrese de que el texto tenga el contraste adecuado, sea legible y no esté justificado.

    • Garantizar un contraste adecuado. Uno de los bloqueadores de acceso más comunes en la web es el pobre contraste entre el texto y el fondo. Las pautas del W3C requieren una relación de contraste de al menos 4.5: 1, excepto para el texto a gran escala y las imágenes de texto a gran escala que deben tener una relación de contraste de al menos 3: 1 (los logotipos y el texto “incidental” están exentos). Hay muchas utilidades que pueden medir las relaciones de contraste para usted; mi favorito personal es el excelente Ada Rose Cannon widget de contraste, que es un marcador de navegador útil que resalta áreas de contraste insuficiente en su página.
    • No tener títulos de capital. Hay evidencia de que son más difíciles de leer porque las letras mayúsculas tienen la misma altura, por lo que no podemos reconocer la forma de las palabras comunes. Además, algunos lectores de pantalla deletrearán grupos de letras mayúsculas como si fueran abreviaturas (como BBC, DOJ, etc.). Si debe tener todos los titulares en mayúscula, escríbalos en un caso normal en su HTML y transfórmelos con CSS transformación de texto: mayúscula.
    • Texto alineado a la izquierda. (Para páginas en idiomas de derecha a izquierda como el árabe o el hebreo, alinee el texto a la derecha). No lo justifique, ya que esto dificulta la lectura de las personas con dislexia. los Guía de estilo de la Asociación Británica de Dislexia también sugiere

      Utilice fuentes sans serif, como Arial y Comic Sans, ya que las letras pueden aparecer menos abarrotadas. Las alternativas incluyen Verdana, Tahoma, Century Gothic, Trebuchet, Calibri, Open Sans.

    4) Distracción de imágenes y gráficos

    En resumen: permita a los usuarios detener cualquier movimiento; respetar la configuración de su sistema operativo; no reproducir automáticamente el video.

    Un encuestado de la encuesta sobre la libra Click-Away escribió,

    Los sitios que solía usar con pocos problemas ahora se están convirtiendo en un problema, ya que ahora están adoptando anuncios móviles y cargando constantemente más anuncios a medida que compra.

    El nivel más básico de WCAG requiere “Para cualquier información en movimiento, parpadeo o desplazamiento que (1) se inicie automáticamente, (2) dure más de cinco segundos y (3) se presente en paralelo con otro contenido, existe un mecanismo para el usuario para pausarlo, detenerlo u ocultarlo a menos que el movimiento, el parpadeo o el desplazamiento sea parte de una actividad donde sea esencial “.

    La distracción es una molestia, especialmente para las personas con TDAH u otras discapacidades cognitivas. Pero el movimiento y el parpadeo también pueden causar convulsiones, por lo que las pautas de WCAG requieren que el contenido no parpadee más de 3 veces en un período de 1 segundo.

    Respetar la elección del usuario para las animaciones

    Todos los sistemas operativos principales permiten al usuario expresar una preferencia por el movimiento reducido en la pantalla, tal vez porque tienen un trastorno del espectro vestibular desencadenado por el movimiento. Su sitio web puede detectar si el usuario ha hecho esto con el CSS prefiere movimiento reducido consulta de medios.

    Aquí, solo permitimos animar un botón si el usuario no ha expresado preferencia:

    @media (prefiere movimiento reducido: sin preferencia) {
    botón {
    / * los fotogramas clave `vibrar` se definen en otra parte * /
    animación: vibrar 0.3s lineal infinito ambos;
    }
    }

    Si está buscando actualizar un sitio que tiene muchas reglas de animación, lo siguiente puede detener todas las animaciones CSS previamente declaradas:

    @media (prefiere-reduce-movimiento: reducir) {
    * *,
    *::antes de,
    *::después {
    duración de la animación: 0.001s! importante;
    duración de transición: 0.001s! importante;
    }
    }

    En el tema de respetar las preferencias del sistema operativo del usuario, es posible que desee considerar diseñando su sitio web para el modo oscuro.

    5) Información de enlace deficiente

    En resumen: haga que los enlaces sean identificables, con un texto de enlace único. Advertir a los usuarios si un enlace abrirá una nueva pestaña o un archivo.

    Una de las principales causas de los enlaces deficientes es la mala redacción. La mayoría de los lectores de pantalla permiten al usuario ver rápidamente una lista de enlaces en una página (en el lector de pantalla comercial más utilizado, JAWS, el método abreviado de teclado es Ins + F7; en el lector de pantalla NVDA gratis, el mismo método abreviado de teclado muestra una lista de elementos que enumera enlaces de página, encabezados y puntos de referencia).

    Sin embargo, si cada enlace tiene un texto que dice “Haga clic aquí” o “Leer más”, sin nada más para distinguirlos, esto es inútil. La forma más fácil de resolver esto es simplemente escribir un texto de enlace único, pero si eso no es posible, puede anular el texto del enlace para la tecnología de asistencia mediante el uso de un atributo de etiqueta aria único en cada enlace.

    Aquí hay un buen ejemplo del Sitio web de Joomla:

    Sitio web de Joomla, que muestra dos historias diferentes, cada una con idénticas

    El texto del enlace visible es simplemente “leer más”, pero Joomla usa etiqueta aria atributos para hacer que cada tecnología de asistencia sea única:

    Lee mas
    
    Lee mas

    Por el etiqueta aria las tecnologías de asistencia utilizarán el texto en lugar del texto del enlace, el W3C recomienda comenzar el texto utilizado en la etiqueta aria con el texto utilizado dentro del enlace como “esto permitirá una comunicación coherente entre los usuarios”.

    Nota: Un mal consejo que todavía veo en sitios antiguos es agregar texto explicativo en los enlaces que usan título atributo:

    Leer más>

    No hagas esto. los el título no está expuesto a la mayoría de los lectores de pantalla (los desarrolladores solían rellenarlo con palabras clave para fines de “SEO”, por lo que los proveedores de lectores de pantalla lo deshabilitaron de forma predeterminada), y los navegadores presentan atributos de título como “información sobre herramientas” que solo están disponibles para los usuarios del mouse al pasar el mouse por encima.

    Los enlaces deben verse como enlaces

    Por defecto, los navegadores subrayan los enlaces. Es mejor no cambiar esto, pero si pierde una pelea en el estacionamiento con el diseñador sobre esto, el texto del enlace debe tener una relación de contraste de 3: 1 del texto que no lo rodea y debe dar un poco de designación sin color “Que son un enlace cuando se ciernen o se centran, por ejemplo:

    a: hover, a: focus {text-decoration: underline;}

    El estilo de enfoque hace que el enlace quede subrayado cuando un usuario que no usa el mouse se enfoca en él desde el teclado, el lápiz o la entrada de voz. En general, cuando algo en una página tiene un estilo de desplazamiento, también se le debe dar un estilo de enfoque.

    El “designador sin color” (en nuestro caso, un subrayado) garantiza que los visitantes con baja visión o daltonismo verán el cambio al desplazarse o enfocarse. (Los lectores de pantalla anuncian automáticamente “Enlace” antes del texto del enlace).

    Informar a las personas si el enlace abre una nueva pestaña / página

    Puede ser confuso para un visitante si la activación de un enlace abre una nueva pestaña o una nueva ventana, particularmente si solo algunos enlaces en una página hacen esto (por ejemplo, solo los enlaces externos abren una nueva pestaña). Si debe hacer esto, debe alertar al usuario ya sea en el texto del enlace o utilizando el método de etiqueta aria anterior.

    Informar a las personas si el enlace es a un archivo

    Si un enlace es a un archivo (por ejemplo, un PDF o un video), informe al usuario en el texto del enlace. No lo escondas en etiqueta aria, ya que esto puede ser útil para muchos usuarios videntes (algunos móviles no pueden abrir un archivo .docx, por ejemplo). Si es un archivo grande, considere alertar al usuario del tamaño aproximado; Es posible que no deseen descargar un archivo de video grande a través de 3G.

    También puedes usar el descargar atributo, que hace que el navegador abra el diálogo de descarga de archivos nativos del sistema operativo. Al poner todo esto junto, el código se verá así:

    Informe anual (PDF, 240 MB)

    6) Otro error de diseño: quitar el anillo de enfoque

    En resumen: asegúrese de que un usuario del teclado siempre pueda ver dónde está enfocado actualmente.

    Hemos mencionado :atención estilos antes. Son un indicador visual invaluable para aquellas personas que no pueden usar un mouse por cualquier razón: tal vez tienen RSI, Parkinson o esclerosis múltiple. Por defecto, los navegadores muestran un anillo de enfoque en el elemento actualmente enfocado. Aquí está el enlace de Inicio en mi sitio personal, enfocado en un navegador Chromium:

    Captura de pantalla del anillo de enfoque predeterminado de Chromium alrededor de un enlace (que también es una imagen)

    Sin embargo, algunas personas consideran que esto es desagradable estéticamente cuando usan un mouse y lo apagan con CSS, dejando así el sitio inaccesible para los usuarios del teclado..

    Ingrese un nuevo estándar, promovido por Firefox, llamado : foco-visible. Esto aplicará un anillo de enfoque a un elemento si ha sido alcanzado por un teclado o un dispositivo señalador sin mouse pero no muestra nada a los usuarios del mouse. Como solo es compatible con Firefox (en el momento de la redacción), Patrick Lauke sugiere el siguiente CSS para jugar bien con todos los navegadores:

    button: focus {/ * algunos estilos emocionantes de focus button * /}
    botón: foco: no (: foco-visible) {
    / * deshacer todos los estilos de botones enfocados arriba
    si el botón tiene el foco pero el navegador no lo haría normalmente
    mostrar estilos de enfoque predeterminados * /
    }
    button: focus-visible {/ * some even * more * emocionantes estilos de enfoque de botones * /}

    7) Llenado de formularios

    En resumen: diseñe campos de formulario que se vean como campos de formulario, cada uno asociado con una etiqueta. No desactive el autocompletado.

    Dada la importancia vital de los formularios para los sitios de comercio electrónico, me sorprende la cantidad de formularios inaccesibles que veo. A menudo, esto se debe a que los navegadores antiguos no permitían mucho en el diseño de elementos de formulario, por lo que los desarrolladores los falsificaron con otros elementos HTML. Los navegadores modernos permiten casillas de verificación atractivas, botones de radio, componentes personalizados seleccionados y cuadros combinados, controles de autocompletado accesibles y más.

    Autocompletar es tu amigo

    Permitir que los navegadores completen formularios automáticamente requiere que los visitantes hagan menos, por lo que es más probable que completen un formulario y se registren / compren su producto. Autocompletar en navegadores: una inmersión profunda es un gran artículo de eBay sobre esto (y deberían saberlo).

    Además, el autocompletado es la única técnica suficiente actualmente para lograr el cumplimiento de AA con Criterio de éxito 1.3.5: Identificar el propósito de entrada.

    Hacer que los campos de formulario se vean como campos de formulario

    Por defecto, los navegadores muestran campos de entrada de formulario como cuadros. Por supuesto, dale estilo con márgenes, relleno y bordes, pero mantenlos como cuadros. Muchos diseñadores siguieron el patrón de diseño de materiales anterior a 2017 de Google de usar una sola línea para que el usuario ingrese texto:

    Entrada de diseño de material antiguo, con línea horizontal en lugar de caja rectangular

    Sin embargo, Google descubrió que la línea debajo de los campos de texto antiguos no estaba clara para algunos usuarios, a menudo confundidos con un divisor, y cambió el diseño. en un prueba de usabilidad con 600 participantes, descubrieron que

    los campos de texto encerrados con una forma rectangular (recuadro) se desempeñaron mejor que aquellos con una línea permitida … Hoy, estos nuevos campos de texto aparecen en los productos de Google desde las páginas de inicio de sesión de la cuenta hasta los formularios de Google.

    Si está considerando adoptar la biblioteca de interfaz de usuario de diseño de materiales completa de Google, lea Dejar de usar campos de texto de Diseño de materiales! por Matsuko Friedland para ver si satisface tus necesidades.

    Etiquetar todos los campos del formulario

    Todos los campos de formulario (entradas de texto, casillas de verificación, botones de opción, controles deslizantes, etc.) deben etiquetarse. La mejor manera de hacer esto es usar un HTML ; como dice WCAG, “los controles HTML estándar ya cumplen con este criterio de éxito cuando se usan de acuerdo con las especificaciones”.

    Aquí hay una demostración que hice de un campo de formulario no marcado versus un campo de formulario etiquetado. Se ven idénticos, pero el de arriba no tiene una etiqueta adecuada, mientras que el segundo sí. Haga clic en la etiqueta de texto de la parte inferior y verá que se centra en la entrada asociada.

    comparación de etiquetas falsas vs reales

    Esto hace que enfocar una entrada sea mucho más fácil para alguien con dificultades de control del motor, o tal vez para usted, al intentar marcar una pequeña casilla de verificación en una pantalla pequeña en un tren lleno de baches. También es vital para los usuarios de lectores de pantalla que tabularán los campos en un formulario (de forma predeterminada, solo los enlaces y los campos de formulario se pueden enfocar tabulando); cuando ingresan en un campo de entrada, el lector de pantalla anunciará el contenido de la etiqueta asociada.

    El código para esto es simple. El campo de entrada recibe una ID única, y la etiqueta se asocia a él utilizando para atributo:

    
    

    Ocultar etiquetas

    Ocasionalmente, es posible que no desee una etiqueta visible. O el diseñador no, y no quieres otra pelea en el estacionamiento. De todos modos, aquí hay un ejemplo cuando una etiqueta que dice “Buscar” antes de la entrada se siente como exagerada.

    Campo de entrada, con el botón

    Podemos asociar el campo de entrada con el texto “Buscar”, que es el contenido del botón enviar usando aria-labelledby:

    
    

    Podríamos haber usado etiqueta aria (que conocimos antes cuando hablamos de enlaces):


    Pero siempre es mejor preferir el texto visible en una página porque se traducirá si la página se ejecuta a través de una herramienta de traducción, mientras que el texto “oculto” en los atributos HTML no lo será. (Punta de sombrero para Adrian Roselli por este consejo, de su espléndido artículo Mi prioridad de métodos para etiquetar un control.)

    Errores más comunes en Top Million Home Pages

    Hemos examinado las principales barreras para los sitios de comercio electrónico según lo informado por los usuarios con algún tipo de discapacidad. Ahora veamos un conjunto de sitios mucho más amplio: las páginas de inicio de los principales 1,000,000 de sitios web, analizado automáticamente por WebAIM en agosto de 2019. El 98% de las páginas analizadas tenían al menos un error. Los errores más comunes son

    1. Texto de bajo contraste (86.1%)
    2. Falta texto alternativo para imágenes (67.9%)
    3. Enlaces vacíos (58.9%)
    4. Faltan etiquetas de entrada de formulario (53.2%)
    5. Falta el idioma del documento (30.5%)

    Hemos tratado con bajo contraste, enlaces y entradas de formulario arriba. Ahora veamos cómo podemos evitar los otros errores muy comunes.

    8) Proporcione alternativas de texto para todas las imágenes, video y audio

    En resumen: cualquier información comunicada a través de una imagen o video debe tener un equivalente textual.

    Cada debe tener un texto alternativo (“texto alternativo”) que se pueda comunicar a los visitantes con discapacidad visual o aquellos con planes de datos de bajo ancho de banda / costosos que han desactivado las imágenes en sus navegadores. Esto incluye imágenes de texto..

    Aquí están las reglas básicas:

    • Si la imagen es puramente decorativa, debe tener texto alternativo vacío: alt = "". (Pero las imágenes puramente decorativas probablemente deberían estar en CSS, de todos modos).
    • Si una imagen se describe en el texto del cuerpo, debe tener un texto alternativo vacío (alt = ""), para evitar la repetición. Pero ten cuidado si es un en un
      – ver Como te imaginas? para más.
    • Si una imagen es el único contenido de un enlace (por ejemplo, se puede hacer clic en el logotipo de su organización para ir a la página de inicio), el texto alternativo debe describir el destino del enlace. Por ejemplo, alt = "página de inicio".
    • No utilices fuentes de íconos; pueden ser realmente malos para las personas disléxicas. Si los usas, convertirlos a SVG.

    Texto alternativo de video y audio

    No olvide que el contenido de audio necesita texto alternativo para personas con discapacidad auditiva. Eso significa transcripciones de podcasts y subtítulos en videos. Y, de nuevo: no reproducir automáticamente los medios.

    9) Agregar lenguaje de documento adecuado

    En resumen: informe a la tecnología de asistencia el idioma en el que se encuentra su texto.

    El 30% de las páginas de inicio no declaran el idioma en el que están escritas, lo que puede hacerlas confusas para los usuarios de lectores de pantalla. Esto es importante porque la palabra “seis” se pronuncia de manera muy diferente si la oración está en inglés o francés, por ejemplo.

    Es fácil resolver esto agregando un atributo lang a su elemento HTML:

    La “en” le dice a un lector de pantalla (o software de traducción) que esta página está en inglés. “Es” es español, “fr” es francés, y así sucesivamente. Para la mayoría de los idiomas, la etiqueta de idioma es bastante fácil de determinar. El W3C tiene una guía para Elegir una etiqueta de idioma.

    Si la página contiene contenido en un idioma diferente al principal declarado, agregue un atributo de idioma a un elemento que rodea ese contenido. Por ejemplo, en una página declarada en inglés:

    Si desea chatear un matador, en algo genial cabaña
    Y conocer señoritas a granel, Espana por favor

    10) Ayude a un visitante a moverse por su contenido

    En resumen: use elementos de referencia HTML para ayudar a los usuarios de tecnología de asistencia a comprender y navegar por su contenido.

    Cuando un visitante vidente llega a su página, puede escanearla visualmente para comprender dónde se encuentra la navegación y dónde comienza el contenido principal. Un usuario lector de pantalla no puede hacer esto. Sin embargo, HTML5 nos da algunas etiquetas nuevas para marcar estas áreas, y las tecnologías de asistencia tienen accesos directos que pueden saltar (o saltar) puntos de referencia como encabezamiento, pie de página, navegación y similares.

    Aquí hay un video de seis minutos que hice con Léonie Watson, una desarrolladora web y usuaria de lector de pantalla, sobre cómo usa su lector de pantalla para examinar estas semánticas para navegar por mi sitio personal:

    • Envuelva su contenido principal, es decir, cosas que no sean encabezado, navegación principal o pie de página, en un
      elemento. En casi todos los casos, solo debería haber uno
      por página. Todos los navegadores (IE9 +) le permiten diseñarlo, y las tecnologías de asistencia saben qué hacer con él..
    • Envuelva su encabezado (logotipo de la marca, correa, el encabezado de la página) en un
      elemento.
    • Envuelva su pie de página (material legal, datos de contacto, aviso de copyright, etc.) en un
    • Marque su navegación principal usando
        envuelto en un elemento. Esto se puede anidar dentro del

        si eso se ajusta al diseño visual de la página.
      • La publicidad y el contenido no esencial deben estar envueltos en un
      • Si tiene más de un producto / video / noticia / publicación de blog en una página, envuelva cada uno de ellos en un
        elemento.

      En su encuesta de usuarios de lectores de pantalla, WebAIM descubrió que el 26% de los usuarios de lectores de pantalla usan con frecuencia o siempre estos puntos de referencia cuando navegan por una página.

      Además, envolviendo piezas discretas de contenido en

      ayuda a WatchOS de Apple a mostrar contenido de manera óptima. Ver mi articulo El valor práctico del HTML semántico para más sobre esto.

      11) Use HTML correctamente

      En resumen: comprenda la semántica y los comportamientos predeterminados de los elementos HTML; usa el elemento correcto para tu contenido.

      Un tema común en este artículo ha sido usar los elementos HTML correctos. Usando un etiqueta tiene un comportamiento de navegador incorporado que enfoca su campo de entrada asociado; utilizando

      es preferible a

      porque permite que los usuarios de lectores de pantalla salten directamente al contenido importante sin ser del todo discretos para aquellos que no usan un lector de pantalla.

      Otro ejemplo es usar un