Scribd Logo
Carica

Benvenuto in Scribd!

  • Accesibilidad y HTML - Codecademy

    Caricato da

    A Liz Marjorie T. Tineo
    15 visualizzazioni3 pagine
    Accesibilidad y HTML _ Codecademy

    Titolo originale

    Accesibilidad y HTML _ Codecademy

    Copyright

    © © All Rights Reserved

    Formati disponibili

    PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento
    Accesibilidad y HTML _ Codecademy

    Copyright:

    © All Rights Reserved
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    15 visualizzazioni3 pagine

    Accesibilidad y HTML - Codecademy

    Caricato da

    A Liz Marjorie T. Tineo
    Accesibilidad y HTML _ Codecademy

    Copyright:

    © All Rights Reserved
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 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í.

    Potrebbero piacerti anche