Buscador

Mostrando entradas con la etiqueta Consejos. Mostrar todas las entradas
Mostrando entradas con la etiqueta Consejos. Mostrar todas las entradas

lunes, 6 de agosto de 2018

El tamaño de los controles y los enlaces

En Web Content Accessibility Guidelines (WCAG) 2.1 podemos leer:

Success Criterion 2.5.5 Target Size
(Level AAA)
The size of the target for pointer inputs is at least 44 by 44 CSS pixels except when:
  • Equivalent: The target is available through an equivalent link or control on the same page that is at least 44 by 44 CSS pixels;
  • Inline: The target is in a sentence or block of text;
  • User Agent Control: The size of the target is determined by the user agent and is not modified by the author;
  • Essential: A particular presentation of the target is essential to the information being conveyed.
Este criterio ayuda a los usuarios con discapacidad motora que carezcan de un buen control, que necesitan un área de interacción con suficiente tamaño en los enlaces y los controles de los formularios.

Un área de interacción de tamaño adecuado también puede ser útil para quienes utilizan pantallas pequeñas o de alta resolución. WCAG 2.1 sugiere que el área sea de un mínimo de 44 x 44 píxeles para los elementos interactivos.

martes, 17 de septiembre de 2013

La dislexia y la tipografía

Una mala tipografía puede ser una barrera de accesibilidad para las personas con dislexia. ¿Qué se debe hacer para evitar o reducir los problemas que pueden afectar a las personas con dislexia? En el vídeo Accesibilidad web: dislexia y tipografía explico los principales problemas y ofrezco algunos consejos:



Y la transcripción del vídeo:

Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y este vídeo forma parte de una serie de videotutoriales dedicados a la accesibilidad web. En este vídeo vamos a ver qué es la dislexia y cómo la tipografía puede ser una barrera de accesibilidad para las personas con dislexia.

La Federación Mundial de Neurología define la dislexia como “un trastorno que se manifiesta por la dificultad en aprender a leer (y escribir) a pesar de recibir una enseñanza correcta, mostrar una inteligencia adecuada y disfrutar de las oportunidades socioculturales normales”.

La dislexia se manifiesta normalmente durante el período escolar, en las materias básicas de lectura y escritura.

Un niño con dislexia tiene problemas para aprender palabras nuevas, lo que supone un impedimento para la correcta comprensión y expresión y que, por tanto, dificulta su proceso de aprendizaje en general.

Para resolver estos y otros problemas, se aplican ”estrategias de compensación” que facilitan la adaptación a la vida diaria apoyándose en los puntos fuertes de la persona con dislexia.

Las alteraciones en el lenguaje se pueden manifestar de diferentes formas, pero las más comunes son:

La supresión de letras, como por ejemplo “bazo” por “brazo” o “árbo” por “árbol”.
La confusión de fonemas, como por ejemplo “bile” por “dile”.
La inversión en el orden de las letras o las sílabas, como por ejemplo “pardo” por “prado” o “drala” por “ladra”.
La sustitución de una palabra por otra que empieza por la misma sílaba o tiene un sonido parecido, como por ejemplo “lagarto” por “letardo”.

En especial, se presenta una gran confusión entre las letras que tienen una similitud, tanto en su forma como en su sonido.

Así, se suele confundir la “d” y la “b”; la “p”, la “q” y la “g”; todas las anteriores entre sí, ya que en muchos casos se trata del mismo glifo rotado; la “u” y la “n”; la “h” y la “n”, la “l” con la “i” y el número “1” y otras combinaciones.

Y aquí es donde entra en juego la tipografía.

¿Cuál es el problema con las tipografías que normalmente utilizamos?

En las tipografías normales suele primar el carácter estético antes que el funcional o práctico, aunque esto último también se tiene en cuenta en muchas ocasiones con el fin de mejorar la legibilidad de los textos.

