Uso de los elementos fieldset y legend

Los formularios suelen plantear muchos problemas de accesibilidad web. Por ello es muy importante conocer todos los elementos de HTML que se pueden emplear en los formularios para mejorar su accesibilidad.

El artículo Using the fieldset and legend elements explica el uso correcto. La explicación se resumen en estos consejos:

When to use a fieldset and legend
You should use the <fieldset> and <legend> elements when:

• You have a single multiple choice question (using radio buttons or checkboxes).
• You have several questions relating to the same topic (like text boxes, or any other type of field).

When not to use a fieldset and legend
You should not use the <fieldset> and <legend> when:

• You have a single form field that asks for a single piece of information.

Cuatro razones por las que un sitio web accesible es una estrategia win-win

En 4 reasons why an accessible website is a win-win:

1. Improved search engine optimization (SEO)
2. Better user experience for all visitors and all devices
3. Avoiding costly and embarrassing lawsuits
4. Increasing the audience for your website by making it more inclusive

Estrategias para adoptar la accesibilidad web

En WebAIM’s Hierarchy for Motivating Accessibility Change se presenta el siguiente grafico para motivar a la gente a adoptar la accesibilidad web. Los niveles, de menor a mayor importancia y efectividad son:

• Guilt
• Punish
• Require
• Reward
• Enlighten
• Inspire

Cuando los enlaces parece botones (y al revés)

Usar un botón como si fuera un enlace, o un enlace como si fuera un botón, es algo muy común, y es un completo error.

Cuando un lector de pantalla lee una página web, anuncia al usuario los elementos que encuentra en la página. Le puede decir cosas como "lista", "imagen", "botón" y "enlace".

Cuando un usuario oye "botón", no espera que cuando lo use se navegue a otra página web, a no ser que sea el botón de envío de un formulario.

Cuando un usuario oye "enlace", espera que cuando lo use se navegue a otra página web, no espera que no ocurra nada y no cambie la página web en la que se encuentre.

En el pasado ya he escrito algunas entradas sobre este tema:

• Uso correcto de los botones y enlaces (9/11/2015)
• Un enlace es un enlace y un botón es un botón (29/5/2017)

Ahora he encontrado But sometimes links look like buttons (and buttons look like links), una lectura muy interesante para complementar las anteriores.

Controlar el ordenador con la mente

El artículo Fusionar mente y máquina: ¿de verdad estamos cerca? es un excelente resumen de la tecnología actual que permite controlar un ordenador con la mente.

En este artículo se intentan contestar estas dos preguntas:

¿Hasta qué punto estamos cerca de lograr conectar nuestro cerebro con nuestras tecnologías?

¿Y cuáles serían las consecuencias una vez que nuestras mentes estuviesen conectadas?

Curso Aprende accesibilidad web paso a paso

Séptima encuesta del WebAIM sobre el uso de lectores de pantalla

Durante los últimos años, el WebAIM ha realizado varias encuestas online destinadas a analizar los hábitos de uso de los lectores de pantalla:

• Screen Reader User Survey #6 Results (Septiembre 2015)
• Screen Reader User Survey #5 Results (Enero 2014)
• Screen Reader User Survey #4 Results (Mayo 2012)
• Screen Reader User Survey #3 Results (Diciembre 2010)
• Screen Reader User Survey #2 Results (Octubre 2009)
• Survey of Preferences of Screen Reader Users (Diciembre 2008)

Ahora ya está abierta la séptima edición: Screen Reader User Survey #7.

La encuesta estará disponible hasta el 1 de noviembre de 2017 y la pueden contestar todos los usuarios de lectores de pantalla, incluso los que los usan únicamente para evaluación y pruebas.

Focus ring

Have you ever noticed the little blue or dashed ring that appears around elements when you activate them with your keyboard or mouse? This is known as a focus indicator, and it's extremely important for users who rely primarily on their keyboard to navigate the screen. For a keyboard user, the focus indicator (or ""focus ring"") is kind of like their mouse pointer. It shows them which element is currently active and receiving keyboard events. Because the focus ring can show up on custom controls or whenever we add styles to native elements like the button tag, it's a common anti-pattern to remove the focus indicator using the CSS outline: none style. But doing this degrades the user experience for our keyboard users as they are no longer able to tell which elements are currently focused.

Enter :focus-ring! The :focus-ring pseudo class is a new CSS selector designed to help differentiate between mouse and keyboard focus. Today on a11ycasts we'll look at how :focus-ring works, and show off a few :focus-ring polyfills that you can start using today to improve the accessible styles on your site!

