Your fortnightly frequent11y newsletter, brought to you by @ChrisBAshton:

Coursera accessibility courses

• A recommendation by my colleague Stephanie Hill: “Top Web Accessibility Courses” by Coursera. Some interesting ones highlighted below.
• Design:
  • An Introduction to Accessibility and Inclusive Design
  • Web Design for Everybody Capstone
  • Foundations of User Experience (UX) Design
  • Basics of Inclusive Design for Online Education
• Testing:
  • Test Accessibility of your Design with A11ygator
  • Testing for Web Accessibility With Accessibility Insights
• Miscellaneous:
  • Disability Awareness and Support
  • Introduction to Accessible Web Development

Managing focus in the shadow DOM

• Web developer Nolan Lawson writes about the difficulties of managing focus on a web page which makes use of the shadow DOM; parts of the page that are encapsulated and unable to be interacted with programmatically in the same way as regular DOM elements.
• If you’re implementing a modal dialog, you need to manage focus and prevent the user from tabbing outside of the modal window whilst it’s active. This is easier said than done; a common implementation is to use querySelectorAll to find all interactive elements in the page, finding the first and last focusable elements within the modal, and then using a listener to hook into the tab key and overriding where it triggers the focus. But document.querySelectorAll won’t return any shadow DOM elements, so the browser could still allow you to tab into a shadow DOM area outside of the modal.
• Nolan proposes a new API; element.getNextTabbableElement() and element.getPreviousTabbableElement(), delegating this heavy lifting to the browser. For now, we’re left manually traversing through the DOM and inspecting each element recursively to see if it has a shadow DOM child, to create our list of all interactive elements in the page.
• My old team at the BBC also wrote about how they migrated away from iframes to the shadow DOM.

Coronation Street highlights the challenges faced by disabled people working from home during the pandemic

• This story focuses on Izzy Armstrong, played by Cherylee Houston. The storyline goes that Izzy is clinically vulnerable and has been shielding and working from home throughout the pandemic. Her job is now at risk as her boss insists she returns to the office.
• The actor Cherylee has in real life been shielding since March 2020, as when she was 23 she was diagnosed with a rare condition called Ehlers-Danlos syndrome.
• This will be the first time viewers will see Izzy in her real-life home environment. The scenes were filmed by Cherylee and her partner at their Manchester home.
• “Izzy Armstrong’s upcoming storyline on Coronation Street highlights the reality of many disabled people’s struggles across the UK.”

Why debate non-text contrast of UI elements?

• An article by Dave House, describing how WCAG 2.1 Non-text contrast has enough wiggle-room in it that designers often dismiss it, saying “UI elements don’t need to meet this requirement”. He explains: the success criterion states “if the visual indicator of the control is the only way to identify the control, then that indicator must have sufficient contrast”. Therefore, for example, a “Submit” button whose background colour has low contrast is still recognisable with the background colour removed, provided it is in the context of a form, and thus doesn’t fail the criterion.
• Dave suggests a simple test: for every interactive UI element with a contrast of less than 3:1, remove the thing that is low contrast (be it the text, the background colour, the border, etc). Then review the page and see if it still makes sense. The argument is hard to swallow when Dave uses the Facebook and Google landing pages as examples – if they can’t get it right, what chance do the rest of us have? – but it’s a good rule of thumb nonetheless, and a useful design tip to keep in your arsenal.

Blind York student wins £5k claim over ‘inaccessible’ loan form

• Disability rights activist Holly Scott-Gardner, has won a settlement after being unable to fill in a student loan disabled students application form, because it was inaccessible to her (as someone who is blind). Holly had to fill in the form over the phone, after several failed attempts online, and successfully sued the company for a breach of the Equality Act 2010.
• Holly wrote a long Twitter thread about her interaction with the company, pointing out that they offered to “work with” her on making their services accessible, but this a) isn’t her area of expertise to be a consultant on, and b) they weren’t offering to pay her for her time. The thread is full of great quotes:
  • “In what world is it acceptable to expect the person who has had their rights violated to come and educate you out of the goodness of their heart?”
  • “I am not a token minority. I do not exist as an educational tool for non-disabled people.”
  • “It’s frustrating that everyone seems to view disabled people as experts on every aspect of being disabled. I know I can’t access something, that doesn’t automatically mean I can fix it.”