Por ejemplo, supongo que un experto en tipografía será capaz de apreciar diferencias entre estas dos letras y estas otras dos, pero yo las veo exactamente iguales.

Imagina la siguiente ecuación, “l + 1 = j”. Si mostramos esta ecuación con el tipo de letra “Gill Sans MT”, esto es lo que obtenemos.

Se entiende, ¿verdad?

Recientemente, he visitado un sitio web en el que la tipografía utilizada producía unas dificultades de lectura enormes, ya que la letra “e” se confundía con una “c”.

Al principio pensé que era un problema de Google Chrome, el navegador que estaba usando. Sin embargo, al probar la misma página web con los navegadores Mozilla Firefox y Opera se producía el mismo error. Sólo con el navegador Microsoft Internet Explorer se mostraba correctamente la letra “e”.

El tipo de letra que se utiliza en esta página se llama Lato. En concreto, se emplea la versión “Lato Light”.

¿Qué se debe hacer para evitar o reducir los problemas que pueden afectar a las personas con dislexia?

En el artículo “6 malas prácticas sorprendentes que hacen daño a los usuarios con dislexia” se proporcionan seis consejos fáciles de entender y aplicar:

Evita el efecto río que se produce cuando existen grandes huecos vacíos en el texto en líneas consecutivas.

Evita el efecto borroso.

Y evita el efecto de lavado que produce que el texto se vea débil e indistinguible.

En el libro “Accessibility Handbook”, publicado en el año 2012, también se proporcionan algunos consejos para mejorar la accesibilidad de cara a los usuarios con dislexia.

Utiliza una fuente clara y que no produzca confusión porque dos letras distintas tienen un glifo similar (como las letras b, d, p, q, que normalmente son el mismo glifo pero rotado). Curiosamente, en este libro se recomiendo el uso del tipo de letra Comic Sans, odiada por la mayoría de los expertos en tipografía.

Utiliza texto real y no imágenes: esto permite a los usuarios con problemas utilizar hojas de estilo propias con sustitución de la tipografía empleada. En cualquier caso, se recomienda el uso de tipos de letra "sans serif", como Arial, Helvetica, Verdana o Tahoma.

El contenido debe ser claro de leer. Para ello, las frases deben ser cortas (no más de 10-15 palabras por frase) y los párrafos deben ser cortos.

Los colores de alto contraste pueden dificultar la lectura: un texto negro sobre un fondo blanco puede aparecer como borroso para muchas personas con dislexia. Se aconseja que el color del texto sea gris sobre un blanco oscuro. Además, esto cansa menos la vista para todas las personas.

El texto justificado es muy bonito, pero causa problemas. Mejor no usarlo nunca.

Las imágenes pueden ayudar y distraer a la vez, no hay una solución general: a muchos disléxicos les ayudan a comprender el contenido, pero a otros les puede distraer.

Las animaciones son, sin duda, una gran distracción, mejor no usarlas. Si se tienen que usar, no se debe utilizar la opción de "autoplay" y el usuario debe tener el control para detenerlas en cualquier momento.

Por eso mismo, los anuncios (banners) son un problema, una gran distracción.

Cuidado con los fondos, en especial, las imágenes de fondo. Son otra gran distracción y dificultan la lectura.

Algunos usuarios con una dislexia muy severa emplean lectores de pantalla, como los usuarios ciegos. Así que, una página web correctamente accesible para un usuario ciego también ayudará a los usuarios con dislexia severa que utilicen un lector de pantallas.

Algunos usuarios prefieren imprimir la página web y leerla impresa, así que hay que comprobar que la página web se imprime correctamente. Por ejemplo, se puede crear una hoja de estilo CSS específica para impresión.

Se debe de proporcionar un mecanismo de navegación global que no cambie al moverse por el sitio web.

Por último, hemos visto que algunos tipos de letra pueden causar una gran confusión ya que algunas letras se representan exactamente con el mismo glifo.

