Your fortnightly frequent11y newsletter, brought to you by @ChrisBAshton:
Emojis and accessibility: How to use them properly
- Ryan Tan shares some tips for accessible emoji usage, mostly in terms of screen reader support, and covering a mixture of ‘design tips’ vs ‘everyday content’:
- Design: on buttons, don’t use emojis to replace words. E.g. use “Like” rather than “π”, which could be ambiguous.
- Don’t use repeated emojis, e.g. “Flight plans βοΈβοΈβοΈ” as each emoji has alt text read out by a screen reader, and this is unnecessarily noisy.
- Put your text / call to action first, then emoji, i.e. “Let’s go π” vs “π Let’s go”.
- Put your emoji at the end of the sentence, not mid-sentence.
- Use widely-known emojis to cater for as many users as possible, e.g. “Hello π” vs “Hello π”.
- Avoid emoticons, i.e.
:)vs π. Some emoticons are particularly difficult to understand as a screen reader user, e.g. the ‘shrug’ emoticon Β―_(γ)_/Β―. - Controversially, Ryan suggests you “avoid dark or light skin colour in emoji use” and use the ‘default’ yellow for emojis that have a high contrast on both light and dark backgrounds. There’s a linked article in one of the comments that goes into this topic further, suggesting using emojis that don’t communicate race or gender at all, such as “πΈ”, or to always use the full range of skin tones such as “βπΏβπΎβπ½βπΌβπ»”.
Our development approach for accessible front-end code
- This guide by the BBC walks through their approach for implementing front-end changes, e.g. implementing a component.
- Look at the screen reader UX; ask the UX designer for the required documentation if it is missing. It should cover the focus order, the announced content for screen readers, etc.
- Read accessibility acceptance criteria
- Write the HTML
- Check with supported assistive technology (AT). You should do this before adding CSS, and then again before and after adding JavaScript. They advise against doing all your testing at the end, as this “may be more time consuming to debug”, since you won’t necessarily know which layer caused the bug.
- Write automated tests for accessibility
- Get it reviewed (code review by engineers, design review by designers)
- Hold an accessibility swarm, resolve any bugs, then the component is ready for Test.
Whose nine is it anyway? (Feedback on the WCAG 2.2 working draft)
- This article – which I read mostly for the terrible headline – was written by TPGi, an “accessibility solutions provider”, working with a consortium of big names in a11y. TPGi feel that the 9 new Success Criteria recently proposed for WCAG 2.2 all need some clarification and improvement (with the exception of 2.5.7 Dragging Movements, which TPGi are pleased with).
- It’s a long article of recommendations, each linking to separate GitHub issues raised by TPGi. But to take an example, some feedback for “3.3.7 Accessible Authentication” includes ensuring copy-paste is not blocked: “The βIntentβ section of the non-normative Understanding document mentions that copy-paste must not be blocked, but this is not in the text of the SC. We feel it would need to be in order to ensure that itβs a requirement.”.
- It’s fascinating to watch the community shape the WCAG standards of the future, and inspiring that any one of us has the power to propose improvements.
This individual shows how he lives his everyday life as a blind person
- A colleague shared this in our work Slack. Anthony S. Ferraro (asfvsion) demonstrates how he completes everyday tasks as a blind person. He covers the very basics (how to pour a cup of water; by keeping one finger over the rim of the cup and stopping pouring when he feels liquid), to the extreme (how to skateboard on a half-pipe; by mapping out the area with his cane and then basically going for it). He shows just how important tactile controls / labels are on products, e.g. the oven and washing machine, which would be extremely difficult to use otherwise.
TikTok Adds New Accessibility Overview To Provide Additional Support for Users
- TikTok adds photosensitivity warnings to its videos, and allows viewers to opt out of viewing them. It’s also educational; warning labels are shown to creators on the specific effects that may trigger photosensitive epilepsy.
- TikTok also offers auto captions and text-to-speech tools, and the ability to switch between animated and static thumbnails.
- These features are described on TikTok’s Accessibility Overview page, which serve as a handy reference point.
- Anecdotally, TikTok is often seen as very accessible compared to other social media platforms, so it’s always worth noting the improvements they’re making in this area.
Overview of accessibility testing using DevTools (Microsoft)
- A guide by the Microsoft Edge DevTools team, though almost all of it applies to any modern browser.
- This mammoth article is a 23 minute read, and covers how to use DevTools for automated accessibility testing, by working through the accessibility ‘warnings’ in the console. It then describes how you should manually test your page by:
- Resizing the viewport to simulate a zoomed in or mobile device.
- Attempt to interact with the page with a keyboard, and keep an eye out for focus styles.
- Inspecting the Accessibility Tree to check for elements with a “generic” role (usually attributed to being encoded as a
divorspanrather than abutton), which won’t be available to users of assistive technology. - Simulating hover/focus states on interactable elements and checking their contrast.
- Testing with dark and light themes.
- Emulating vision deficiencies with things like blur filters.
- Verifying that the page respects the
prefers-reduced-motionmedia query.
- It’s worth at least a skim through – chances are you’ll learn something!
- This is a website that gamifies teaching you sign language. It uses your webcam to recognise sign language hand gestures, and works extremely well! You gradually progress through different levels of difficulty, eventually covering the entire alphabet.
- The game is an initiative by digital creative studio Hello Monday and the American Society for Deaf Children.
Why your brain loves closed captioning
- 18% of the UK population regularly uses closed captioning, of which only 1 in 5 actually have hearing difficulties. Why?
- The article cites lots of reasons, such as helping with learning a new language. It can also be useful for people with autism and ADHD by providing “deeper context clues”. It also covers situational impairments, such as when sirens or other noises from outside drown out the sound of the movie. And of course, captions allow you to catch up on content on your phone, without disturbing the person next to you.
- “We can read faster than we can speak,” says Dr. Stephen Christman, a cognitive psychologist and professor of psychology at The University of Toledo. “With closed captioning on, the viewer can quickly read the current dialogue and then turn their attention back to the visual action and use their knowledge of what is being said β and what is about to be said β to enhance their appreciation of the nonverbal/visual aspects of what is happening on the screen.”
- The article cites some downsides, however: “It can really wreck a great punchline or suspenseful twist, making it ill-suited to anything that relies on surprise. It can be irritating when it’s poorly executed and riddled with errors.”
- Over 400 accessibility advocates and developers have signed an open letter calling on the industry to avoid using controversial “accessibility overlay products”, the most famous of which is accessiBe. These ‘widgets’ you can install on your website often claim to make your site WCAG compliant, by pulling in third party scripts to ‘fix’ problems such as missing alt text.
- The document lists first-hand accounts from people with disabilities struggling to use websites that have implemented overlays.
- It also describes the privacy issues of such overlays, which detect when assistive technology is running on the device, exposing the fact that the end user has a disability, with no option for them to choose whether or not to disclose it themselves.
- The document recommends that people fix the underlying accessibility issues at source, and abandon use of quick fixes such as these, as they are not effective.
- blindaccessibilitytips.com is a resource for visually-impaired people to learn how to use assistive technology. It covers tasks like navigating the web, editing content in Microsoft Word, and using Windows File Explorer. The site is focused on Windows users using JAWS or NVDA. Though still clearly in early development, it’s a nice attempt to consolidate tutorials in one place.
Did you know that you can subscribe to dai11y, week11y, fortnight11y or month11y updates! Every newsletter gets the same content; it is your choice to have short, regular emails or longer, less frequent ones. Curated with β₯ by developer @ChrisBAshton.
