Cómo usar ARIA de forma efectiva con HTML5

El artículo How to Use ARIA Effectively with HTML5 explica cómo se debe usar ARIA con HTML5.

En este artículo se repasa el uso de los roles, de los atributos y unas reglas básicas:

• Utiliza la semántica de HTML siempre que sea posible.
• Un elemento sólo puede tener un role.
• No cambies la semántica nativa de los elementos.

Nivel de lectura adecuado

Web Content Accessibility Guidelines (WCAG) 2.0 indica en la pauta 3.1.5:

3.1.5 Nivel de lectura: Cuando un texto requiere un nivel de lectura más avanzado que el nivel mínimo de educación secundaria una vez que se han eliminado nombres propios y títulos, se proporciona un contenido suplementario o una versión que no requiere un nivel de lectura mayor a ese nivel educativo. (Nivel AAA)

El contenido web se debe crear para que se pueda entender por todo el mundo. La pauta 3.1.5 establece que se debe emplear un nivel de lectura equivalente al mínimo de educación secundaria. ¿Qué nivel es ese?

En el glosario de WCAG se define:

nivel de educación primarioPeriodo de seis años que empieza a las edades de entre cinco y siete, posiblemente sin ninguna educación previa.
Nota: Esta definición está basada en la Clasificación Internacional Normalizada de la Educación.
nivel mínimo de educación secundariaLos dos o tres años de educación que se inician al término de seis años de escuela y finalizan nueve años después del comienzo de la enseñanza primaria.
Nota: Esta definición se basa en la Clasificación Internacional Normalizada de la Educación.

Las edades de inicio de la educación primaria y secundaria varían de un país a otro, pero tomando que la primaria comienza a los cinco años y dura 6 años, la secundaria comienza a los 11 años, y ese es el nivel de lectura que se debe garantizar.

Para medir el nivel de lectura necesario para comprender un texto existen algunas métricas y herramientas basadas en esas métricas. Para el inglés, una herramienta que se puede utilizar es Readibility-Score.

Curiosidades sobre el Braille

En 10 things you probably don't know about braille se explican algunas cosas sorprendentes sobre el Braille:

1. Braille started out as a military code.
2. There’s an asteroid named Braille.
3. Braille takes up more space than the traditional alphabet.
4. Braille is not a language.
5. Most people who are blind don’t know braille.
6. There’s a braille “Olympics.”
7. There’s a special version of braille just for mathematics called the Nemeth Code.
8. Braille is the surprise plot twist in the 2010 movie “The Book of Eli.”
9. There are two versions of braille – contracted and uncontracted.
10. There’s a good reason why braille is on the keypad buttons of drive-through ATMs.

Herramientas de evaluación de la accesibilidad web que comprueban el DOM

Hoy en día, el contenido de muchas páginas web no se basa únicamente en el código HTML, sino que también depende de código JavaScript que añade de forma dinámica contenido a la página. Debido a esto, es importante que una herramienta de evaluación de la accesibilidad web sea capaz de analizar el DOM y no sólo el HTML de una página web.

En Web Accessibility Testing Tools: Who tests the DOM? podemos encontrar una comparativa de herramientas automáticas de evaluación de la accesibilidad web. De las herramientas analizadas, sólo las siguientes comprueban el DOM: Opquast, SortSite, Tenon y WAVE.

Resumen de denuncias sobre accesibilidad web

En Website Accessibility Lawsuits By the Numbers se recoge información sobre las denuncias sobre accesibilidad web presentadas en Estados Unidos.

Desde el 1 de enero de 2015 se han presentado 61 denuncias que se distribuyen en los siguientes sectores:

Curso Web Accessibility

En Udacity está disponible el curso gratuito Web Accessibility: Developing with Empathy. El contenido del curso es:

Lesson 1: Overview

In this lesson you’ll learn why accessibility matters, and who it affects. You’ll also get a first look at the web accessibility guidelines (WAI – Web Accessibility Initiative), understand what “POUR” means for accessibility, and locate checklists to help make your own sites accessible.

Lesson 2: Focus

In this lesson you’ll learn how to make a page usable for anyone navigating with the keyboard. This starts with an introduction to the concept of focus (the element on the page to which keyboard events will be targeted), how to make elements focusable and when, and the order in which focusable elements will be traversed when exploring the page with the keyboard. You’ll also learn how to manage focus in forms, in custom components, pop-ups, and off-screen content.

Lesson 3: Semantics Basics

In this lesson you’ll build on keyboard navigation to make a page work for people who are unable to use a standard user interface, including users who can't see the screen. This requires ensuring assistive technology (such as screen readers) has sufficient information to present an alternative UI. You’ll use a screen reader to try out ordinary form elements and add markup to make them work even better. You’ll understand the accessibility tree the browser constructs from the DOM. Finally, you’ll learn how to built-in HTML features to ensure the accessibility tree accurately reflects the visual UI.

