Discriminación 2.0 | Braintive

Discriminación 2.0

Muchas veces criticamos y nos asombramos de instituciones, hospitales, bancos o lugares de acceso público que no cuentan con rampas para discapacitados, pero es muy común que a la hora de desarrollar un sitio web terminemos haciendo lo mismo.

La accesibilidad en un sitio web se refiere a la capacidad del mismo para ser accedido por cualquier persona independientemente de sus limitaciones físicas (por ejemplo la discapacidad visual), también hace referencia no solo al acceso, sino también al uso, donde toca ya cuestiones de ‘usabilidad’.

Prácticamente nadie toma en cuenta esta premisa a la hora de desarrollar un sitio web y suponen que las personas detrás podrán acceder sin problemas al contenido, sin darse cuenta el potencial que tiene un sitio que puede ser accedido por cualquier persona, ya que los accesos en definitiva se traducen de alguna manera a un valor de retorno.

Por ejemplo, suponemos que una persona podría estar viendo un determinado botón de acceso al contenido, de un color, forma o tamaño pensado para  alentar al usuario a hacer click, cuando en realidad esta persona podría estar trabajando con el monitor apagado, ya que es una persona ciega. ¿Cómo puede ‘ver’ entonces el botón?,  son utilizados programas que leen el contenido y avisan al usuario donde pueden hacer click, el botón como figura no genera ningún valor, ya que no puede ser visto, el valor aquí lo genera el texto.

Las personas ciegas o con disminución considerable de la vista utilizan programas que leen el contenido de la página web y de esta forma pueden navegar sin problemas, se sorprenderían observar como ellos trabajan con el monitor apagado y pueden perfectamente ‘visualizar’ cualquier contenido. Un software utilizado para esto es el JAWS

En muchos países ya existe legislación que obliga a determinas páginas de organismos públicos o de algunas empresas a brindar contenido accesible en sus sitios web. El WAI (Web Accessibility Initiative) grupo perteneciente al W3C (The World Wide Web Consortium) también creó pautas para ayudar a desarrollar contenido accesible.

No es necesario sacrificar el diseño a la  hora de hacer un sitio web accesible, simplemente hay que seguir una serie de pautas para guiar el diseño de páginas web a un diseño accesible. Algunas ideas que implementamos en Braintive a la hora de desarrollar un sitio web, para no limitar el acceso de nadie al contenido:

  • Todas las páginas deben tener la etiqueta de cabecera TITLE, explicando lo que el usuario va a encontrar, por ejemplo: Página principal, Listado de productos.
  • Usar correctamente las etiquetas h1, h2, .. donde debe informar la importancia que tienen los títulos y textos dentro de la página.
  • No utilizar tablas para centrar textos o colocar secciones, las tablas deben ser utilizadas para grillas, el posicionamiento de texto se deben realizar por medio de estilos css.
  • Utilizar la etiqueta ABBR para brindar detalles sobre abreviaciones, por ejemplo si el texto dice cant. se debe informar que el texto correcto es ‘cantidad’.
  • Todas las imágenes deben tener el atributo ALT con el texto al que hace referencia la imagen, si el botón es una imagen que dice ‘Aceptar’, el atributo ALT debe tener el mismo texto. Si se requiere mayor detalle se debe utilizar el atributo LONGDESC
  • Los links deben tener el atributo TITLE informando la acción que genera el click, más allá del texto, por ejemplo si link dice ‘compras’, el atributo TITLE debería contener ‘Listado de mis compras mensuales’.
  • No utilizar palabras comunes para definir links, como ‘aquí’, utilizar frases más descriptivas dentro de los links.
  • Definir atajos de teclado en los links, atributo ACCESSKEY.
  • Si se utilizan FRAMES se debe colocar el titulo descriptivo en el atributo TITLE.
  • Los listados de selección o navegación deben ser colocados dentro de las etiquetas UL y LI, luego por medio de los estilos css se brinda un correcto diseño.
  • Dentro de los formularios se debe utilizar etiquetas standards que son interpretadas por todos los lectores web, que luego por estilos css se puede colocar el diseño acorde al sitio web. Estas son: LEGEND, FIELDSET, LABEL. Por ejemplo la etiqueta LABEL relaciona el texto con el elemento del formulario.
  • Tener en cuenta los colores que se asignarán a los botones, existen programas para evaluar como un daltónico los visualizará.
  • Dar la posibilidad de agrandar el texto de las letras, por default deben tener un tamaño correctamente legible.
  • Si se utiliza javascript, tener un plan B que funcione con javascript desactivado, ya que es posible que algunos lectores no lo soporten.
  • Evitar el uso de FLASH! aunque las versiones nuevas de flash y componentes que se agregan a la hora de desarrollar dicen poseer soporte de accesibilidad, existe la posibilidad de incompatibilidad en la lectura del flash por medio del navegador que utiliza el usuario que tienen inconvenientes de accesibilidad. El FLASH es un binario (plugin) que no tiene las etiquetas estándares de HTML por lo tanto imposibilita la lectura por medio de los programas utilizados por personas ciegas para interpretar el contenido web.

