La importancia de los encabezados

El artículo The Importance of Heading Levels for Assistive Technology explica lo importante que son los encabezados para la navegación por una página web:

The HTML specification describes six heading elements: h1, h2, h3, h4, h5, and h6. The number in each of these heading elements reflects its priority, with h1 being the most general and h6 being the most specific. 

This is an important thing to know! WebAIM’s 2017 Screen Reader survey tells us that navigating via headings is the most important way people who rely on assistive technology locate information. Because of this, it’s important to craft your website’s headings properly.

Guía de estilo para crear contenido apropiado para las personas con dislexia

La Dyslexia Style Guide 2018: Creating Dyslexia Friendly Content de la British Dyslexia Association:

This Style Guide provides principles that can help ensure that written material
considers the difficulties experienced by some dyslexic people and allows for the use
of text to speech to facilitate ease of reading. Adopting best practice for dyslexic
readers has the advantage of making all written communication easier on the eye for
everyone.

When making changes consider all the ways that you use written communications,
such as emails, presentations, web pages and printed materials. Consider these
principles in combination with other accessibility guidance such as the Web
Accessibility Content Guidelines (WCAG).

Readable Fonts

• Use sans serif fonts, such as Arial and Comic Sans, as letters can appear less
crowded. Alternatives include Verdana, Tahoma, Century Gothic, Trebuchet,
Calibri, Open Sans.
• Font size should be 12-14 point or equivalent (e.g. 1-1.2em / 16-19 px). Some
dyslexic readers may request a larger font.
• Larger inter-letter / character spacing (sometimes called tracking) improves
readability, ideally around 35% of the average letter width. If letter spacing is
excessive it can reduce readability.
• Inter-word spacing should be at least 3.5 times the inter-letter spacing.
• Larger line spacing improves readability and should be proportional to inter-word
spacing; 1.5 / 150% is preferable.
• Avoid Underlining and italics as this can make the text appear to run together and
cause crowding. Use bold for emphasis.
• Avoid text in uppercase / capital letters and small caps, which can be less familiar
to the reader and harder to read.

Headings and Structure

• Use headings and styles to create consistent structure to help people navigate
through your content.
In Word, you’ll find these tools in the ‘Home’ tab:
• For headings, use a font size that is at least 20% larger than the normal text. If
further emphasis is required, then use bold.
• Use formatting tools for text alignment, justification, indents, lists, line and
paragraph spacing to support assistive technology users.
In Word, you’ll find these tools in the ‘Layout’ tab:
• Add extra space around headings and between paragraphs.
• Ensure hyperlinks look different from headings and normal text.

Colour

• Use single colour backgrounds. Avoid background patterns or pictures and
distracting surrounds.
• Use sufficient contrast levels between background and text.
• Use dark coloured text on a light (not white) background.
• Avoid green and red/pink, as these colours are difficult for those who have colour
vision deficiencies (colour blindness).
• Consider alternatives to white backgrounds for paper, computer and visual aids
such as whiteboards. White can appear too dazzling. Use cream or a soft pastel
colour. Some dyslexic people will have their own colour preference.
• When printing, use matt paper rather than gloss. Paper should be thick enough to
prevent the other side showing through.

Layout

• Left align text, without justification.
• Avoid multiple columns (as used in newspapers).
• Lines should not be too long: 60 to 70 characters.
• Use white space to remove clutter near text and group related content.
• Break up the text with regular section headings in long documents and include a
table of contents.

Writing Style

• Use active rather than passive voice.
• Be concise; avoid using long, dense paragraphs.
• Use short, simple sentences in a direct style.
• Use images to support text. Flow charts are ideal for explaining procedures.
Pictograms and graphics can help to locate and support information in the text.
• Consider using bullet points and numbering rather than continuous prose.
• Give instructions clearly.
• Avoid double negatives.
• Avoid abbreviations where possible; always provide the expanded form when first
used.
• Provide a glossary of abbreviations and jargon.

Inicio del curso gratuito "Discapacidad y envejecimiento activo. Soportes tecnológicos" segunda edición