Existe un tipo de letra llamada “Dyslexie” que ha sido diseñada para facilitar la lectura de textos por parte de personas con dislexia.

En esta tipografía, las letras se han diseñado de forma que sean más fáciles de distinguir unas de otras y así reducir la posibilidad de confusión. Para ello, las diferencias entre las letras conflictivas se ha enfatizado, haciendo que se diferencien más.

Y con esto finaliza este videotutorial que ha explicado los problemas que puede causar la elección de una mala tipografía entre las personas con dislexia.

Si necesitas más información o quieres contactar conmigo, en mis páginas web http://accesibilidadweb.dlsi.ua.es y en http://desarrolloweb.dlsi.ua.es podrás encontrar más información sobre la accesibilidad web y el desarrollo web o también puedes contactar directamente conmigo a través de mi dirección de correo electrónico sergio.lujan@ua.es o a través de mi cuenta de Twitter @sergiolujanmora.

Muchas gracias por tu atención.

jueves, 18 de julio de 2013

La mala ortografía es mala, lo mires como lo mires

Hace un año escribí la entrada La buena ortografía ayuda a la accesibilidad web, en la que explicaba que la mala ortografía puede ser una barrera de accesibilidad.

Como en otras ocasiones, se vuelve a demostrar que un problema de accesibilidad que en principio puede parecer que sólo perjudica a unos pocos (las personas con discapacidad), en realidad perjudica a todo el mundo. El artículo La mala ortografía le cuesta caro a las ventas por internet dice:
Un empresario de internet asegura que la mala ortografía en inglés le cuesta millones de libras al Reino Unido. 
Charles Duncombe asegura que un análisis de las cifras de un sitio web con faltas de ortografía reveló que esto puede reducir las ventas en línea hasta en 50%.
Duncombe insiste que a la hora de contratar personal se ha visto sorprendido "por la mala calidad de su inglés escrito". 
Así que asegura que el gran problema para las empresas en línea no es la tecnología, sino la búsqueda de personal que sepa escribir correctamente.
Quizás un 50% es un poco exagerado, y no hay que creer la palabra de una sola persona, pero seguro que la mala ortografía sí que tiene influencia en la credibilidad de un sitio web, lo cual puede impactar en que los visitantes regresen o realicen algunas compras en un sitio web.

viernes, 12 de julio de 2013

Treinta consejos para mejorar la accesibilidad web

El artículo 30 Web Accessibility Tips presenta una lista de treinta consejos para mejorar la accesibilidad web:


  1. Add proper alt text to images. 
  2. Use headings properly. 
  3. Create accessible PDFs. 
  4. Know when to use PDF. 
  5. Use ARIA landmarks. 
  6. Add labels to form fields. 
  7. Group related form fields together and assign a single prompt that they all share. 
  8. Markup tables appropriately. 
  9. Identify language of text. 
  10. Use a color contrast checker. 
  11. Avoid using tiny fonts. 
  12. Respect white space (between lines, between paragraphs). 
  13. Provide visible indication of focus, especially for keyboard users. 
  14. Use text, not pictures of text. 
  15. Think twice about the words you choose. 
  16. Caption video. 
  17. Describe video. 
  18. Provide a transcript. 
  19. Choose media players that support accessibility. 
  20. Choose a dropdown menu system that works for all users. 
  21. Choose JavaScript widgets that support accessibility. 
  22. Test JavaScript widgets - don't assume they work for everyone. 
  23. Choose Learning Management Systems (LMS) and Content Management Systems (CMS) that support accessibility. 
  24. Test web pages with a keyboard. 
  25. Test pages with high contrast color schemes. 
  26. Test pages with assistive technologies. 
  27. Test pages on mobile devices. 
  28. Ask vendors specific questions about the accessibility of their products. 
  29. Demand accessibility! 
  30. Get involved! 



martes, 9 de julio de 2013

Consejos para la accesibilidad en dispositivos móviles de la BBC

