Está en la página 1de 3

Accesibilidad y HTML

Muchos usuarios con discapacidad visual navegar por Internet con el


usuario de un lector de pantalla. En este artículo, usted aprenderá acerca
de diferentes maneras de hacer que su contenido sea accesible a los
usuarios con discapacidad visual o ciegos.

Accesibilidad y HTML

requisitos:

Completado aprender HTML y CSS Unidad 2 Lección 2

Introducción
texto alternativo
etiquetas especiales
AIRE

INTRODUCCIÓN
En el diseño y creación de páginas web, es importante que las páginas
web sean accesibles a todos los públicos.  En particular, debido a la
naturaleza visual y dinámica de las páginas web que se le toma, es
importante asegurarse de que su sitio web también tendrá sentido para
los usuarios con discapacidad visual o ciegos.

Muchas personas con discapacidad visual o ciegos usuarios acceso a las


páginas web con la ayuda de los lectores de pantalla . Los lectores de
pantalla analizar a través del HTML de su página web y lee el contenido
en voz alta, en respuesta a los comandos para navegar por toda la
página, y tomar acciones tales como hacer clic en un enlace, escribir en
un campo de entrada, o enviar un formulario. En este recurso, vamos a
dar una visión general de algunas de las formas en que puede mejorar la
accesibilidad de su página web y ayudar a los lectores de pantalla mejor
interpretan!

TEXTO ALTERNATIVO
Una forma de hacer que los elementos de su página sea más
comprensible para los lectores de pantalla es proporcionar  alt texto
para las imágenes. Alt o alternativa, el texto se ofrece como un atributo a
la  <img> etiqueta para describir la imagen que el lector de pantalla. Por
ejemplo, cuando se encuentra con el siguiente ...

<!DOCTYPE html>
<html>
  <head>
    <title>My First Web Page!</title>
  </head>
  <body>
<img src="https://en.wikipedia.org/wiki/File:Brown_bear.jpg" alt="A brown bear"/>
  </body>
</html>
... el lector de pantalla será capaz de leer en voz alta la descripción de la
imagen ﴾ "Un oso pardo"﴿ para el usuario, en lugar de simplemente
informar al usuario de que existe una imagen en la página. Asegúrese de
proporcionar breves  alt descripciones de texto para cada imagen en su
página web!

ETIQUETAS SEMÁNTICAS
Al pensar en el estilo del texto en una página web, usted puede haber
notado cierta superposición entre los siguientes pares de etiquetas:

<b>  vs.  <strong>  


<i>  vs.  <em>

Si alguna vez intentar cambiar una de las etiquetas en un par para el otro,
lo más probable es ver que hay poco o ningún cambio en el aspecto de
la página.  Tanto el  <b> y el  <strong> texto de las etiquetas Bolden, y
el  <i> y el  <em> texto en cursiva.  Sin embargo, hay una diferencia
fundamental entre cada una de las etiquetas en un par cuando se trata de
la accesibilidad!

Las  <b> y  <i> los elementos simplemente denotan cómo el texto


debe buscar : texto dentro de estas etiquetas debe aparecer como negrita
o cursiva, respectivamente.

<strong> y  <em> , sin embargo, denota cómo el texto debe


serentendido y, a pesar de que dan lugar a la misma apariencia visual, que
afectan al modo en el lector de pantalla que interpreta: texto dentro de
estas etiquetas se leen con una voz diferente para indicar el énfasis para
cada uno. Estas etiquetas se conocen como etiquetas semánticas .

Así que, aunque  <strong> y  <em> que el texto sea visualmente similar
como  <b> y  <i> , que proporcionan una forma para que los lectores de
pantalla para comunicarse las partes del texto que ya se destacan
visualmente al usuario.

AIRE
ARIA, también conocida como WAI‐ARIA,
significa Accessible Rich Internet Applications .  ARIA define una
variedad de  markup extensions , por lo general los atributos de HTML
5, que se pueden añadir a los elementos para dar a los lectores de
pantalla más información sobre el elemento y ayudar a los usuarios con
discapacidad visual mejor comprensión de lo que está sucediendo en la
página web.

Por ejemplo, un atributo ARIA útil es el  role atributo. Cuando se añade


a un elemento, esto proporcionará el lector de pantalla con el contexto
adicional acerca de lo que la función de ese elemento se encuentra en el
contexto de una página. Por ejemplo, el siguiente código HTML es fácil de
entender por un ser humano a ser un menú:

<nav>
 <ul>
   <li>Put navigation here</li>
 </ul>
</nav>
Para un lector de pantalla, sin embargo, no es tan simple. Para remediar
esto, podemos añadir el  role atributo con el valor navigation :

<nav role="navigation">
 <ul>
   <li>Put navigation here</li>
 </ul>
</nav>
Ahora, el lector de pantalla sabrá que se trata de un menú y presentar las
opciones al usuario en consecuencia.

Hay muchas otras funciones para los atributos ARIA, como indica al
usuario el estado de formularios y casillas de verificación, e incluso llamar
su atención sobre un elemento de la página que acaba de ser cambiado
por JavaScript. No vamos a cubrir todo lo relacionado con ARIA en este
artículo, pero no dude en revisar la especificación aquí.

También podría gustarte