En un principio, al observar una página Web puede parecer que esta no presenta ningún problema de accesibilidad.

Veamos algún ejemplo en el que lo que en principio parece que es accesible no lo es, y cómo se puede convertir en accesible de una forma fácil, cambiando pequeñas características en el código.

  • Ejemplo 1: Web con imágenes sin texto alternativo.
     
    Imagen de web.

    Esta web un lector de pantallas para ciegos lo interpretaría de la siguiente forma:

    Imagen de web.

    Simplemente con añadir un texto alternativo en el código de la Web un lector lo interpretaría de la siguiente forma:

    Imagen de web.

    Para conseguir que una imagen sea accesible tan sólo tendríamos que cambiar el código en el que se incluye la imagen:

    <img src="./cielo1.jpg">

    Por el siguiente código:

    <img src="./cielo1.jpg" alt="Foto de manos entrelazadas con un fondo de un cielo azul.">
  • Ejemplo 2: Web en la que el color de fondo y de texto no se distinguen.

    A veces no se tienen en cuenta el necesario contraste que debe existir entre el fondo y el texto de una página Web.

    Imagen de web.

    Únicamente cambiando los colores de fondo y del texto se conseguirá una Web mucho más legible.

    Imagen de web.
  • Ejemplo 3: Web en la que no se indica el idioma utilizado.

    Aparentemente en las siguientes Webs no existe ningún problema de accesibilidad. Simplemente con pulsar sobre el enlace de cambio de idioma se puede acceder a la Web en español y en inglés.

    Imagen de web.
    Imagen de web.

    Sin embargo, si en el código no se indica el cambio de idioma un lector de pantalla no entenderá dicho cambio, quedando la web ilegible para los usuarios de este tipo de dispositivos.

    El idioma se indica de la siguiente forma:

    - Para español: lang="es"
    - Para inglés: lang="en"
    - Para francés: lang="fr"
  • Ejemplo 4: Tablas en una web

    La siguiente tabla aparentemente no muestra ningún problema de accesibilidad:

    Sin embargo un intérprete de pantalla lo interpretará de la siguiente forma:

    “Economía Ciencias Literatura 2 8 5 7 6 7 5 8 8”

    Únicamente con incluir el atributo “summary” en la tabla se puede describir su contenido para que no presente problemas de accesibilidad.

    Imagen de web.

    Ejemplo:

    <table summary ="Tabla en la que se relacionan categorías con un valor numérico. Economía tiene los valores 2,4 y 5. Ciencias tiene los valores 8, 6 y 8. Literatura tiene los valores 5, 7 y 8. ">