Este 18 de marzo se inicia la segunda edición del curso Discapacidad y envejecimiento activo. Soportes tecnológicos. en el que participó con el módulo sobre accesibilidad web.

El contenido del curso es:

1. Módulo 1. Accesibilidad e inclusión social
2. Módulo 2. Accesibilidad en la Web y Participación social
3. Módulo 3. Educación para la salud, intervención social y TIC
4. Módulo 4. TIC y vida independiente
5. Módulo 5. TIC y tratamiento de la memoria
6. Módulo 6. Las TIC en los Recursos Sociales
7. Módulo 7. Aplicaciones de la Telemedicina
8. Módulo 8. Experiencias internacionales y TIC

Las administraciones están obligadas a implementar la normativa de accesibilidad de webs y apps del sector público

Publicado en la sección de noticias del CERMI, Las administraciones están obligadas a implementar la normativa de accesibilidad de webs y apps del sector público y a exigir su cumplimiento:

La profesora titular de Derecho Civil de la Universidad de Granada y patrona de la Fundación Derecho y Discapacidad, Esperanza Alcaín, ha señalado este lunes que “las administraciones no solo están obligadas a implementar la normativa en materia de accesibilidad de páginas webs y aplicaciones móviles del sector público, sino que también tienen que exigir su cumplimiento a toda la sociedad”. 

Así se ha manifestado esta experta durante la presentación de una guía jurídica y técnica de orientación para el cumplimiento del Real Decreto 1112/2018, de 7 de septiembre, con el que  se incorpora al ordenamiento jurídico español la Directiva (UE) 2016/2102, del Parlamento Europeo y del Consejo, de 26 de octubre de 2016, sobre la accesibilidad de los sitios web y aplicaciones para dispositivos móviles de los organismos del sector público, que incluye la Administración General del Estado, administraciones autonómicas y locales, las entidades públicas y privadas dependientes de ellas, las universidades públicas, la Administración de Justicia, el Congreso de los Diputados, el Senado, el Consejo de Estado, el Consejo Económico y Social, el Consejo General del Poder Judicial, el Tribunal Constitucional, el Tribunal de Cuentas, el Defensor del Pueblo y el Banco de España, entre otros.

Cuando se diseña para las personas con discapacidad, todos nos beneficiamos

When we design for disability, we all benefit es una charla TEDx en la que se defiende que un diseño inclusivo no solo ayuda a las personas con discapacidad, sino a todas las personas:

"I believe that losing my hearing was one of the greatest gifts I've ever received," says Elise Roy. As a disability rights lawyer and design thinker, she knows that being Deaf gives her a unique way of experiencing and reframing the world -- a perspective that could solve some of our largest problems. As she says: "When we design for disability first, you often stumble upon solutions that are better than those when we design for the norm."

Informes de la Oficina de Atención a la Discapacidad

En Informes de la OADIS están disponibles los informes emitidos por la Oficina de Atención a la Discapacidad desde el año 2005 hasta la actualidad.

En el informe anual del año 2017, entre alguno de los expedientes podemos encontrar:

• Ausencia de accesibilidad a la pagina. web de la Asamblea de Madrid
• Ausencia de accesibilidad a la página web del Ayuntamiento de Madrid
• Ausencia de subtitulación en página web de la Guardia Civil
• Ausencia de subtitulación en canal YouTube y vídeos de la Policía Naciona
• Barreras identificadas en páginas web de organismos públicos-Ayuntamiento Burgos
• Barreras identificadas en páginas web de organismos públicos- Defensor del Pueblo Navarra

Y muchos otros.

Características de accesibilidad de los navegadores web

Las características que ofrecen los navegadores web para mejorar la experiencia de usuario relacionada con la accesibilidad:

• Internet Explorer
• Edge
• Chrome
• Firefox

Cómo navega una persona con un lector de pantalla

Muy interesante lo que se explica en How A Screen Reader User Accesses The Web: A Smashing Video. Incluye un vídeo con una sesión de navegación de una persona ciega con un lector de pantalla.