Hace unos días se publicó la noticia Draft BBC Mobile Accessibility Standards and Guidelines. La BBC ha publicado Mobile Accessibility Guidelines v0.7, unos consejos para mejorar la accesibilidad del contenido destinado a ser consumido con dispositivos móviles.


miércoles, 12 de junio de 2013

Los diez problemas más comunes

En el artículo Ten Common Accessibility Problems, su autor recopila los diez problemas más comunes en base a su experiencia como revisor de la accesibilidad de numerosos sitios web. En esta lista, el orden de los problemas no es significativo:
  1. No incluir el texto alternativo para las imágenes.
  2. Uso de CAPTCHA.
  3. No proporcionar alternativas adecuadas para contenido inaccesible.
  4. No usar los encabezados de HTML de forma apropiada.
  5. No asociar de forma explícita los controles de un formulario con sus etiquetas.
  6. No garantizar la suficiente diferencia de contraste entre el color del texto y el color de fondo.
  7. No identificar las tablas de datos con summary o caption.
  8. No etiquetar las tablas de datos correctamente.
  9. No garantizar que las páginas se pueden usar sin el ratón.
  10. Uso del evento onchange en los menús de tipo select.
Si quieres más consejos similares, en Consejos para crear páginas web accesibles recopilo varias listas de este tipo.

miércoles, 26 de septiembre de 2012

Cómo mejorar la accesibilidad para las personas con problemas cognitivos

Estoy leyendo el libro Accessibility Handbook, de Katie Cunningham y publicado por la editorial O'Reilly (2012).

El libro es interesante, pero no he encontrado muchas cosas que me hayan sorprendido. Sin embargo, sí que me ha sorprendido el capítulo 5 "Cognitive Disabilities", ya que normalmente es un tema que no se suele tratar en libros similares.

En este blog he escrito en muy pocas ocasiones sobre los problemas cognitivos, así que es un tema que me interesa mucho ya que tengo mucho que aprender.

¿Qué he aprendido en este capítulo?

En primer lugar hay que centrar el problema. Bajo el concepto de problemas cognitivos se agrupan discapacidades tan diversas como el síndrome de Down, el autismo y la dislexia. Este libro se centra en la dislexia, en los desórdenes por déficit de atención (el famoso trastorno por déficit de atención con hiperactividad) y cualquier otro desorden originado por problemas de procesamiento de la información.

