Experiencia equivalente

Muy interesantes, llenos de ejemplos, los artículos Equivalent Experiences: What Are They? y Equivalent Experiences: Thinking Equivalently publicados en Smashing Magazine.

El resumen dice:

An equivalent experience is one that has been deliberately conceived of and built to be able to be used by the widest possible range of people. To create an equivalent experience, you must understand all the different ways people interact with technology, as well as common barriers they experience. 

Constructing an equivalent experience may mean changing the way you think about development and design, and potentially reevaluating your existing work. In this article, we’ll address common accessibility issues, and how to best go about improving them so everyone can effortlessly access your content.

¿Qué son las características accesibles de un sitio web?

En What Are Accessibility Features of a Website? explican qué son las características accesibles que ofrecen algunos sitios web:

Website accessibility features are the elements of a site designed to improve the ability of people with disabilities to independently use it. Sometimes websites include extra options specifically to enhance some people's use, but usually accessibility features are integrated into a well-coded website that is accessible by default.

Aunque normalmente estas características que se añaden con muy buenas intenciones, a veces pueden causar problemas a ciertos usuarios:

Sometimes, extra accessibility features are added with the best of intentions, but in practice can actually cause new problems. For example, some websites or digital tools will include their own screen reading technology with the goal of providing easy access to people who are blind, have low vision, or otherwise benefit from hearing content instead of or in addition to seeing it. However, many people who need to use screen readers already use one and likely have a go-to screen reader they prefer for that particular type of content, web browser, or device. In this example, the extra screen reader might interfere with the native screen reader, or vice versa, and accessibility will have been compromised, not improved.

Another common example are keyboard shortcuts. Some websites will offer custom keystroke combinations designed to save the user time or make interaction easier, and sometimes these can be helpful. Other times, however, keyboard shortcuts might interfere with screen reader or other assistive technology commands, or with keyboard shortcuts that users who need them most already have programmed. Again, in this example, something intended to improve accessibility can make the website unusable if not done carefully.

Los enlaces "saltar a" son importantes

Muy interesante la explicación y el código que se ofrece en Skip links are important:

"Skip links" are important. They allow keyboard-only users, sighted or not, to bypass large or repetitive blocks of content. You may have heard of them and wondered what the big deal is. Or your design team may have refused to implement one because they look “ugly”. But they are important, and they don’t have to break the design. 

Lots of links
Many sites have a lot of links at the top of the page. The mega menu isn’t dead! It seems like news websites are particularly bad with this. The Montreal Gazette has over 175 links before reaching the main content. CNN does better, with only 19 links. The Austin Statesman “only” has 18 or so, but the very first link isn’t keyboard-friendly, and it’s the “navigation menu”. The navigation menu has nearly 60 links! Perhaps it’s just as well it’s not keyboard accessible? Stuff has a couple dozen links (and no focus visible - but that’s a story for another day).
All these links before the main content mean that a keyboard-only user has to tab through every single link before they can reach or interact with the main content. This is not a great experience.
Screen reader users are keyboard-only users. Their assistive technology allows them to navigate to different areas of a page, by using landmarks or headings, for example (if they’ve been implemented on the site). But sighted keyboard-only users don’t have that luxury, because browsers don’t (yet?) allow this kind of navigation.

Not just top content
Another area of concern can be social media embeds, such as Twitter feeds. These may have as many as 200 links to tab through before being able to get to the other content. 

Compliance
It’s important to make your visitor’s life easier by allowing them to bypass blocks of links. But it’s not just about making their life easier. It’s also about compliance. WCAG success criteria 2.4.1 Bypass Blocks requires this. I generally don’t like to push accessibility from a compliance perspective. But it’s important to note that factor.

En el artículo se ofrece el código para implementar correctamente los "skip links".

Accesibilidad en Android

Para los usuarios ciegos o con baja visión:

• Talk Back 
• Braille Back
• Color Inversion
• Magnification

Para los usuarios con problemas de movilidad:

• Switch Access
• Voice Access 

Para los usuarios sordos o con problemas de audición:

• YouTube Captions (including YT Live)
• Live Transcribe
• Sound Amplifier
• Play Movie Captions
• Live Captions for slides
• Mono audio support

Para los usuarios con problemas cognitivos o de aprendizaje:

• Select to Speak
• Material Design (consistent, clean User Interface)

16 cosas que se pueden hacer para mejorar la accesibilidad de un sitio web

16 Things to Improve Your Website Accessibility está escrito por Bruce Lawson, un gurú de la accesibilidad web.

Las 16 cosas que propone son:

1) Too Much Content
In brief: break up text into sections with headings and bulleted lists. Use simple language.

2) ReCAPTCHA
In brief: don’t make your users jump through potentially impossible hoops in order to save developer time.

3) Poor Legibility
In brief: make sure text has adequate contrast, is readable and isn’t justified.

4) Distracting Images and Graphics
In brief: allow users to stop any movement; respect their operating system settings; don’t auto-play video.

5) Poor Link Information
In brief: make links identifiable, with unique link text. Warn users if a link will open a new tab or a file.

6) Another Design Error: Removing the Focus Ring
In brief: make sure a keyboard user can always see where they are currently focused.

7) Form Filling
In brief: design form fields that look like form fields, each associated with a label. Don’t disable auto-fill.

8) Provide Text Alternatives for All Images, Video, and Audio
In brief: any information communicated through an image or video must have a textual equivalent.

9) Add Proper Document Language
In brief: let assistive technology know the language that your text is in.

10) Help a Visitor Get Around Your Content
In brief: use HTML landmark elements to help assistive technology users understand and navigate your content.

11) Use HTML Properly
In brief: understand the semantics and default behaviors of HTML elements; use the right element for your content.

12) Complex Interactions
In brief: Use ARIA only when a native semantic doesn’t exist; use the design patterns and code suggested by W3C.

13) Frameworks
In brief: frameworks aren’t inherently inaccessible if you choose your components wisely.

14) Content Management Systems and Site Builders
In brief: choose CMS and Site Builder themes carefully.

15) PDF
In brief: PDFs can be made accessible. Make sure your PDFs are so.

16) Keep Testing
In brief: test! With real people, if you can.

El atributo placeholder no es una etiqueta, no sustituye a label

En Placeholder Attribute Is Not A Label!:

Just so we’re all clear on this, the HTML5 placeholder attribute in a text input is not a replacement for the label element. Period. The placeholder should only be used as a brief example of the text to be entered. 

Besides inconsistent support for screen readers, using a placeholder as an input label can create usability problems and issues for those with cognitive impairments. For example, how does one review the information entered if the placeholder is now gone? 

The placeholder should be used like a title attribute (tooltip); it provides only supplementary information. If the information is required for the user (such as a strict text format) then this should be conveyed in the main content of the page, not in an attribute.

Pautas de diseño para personas mayores

En 4 Tips for Designing Apps for Older Users se dan estos cuatro consejos:

1. Haz el texto fácil de leer
2. Agranda el tamaño de los elementos interactivos
3. Divide las tareas y haz una cosa cada vez
4. Mantén los textos claros y simples

Novedades de WCAG 2.2

 El 11 de agosto de 2020 se publicó una nueva versión de WCAG 2.2. Todavía sigue siendo "working draft", pero el documento ha avanzado bastante respecto la versión anterior. Las principales diferencias respecto a WCAG 2.1 son nueve nuevos criterios de éxito:

• Accessible Authentication
• Dragging
• Findable Help
• Fixed Reference Points
• Focus Appearance (Minimum)
• Focus Appearance (Enhanced)
• Hidden Controls
• Pointer Target Spacing
• Redundant Entry