Conocer a las personas con discapacidad

Eso no se pregunta es un programa de Telemadrid que tiene como objetivo combatir los prejuicios y la discriminación de ciertos colectivos:

Ciegos, gitanos, musulmanes, negros, obesos, religiosos, transexuales, parados de larga duración, personas con Asperger, de baja estatura, síndrome de Down, en silla de ruedas... Doce colectivos marginados responden a preguntas anónimas ante la cámara en un tono desenfadado, sin dramatismo y con humor, para combatir los prejuicios y la discriminación.

Hay un vídeo sobre las personas ciegas:


Y otro sobre las personas en silla de ruedas:

Errores de accesibilidad en el sitio web de Apple

En How to learn from Apple's mistakes on website accessibility se explican algunos errores de accesibilidad del sitio web de Apple:

There were multiple difficulties noted. The key issues were:

• Insufficiently labelled input fields (meaning screenreaders are left unsure of what information is needed in the boxes they're asked to enter information into)

• Links with identical text, that lead to different locations. While this is not a failure of WCAG (Web Content Accessibility Guidelines), it is not good practise.

• Dynamic content not made accessible to screenreader users, e.g. auto-suggest search results

Further difficulties noted in the complaint were:

• Unable to browse and purchase electronics such as the iPhone, iPad, and MacBook Pro laptop

• Inability to make service appointments online

• Trouble finding a store

Curso gratuito "Discapacidad y envejecimiento activo. Soportes tecnológicos" segunda edición

Ya está abierta la inscripción a la segunda edición del curso Discapacidad y envejecimiento activo. Soportes tecnológicos. en el que participó con el módulo sobre accesibilidad web. El curso comienza el 18 de marzo de 2019 y tiene una duración estimada de 8 semanas.

El contenido del curso es:

1. Módulo 1. Accesibilidad e inclusión social
2. Módulo 2. Accesibilidad en la Web y Participación social
3. Módulo 3. Educación para la salud, intervención social y TIC
4. Módulo 4. TIC y vida independiente
5. Módulo 5. TIC y tratamiento de la memoria
6. Módulo 6. Las TIC en los Recursos Sociales
7. Módulo 7. Aplicaciones de la Telemedicina
8. Módulo 8. Experiencias internacionales y TIC

En España se tiene que aplicar WCAG 2.1

En Las guías del Observatorio de Accesibilidad Web se actualizan a WCAG 2.1, del Portal Administración Electrónica del Gobierno de España, se confirma que en España se debe aplicar WCAG 2.1:

El 20 de septiembre de 2018 entró en vigor el Real Decreto 1112/2018, de 7 de septiembre, sobre accesibilidad de los sitios web y aplicaciones para dispositivos móviles del sector público(Abre en nueva ventana) , que traspone al ordenamiento jurídico español la Directiva (UE) 2016/21022(Abre en nueva ventana) .

En el Real Decreto se establecen como requisitos de accesibilidad a cumplir los indicados en la norma armonizada que la Comisión Europea ha publicado el 21 de diciembre de 2018 mediante la Decisión de Ejecución (UE) 2018/2048. Este estándar armonizado está basado en la última versión de la norma EN 301 549 V2.1.2 (2018-08)(Abre en nueva ventana) “Requisitos de accesibilidad de productos y servicios TIC” que a su vez, a un nivel técnico, converge en última instancia con las nuevas WCAG 2.1(Abre en nueva ventana) del W3C (Pautas de Accesibilidad para el Contenido Web).

Bajo este nuevo marco, el Ministerio de Política Territorial y Función Pública, a través del Observatorio de Accesibilidad Web, ha adaptado las guías previamente existentes que se ven afectadas por los nuevos requisitos del estándar armonizado y, por consiguiente, por las WCAG 2.1.

Inclusive Components

El sitio web Inclusive Components es un blog con patrones de diseño accesibles. Se define como:

A blog trying to be a pattern library. All about designing inclusive web interfaces, piece by piece.

Los problemas de las personas sordas y algunos consejos

Muy interesante el artículo Inclusive Design and Deafness que proporciona los siguientes consejos:

• Caption for video and spoken sounds and/or provide transcripts for podcasts.
• Provide (colored) light when using sound to give an alert or action. (E.g. public transport check- in and -out terminals.)
• Make screens readable with good use of colors, e.g, red for warning, yellow for notice, green for good, etc. (E.g. public transport check- in and -out terminals.)
• Don’t require a phone number unless you provide text and/or WhatsApp service.
• Don’t be available only by phone, provide email, WhatsApp and/or live chat.
• Provide a ‘Comments’ text field so people can indicate for example if they are deaf and prefer to not communicate by phone.
• Avoid the use of a donotreply@yourdomain.com email. Especially with important emails.
• Make sure your digital form/database takes into account if a client is deaf, blind, uses a wheelchair, etc. This way people can keep track and not make mistakes with their clients. E.g. a doctor office or hospital must be able to register such things with general patient information. (I know for a fact those systems don’t make that possible.)
• I’ve been informed that the new privacy laws make this difficult. As long as this is an optional field filled in per request of the client it should not be a problem. I rather have they register I’m deaf than get phone calls I can’t do anything with. We shouldn’t use GDPR laws as an easy way out of being inclusive.
• When organizing a congress, provide live captions. They are not only useful for deaf and HoH people. But also for hearing people who might have missed something or are not fluid at the language being spoken. Reading it at their pace helps.
• In the Netherlands, there is only a handful of text transcribers that can transcribe in English for me. It has happened that I had to miss a congress last minute because the transcriber was sick. Also going to congresses abroad is not really viable for me. I would have to pay myself for the plane ticket, hotel, etc. for the transcriber. Imagine if all congresses had live transcription as a standard. I would be able just like everybody else, to decide last minute if I want to attend, what I want to attend and where I want to go to attend. That is being deaf inclusive.

Relación entre accesibilidad y usabilidad

En el siguiente vídeo se explica la relación que existe entre estas dos dimensiones que son factores esenciales para la calidad de un sitio web:

Los captchas apestan

Los captchas son una gran barrera de accesibilidad. Incluso los captchas que se anuncian como accesibles suelen ser no accesibles.

En Catpchas Suck se muestran algunos ejemplos reales de lo terribles que pueden llegar a ser los captchas, tanto desde el punto de vista de la usabilidad como de la accesibilidad.

Además, se ofrecen algunas alternativas:

Check out these articles on Captcha alternatives:

9 Captcha Alternatives That Won’t Wreck Your UX (dtelepathy.com)
Not all of the 9 methods are accessible, so focus your attention on number 3 – “Biometric security”, number 4 – “Text message verification” and number 6 – “The honeypot method”.

Think Your Site Needs A CAPTCHA? (usertesting.com)
Same as with the previous article: not all alternatives they suggest are accessible. Focus your attention on “Honeypots”, “Timestamps” and “Verified sign in”.

Análisis de la accesibilidad de los sitios web de los colegios en Estados Unidos

En Accessibility in mind? A nationwide study of K-12 Web sites in the United States se ha publicado un estudio de la accesibilidad de los sitios web de los colegios en Estados Unidos.

El resumen del artículo dice:

Web site accessibility is a serious civil rights concern that has historically been difficult to measure and to establish success criteria for. By conducting automated accessibility analyses via the WAVE tool, we calculated accessibility norms of a statistically appropriate, random sample of K–12 school Web sites across the U.S. (n = 6,226) and merged results with national datasets to determine how school demographics influence accessibility. Results indicated that schools across all demographic groups generally struggle to make their Web sites fully accessible to their universe of diverse users and revealed that the concrete, highest-impact steps that schools nationwide need to take to improve accessibility include improving poor contrast between text and backgrounds, providing alternative text to images and other visual elements, and labeling form controls.

La importancia de usar etiquetas (labels) en los formularios

El artículo Labels Required explica por qué es importante identificar los controles de los formularios:

Using the label element checks all of the boxes for inclusivity when properly formatted: it's directly associated with a form element (either with the for attribute or by nesting the element inside the label), displayed as text by standard browsers, and spoken by screen readers. Clicking or tapping on a label will focus the associated element (or select the checkbox or radio option), and when you focus directly on the element, screen readers will read the label. Ensuring that both visual and auditory cues are present and intelligible are critical when you consider that in WebAIM's annual screen reader study screen reader users report relying on a mix of both, with the majority using audio exclusively.

Hay otras alternativas a label, pero en este artículo se explica que no siempre funcionan:

It's possible to use markup other than label, but when you do, users may see or hear blank form elements and have no idea what to enter. 

At first glance, placeholder does a very similar job to label: it's displayed as text (within text inputs, specifically) and read aloud by screen readers. The placeholder has a purpose, though, that diverges from that of a label. It's meant to be a suggestion, formatting guideline, or hint that is ultimately replaced by user input. So while a placeholder may seem like a worthy label alternate on the first pass through a form, once a data value is entered, that label is gone. And that's just one of several reasons why placeholder is an inadequate substitute label. It's much more valuable when used as a guide. 

The aria-label attribute provides label text to screen readers for identifying interactive elements, or elements with ARIA roles, and it produces the same audio feedback as the label element. There's no reason to use both on the same form field, and we actually recommend against trying.

La conclusión es clara:

Out of the box, the label element is all we need to indentify fields in an accessible way. Used in combination with accessible hiding and other helper elements, like placeholder or icons, we can ensure that a form element's purpose is clearly communicated to all users.

Consejos para el rediseño de la web de Renfe

Renfe ha sacado a contratación el rediseño de su sitio web.

En Twitter podemos encontrar muchas sugerencias para su mejora, por ejemplo, este hilo:

La noticia de que Renfe invertirá 700.000€ en mejorar su web nos ha alegrado tanto a @marcborras y a mi que hemos decidido hacer un hilo con 17 predicciones de cosas que esta vez, ya sí que sí, seguro que van a arreglar. Empezamos 👇 pic.twitter.com/y4SR7fFSgZ

— Carlos Sánchez (@chocotuits) 3 de febrero de 2019

La web de Renfe será accesible... o quizás no

La semana pasada se publicó la noticia Renfe invertirá 700.000 euros para arreglar su web de una vez por todas:

Renfe ha pisado el acelerador nada más aprobar su plan estratégico. Si el mismo día en el que se puso en marcha la operadora anunció la licitación del primer paquete de trenes para renovar su flota, hoy es el día de su página web. La operadora ferroviaria ha licitado el contrato, valorado en 700.000 euros, para renovar su principal canal digital de contacto con sus clientes.
La mejora de la web de Renfe es una de las medidas más demandadas por sus usuarios desde hace años. Esto ha provocado que esta licitación haya sido una de las primeras en ponerse en marcha. Una decisión muy simbólica que tanto el presidente de la compañía, Isaías Táboas, como su director de estrategia, Manel Villalante, han querido priorizar para ponerla en marcha lo antes posible.
El proyecto licitado tiene por objetivo mejorar la usabilidad de la web de Renfe. Uno de los elementos más destacados en el plan estratégico de la operadora. En el caso de la web la intención es desterrar todos los actuales problemas que genera la actual y dotarla de las capacidades que permitan mejorar el rendimiento y el posicionamiento de los contenidos.
Hay que recordar que la última gran renovación del principal canal digital de Renfe se realizó hace 10 años. Un periodo en el que regularmente se han ido introduciendo mejoras pero que el tiempo ha dejado anticuado.

Y sorprendente este dato:

En concreto, entre enero y agosto el 46,8% del total de billetes se vendió a través de la web. Renfe comercializó 16,8 millones de plazas de tren a través de su portal de Internet.

Y todo ello, a pesar de los problemas de usabilidad y accesibilidad que tiene la web de Renfe.