Experimental Brain Implant Lets Man With Paralysis Turn His Thoughts Into Words

• A fascinating article describing how a paralysed man has had a device implanted into his brain, which decodes signals in the brain that once controlled his vocal tract. After several months of training, the system has a vocabulary of 50 words and the man can communicate at a rate of 15 words per minute. Normal speech is in the region of 120-150 words per minute. A professor at Stanford University acknowledges the 50-word vocabulary as a “huge achievement”, but also feels the vocabulary “could easily become 500 or 5,000 words.”
• The anonymous patient in question is in his 30s, and has been unable to speak since a stroke 15 years ago. His arms, legs and vocal tract are paralysed, but the areas of the brain that once issued speech commands are intact. There was initially some doubt that the speech commands in the brain would still work after 15 years without use.
• An ethical dilemma raised in the article is that it will be possible to “eavesdrop” on the brain. We need to ensure that such devices “allow people to be able to think their private thoughts without anything just being broadcast to the world”. This “may be easier with devices that rely on brain signals that control muscles, because these signals generally aren’t sent unless a person makes a conscious attempt at movement”.

Microsoft: Accessibility is a focus in Windows 11

• Windows 11, announced at the end of June, is being designed “with accessibility in mind”.
• The OS will include dark, light and customisable themes, and the improved Closed Captions will be more customisable too.
• Microsoft have rebranded the old “Ease of Access” setting to the more idiomatic “Accessibility”, to make it easier to find your settings.
• Like Windows 10, the new OS will include assistive tech including Narrator, Magnifier, Closed Captions, Windows Speech Recognition and Windows Voice Typing.
• Finally, Windows 11 will support Linux applications via something called WSL (Windows Subsystem for Linux), which is being carefully developed to integrate with assistive technologies.

Will Accessibility Become Increasingly Important for SEO?

• A deque blog post, with no clear answer – but an interesting topic nonetheless.
• Google has for years made mobile usability and speed a factor in SEO – Search Engine Optimisation – meaning that they favour websites which work well on mobile and load fast, and in turn, rank the website more highly in search results.
• Google states that “everyone should be able to access and enjoy the web. We’re committed to making that a reality”. Google’s Lighthouse tool, which measures website performance and accessibility, provides accessibility scores which could very well lend themselves to an SEO ranking algorithm in the foreseeable future.
• The article acknowledges that there is already a coincidental link between accessibility and SEO. Accessible pages tend to be well marked up pages, containing metadata, descriptive link text and headings, and alt text.

Accessible Overflow

• A fascinating insight into browser behaviour by Marcus Herrmann. When navigating ‘overflow’ content, i.e. text that doesn’t fit inside its container, this requires us to scroll through the content. Many of us would simply use the mouse wheel to scroll within those containers, but how about users who navigate by keyboard? Keyboard users use the up and down arrows to move up and down the page, but what about the overflow content within the page?
• Firefox automatically puts such content in the tab order, making it reachable and its contents scrollable. In Chrome, Edge and Safari, however, overflow content is not scrollable with a keyboard by default. There is a Webkit issue and a Chrome intent to ship, but otherwise developers are stuck using the following workaround:
  1. Add tabindex="0" to the container
  2. Apply focus styles to the container, e.g. .my-owerflowing-div:focus { outline: 2px solid; }
  3. Add role="region" and supply an accessible name using, for example, an aria-label.
• Adrian Roselli wrote about this in more detail in Keyboard and Overflow.

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.