Lesson 4: Semantics Extras

In this lesson, you’ll dive deeper into the screen-reader experience to add hyper-fast navigation. You’ll learn how to arrange headings and label links so screen reader users can fly through your pages! You’ll also learn how to call out “landmarks” into your page to speed up navigation even more. (As a bonus, this “semantic markup” also makes your markup more readable!)

Lesson 5: Semantics - ARIA

In this lesson, you’ll move beyond the native elements of HTML into building custom controls and interactions. Of course you want these to be accessible, and that’s where ARIA comes in – Accessible Rich Internet Applications. You’ll learn how to add attributes to your custom interactions to make them as accessible as native elements. You’ll also learn how to manage these attributes from Javascript as the user interacts with your page.

Lesson 6: Style

In this lesson, you’ll learn the third pillar of Accessibility (after Focus and Semantics): Styling. Your page’s styles need to support highlighting the focus, indicating ARIA states, being zoomed in or out, and viewed by people with limited color or contrast vision. You’ll learn how to audit your page with the Chrome Accessibility Tools and correct any styling issues that pop up, as well as designing with accessibility in mind.

Sobre las demandas por falta de accesibilidad en Estados Unidos

Muy interesante el artículo Troubling Web Accessibility Trends in the U.S. que explica las razones de que en Estados Unidos haya tantas demandas sobre falta de accesibilidad.

La web de ALSA obtiene el nivel AA de accesibilidad web

Hace unos días se anunció que la web de ALSA, la compañía de autobuses, obtuvo el nivel AA de accesibilidad web:

• La Web de ALSA obtiene la Certificación de Accesibilidad AA
• ILUNION concede la Certificación de Accesibilidad nivel 'AA' a la web de ALSA

El anuncio se puede leer en la propia web de ALSA: La web de ALSA obtiene la Certificación de Accesibilidad AA.

En la web de ALSA podemos encontrar el sello otorgado por Ilunion (Technosite):

El sello enlaza a la página web con la información sobre el certificado de accesibilidad web:

Cómo incorporar la accesibilidad web de forma efectiva en la enseñanza del desarrollo web

Como profesor, me ha parecido muy interesante el artículo Effectively including accessibility into web developer training. Los consejos que desarrolla son:

• Do not treat accessibility as its own topic
• Discuss the role of "markup" in Hypertext markup language
• Discuss the Document Object Model, including Object-Oriented Principles like Abstraction, Inheritance, and Encapsulation
• Discuss user input devices
• Discuss quality
• Discuss basic user expectations, including predictability of the interface

¿Usabilidad, accesibilidad? (parte 6)

En el año 2014, a través de una organización llamada CIESPAL impartí un webinar sobre las diferencias y semejanzas de la usabilidad y accesibilidad. Ese webinar fue retirado de Internet, así que lo he rescatado y editado, he mejorado el material audiovisual de apoyo y lo he publicado dentro de mi curso iDESWEB.

La parte 6 incluye: preguntas y respuestas sobre desarrollo web, usabilidad web y accesibilidad web.



Nota: la grabación del webinar que me pasaron no tenía mucha calidad, es lo mejor que me pudieron dar.

¿Usabilidad, accesibilidad? (parte 5)

En el año 2014, a través de una organización llamada CIESPAL impartí un webinar sobre las diferencias y semejanzas de la usabilidad y accesibilidad. Ese webinar fue retirado de Internet, así que lo he rescatado y editado, he mejorado el material audiovisual de apoyo y lo he publicado dentro de mi curso iDESWEB.

La parte 5 incluye: principios de WCAG 2.0 (perceptible, operable, comprensible y robusto), ejemplo de accesibilidad web, definiciones formales de usabilidad y accesibilidad web, referencias a más información.



Nota: la grabación del webinar que me pasaron no tenía mucha calidad, es lo mejor que me pudieron dar.

¿Usabilidad, accesibilidad? (parte 4)

En el año 2014, a través de una organización llamada CIESPAL impartí un webinar sobre las diferencias y semejanzas de la usabilidad y accesibilidad. Ese webinar fue retirado de Internet, así que lo he rescatado y editado, he mejorado el material audiovisual de apoyo y lo he publicado dentro de mi curso iDESWEB.

La parte 4 incluye: accesibilidad web, productos de apoyo, línea braille y lector de pantalla, W3C, WAI, pilares básicos de la accesibilidad web, WCAG 1.0 y 2.0, ISO/IEC 40500:2012, NTE INEN ISO/IEC 40500:2012.



Nota: la grabación del webinar que me pasaron no tenía mucha calidad, es lo mejor que me pudieron dar.

¿Usabilidad, accesibilidad? (parte 3)

