• Nosotros
    • Lo que hacemos
    • ¿Por qué Braintive?
    • UCS 2.0
    • Blog
    • Contacto
← Los buscadores D.G. (Después de Google)
Caso de éxito: Numeral8 →

Discriminación 2.0

Publicado el 10 de mayo, 2011 por Fernando Finelli

Hombre en sillas de ruedas accediendo edificio

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.


      Dejar un comentario o suscribirte al feed.
  • Imprimir
  • Correo electrónico

Acerca de Fernando Finelli

Fernando es un profesional y fanático de la tecnología, con más de 15 años de carrera en IT, basó la misma en el desarrollo de aplicaciones sobre Internet. Lideró proyectos tecnológicos en empresas que marcaron el rumbo de internet en Latinoamérica, pasando por famosos portales de internet como ElSitio.com donde conoció a Alfredo y también sitios líderes de Ecommerce de Argentina. Toda su experiencia, compromiso y fanatismo por la tecnología ha decidido volcarla al emprender junto a Alfredo en Braintive.
Ver todas las entradas de Fernando Finelli →
Esta entrada fue publicada en Diseño web, Programación y etiquetada como accesibilidad. Guarda el enlace permanente.
← Los buscadores D.G. (Después de Google)
Caso de éxito: Numeral8 →

7 respuestas a Discriminación 2.0

  1. Fede dice:
    10 de mayo, 2011 a las 11:28

    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.

    Responder
    • Fernando Finelli dice:
      10 de mayo, 2011 a las 11:54

      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.

      Responder
      • Fede dice:
        10 de mayo, 2011 a las 14:06

        Espero ansioso.

        Responder
  2. Nicolas Trillo dice:
    10 de mayo, 2011 a las 11:34

    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.

    Responder
    • Fernando Finelli dice:
      10 de mayo, 2011 a las 11:55

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

      Responder
  3. Naccio dice:
    10 de mayo, 2011 a las 21:08

    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.

    Responder
  4. Pingback: Discriminación en la Web | Sigo Andando

Deja un comentario Cancelar respuesta

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

*

*


ocho − = 6

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Notificarme los nuevos comentarios por correo electrónico. Tambien puedes suscribirte sin comentar.

  • Buscar en este blog

  • Notas recientes

    • Facebook Challenge Buenos Aires, unite al desafío
    • Social Commerce con CM Commerce
    • Landing page
    • ¡Expusimos como finalistas en OpenApp!
    • ¡Nueva versión de CM Commerce!
  • Etiquetas

    accesibilidad analytics bluetooth buscadores caso de éxito CEP cmcommerce dispositivos ebook experimento facebook infraestructura ipad kindle linux mobile optimización performance qr seguridad SEO social commerce social media tienda social tips ucs 2.0 usabilidad valor agregado web 2.0
  • Categorías

    • Casos de éxito (7)
    • Diseño web (8)
    • Linux (1)
    • Negocios (3)
    • Programación (3)
    • Seguridad (1)
    • SEO (6)
    • Sin categoría (6)
    • Social (4)
    • Telefonía IP (2)
    • Tutoriales (1)
  • Comentarios recientes

    • friv100 en 10 reglas heurísticas de usabilidad de Jakob Nielsen
    • Mejorar las conversiones en un sitio web con Google WO | Braintive en Conversiones en formularios de registración
    • Campañas de contacto masivo: ¿teléfono, sms o email? | Braintive en Caso de éxito: Numeral8
    • Tu tienda social en Facebook (CMCommerce) | Braintive en ¿Debería una empresa tener presencia en Facebook?
    • Alfredo Fabretti en ¡Nueva versión de CM Commerce!
  • Sitios de interés

    • Braintive
    • Braintive en Facebook
    • Elianna
    • Veemvox
  • RSS Suscribite al Blog por RSS

Seguinos en Twitter y suscribiendote a nuestro weblog's feed.
Nosotros
Lo que hacemos
Razones
UCS 2.0
Contacto
Prensa
Elianna
Clientes
Blog
Historia
Fotos
Envia tu CV
Terminos
Sitemap
Get Connected   
All text and design is copyright ©2010 Braintive. All rights reserved.
loading Cancelar
El artículo no se ha enviado - ¡comprueba tu dirección de correo!
Error en la comprobación de email. Por favor, vuelve a intentarlo
Lo sentimos, tu blog no puede compartir entradas por correo electrónico.
loading Cancelar
El artículo no se ha enviado - ¡comprueba tu dirección de correo!
Error en la comprobación de email. Por favor, vuelve a intentarlo
Lo sentimos, tu blog no puede compartir entradas por correo electrónico.