Respecto a la dislexia, los consejos que se proporcionan son:
  • Utiliza una fuente clara y que no produzca confusión porque dos letras distintas tienen un glifo similar (como las letras b, d, p, q, que normalmente son el mismo glifo pero rotado). Curiosamente, se recomiendo el uso del tipo de letra Comic Sans.
  • Utiliza texto real y no imágenes: esto permite a los usuarios con problemas utilizar hojas de estilo propias con sustitución de la tipografía empleada. En cualquier caso, se recomienda el uso de tipos de letra "sans serif", como Arial, Helvetica, Verdana o Tahoma.
  • El contenido debe ser claro de leer. Para ello, las frases deben ser cortas (no más de 10-15 palabras por frase) y los párrafos deben ser cortos.
  • Los colores de alto contraste pueden dificultar la lectura: un texto negro sobre un fondo blanco puede aparecer como borroso para muchas personas con dislexia. Se aconseja que el color del texto sea gris (por ejemplo, #111) sobre un blanco oscuro (por ejemplo #eee). Además, esto cansa menos la vista para todas las personas.
  • El texto justificado es muy bonito, pero causa problemas. Mejor no usarlo nunca.
  • Las imágenes pueden ayudar y distraer a la vez, no hay una solución general: a muchos disléxicos les ayudan a comprender el contenido, pero a otros les puede distraer.
  • Las animaciones son una gran distracción, mejor no usarlas. Si se tienen que usar, no se debe utilizar la opción de "autoplay" y el usuario debe tener el control para detenerlas.
  • Los anuncios (banners) son un problema, una gran distracción.
  • Cuidado con los fondos, en especial, las imágenes de fondo. Otra distracción y dificultan la lectura.
  • Algunos usuarios con una dislexia muy severa emplean lectores de pantalla, como los usuarios ciegos. Así que, una página web correctamente accesible para un usuario ciego también ayudará a los usuarios con dislexia severa.
  • Algunos usuarios prefieren imprimir la página web y leerla impresa, así que hay que comprobar que la página web se imprime correctamente. Por ejemplo, se puede crear una hoja de estilo CSS específica para impresión.
  • Se debe de proporcionar un mecanismo de navegación global que no cambie al moverse por el sitio web.
Respecto al déficit de atención, los consejos son:
  • Como su principal problema es lograr una buena concentración durante un período de tiempo largo, comparten algunos de los problemas de las personas con dislexia. Todo lo que se ha comentado antes que está relacionado con evitar distracciones les ayuda.
  • Las tareas largas se deben dividir en tareas más cortas. Por ejemplo, un formulario largo se debe dividir en varias partes (paso 1, paso 2, etc.) y se debe proporcionar una indicación del progreso (estás en el paso 1 de 3).
  • Las instrucciones deben ser cortas y nada complejas. Se deben eliminar las palabras o sentencias innecesarias y mucho mejor si se escriben en forma de lista en vez de en forma de párrafo.
  • El uso de vídeos para proporcionar instrucciones puede ser positivo para algunos usuarios, pero negativo para otros, así que se deben proporcionar diferentes alternativas (vídeo y texto).
  • La organización de las páginas es muy importante. Las páginas largas se deben dividir en páginas más pequeñas. Pero para algunos usuarios puede ser contraproducente la división, así que lo mejor es ofrecer ambas posibilidades (todo junto en una página o dividido en varias).
  • Utiliza mecanismos de navegación consistentes, el interfaz no debe sorprender al usuario.

martes, 31 de julio de 2012

Consejo 31: realiza test de evaluación de la accesibilidad con usuarios

Consejo: el mejor método, el método definitivo para comprobar si un sitio web es accesible y para detectar los posibles problemas de accesibilidad que pueda tener es realizar un test de evaluación con usuarios con diferentes tipos de discapacidad. El cumplimiento estricto de las pautas de accesibilidad web no garantiza al 100% que las páginas web estén libres de problemas de accesibilidad. ¿El principal problema de los tests de evaluación con usuarios? Son laboriosos y costosos, tanto en términos de dinero como de tiempo.

Cómo lo hago: existen diferentes técnicas para realizar los test de evaluación de la accesibilidad con usuarios. No es necesario realizar las pruebas con un número muy grande de usuarios, pero sí que es necesario tener una gran variedad de usuarios con diferentes tipos de discapacidad para lograr cubrir la mayor cantidad de situaciones posibles.

Cómo se benefician los usuarios: se benefician todos los usuarios, pero en especial los usuarios que tengan algún tipo de discapacidad, ya que podrás detectar y corregir problemas de accesibilidad que tengan tus páginas web.

Más consejos en Julio, cada día, un consejo sobre accesibilidad web.

lunes, 30 de julio de 2012

Consejo 30: navega por tu sitio web como si fueras un usuario con algún tipo de discapacidad

Consejonavega por tu sitio web como si fueras un usuario con algún tipo de discapacidad. Simula que eres un usuario con problemas de visión, de audición o de movilidad y detecta los posibles errores de accesibilidad que pueda tener tu sitio web.

Cómo lo hago: intenta simular diferentes tipos de usuarios con diferentes tipos de discapacidad. Por ejemplo, puedes simular que eres un usuario ciego que utiliza un lector de pantallas si apagas el monitor y emplear un lector de pantallas o si utilizas un navegador web en modo texto. También puedes simular que eres un usuario con movilidad reducida si navegas por un sitio web sólo con el teclado. También puedes desconectar el audio de tu ordenador y comprobar si tienes problemas en algunos sitios web.

Cómo se benefician los usuarios: se benefician todos los usuarios, pero en especial los usuarios que tengan algún tipo de discapacidad, ya que podrás detectar y corregir problemas de accesibilidad que tengan tus páginas web.

Más consejos en Julio, cada día, un consejo sobre accesibilidad web.

domingo, 29 de julio de 2012

Consejo 29: utiliza las herramientas automáticas de evaluación de la accesibilidad

Consejo: utiliza las herramientas automáticas de evaluación de la accesibilidad web para comprobar que tus páginas web no contienen errores que se pueden detectar de forma automática.

Cómo lo hago: existen numerosas herramientas automáticas de evaluación de la accesibilidad web, como eXaminator, Hera o TAW que te pueden ayudar a detectar ciertos errores de accesibilidad en tus páginas web. Sin embargo, hay que ser cuidadoso al usar estas herramientas, ya que su fiabilidad no es total: ni detectan todos los errores que existen en una página web, ni todos los errores que detectan son reales. Por tanto, son una ayuda, pero no la solución total y no se puede confiar ciegamente en ellas.

Cómo se benefician los usuarios: se benefician todos los usuarios, pero en especial los usuarios que tengan algún tipo de discapacidad, ya que podrás detectar y corregir problemas de accesibilidad que tengan tus páginas web.

Más consejos en Julio, cada día, un consejo sobre accesibilidad web.

sábado, 28 de julio de 2012

Consejo 28: Acuérdate de los usuarios que navegan con teclado

Consejo: acuérdate de los usuarios que navegan con el teclado, no pienses que todos los usuarios navegan por la Web con el ratón.

Cómo lo hago: todos los elementos con los que se puede interactuar en una página web deben ser accesibles con el teclado. Además, debes proporcionar ayudas visuales para que los usuarios sepan que elemento (enlace o control en un formulario) tiene el foco, que elemento está activo o que enlace ha sido visitado. Para ello puedes usar las pseudoclases de CSS :focus, :active y :visited.

Cómo se benefician los usuarios: no sólo los usuarios ciegos navegan por la Web y manipulan las páginas web con el teclado, algunos grupos de usuarios que sí que pueden ver pero que tienen problemas de movilidad también usan el teclado u otros productos de apoyo que se comportan como un teclado.

Más consejos en Julio, cada día, un consejo sobre accesibilidad web.

viernes, 27 de julio de 2012

Consejo 27: proporciona manejadores de eventos alternativos

Consejo: proporciona manejadores de eventos alternativos, no pienses que todos los usuarios navegan por la Web con el ratón.

Cómo lo hago: hay varios manejadores de eventos que se deben duplicar para que se pueda controlar el uso de una página web con ratón o con teclado. Por ejemplo, el evento onclick que controla si se ha pulsado sobre un elemento (por ejemplo, un botón), se debe duplicar y se debe añadir el evento onkeypress para aquellos usuarios que realicen la misma acción pero con el teclado.

Cómo se benefician los usuarios: todos los usuarios se pueden beneficiar, ya que hay usuarios que aunque puedan usar el ratón, prefieren utilizar el teclado para ciertas operaciones como rellenar un formulario. En especial, se benefician los usuarios que sólo pueden utilizar el teclado, como los usuarios ciegos o los usuarios con movilidad reducida.

Más consejos en Julio, cada día, un consejo sobre accesibilidad web.

jueves, 26 de julio de 2012

Consejo 26: los ficheros enlazados desde una página web también deben ser accesibles

Consejo: para que una página o sitio web sea realmente accesible, todos los recursos (ficheros) enlazados deben ser también accesibles. Si desde una página web enlazas un fichero Microsoft Word o Adobe PDF, el fichero debe ser accesible para que la página web se considere realmente accesible.

Cómo lo hago: depende del recurso que se enlaza, cada recurso tiene su forma particular de hacerse accesible. Por ejemplo, en el caso de un documento Microsoft Word se tienen que emplear los estilos de la plantilla para crear documentos estructurados, se tiene que proporcionar un texto alternativo en las imágenes y se tienen que crear listas que realmente sean listas. En el caso de un documento Adobe PDF, como normalmente se suele crear a partir de otro documento, como por ejemplo un documento Microsoft Word, para que sea accesible el primer paso es partir de un documento que sea accesible.

Cómo se benefician los usuarios: depende del tipo de documento, pero en general, todos los usuarios se pueden beneficiar de una forma u otra cuando un documento enlazado es accesible.

Más consejos en Julio, cada día, un consejo sobre accesibilidad web.

miércoles, 25 de julio de 2012

Consejo 25: subtitula los vídeos

Consejo: subtitula los vídeos y proporciona la transcripción del audio.

Cómo lo hago: depende de la tecnología que utilices para ofrecer los vídeos por Internet, pero hoy en día es muy fácil gracias a las posibilidades que ofrece YouTube, ya que permite crear las marcas de tiempo de los subtítulos de forma automática a partir de la transcripción del audio.

Cómo se benefician los usuarios: se benefician todos los usuarios, pero en especial los usuarios que tengan problemas de audición. Todos los usuarios se pueden beneficiar, ya que existen situaciones en las que el audio de un vídeo no se puede o no se quiere oír.

Más consejos en Julio, cada día, un consejo sobre accesibilidad web.

martes, 24 de julio de 2012

Consejo 24: proporciona un método para desactivar el audio de una página web

Consejo: en realidad, lo mejor es no poner audio en una página web, pero si "te obligan a ponerlo", proporciona un método para desactivar el audio, ya que puede molestar a ciertos grupos de usuarios, como por ejemplo los que utilizan un lector de pantallas.

Cómo lo hago: depende de la tecnología que utilices para incorporar el audio en la página web. Por ejemplo, si utilizas la nueva etiqueta audio de HTML5, existe una API para controlar la reproducción del audio desde JavaScript. Proporciona un mecanismo al principio de la página para desactivar el audio, muy importante, ¡al principio de la página, no al final!

Cómo se benefician los usuarios: se benefician todos los usuarios, ya que el audio puede ser muchas veces molesto, pero en especial se benefician los usuarios que utilizan un lector de pantallas, ya que el audio de la página web puede interferir con el audio del lector de pantallas.

Más consejos en Julio, cada día, un consejo sobre accesibilidad web.

lunes, 23 de julio de 2012

Consejo 23: limita la longitud de las líneas de texto a 80 caracteres como máximo

Consejo: el ancho de un párrafo no debe ser superior a 80 caracteres, ya que algunos grupos de usuarios pueden tener problemas para leer párrafos de texto con líneas más largas.

Cómo lo hago: depende del diseño que tenga tu página web. Debes combinar las propiedades de CSS font-size, margin y padding para lograr que la longitud de una línea de texto no supere los 80 caracteres.

Cómo se benefician los usuarios: se benefician todos los usuarios, ya que los párrafos con líneas muy largas son difíciles de leer para todos los usuarios, pero en especial se benefician algunos grupos de usuarios con problemas de visión y algunos grupos de usuarios con dificultad lectora.

Más consejos en Julio, cada día, un consejo sobre accesibilidad web.

domingo, 22 de julio de 2012

Consejo 22: no señales los controles con datos erróneos de un formulario sólo con el color rojo

Consejo: cuando valides un formulario y detectes un error en los datos de entrada del usuario, no señales los datos erróneos sólo con el color rojo. Como comenté en el consejo 18 Utiliza los colores con precaución, no hay ningún problema en utilizar los colores en una página web, siempre que se tengan en cuenta algunos problemas que pueden surgir, como el uso del color rojo, que puede pasar desapercibido entre los usuarios con ceguera al color (daltonismo).

Cómo lo hago: cuando señales un control con datos erróneos en un formulario, no te limites a marcar con color rojo los controles erróneos. Utiliza otro tipo de mecanismos adicionales que no se basen únicamente en el color, como por ejemplo añadir un marcador.

Cómo se benefician los usuarios algunos grupos de usuarios, en especial aquellos que tengan ceguera al color (daltonismo), se benefician cuando no se usa únicamente el color para transmitir información. Además, todos los usuarios se pueden beneficiar cuando las condiciones de visualización de una página web no son las correctas, como por ejemplo, la visualización de una página web en la calle a plena luz del sol.

Más consejos en Julio, cada día, un consejo sobre accesibilidad web.

sábado, 21 de julio de 2012

Consejo 21: Proporciona información de ayuda en los controles de los formularios

Consejo: proporciona información que ayude a los usuarios a rellenar los controles de un formulario. Por ejemplo, puedes proporcionar una pequeña explicación sobre el contenido de cada control o sobre el formato de los datos de entrada.

Cómo lo hago: utiliza el atributo title en cada control de un formulario para proporcionar información adicional.

Cómo se benefician los usuarios: se benefician todos los usuarios, ya que esas explicaciones adicionales son beneficiosas para todos los usuarios.

Más consejos en Julio, cada día, un consejo sobre accesibilidad web.

viernes, 20 de julio de 2012

Consejo 20: Establece un orden de tabulación correcto en los formularios y en toda la página

Consejo: establece un orden de tabulación correcto entre los controles de un formulario y entre todos los elementos de una página web, para que un usuario que se desplace por la página con el teclado lo haga en el orden correcto.

Cómo lo hago: lo mejor es no hacer nada, es decir, escribir el contenido de la página en el orden adecuado en el que queremos que le aparezca al usuario. Sin embargo, a veces se modifica el orden  interno del contenido, aunque con CSS se puede situar visualmente en cualquier posición. Para evitar un orden indebido al desplazarse por la página se debe emplear el atributo tabindex, pero una vez que se empieza a utilizar hay que emplearlo en todos los elementos para evitar problemas, por lo que lo mejor es no tener que utilizarlo.

Cómo se benefician los usuarios: algunos grupos de usuarios, en especial aquellos que no utilizan el ratón para manejar el ordenador, sino que lo hacen con el teclado, se benefician ya que al desplazarse por la página lo hacen en el orden adecuado.

Más consejos en Julio, cada día, un consejo sobre accesibilidad web.

jueves, 19 de julio de 2012

Consejo 19: Define etiquetas de verdad para los controles de los formularios

Consejo: define etiquetas, es decir, el texto que explica qué se tiene que escribir en un control de un formulario, que sean de verdad, que sean realmente etiquetas y no un simple texto.

Cómo lo hago: utiliza el elemento label para marcar las etiquetas de los controles. Este elemento tiene el atributo for que debe contener el id del control que se está etiquetando. En Accesibilidad de formularios puedes encontrar varios ejemplos de cómo hacerlo.

Cómo se benefician los usuarios: algunos grupos de usuarios, en especial aquellos que no utilicen un navegador visual, como pueden ser los usuarios ciegos, se benefician al navegar por un formulario, ya que pueden consultar la etiqueta asociada a un control al desplazarse de un control a otro. Además, todos los usuarios se pueden beneficiar, ya que la etiqueta del control permite situar el foco fácilmente en el control: por ejemplo, en un grupo de botones de radio, se puede pulsar sobre el texto del botón de radio y éste recibe el foco. Esto ayuda a todos los usuarios, pero en especial, a aquellos usuarios que tengan movilidad reducida o problemas de coordinación.

Más consejos en Julio, cada día, un consejo sobre accesibilidad web.