Modos de funcionamiento de un lector de pantallas

En How Windows Screen Readers Work on the Web se explican los diferentes modos de funcionamiento de un lector de pantallas:

• Document mode: The most common mode used to access web pages using Windows screen readers will be referred to here as “document” mode. This is also often called “virtual” or “browse” mode, used as proprietary terminology by specific screen readers. This is the default mode that is invoked when a page loads in the browser. This mode may be overridden by web pages who auto focus a form field or apply certain WAI-ARIA roles.
• Application mode: When users need to interact with web pages such as entering text into a form field, document mode must be disabled and the screen reader must be switched into “application mode.” This mode also goes by the proprietary screen reader terms of “Forms” and “Focus” mode. Application mode is necessary to interact with forms, dialogs and web applications. In application mode, all of the keystrokes which would normally manipulate the invisible document cursor are instead passed through to the web page. This allows a user to enter text into a form field or use the arrow keys to traverse the options in a drop-down. Application mode is usually invoked by placing focus on a form field and pressing a keystroke such as the Enter key. Some screen readers will automatically switch into application mode when a form field is encountered. Application mode can also be invoked by web page authors through the application of certain WAI-ARIA roles such as role="dialog" or role="application" to page elements.

Ejemplo de sitio web con características para mejorar la accesibilidad

Fluid es un proyecto colaborativo que tiene como objetivo mejorar la experiencia de usuario y la inclusión de las personas con discapacidad en los proyectos de open source software.

En la siguiente dirección:

http://build.fluidproject.org/prefsEditors/demos/explorationTool/

podemos encontrar un ejemplo de panel con opciones para mejorar la accesibilidad de un sitio web.

aXe 2.0

En Introducing aXe 2.0! se presenta la nueva versión de esta herramienta "open source":

We’re excited to announce the launch of aXe 2.0, an updated version of our open source accessibility testing engine! Since the initial announcement last year, we’ve made improvements to many rules and checks, introduced a plugin system, added configuration options, and enhanced our project’s infrastructure. We’ve seen adoption among developers and QA’s with our Chrome and Firefox extensions, plus new integrations with notable development tools. We’ve also grown our core team and held our first hackathon!
I wrote this post to recap our efforts this year and introduce you to the newest version of aXe. Read on to learn more about the evolution of our accessibility testing engine, and how you can get involved.

Ejemplo de asistente para configurar la accesibilidad de un sitio web

Floe (flexible learning for open education) es un proyecto que tiene como objetivo mejorar el aprendizaje en línea para que sea inclusivo.

En la siguiente dirección:

http://first-discovery.floeproject.org/demos/prefsServerIntegration/

se encuentra un ejemplo de asistente que ayuda a configurar la accesibilidad de un sitio web.

Entre otras cosas, el asistente permite elegir el idioma,

la combinación de color y

el tamaño del texto.

La accesibilidad web resumida en un gráfico

Me encontré este gráfico en Twitter, no sé cuál es la fuente original:

El texto alternativo para esta imagen podría ser: representación gráfica de cuatro tipos de discapacidades (cognitiva, motora, visual y auditiva) con los elementos de una página web (interfaz, texto, multimedia) que pueden suponer una barrera de accesibilidad.

Ejemplo de sitio web con y sin accesibilidad

Acme Widgets es un sitio web de demostración de cómo crear un sitio web accesible. La descripción dice:

This web site includes sets of pages to test accessible and non-accessible methods for writing HTML. This will allow us to test patterns on multiple devices and assistive technologies. It will also give us controls for doing automated testing. The menu to the left will contain the test pages.

Un juego para ciegos

No lo he podido probar, pero me parece curiosa la propuesta descrita en Audio Game Review: A Blind Legend from DOWiNO and France Culture.

UdeG, líder en accesibilidad web entre 18 IES mexicanas

El mes pasado leí la noticia UdeG, líder en accesibilidad web entre 18 IES mexicanas:

Prueba de ello es que la página de inicio del portal de la Universidad de Guadalajara es 100 por ciento accesible para personas con distintos tipos de discapacidad; entre 18 instituciones de educación superior públicas y privadas, ocupa el primer lugar en el Ranking de Accesibilidad Web Universidades, según un estudio publicado por la empresa Hearcolors, el cual es una medición elaborada a partir del análisis de la página de inicio de cada portal.

“Dice que somos 100 por ciento accesibles. Las otras universidades evaluadas se encuentran de 54 por ciento hacia abajo”, dijo el doctor Luis Alberto Gutiérrez Díaz de León, coordinador general de Tecnologías de Información (CGTI) de la UdeG.

La base de la accesibilidad web

The web accessibility basics es una pequeña guía que explica lo más importante de la accesibilidad web:

• Alternative text for images
• Labeling form fields
• Document structure: heading structure, landmarks, lists
• Tables
• Color contrast

¿Qué es un Director de accesibilidad?

En What Being A Chief Accessibility Officer Means se explica en qué consiste el cargo de Director de accesibilidad:

In my role, I will manage internal and external accessibility projects.  I will ensure that accessibility best practices will be followed within the company and help clients meet their accessibility needs, including website and product accessibility.  I will consult on accessibility and inclusion issues that clients face from the employee to the customer level.

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.