Accesibildad de gráficos complejos

En Charts & Accessibility  se ofrecen algunos consejos, con ejemplos, para crear gráficos accesibles:

1. If the data in a chart, graph or map is crucial to the content of a Web page, then you must provide a text description of the image. In some cases, a numeric table replicating the chart data could provide additional accessibility. WCAG 2.0 Guideline 1.1.1—"All non-text content that is presented to the user has a text alternative that serves the equivalent purpose…"
2. Supplement color-coding of charts with texture, differences in line style, text in graphs or different shades of color to improve accessibility for colorblind users. Charts should be readable in black and white. NOTE: The default settings of the Chart Wizard in Excel are not color accessible. Use the formatting tools to change line styles and colors. WCAG 2.0 Guideline 1.4.1—"Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element."

WCAG 2.0 - Operable

WCAG 2.0 - Perceivable

CSS Speech

Interesante el artículo Let’s Talk About Speech CSS:

The CSS 3 Speech Module, the evolved version of the aural Media Type, looks the most promising. Like display: none;, it is part of the small subset of CSS that has an impact on screen reader behavior. It uses traditional CSS property/value pairings alongside existing declarations to create an audio experience that has parity with the visual box model.

La realidad actual es que el soporte por parte de los productos de apoyo es muy reducido.

Uso de un magnificador de pantalla (2)

Uso de un magnificador de pantalla (1)

Generador de paletas de colores accesibles

A11y Color Palette es un generador de paletas de colores accesibles. Lo que hace es comprobar que el color del texto y el color del fondo cumplen los umbrales fijados en WCAG 2.0:

AA texto normal / grande: 4.5:1 / 3:1
AAA texto normal / grande: 7:1 / 4.5:1

Manejar el ordenador con la mirada

En el artículo Tecnología para manejar el ordenador con precisión con la mirada se presenta el sistema Irisbond:

La tecnología que permite interactuar con dispositivos digitales a través de la mirada no es nueva. En 2005 la empresa sueca Tobii, una de las más importantes del mundo en este terreno, lanzó el primer ordenador que incorporaba el seguimiento ocular y desde entonces distintos científicos, universidades y compañías de todo el mundo no han dejado de innovar. En este escenario, altamente competitivo y en constante evolución, Irisbond se ha posicionado como una de las iniciativas con mejores perspectivas de futuro. Así lo reconoció la revista Forbes, que en el Mobile World Congress del pasado año, les dedicó un artículo titulado “Esta compañía quiere cambiar la forma en que utilizamos la tecnología del eye-tracking”. Y es que aunque Irisbond está centrada en la tecnología asistencial, no es este el único campo en el que sus soluciones pueden ser aplicadas, ya que el eye-tracking tiene grandes posibilidades de desarrollo en la medicina, la industria o la automoción.

Ejemplo de uso de una línea braille

Corto e interesante el siguiente vídeo, La línea Braille explicada por Luis Palomares (Analista I+D CIDTA, ONCE):

 

Sistema para que los sordociegos puedan leer los subtítulos

En Un sistema para que los sordociegos puedan ‘ver’ la televisión se explica:

En España hay alrededor de 20.000 personas sordociegas que a las dificultades diarias de no poder ver y oír tienen que sumar otra barrera: la del acceso a la información. Gracias a la tecnología presentada hoy por el equipo del profesor Ángel Crespo, de la Universidad Carlos III, los sordociegos podrían acceder a los contenidos de televisión mediante una sencilla aplicación que les traduce los contenidos al lenguaje Braille de forma simultánea y sea cual sea la cadena que quieran sintonizar.

Cómo las tendencias actuales de diseño afectan a la accesibilidad web

Muy bueno el artículo How Current Design Trends Affect Web Accessibility:

In this post, we'll explore some of the design trends we increasingly run into on the Web today, and how decisions made during the design phases can have a hugely detrimental effect on anyone who uses the web in a slightly differently way.

Las tres tendencias que se analizan son:

Three such examples of current design trends that have a tremendously negative impact on people with disabilities are: placeholder text labels, parallax scrolling and conversational interfaces (chatbots). As we'll see in the next few paragraphs, each of these trends are likely to create significant barriers for some of us, if basic accessibility concepts are not taken into consideration.

Listas desplegables personalizadas y accesibles

El artículo Accessible Custom Select Dropdowns proporciona algunos enlaces a ejemplos de listas desplegables personalizadas que son accesibles.