En el año 2014, a través de una organización llamada CIESPAL impartí un webinar sobre las diferencias y semejanzas de la usabilidad y accesibilidad. Ese webinar fue retirado de Internet, así que lo he rescatado y editado, he mejorado el material audiovisual de apoyo y lo he publicado dentro de mi curso iDESWEB.

La parte 3 incluye: usabilidad web, ejemplos reales de falta de usabilidad, consejos básicos de Jakob Nielsen y Steve Krug.



Nota: la grabación del webinar que me pasaron no tenía mucha calidad, es lo mejor que me pudieron dar.

¿Usabilidad, accesibilidad? (parte 2)

En el año 2014, a través de una organización llamada CIESPAL impartí un webinar sobre las diferencias y semejanzas de la usabilidad y accesibilidad. Ese webinar fue retirado de Internet, así que lo he rescatado y editado, he mejorado el material audiovisual de apoyo y lo he publicado dentro de mi curso iDESWEB.

La parte 2 incluye: definición de accesibilidad, diseño inclusivo, diseño universal, diseño para todos, accesibilidad en la vida diaria, soluciones erróneas, la accesibilidad ayuda a todas las personas.



Nota: la grabación del webinar que me pasaron no tenía mucha calidad, es lo mejor que me pudieron dar.

¿Usabilidad, accesibilidad? (parte 1)

En el año 2014, a través de una organización llamada CIESPAL impartí un webinar sobre las diferencias y semejanzas de la usabilidad y accesibilidad. Ese webinar fue retirado de Internet, así que lo he rescatado y editado, he mejorado el material audiovisual de apoyo y lo he publicado dentro de mi curso iDESWEB.

La parte 1 incluye: presentación del webinar, orígenes de la usabilidad, usabilidad en la vida diaria.



Nota: la grabación del webinar que me pasaron no tenía mucha calidad, es lo mejor que me pudieron dar.

Prioridad y nivel de conformidad

En el curso Accesibilidad web avanzada: Análisis y corrección de problemas de accesibilidad en páginas y aplicaciones web en el que participo como tutor, un alumno ha planteado la siguiente pregunta:

De acuerdo a la fuentes de información proporcionadas al parecer la mayoría de las legislaciones adoptan como requisito la Prioridad 2 con un Nivel de Conformidad AA.

Con esto se estaría asegurando una accesibilidad en la cual algunos usuarios experimentarían "ciertas dificultades" para acceder a la información. Este punto es el que cubre el Nivel AAA.

Si se opta por diseñar la página para cumplir el Nivel AAA, ¿se vuelve mucho más complejo el código si se hubiese elegido cumplir el Nivel AA?

Mi respuesta ha sido:

Muy interesante la pregunta y la discusión. Mi respuesta es un poco larga, si quieres la respuesta rápida, ve al último párrafo.

En WCAG 1.0, los niveles de prioridad de los puntos de verificación estaban muy bien explicados:

[Prioridad 1]
Un desarrollador de contenidos de páginas Web tiene que satisfacer este punto de verificación. De otra forma, uno o más grupos de usuarios encontrarán imposible acceder a la información del documento. Satisfacer este punto de verificación es un requerimiento básico para que algunos grupos puedan usar los documentos Web.

[Prioridad 2]
Un desarrollador de contenidos de páginas Web debería satisfacer este punto de verificación. De otra forma, uno o más grupos encontrarán dificultades en el acceso a la información del documento. Satisfacer este punto de verificación eliminará importantes barreras de acceso a los documentos Web.

[Prioridad 3]
Un desarrollador de contenidos de páginas Web puede satisfacer este punto de verificación. De otra forma, uno o más grupos de usuarios encontrarán alguna dificultad para acceder a la información del documento. Satisfacer este punto de verificación mejorará la accesibilidad de los documentos Web.

Las prioridades 1 y 2 establecían lo que era obligatorio realizar para eliminar las barreras de accesibilidad. La prioridad 3 establecía problemas secundarios, que podían plantear alguna dificultad, pero que podían ser salvados por el usuario. Los puntos de verificación de prioridad 3 estaban más orientados a mejorar la usabilidad más que la accesibilidad.

¿Y qué ha pasado en WCAG 2.0?

Desgraciadamente, el W3C no ha definido claramente los niveles. En Understanding WCAG Level, Karl Groves, uno de los gurús de la accesibilidad web a nivel mundial, explica que en los borradores previos de WCAG 2.0 sí que se definían los niveles, pero que luego desapareció la definición:

I’ve become increasingly aware of people’s frequent misunderstanding of the purpose of what the term ‘Level’ represents in the Web Content Accessibility Guidelines (WCAG). I hope to help clarify this in this post. Keep in mind, this is my interpretation, because as I’ll mention later, the WCAG Working Group hasn’t been as clear as they should have been.

En Understanding Levels of Conformance del W3C podemos encontrar una definición de los niveles y de que todos son importantes, lo que tampoco aclara mucho.

En What are the Web Content Accessibility Guidelines? de WUHAG podemos encontrar la siguiente explicación:

The Web Content Accessibility Guidelines 2.0 are organised into three levels of conformance:

• Level A – the most basic web accessibility features 
• Level AA – deals with the biggest and most common barriers for disabled users 
• Level AAA – the highest (and most complex) level of web accessibility 

For most websites, Level AA plus some Level AAA is the best target. That’s because some of the highest level guidelines simply can’t be applied to all websites. However, one of the problems with the three-tier structure is that if people know they can’t attain AAA, they won’t even look through the guidelines to see where they can improve accessibility. With all of your projects, you should comply with all the guidelines you can, whether you want Level AAA or not.

Respuesta corta

Por último, en WCAG 2.0 Conformance Requirements podemos leer:

Note 2: It is not recommended that Level AAA conformance be required as a general policy for entire sites because it is not possible to satisfy all Level AAA Success Criteria for some content.

Intentar lograr el nivel AAA puede ser contraproducente.

Sobre los API de accesibilidad

El artículo Accessibility APIs: A Key To Web Accessibility explica que son los API de accesibilidad, su origen y su evolución a lo largo de los últimos años.

Extensiones a WCAG 2.0

En octubre de 2015, W3C anunció que comenzaba el trabajo en el desarrollo de una recomendación para la extensión de WCAG 2.0: Work Begins on Extensions to WCAG 2.0.

En enero 2016 se publicó el primer borrador de Requirements for WCAG 2.0 Extensions.

¿Se complica el uso de WCAG 2.0? Sí, un poco, así que recomiendo la lectura de Extensions to WCAG 2.0 para entenderlo un poco.

Postgrado en Accesibilidad y Diseño para Todos

La Universitat Internacional de Catalunya organiza la sexta edición del Postgrado en Accesibilidad y Diseño para Todos. El curso se desarrollará de octubre de 2016 a julio de 2017.

El curso abarca diferentes temas de la accesibilidad, pero tiene dos módulos relacionados con la accesibilidad web:

1: INTRODUCCIÓN A LA ACCESIBILIDAD Y EL DISEÑO PARA TODOS

1. ¿Qué es la accesibilidad?
   • Concepto de barreras arquitectónicas y en la comunicación.
   • Las barreras más usuales.
   • Principales dificultades: Maniobra, Alcance, Desnivel y Control.
2. Concepto de accesibilidad Universal.
3. Conceptos de normalización técnica
4. Legislación y Normativa:
   • Revisión crítica de la normativa de Accesibilidad
   • Análisis comparado de normativas vigentes. (Nacionales y Europeas)
   • Normas de Accesibilidad en América.
   • Resolución de buenas prácticas.
5. Fundamentos, estudio y promoción de la accesibilidad:
   • Los fundamentos: dimensiones de la accesibilidad y principios del Diseño Universal (Diseño para Todos).
   • La accesibilidad como bien económico y social: contexto, investigación y aplicaciones.
   • Instrumentos y gestión para la promoción de la accesibilidad:
   • Planes de acción: Planes nacionales / Incentivos y ayudas
   • Concienciación y capacitación
   • En balance: una perspectiva multidisciplinar de la promoción de la accesibilidad.
6. La Autonomía como principio en el Marco legal universal.
   • Concepto de Inclusión
   • La autonomía humana: Concepto y características
   • IAFUSS: Criterios básicos de diseño universal que promueven la autonomía humana: Identidad, Accesibilidad, Funcionalidad, Usabilidad, Seguridad y Sostenibilidad.

6: NUEVAS TECNOLOGÍAS: DOMOTICA Y ACCESIBILIDAD A LA SOCIEDAD DE INFORMACIÓN: MULTIMEDIA, CONTENIDOS WEB Y AUDIOVISUALES

1. Accesibilidad a la sociedad de la tecnología de la información (TIC)
2. Páginas y contenido web A, AA y AAA
3. Accesibilidad en las Redes sociales, Aplicaciones y en aplicaciones tecnológicas
4. Accesibilidad audiovisual: Subtitulación y Audiodescripción
5. Nuevas tecnologías: Domótica y Control del entorno
6. Requerimientos de pre-instalación de elementos tecnológicos.
7. Accesibilidad a la Comunicación sensorial en el ocio y la cultura.
   Ejemplos de buenas prácticas: Últimos avances.

Webinar sobre gestión inclusiva del riesgo de desastres

A raíz del reciente terremoto de Ecuador, la Secretaría Técnica para la Gestión Inclusiva en Discapacidades (SETEDIS) organiza el webinar Gestión inclusiva del riesgo de desastres.

El webinar, y si la madre naturaleza lo permite, tendrá lugar este martes 31 de mayo a las 9:30 hora de Ecuador.