No hay que considerar pérdida de tiempo en implementar estas técnicas, es fundamental no limitar el acceso al contenido.


7 comentarios

  • Fede May 10, 2011

    Qué bueno saber que a la hora de estructurar sitios contemplo las mismas variables que Braintive®.
    De todas formas pensé que el texto iba a hablar sobre la programación APB (a prueba de boludos, los verdaderos discapacitados 2.0).

    Al margen, otra solución para este temita de la discapacidad podría ser que cada browser setee una variable:


    < ? if( isset($_SERVER['blind']) ) { header("location: blind.php"); } ?>

    O algo así, la idea se entiende.

    Respond
    • Fernando Finelli May 10, 2011

      Esta nota está orientada para ayudar a realizar de forma fácil un sitio web accesible, en donde no muchos lo acostumbran.

      Ahora, lo que vos decís de APB, si uno realiza un sistema en donde los usuarios no saben cómo utilizarlo o comenten sistemáticamente el mismo error, entonces es un problema de USABILIDAD, no siempre es la culpa del usuario!. Esto se analiza con muchas herramientas (más adelante vamos a incorporar una nota sobre este tema) en donde te ayudan a detectar esas cosas y mejorarlas.

      Respond
      • Fede May 10, 2011

        Espero ansioso.

        Respond
  • Nicolas Trillo May 10, 2011

    Uno como programador tiene que tomar esta practica, como ser prolijo en el código.

    Y el flash es todo un tema, hacer entender a los usuarios de no usarlo aunque quede “lindo”. Por suerte ahora con jquery se puede simular bastante bien.

    Muy buena nota.

    Respond
    • Fernando Finelli May 10, 2011

      Además flash no solo afecta la accesibilidad, sino el posicionamiento en buscadores, ya que no es sencillo de indexar.

      Respond
  • Naccio May 10, 2011

    Es una buena lectura para que tanto los diseñadores como los desarrolladores tomen coraje y empiecen a pensar un poco más en este tipo de situaciones. Con la práctica irán notando que no les suma más horas de trabajo y están haciéndole un favor enorme a la gente discapacitada. Inclusive hay herramientas por doquier (ej. http://www.w3.org/WAI/ER/tools/complete) que complementan al 100% la labor de hacer una web más accesible.
    Importante: SIEMPRE usen JavaScript no intrusivo, con eso ayudarán a que las personas que no lo tienen habilitado puedan utilizar la web sin problemas.
    Por otro lado cabe aclarar que el consejo de usar ACCESSKEY no siempre es bueno ya que hay Screen Readers que pueden estar usando el mismo shortcut y entran en conflicto.

    Respond
  • […] A continuación adjunto la publicación de Fernando Finelli en el Blog Braintive.com […]

    Respond

Escribir respuesta


8 + = 16

© 2014 Braintive S.A. Todos los derechos reservados.
Seguir

Recibe cada nueva entrada en tu correo electrónico

Unete a otros seguidores: