Category: month11y

  • month11y issue 29

    Welcome to your monthly frequent11y newsletter, brought to you by @ChrisBAshton. I hope you enjoy these a11y articles I’ve collated and summarised for you. (Psst – if you find these emails too long, consider switching to shorter, more frequent updates). Now on with the show!

    GOV.UK fixes a noisy screenreader issue

    GOV.UK had discovered that in recent versions of screen readers, its contact form was too aggressive in announcing how many characters were remaining. This was despite the existing markup of aria-live="polite".

    I’ve been keeping an eye on the GitHub issue for this, and a fix was merged recently. There are now three elements responsible for character count announcements:

    1. A static element: “You can use up to 200 characters”. This is visible for non-JavaScript users, and visually hidden otherwise.
    2. An injected, live-updating element showing the characters remaining. This has aria-hidden="true" to hide itself from screen readers.
    3. An injected, debounced element showing characters remaining, visually hidden and aria-live="polite". It only updates after 1 second of inactivity, and only announces once the user has passed the threshold (if a threshold has been set).

    This looked like quite a thorny issue to resolve – well done to the Design System team for getting it updated! I hope to see an official blog post on it soon 🤞

    Interesting WebAIM threads

    WebAIM (“Web Accessibility In Mind”) is a non-profit organization based at Utah State University, and is most famous for its annual accessibility analysis of the top million websites.

    It also has an email discussion list, whereby anyone with an accessibility question can start a thread asking for advice. These next threads landed in my inbox recently, and looked pretty interesting:

    First, Links within image captions. Jo wanted to check whether having links inside <figcaption> was an accessibility fail. The consensus seemed to be that it was OK.

    Next, Links that open new windows and/or go off site: “do they need to have an icon or additional text?”. There was initially consensus that the absence of these would not be a WCAG fail, but on further sleuthing, the conclusion was that it would in fact violate SC 3.2.2 .

    Finally, Accessibility a external content, in which Christopher wonders if there’s a material difference between linking to, and embedding, inaccessible content. The motivation for the question was that if people knew they needed to wrap captions around an embedded video that lacks them, but didn’t need to if simply linking off to the video, then people might decide to only use linking from now on. It led to an interesting discussion, but nothing conclusive.

    Introduction to Web Accessibility course

    Quick shout-out to edx.org, which is offering a free “Introduction to Web Accessibility” course. It takes an estimated 4-5 hours per week, for 4 weeks, to complete the course, but you can go at your own pace.

    It covers WCAG, POUR, finding W3C resources, and how you can check pages for issues.

    Can the internet be made accessible for all?

    This is a video clip (5m28s) from the BBC’s Dragon’s Den. Rene and Andy Perkins have founded a company, CityMaaS, aimed at improving accessibility on the web. They’ve created a product, Assist Me, which they hope to see companies embed on their websites (at a subscription fee of £30 to £45 per month). Assist Me is a button that triggers a popup menu where the user can adjust font size, turn on a screen reader, etc. In other words, this is an accessibility overlay.

    The investors didn’t probe into why accessibility overlays are bad, but did express that this sort of assistive technology should exist on the user’s machine so that it can be used on any website. The founders’ response was that this puts the onus (and expense) on the user, and is therefore wrong.

    The company has a couple of other products but they didn’t get much airtime. The Mobility Map looked promising – a way of seeing the accessibility information of any public place. But it’s behind a paywall, which is disappointing, as I really think there’s a gap in the market for making it easier to find accessible housing.

    None of their products look any good to me, but I do applaud any opportunity to raise awareness of digital accessibility issues on prime time TV.

    Braille Scanner iOS app

    Developer Aaron Stephenson has developed a free ‘Braille Scanner’ app for iOS, which allows you to take a picture of a paper Braille document, and it will convert it to text, using a combination of image processing and machine learning. It supports Unified English Braille grade 1 and does not currently read other types of Braille.

    One use case would be for people who are learning Braille and want to double-check what they’ve written. Watch a video demonstrating how Braille Scanner works on Twitter.

    The “inert” attribute is finally coming to the web

    Stefan Judis writes about the HTML inert attribute. When applied to a container, it renders all children inaccessible, i.e. you can no longer tab to or interact with any form elements within.

    This will be super useful for properly implenting modal windows, such as a confirmation dialog asking if you’re sure you want to delete your account. With inert, you can ensure the user can’t tab away from the modal and continue to navigate around the page.

    Browser support has been very poor, but that’s about to change. Stefan summarises:

    Now, Safari Tech Preview ships it with v143, Chrome will enable the attribute with Chrome 102 in May and Firefox implements the feature behind the html5.inert.enabled flag.

    PS: Stefan writes a fantastic weekly newsletter about web development – I suggest checking it out!

    US Accessibility Lawsuits

    There have been a number of accessibility related lawsuits in America of late. As ever, I’ll try my best to summarise, but bear in mind I am no legal expert.

    On Reconsideration, Judge Albright Transfers AudioEye, Inc. v. accessiBe Ltd. In December 2020, AudioEye accused accessiBe of infringing 9 patents, as well as committing false advertisement. The lawsuit has dragged on since then on the basis of where the case should be heard. It was originally filed in the Western District of Texas (WDTX), but accessiBe requested that it is heard in New York (WDNY) instead. After initially declining, the Judge has now agreed to transfer the case to WDNY; the article goes into details on why.

    As Refining harm in Web Accessibility cases: Harty v. West Point Realty describes, New York is the most popular district court to process ADA web accessibility cases. In this West Point Realty case, the plaintiff attempted to visit the hotel’s website but “couldn’t discern from the room description whether the accessibility features in the hotel room meet his needs”. This allegedly violates the Department of Justice’s 2010 ADA regulations that require hotels to “identify and describe accessible features in the hotels and guest rooms offered through its reservation service“.

    However, in such cases, the plaintiff must demonstrate that the violation brought them harm, something author Ken Nakata summarises as the “no harm, no foul” rule. It’s clear that the plaintiff would suffer a real harm should they book the hotel room believing that it is accessible, and then can’t navigate their wheelchair into the bathroom. But Ken doesn’t believe this lawsuit will succeed on the basis of “emotional injury” alone.

    The final case I’d like to look at – also centred in New York – is Early Win for Deaf Plaintiff in VR Captioning Lawsuit. In 2020, Dylan Panarra, who is deaf, filed a lawsuit against the HTC corporation, arguing that they violated the ADA for failing to include captioning in their virtual reality content (housed on their subscription service “Viveort Infinity”). The case is still ongoing, and is the first known case about virtual reality captioning, so is an important one to keep an eye on.

    24×24 pixel cursor bookmarklet

    Adrian Roselli shares a JavaScript bookmarklet which turns your cursor into a 24 by 24 pixel square.

    It is designed to test the new Understanding Success Criterion 2.5.8: Target Size (Minimum), which will be introduced in WCAG 2.2 (currently draft). The criterion specifies that “the target offset is at least 24 CSS pixels to every adjacent target”, to “help ensure targets can be easily activated without accidentally activating an adjacent target”.

    Adrian adds a disclaimer that, as this is a new SC, it is still in flux and may not even be a square when done. Follow the GitHub discussions for updates.

    Google: Accessibility Not A Direct Ranking Factor

    This is a short article that’s well worth a quick read. Google’s Search Advocate John Mueller says, in an office-hours hangout recorded on March 25th, that accessibility plays no part in Google search ranking. In other words, an accessible site is no more likely to be ranked higher in search results than a less accessible one.

    The underlying reason for this is measurability: no automated tools can give a true evaluation of accessibility, though there are things like Google’s own Core Web Vitals which provide some automated ways of measuring accessibility.

    Google already considers the mobile-friendliness of a site in the search ranking, which helped encourage companies across the world to invest in responsive. It feels like there’s a real opportunity here to make businesses value accessibility more by making it a search ranking factor. But for now at least, this isn’t on Google’s roadmap.

    The Future of CSS: CSS Toggles

    Article by @bramus, discussing the new CSS Toggles Unofficial Proposal Draft, alongside the demo site for the proposed feature.

    “CSS toggles are a mechanism for associating toggleable state with a DOM element”. Perhaps this is best summarised in a code example:

    html {
      toggle-root: lightswitch; /* Create a toggle named lightswitch. It will cycle between 0 (inactive, default) and 1 (active) */
    }
    
    button {
      toggle-trigger: lightswitch; /* When clicking the button, toggle the lightswitch */
    }
    
    html:toggle(lightswitch) {
      /* Styles to apply when the lightswitch toggle is active */
    }

    This should make it much easier to define global toggles such as dark/light mode, applying reduced motion, switching to low data modes, etc, allowing us to apply the necessary styles without relying on JavaScript.

    For now, this is just a prototype, and is subject to change. To start using this today, you’d need to use the polyfill.

    I’m Deaf And I Have ‘Perfect’ Speech. Here’s Why It’s Actually A Nightmare.

    Rachel Zemach writes about some of the frustrating encounters she’s had, as someone who became Deaf at the age of 10 (and had already learned to speak). Her speech is indistinguishable from someone who is not deaf, and she can ‘lip read’, which is problematic, as we’ll discuss below.

    Incidentally, I’d come across the term ‘Deaf’ (with a capital D) before, but wasn’t quite sure when it should be used. Rachel links to an article describing the difference, which essentially comes down to whether or not the subject sees their deafness as an identity; a community that shares a mutual culture and language. Hence Rachel “became Deaf” at the age of 10, and “someone who is not deaf” refers simply to the medical definition of hearing loss. But I digress…

    Lip-reading is hard, and pretty inaccurate: “55% to 70% of English is not lip-readable because many sounds are made deep in the mouth or throat”. This makes Rachel’s encounters with waiters and the like all the more frustrating, when, upon realising Rachel can lip-read and speak, they push to communicate only in speech. This contrasts heavily with when Rachel is out with her Deaf friends, who can not or choose not to lip-read/speak, where waiters are far more willing to ‘pantomime’ gestures to communicate.

    Rachel has concluded that she will try and avoid speaking in future. She finishes with a request:

    If you’re a hearing person, please, when you meet someone who says they can’t hear you, take your cues from them. Do they want you to write what you have to say? Do they want you to take down your mask and speak slowly? Do they want you to pantomime? Deaf and hard-of-hearing people are the experts on how to communicate with them. Ask them openly and earnestly and respect their solutions, which they’ll undoubtedly have.

    Routing: I’m not smart enough for a SPA

    I came across this via Anselm Hannemann’s Web Development Reading List. The author, Taylor Hunt, goes into a lot of detail about why they chose a traditional website over a Single Page Application (SPA), for a recent project.

    There are a lot of accessibility concerns to consider when building an SPA, including:

    • Restoring scroll positions between navigations
    • Focussing on the last-used element when going ‘back’
    • Focussing on an appropriate element when going ‘forward’
    • And all the other client-side gubbins: back/forward history buttons, double-clicks, timeouts, ‘CMD + Click’, etc…

    But the bit that struck me the most was this guideline from the article. We should favour:

    • Security even over accessibility (“downgrading HTTPS ciphers for old browsers isn’t worth letting credit cards be stolen”)
    • Accessibility even over speed (“a fast site for only the able creates inequality, but a slower site for everyone creates equality”).
    • Speed even over slickness (deliver a fast site rather than an unnecessarily fancy one).

    The battle of security vs accessibility was something that struck me in my article, I Used The Web For A Day On Internet Explorer 8, where I was faced with the dilemma that certain sites forced TLS 1.1, and my browser was only capable of TLS 1.0. The sites’ security policies made them inaccessible to me, but I had to concede that this was probably the right call.

    Cabinet Office signs £400k deal for digital accessibility audits

    To audit the accessibility of its digital services, the Cabinet Office has signed a two year deal with Digital Accessibility Centre (DAC) – a non-profit organisation based in Wales.

    Adding context to the deal, which Civil Service World values at £436,632, the article states: “Research conducted over the past two years, and published by the CDDO in January, found that about 99% of public sector websites contained accessibility issues representing a potential problem for users with physical or cognitive impairments – as well as a possible breach of the new regulatory requirements.”

    Side note: DAC are not to be confused with Deque (pronounced “dee queue”), a leading accessibility organisation that also does accessibility audits. Not knowing how the latter was pronounced, I must admit I mixed up the two when I heard colleagues talking about their accessibility audits, and only recently clarified it in a work chat!


    Whew, that was a long newsletter! Did you know that you can subscribe to smaller, more frequent updates? The dai11y, week11y and fortnight11y newsletters get exactly the same content. The choice is entirely up to you! Curated with ♥ by developer @ChrisBAshton.

  • month11y issue 28

    Welcome to your monthly frequent11y newsletter, brought to you by @ChrisBAshton. I hope you enjoy these a11y articles I’ve collated and summarised for you. (Psst – if you find these emails too long, consider switching to shorter, more frequent updates). Now on with the show!

    Giving a damn about accessibility

    A useful resource for advocates, created by accessibility professional Sheri Byrne-Haber in partnership with UX Collective.

    The handbook (PDF – 13.3 MB) is beautifully illustrated throughout its 49 pages, and covers the different ‘people challenges’ you will face as an accessibility advocate, and how to overcome them:

    • People who are allergic to change. There’s little you can do about these.
    • People who want to see the “business case” for accessibility. Their request is irrelevant: people with disabilities should not need to produce a business case to get an organisation to do the right thing.
    • People who want to see detailed proof for every accessibility recommendation. Your first step should be to prove that WCAG applies to the inaccessible product.
    • People who prioritise the creation of inaccessible new features over making old features accessible. Classic example: the Twitter ‘audio tweet’ “fiasco” (which I covered in dai11y 28/08/2020).
    • People who believe “it only impacts a small number of users”. Sheri equates this attitude to “the moral equivalent of pickpocketing”: supporting an environment where inaccessible tools are generated.
    • People who don’t believe that disabled people are part of the target demographic of their product. This is a “circular logical fallacy” as if people are excluded from using your product, they’ll never start to become your customer.
    • People who brought you accessibility overlays. I’ve covered overlays a fair bit already.

    The second half of the handbook is more broad. I’ve picked out some highlights:

    “[Organisations should] reward employees for releasing accessible software, not just making their deadlines with whatever they hurl over the fence”.

    “Perfectionism is a bad approach to accessibility”. Every moment you wait for ‘perfect’ increases the length of time people have to continue using an inaccessible product. “Your first attempt at making anything accessible will be awful – but even awful is better than 98% of what other people are doing”.

    Accessibility is not a ‘project’: it requires ongoing commitment, best done in a continuous process improvement feedback loop.

    Sheri praises design systems for building in accessibility that spreads throughout the software. And she recommends implementing an accessibility ‘release gate’, which sets the expectation from the beginning that only accessible software will be released.

    “Good accessibility professionals speak at accessibility events. Great accessibility professionals speak at design events”. Talk accessibility at an a11y event and you’re preaching to the choir; talk accessibility at a design event and you’re preaching to a lot of “non-believers”.

    This was a quick skim, but the whole handbook is worth a read, and doesn’t take as long as you’d think!

    Overlay Position and Recommendations

    The International Association of Accessibility Professionals (IAAP) has published a statement outlining its position on controversial accessibility overlay widgets/plugins. This can be referred to as an authoritative position on the subject, alongside other community efforts such as https://overlayfactsheet.com.

    It is a short statement, so worth reading fully in its own right. But here are a couple of highlights:

    [IAAP acknowledges] “the deceptive nature of marketing claims that a single addition of a line of code… provides full compliance with web accessibility standards, mandates, regulations, or laws currently.”

    However, it is noticeably more open to the technology than other resources I’ve read. For example:

    “IAAP recognizes the importance of automating functions related to accessibility and that artificial intelligence (AI) and other emerging technologies have great potential in improving accessibility. IAAP calls upon Overlay providers to engage with advocacy groups and the broader accessibility community to ensure that Overlays are developed and implemented in a way that improves access to websites and applications.”

    Place Your Bets: How Accessible Is PokerStars VR?

    Accessibility advocates from Equal Entry rated the accessibility of the popular VR game PokerStars VR. The article highlights a couple of articles written by the participants in this area, covering 360 video audio descriptions (which I covered in dai11y 01/01/2021) and VR from a deaf person’s perspective.

    The group recall being immediately dropped into a public space, without any training, and being a bit overwhelmed by being approached by strangers before they’d had a chance to orient themselves.

    One of the group, Meryl, is deaf, and had to pull her goggles up to check the Google Meet captions and chat box. In doing so, she kept accidentally turning off her goggles.

    Holding cards, and picking up poker chips, was difficult, even with full mobile dexterity.

    It’s not all bad news though: when testing the game in greyscale, the team noted that the poker chips had their value in text, and card suits have different symbols, so the game doesn’t rely on colour alone to denote information. It did note that the hearts and clubs are in the same shade, however, and would perhaps benefit from two different shades.

    The group concluded with some recommendations for PokerStars VR. The game needs:

    1. Addition of subtitles
    2. Ability to change size and contrast of text
    3. More use of haptic, alongside visual/audio feedback
    4. Controller remapping
    5. Display settings (e.g. brightness, contrast)
    6. Several improvements to controlling movement/locomotion/rotation

    Are we live?

    Scott O’Hara dives deep into ARIA live in this technical post, detailing all the different ways of implementing a live region that inform screen readers that something has updated:

    1. You can use specific ARIA region roles: alert, log or status
    2. You can use aria-live, with one of the following states: assertive, polite, off
    3. You can use HTML’s native output element, which has an implicit ARIA role of status

    A common use case is the ‘notification’ design pattern whereby a message appears at the top of the screen. Developers often inject this notification into the page on an as-needed basis, but this doesn’t work very well for screen readers other than VoiceOver. The best approach is to ensure an empty live region exists on the page from the beginning, and then inject notification text into it.

    The ARIA working group are apparently reviewing and planning to make big updates to live regions in ARIA 1.4. This is still a way off, as ARIA 1.2 is still only a W3C Candidate Recommendation Draft.

    Their bionic eyes are now obsolete and unsupported

    A worrying look at retinal implants provided by Second Sight, which has been in financial difficulty and no longer supports the products.

    In the early 2000’s, the company produced the Argus I implant, and a second generation Argus II later. The former has a 16 electrode array, and the latter a 60 electrode array, each capable of rendering one ‘pixel’. The electrodes “stimulate the eye in different patterns multiple times per second, creating flashes of light that correspond to a low resolution video feed”. It does not provide normal vision by any means, rather it allows users to “perceive shades of grey that appear and disappear as they move their heads”.

    After the 4 hour surgical procedure, patients had mixed success. Whilst some patients struggled to see even basic patterns and shapes, others were able to visit the grocery store without the use of a cane, and even able to ski and shoot arrows.

    But the company discontinued its retinal implant business in 2019 and nearly went out of business in 2020. After a public offering to raise money in June 2021, its stock price plunged, and in February 2022 the company announced a proposed merger with an early stage company called Nano Precision Medical.

    It is now focussing on a brain implant called Orion, which would bypass the eye altogether and “directly stimulate the visual cortex”. This would in theory be applicable to a wider market.

    But the early adopters who had retinal implants installed now face an uncertain future. With the implants no longer maintained, when they stop working, they cannot be fixed. Barbara Campbell was walking through a New York City subway station at rush-hour when her world suddenly went dark. Jeroen Perk’s video processing unit fell to the ground and shattered; he had to source a replacement from another patient who was no longer using their device.

    The implants can have medical complications too, such as interfering with MRIs. Whilst 83% of patients “experienced no serious events after two years”, some required surgery for hemorrhages, low eye pressure and detached retinas.

    As a developer myself, I’m all too used to apps, libraries, frameworks and even hardware becoming obsolete. But the industry needs to have a serious think about how it can ensure longevity for patients of such invasive and life-changing technology.

    Wordle has a colour-blind mode: Here’s how to activate it

    Did you know that the viral online game Wordle has a mode aimed at colour-blind users? To activate it, go to the settings dial and enable the “high contrast mode” toggle.

    The setting changes the colours of guessed letters from red and green, to blue and orange. It also changes the colour of the boxes that are shared to social media when you share your result.

    Switching to this mode doesn’t impact the game at all, but will make it easier for your colour-blind friends/followers to engage with your shared scores. Consider switching to the high contrast mode today!

    Carousels: No one likes you

    Joni Halabi gives a breakdown of why carousels are terrible, and why website owners must stop asking developers to build them.

    The points are pretty conclusive. For one, apparently just 1% of users interact with carousels, and of that tiny percentage, the overwhelming majority simply click on the first slide. Why build something hardly anyone is going to use?

    But more importantly, carousels are really, really hard to make accessible. Auto-rotating carousels, particularly, are a no-go, with all sorts of usability issues such as not allowing the user time to read the contents of each slide, or having the user accidentally click on the wrong slide because they clicked mid-animation.

    Movement such as this needs a pause button, by the way – would a non visual user be able to navigate to the button? How about to the previous/next buttons? Would they even know those buttons exist? Can a keyboard-only user easily go back and forth between the directional buttons?

    Joni concludes with a request: to think about the content of your page, and only highlight the important stuff. She also links to https://shouldiuseacarousel.com/ as another resource worth reading.

    Web Accessibility by Google

    This is a free Udacity course, aimed at giving “advanced” skills to developers over a span of approximately 2 weeks. It covers developing for screen readers, semantic markup, and managing focus, with material by industry heavyweights such as Rob Dodson.

    This course relates to an optional (paid) “Nanodegree program” that gives you a certification in being a “Front End Web Developer”.

    Usability Testing with People with Disabilities

    Knowbility.org – a nonprofit org based in Texas, serving globally – has an “AccessWorks database” of hundreds of people with disabilities including blindness, deafness, mobility impairments and cognitive disabilities.

    You can hire these volunteers to help with usability testing your website. Knowbility works as the go-between, negotiating the quote with the business, educational institution, government agency, or nonprofit.

    I have no experience of working with them, so can’t vouch for how well it works, but I like the idea; anything that makes recruiting real users easier seems like a good thing. It looks like the users get paid at least $75 per test.

    Designing accessible services

    This guidance by the UK Home Office covers best design practices for supporting users with a variety of disabilities, including anxiety, autism, deafness, dyslexia, low vision, mobility disabilities and blindness.

    Each category is summarised in just a handful of key points, so it doesn’t take long to read them all.

    The main thing I’d like to highlight are the PDF posters (1.2Mb), which cover the same information but in bright, clear visuals. These are well worth printing off and putting up around the office.

    Highcharts for accessibility

    Highcharts JS is a library for creating beautiful interactive charts. (Ex colleagues in BBC Visual Journalism, take note – I think you’ll like this!)

    This accessibility focussed page showcases how a well-built Highcharts chart can be accessible. The first demo shows how you can dig out every piece of information using keyboard tabbing (not just mouse hovering).

    The second demo shows screen reader support. If you just want a quick demonstration, there’s even a video showing how it works with screen readers (though the embed doesn’t seem to be working at time of writing, so I had to dig the YouTube URL out using developer tools).

    I love the showcase of low-vision features, where things like bar charts have patterns on them rather than just colours, making charts accessible to colour-blind users.

    There are even options for “sonification” – playing the chart back as sound which can be “highly effective for conveying trends” – as well as “tactile export” (which can be printed for low-vision users, using specialist hardware).

    Age-positive image library launched to tackle negative stereotypes of later life

    “The Centre for Ageing Better has launched a free library of positive and realistic images of people aged 50 and over.”

    “The images, which depict older people in non-stereotypical ways, are available for download and free to use.”

    The library is available here: https://ageingbetter.resourcespace.com/pages/home.php

    This library launch follows a recent report “An old age problem?” which looked at depictions of later life across society. It found that stock image libraries often use unrealistically positive or negative depictions of people in later life, and recommended that in both words and pictures, the media should attempt to communicate a more diverse representation of what it means to be older without resorting to stereotype and caricature.

    Another resource that may be useful is this suite of age-positive icons, also created by The Centre for Ageing Better.

    Guidance on Web Accessibility and the ADA

    The U.S. Department of Justice (DOJ) has issued the above guidance on Web Accessibility and the ADA (Americans with Disabilities Act). This has prompted a number of articles, I’ve covered a couple of them here.

    Justice Department Breaks its Silence Regarding Website Accessibility” describes how the guidance explains at a high level how state/local governments (Title II), and “places of public accommodation” (Title III), can make their websites accessible. It “confirms the DOJ’s view that the websites of places of public accommodation must be accessible”, but does not make clear whether the ADA applies to the websites of online-only businesses.

    In “Why we should be disappointed by DOJ’s web accessibility guidance“, Ken Nakata provides some useful history. Ken worked at DOJ, writing “the Department’s last technical assistance piece for web accessibility” in 2003, and leaving in 2004, mistakenly thinking DOJ would continue to make digital accessibility a priority.

    DOJ “announced plans for developing new regulations” back in 2010, but scrapped that in 2017 after a few false starts. The inaction left opportunities wide open for plaintiffs to litigate against inaccessible sites, and “2021 was another record-breaking year in web accessibility litigation”.

    Ken’s issue with the latest guidance is that it makes “exactly the same recommendations that DOJ made 19 years earlier”. The requirements are too “abstract”. The guidance provides links to the Web Content Accessibility Guidelines (WCAG), but does not specify which version should be conformed to, if any. Ken wants the guidance to be clearer, and suggests that they require that sites conform to WCAG 2.1 A/AA. Ken cites governments and universities around the world that use this as a basis.

    I’m not US-based, so have only skimmed through the guidance. It links out to several court cases regarding digital accessibility, covering both Title II and Title III, which looks like a useful reference to bookmark. More interesting is the accessibility resources section; particularly the 18F Accessibility Guide and Accessibility at digital.gov, which links to the U.S. Web Design System.

    a11yphant: “Learning web accessibility made easy”

    I haven’t tried this, so can’t vouch for how good it is, but have come across it in a few a11y newsletters of late. Worth checking out:

    a11yphant teaches web accessibility, one step at a time, broken down into manageable pieces. We call these challenges. You won’t need to read large amounts of text to complete those. Instead, you will learn by applying the concepts in code. Get started with your first web accessibility challenge and improve your skills.

    There are currently only four ‘challenges’ (valid HTML document, headings, content elements and page regions). The current ones are all classed as ‘easy’; there are no ‘medium’ or ‘hard’ challenges yet. Hopefully more will be released soon.

    WCAG, but in language I can understand

    Designer/developer Martin Underhill has written “a single article summing up each success criterion (SC) in WCAG 2.1 in as close to a single paragraph as [he] can manage”, because the guidelines themselves are not the easiest read. He leads with a disclaimer that this is not aimed at any audience other than himself, and obviously for brevity a lot of SC exceptions are missing.

    It’s a really useful overview – here are some examples:

    • 1.1.1 Non-text Content
      • Images should have descriptive (alt) text.
    • 1.3.2 Meaningful Sequence
      • The visual presentation of the content matches what’s read out by a screen reader.
    • 2.1.2 No Keyboard Trap
      • There shouldn’t be a situation where you enter a modal with the keyboard and can’t get back to where you were.

    Alongside digitala11y.com, which does a similar thing but breaking each SC down into its own short article, there are now plenty of ‘simplified explanations’ of WCAG to refer to.


    Whew, that was a long newsletter! Did you know that you can subscribe to smaller, more frequent updates? The dai11y, week11y and fortnight11y newsletters get exactly the same content. The choice is entirely up to you! Curated with ♥ by developer @ChrisBAshton.

  • month11y issue 27

    Welcome to your monthly frequent11y newsletter, brought to you by @ChrisBAshton. I hope you enjoy these a11y articles I’ve collated and summarised for you. (Psst – if you find these emails too long, consider switching to shorter, more frequent updates). Now on with the show!

    A UX Collective article outlining predicted trends for 2022:

    1. The web will become more accessible – particularly the websites of larger companies.
      • The SOAR report found that 62% of the Alexa 100 websites were accessible to screen readers, up from 40% in 2020.
      • The WebAIM Million project found a very slight improvement in the accessibility of homepages across the web (from 2020 to 2021), but it will take until “the 2070s or 2080s” at this rate for the entire web to be accessible.
    2. Digital accessibility lawsuits will continue to increase
      • More than 4000 accessibility lawsuits (based on the Americans with Disabilities Act) were filed in the USA in 2021.
      • The Hooters case found that companies can be sued even if they already have remediation efforts underway and if they’ve already entered into a settlement agreement with another party.
    3. We’ll see less usage of accessibility overlays
      • Over 200 overlay customers were sued in 2021 for lack of accessibility on their website.
      • There could well be counterclaims against overlay companies from these customers.
      • One overlay company, AudioEye, had a stock value of $42 in February 2021, but recently fell to less than $7.
    4. WCAG 2.2 will be the new standard most companies use to determine accessibility
      • The standard is expected to be finalised by the end of March 2022. WCAG 2.1 took just 4 months from being finalised to being referenced in its first settlement agreement; WCAG 2.2 is likely to follow a similar trend.
      • The article suggests that the most difficult of the new WCAG 2.2 criteria to implement will be SC 3.3.7: Accessible Authentication.
    5. Large companies will want to get a head start on WCAG 3.0

    WordleBot is a shortcut that brings accessibility to your Wordle results

    Unless you’ve been living under a rock in 2022, you’ll no doubt have come across Wordle, the viral word guessing game that has people sharing their results in a grid on social media, like so:

    Screenshot of ChrisBAshton's tweet: "Wordle 214 3/6", followed by three rows of coloured squares.
    I’m not just sharing this one because I got a fantastic score…

    The resulting grid of coloured squares represents how many letters of each guess was correct, and ultimately how many guesses were needed before the correct word was arrived at. But it’s something of an accessibility nightmare for screen reader users.

    Federico Viticci has attempted to fix the issue, by building WordleBot. This is a shortcut for iOS and macOS which edits the text in your clipboard to have a more accessible output, like so:

    Wordle 207 5/6

    ⬜🟨🟨⬜⬜ (2 partial)
    🟨🟨⬜⬜⬜ (2 partial)
    ⬜🟩🟨🟩⬜ (1 partial, 2 perfect)
    ⬜🟩⬜🟩🟩 (3 perfect)
    🟩🟩🟩🟩🟩 (Wordle done on Line 5)— Federico Viticci (@viticci) January 12, 2022

    It’s a nice idea, and a valiant effort by Federico, but is a manual workaround that only works for Apple customers. I’d like to see somebody build a Twitter bot that automatically responds to inaccessible Wordle tweets and provides alt text responses – or better yet, the creator of Wordle could change the share text directly.

    PS: Wordle has inspired all sorts of creative endeavours, including a Wordle-to-music generator, Wordle-to-Townscaper and Wordle cross-stitching!

    a11ymyths.com

    (Accessibility Myths, shared by Smashing Magazine)

    Sergei Kriger debunks 22 myths about accessibility on the web, such as accessibility only being for blind users. I’ve not heard of all of these myths, so some items were added just in keeping with the format, I think, but it’s worth a quick read nonetheless, and as prompted at the end of the page, you’re encouraged to “show this website to your manager”.

    Also see its sister website, a11yfacts.com, for a list of statistics on disabilities (e.g. 15% of the world’s population has a disability) and how certain demographics use the web (e.g. 67.7% of screen reader users use headings for navigating).

    Game Demos Need to Come Back For Many Reasons, Especially for Accessibility

    Thought-provoking article by Ben Bayliss, describing how game demos were a great vehicle for testing a game’s accessibility before purchasing the game. Demos used to come on a disc bundled with PlayStation Official Magazine (and others), but in the digital era are increasingly hard to find.

    Without demos, disabled gamers are forced to watch YouTube videos of other people reviewing the games, to figure out whether or not it will be accessible to them. “Major game outlets rarely touch on accessibility in our reviews or editorials that go live around launch”.

    Some companies are beginning to make an effort in this area. “Ubisoft have been more proactive in inviting disabled content creators and journalists to events such as Ubisoft Forward, allowing them to spend time with the game and inform their audience specifically about accessibility”. It also “shares its efforts through blog posts and has a dedicated team“.

    “Some studios such as SMG Studio and Team 17 released videos showing accessibility features available at launch. This is vital information to be sharing, but there’s a huge difference between a blog post or a short clip on accessibility features and how these actually feel in play. And that goes for both accessibility and the game as a whole in general.”

    Building The Most Inaccessible Site Possible

    In this 35m video from Smashing Meets (December 2021), Manuel Matuzović starts off with a simple HTML site that is considered 100% accessible by Lighthouse. He then deliberately breaks its accessibility as much as possible, without Lighthouse noticing. He calls this process “Progressive Degradation”.

    He wraps all content in a <div aria-hidden="true">, which lowers the score because the wrapped content contained focusable descendents. Manuel then made these non-focussable (swapping the input button for a <div>, and changing the href of a link to an onclick). This then raised the accessibility score back to 100%.

    It was quite fun seeing how Manuel disables keyboard zoom shortcuts (by adding a listener to the onkeydown event). He also overrides the cursor with a custom image that is offset 100 pixels from the actual click area, making it very difficult to click accurately! Manuel finishes by applying a filter to the text so that it is visually faded out (having already set himself the goal of not using display: none, visibility: hidden or opacity: 0, which would be too easy). As a bonus, he translates all text to HTML entities, so that people can’t even ‘view source’ to read the content.

    The aim of the talk is not to make fun of Lighthouse, but to point out that automated accessibility testing can only be used as a guide. It is not a reliable summary of how accessible your site actually is. Indeed, Manuel runs his website through a few more automated tools at the end of the talk, none of which detects all of the issues that he’s introduced.

    Standardizing Focus Styles With CSS Custom Properties

    Stephanie Eckles shares a useful snippet for setting your focus styles consistently:

    :is(a, button, input, textarea, summary) {
      --outline-size: max(2px, 0.08em);
      --outline-style: solid;
      --outline-color: currentColor;
    }
    
    :is(a, button, input, textarea, summary):focus {
      outline: var(--outline-size) var(--outline-style) var(--outline-color);
      outline-offset: var(--outline-offset, var(--outline-size));
    }

    This applies focus styles to all standard interactable elements, and provides hooks for you to customise parts of the outline style where needed, e.g.

    summary {
      --outline-color: lightskyblue;
    }

    Some designers like to only apply focus styles when an interactable element is tabbed to via keyboard (as opposed to clicked on with a mouse). Stephanie explains how to use the :focus-visible selector to achieve this. The :focus rule above can be swapped± for :focus-visible, and then an outline: none applied when the focussed element is not :focus-visible.

    :is(a, button, input, textarea, summary):focus-visible {
      outline: var(--outline-size) var(--outline-style) var(--outline-color);
      outline-offset: var(--outline-offset, var(--outline-size));
    }
    :is(a, button, input, textarea, summary):focus:not(:focus-visible) {
      outline: none;
    }

    ± whilst browser support for the :focus-visible selector is still gaining traction, Stephanie advises not replacing the :focus rule, but duplicating it instead. Browsers throw out selectors they don’t understand, so we can’t simply join the selectors with a comma (i.e. :is(...), :is(...):focus-visible {}). By maintaining both a :focus and a :focus-visible block, we ensure that browsers that don’t support :focus-visible – but do support CSS custom properties – have visible focus styles. At time of writing, those browsers are Safari and ‘UC Browser for Android’.

    Web Almanac 2021, Chapter 9: Accessibility

    The Web Almanac is “HTTP Archive’s annual state of the web report”, which started in 2019. It is split into 24 chapters concerning all sorts of topics, such as security, CDNs, SEO, Jamstack, and Ecommerce. We’re going to concentrate on chapter 9 – Accessibility – which in itself is a long read.

    Depressing statistics:

    • Just 22% of sites have sufficient colour contrast; roughly unchanged from 2019 and 2020.
    • 24% of desktop homepages, and 29% of mobile homepages, disable user zooming/scaling. This includes many of the top 1,000 sites globally.
    • Around 69% of font sizes are set with px, as opposed to more scalable/accessible alternatives such as em.
    • There’s a mixture of usage of HTML5 elements. Just 28% of sites have a <main> element, but around 62% have <header> and <nav> elements.
    • Surprisingly, more than half of sites make use of tabindex attributes.
    • Just 58% of sites have properly ordered headings, i.e. no levels skipped.
    • We’re generally poor at creating accessible tables. Just 5% of sites which make use of tables provide a corresponding <caption> element.
    • Almost a third of form inputs have no accessible name (i.e. no label). Around 58% of sites use a placeholder attribute, which is not very accessible to assistive technologies, and of these sites, nearly 65% had no label, implying that the placeholder is being improperly used as a label.
    • Videos were found on 5% of sites. Of these, a corresponding <track> element – designed to have the same benefits as alt text for images – was found on less than 1% of videos. That said, “this figure may not account for video content loaded by a third party <iframe>, such as an embedded YouTube video”.

    Positive statistics:

    • 80.5% of sites have a lang attribute, with 99.7% of these being valid values.
    • Surprisingly, almost 32% of sites use the prefers-reduced-motion media query; a relatively recent CSS addition.
    • Less than 1% of pages make use of an accessibility overlay.

    Interesting tidbits:

    • 91% of desktop pages have :focus { outline: 0; } declared. “In some cases, it is removed so that a more effective custom style can be applied. In many cases it is simply removed and never replaced, which can render a page unusable for keyboard users”. The almanac doesn’t dig deeper on numbers though.
    • Around 20% of sites are estimated to have a skip link (there’s no reliable automated test for this).
    • CAPTCHAs were found on around 10% of sites. These are notoriously inaccessible.
    • 18-19% of pages contain at least one anchor element with role="button". “A native <button> element would be a better choice, per the first rule of ARIA.”
    • The most popular ARIA attribute is aria-hidden (used by 53% of sites), followed by aria-label (52%).
    • 14.3% of pages have the class sr-only or visually-hidden on some elements, implying that they are providing text that is only visible to screen reader users.

    The chapter concludes:

    As an industry it is time that we acknowledge the story told by the numbers in this chapter; we are failing people with disabilities. The numbers from 2021 have not moved substantially from 2020. We need to do better, and this has to come from a combination of top-down leadership and investment (including the ongoing participation from browsers) and bottom-up effort to push our practices forward and advocate for the needs, safety and inclusion of people with disabilities using the web.

    University Students Create Cutting-edge Wearable Navigation Devices

    Harvard University 'Foresight'; a black vest with a smartphone holder on the chest and a smartphone in the holder.
    ‘Foresight’

    An article from July 2020 that’s been in my bookmarks for… well, you do the math.

    A group of students from Harvard University have launched a startup called Foresight, a “wearable navigation aid for people with vision impairments”. It connects to the user’s camera, worn in a placeholder around the neck, which detects nearby objects and triggers tacticle ‘soft textile units’ on the body. These ‘inflate’ to provide haptic feedback as objects approach and pass, with the pressure increasing as objects get closer.

    Why Don’t Developers Take Accessibility Seriously?

    Melanie Sumner writes an engaging CSS Tricks article, exploring different perspectives on web accessibility in 3 ‘acts’:

    1. Melanie laments how the accusatory tone of some accessibility advocates doesn’t help. Developers have a lot to learn in their careers beyond just HTML/JS/CSS. In the absence of good accessibility from educational resources, frameworks and tooling, it’s no wonder that the output isn’t perfect. Implying that devs are deliberately excluding people, or are crap at their jobs, is only going to make them defensive.
    2. But for users who need better accessibility in order to navigate the web, the frustration “can boil over”. It can feel to them like they don’t matter, and the only way of getting heard is to demand the treatment afforded to them in law. Melanie says this can lead to a negative feedback cycle; some tech folks may opt out of listening because of the “rude” way it is delivered to them, and others may become overwhelmed as they begin to recognise the responsibility on their shoulders.
    3. The final act concerns a designer who feels ‘restricted’ by accessibility. They want to use certain colours, knowing it doesn’t pass colour contrast guidelines. “Please consider this: you’re not designing for yourself. This is not like physical art. It’s a false choice to think that a design can either be beautiful or accessible.”

    Melanie concludes by asking us to approach our work, and the people around us, with compassion and curiosity. Don’t try to fix the past, but be resolute going forward: make sure the code samples you write in your next documentation are accessible; include accessible annotations in your next design; include an accessibility talk in your next conference.

    EU Runs World’s Largest Accessibility Test

    A Deque article that is well worth a read. The EU Web Accessibility Directive (issued in October 2016) stipulated that all government agencies in the EU were required to ensure their websites and apps are accessible by June 2021.

    Every country has to monitor the accessibility of its digital assets annually and report its findings to the EU every three years. December 23rd, 2021 was the end of the first reporting period. This article looks at those reports and picks out some highlights; I’ve pasted some key paragraphs below:

    “Having a fully accessible website is sort of like having a dust-free house. If you work hard at it, it is something you might achieve, but keeping it that way is almost impossible. The real question is how common and how substantial the accessibility problems are. This is difficult to say, as there is no standard way to measure this. Unfortunately, this means that in the next report, it will be difficult to judge if web accessibility in those countries improved over time.”

    “Kudos to the countries that did attempt to quantify their findings. We can’t make direct comparisons between countries because they don’t use the same metrics, [but] three years from now we will be able to see to what extent accessibility has improved. One example is www.toegankelijkheidsverklaring.nl, a register of Dutch Government websites, ranked A to E.”

    “The European standard EN 301 549 (v2.1.2) includes a good number of accessibility requirements that are not part of the Web Content Accessibility Guidelines (WCAG). For example, section 11.7 requires apps to support user preferences configurable through the operating system. It is therefore notable that more than half of the countries did not consider the additional EN requirements in their monitoring efforts.”

    “All 27 EU members conducted research. The United Kingdom produced a report as well, though there was no formal obligation to the EU. The UK ceased to be a member state of the European Union on the 31st of January 2020. What we loved was how the UK communicated their results and retested the sites 3 months later to see how much they had progressed. This showed that sharing these results greatly improved these sites.”

    “[This] is a great step forward for establishing digital accessibility as a standard across Europe. As always, there is room for improvement. The need for standard metrics in accessibility, for example, is a common limitation of the current standards, which the upcoming WCAG 3.0 may address. The next reporting period for the EU ends in December 2024, although we hope monitoring agencies will consider publishing preliminary results annually.”

    Be the change you want to see in the world

    This isn’t an article, but I just wanted to share a story from frequent11y subscriber Nick, who recently contacted me by email.

    Nick noticed that common electrical items such as extension cords and adapters, sold for consumer use, have important safety information embossed on the items themselves. Despite being in all-capitals, the text can be hard to read, as the text is not coloured – only raised – and is written in small type.

    The safety information is certified by a certifying organisation such as Underwriters Laboratories (UL). Nick reached out to UL to ask them to consider making it mandatory in their certification standards that contrast be sufficient across all kinds of products. For an analogy, he cited an IT standard and described how to determine contrast between two colors. He received a response promising to forward his request to the relevant people.

    I think this serves as an important reminder that there is always more that can be done to improve accessibility, and sometimes all it takes is an email to invite change.

    Next-generation spinal implants help people with severe paralysis walk, cycle, and swim

    “Three men paralyzed in motorcycle accidents have become the first success stories for a new spinal stimulation device that could enable faster and easier recoveries than its predecessors.”

    “The men, who had no sensation or control over their legs, were able to take supported steps within 1 day of turning on the electrical stimulation, and could stroll outside with a walker after a few months, researchers report today.”

    “The nerve-stimulating device doesn’t cure spinal cord injury, and it likely won’t eliminate wheelchair use, but it raises hopes that the assistive technology is practical enough for widespread use.”

    “For now, sending commands to the device is cumbersome. Users must select their desired movement on a tablet, which sends Bluetooth commands to a transmitter worn around the waist. That device must be positioned next to a “pulse generator” implanted in the abdomen, which then activates electrodes along the spine. Setting up to use the stimulation takes 5 to 10 minutes. But the next generation of devices should allow users to activate the pulse generator by giving voice commands to a smartwatch.”

    The article goes into detail about how this device differs from previous spinal cord stimulators, and a bit about the history of such devices, which have their roots in the 1980s and were originally intended to treat chronic pain.

    Shirt with magnetic buttons provides independence

    I came across the above post on LinkedIn about a year ago; a video of a man called Lincoln, who has cerebral palsy, putting on a shirt unaided. The shirt looks like a standard button shirt, but uses magnets for fastening. The typically viral LinkedIn post was lacking in detail, so I did some Googling, and found the company that creates these shirts.

    US-based MagnaReady was started by Maura Horton when her husband Don developed Parkinson’s Disease. When he started having difficulty fastening his shirt in 2009, Maura had the idea about using magnets, and eventually started the company. Watch the video (~5m) for the full story.

    Sadly, Don passed away in 2016, but the company remains active and has a range of casual, athletic and sleepwear clothing for men and women.

    The crisis is real: Where are the web accessibility professionals?

    A WebAIM article with some real food for thought.

    “The number of job listings with ‘accessibility’ in the title grew 78% in the year ending in July [2021] from the previous 12 months”. That’s on top of the 38% increase from the previous year. By 2027, the global accessibility testing market is poised to hit $606 million. Demand for accessibility professionals has never been higher.

    But there’s relatively low take-up amongst newcomers to the industry. “WebAIM’s 2021 Survey of Web Accessibility Practitioners had a significantly higher level of respondents that were over the age of 45 (37.3%) than did the 2020 Stack Overflow survey of web professionals as a whole (8.9%).” The article suggests that the industry may reach chronic shortages when these individuals retire.

    The article blames a lack of mandatory accessibility teaching in higher education, and calls for companies to pay accessibility professionals higher salaries to attract more people into this part of the industry.

    Which accessibility settings do the Dutch really use on their phone?

    I came across this article via a LinkedIn post by Gareth Ford Williams, which also summarises the article quite nicely.

    This article looks at how over a million people use their phones in the Netherlands. 43% of users surveyed use at least one accessibility setting, the most common one being “adjust text size” (33%). Interestingly, of that 33%, 13% made the text smaller (meaning 20% made the text larger).

    Only 1.27% of respondents have closed captions switched on by default, but as Gareth points out, this is likely because they’re more comfortable setting this feature on the app or website level. The figure is closer to 80% when looking at Netflix, Facebook and Twitter.

    There are a whole host of other statistics about all sorts of accessibility features throughout, and reference to why such features might be enabled. This can include situational impairments (disabling “shake to undo” while on a rattling bus or train), educational (non-native speakers enabling captions while learning a new language), etc, as well as disabilities.

    2021’s sample size of >1 million respondents is in stark contrast to the original study in 2020, which had just 268. The end of the article goes into detail about how it managed to achieve such high numbers this time around.


    Whew, that was a long newsletter! Did you know that you can subscribe to smaller, more frequent updates? The dai11y, week11y and fortnight11y newsletters get exactly the same content. The choice is entirely up to you! Curated with ♥ by developer @ChrisBAshton.

  • month11y issue 26

    Happy New Year! 🎉 New year, new look: you may have noticed the format for this month’s issue is different. I’ve separated each article by heading, and mostly done away with the bulletpoint list format. The old format never felt quite right, and made things like code examples difficult to add, but it did help keep the word count down! I’ll try to keep being concise. Please do drop me an email to let me know what you think about the new format!

    Without further ado, on with the issue.

    How many people with disabilities use our site?

    Hidde Devries writes the one article that you’ll want to direct people to whenever they ask that question.

    Implicitly, the person who asked that question is trying to find the return on investment. Hidde asks “what will we do with that data? What if it is a very low percentage? Whatever it is, equal access is still the right thing to aim for, a human right that is required by law”. He quotes:

    When we work on making our devices accessible by the blind, I don’t consider the bloody ROI. When I think about doing the right thing, I don’t think about an ROI. If that’s a hard line for you, then you should get out of the stock.

    Apple CEO Tim Cook

    Hidde points out too that even if we could get an accurate number – and we can’t, due to the user’s privacy being more important than our analytics – it doesn’t show the market potential. It doesn’t show how many disabled users have turned to competitors because they couldn’t access your site.

    Finally, making accessibility improvements will often benefit more people than just the intended audience. Think of a ‘dark mode’, which many people like to set, not just those who want to avoid headaches etc.

    In short, Hidde’s standard answer to this question is this:

    We can’t measure assistive technology usage for (good) privacy reasons, our analytics won’t show customers that went to a more accessible competitor, and accessibility benefits everyone.

    Dyslexic Myths Presented as Truths

    Gareth Ford Williams writes about the Smashing Magazine article Adding A Dyslexia-Friendly Mode To A Website, which I covered in dai11y 13/12/2021. He is highly critical of it, both here and as a comment on the article itself, for the following reasons.

    Firstly, the entire concept of a ‘dyslexia mode’ is “appalling”; Gareth touches on the ethics and possible GDPR breaches by building such a mode, especially if it allows us to ‘diagnose’ users and store this medical information in a cookie or in a profile.

    A lot of the advice in the article, Gareth claims, is aimed at accommodating users who have Irlen Syndrome, not dyslexia. The former is a problem with the brain’s ability to process visual information, whereas the latter is an audio condition. Gareth also says some of the advice, such as “fewer distractions”, are for other cognitive groups such as ADD, ADHD or ASD.

    The research quoted in the article has “only 27 subjects, all the same age, in the same class”, so not a reliable sample size. Gareth also argues a lot of the points around font choices, use of Comic Sans etc is presented without evidence.

    Thanks to James Buller for notifying me of Gareth’s response to the article. I’ve now added a disclaimer to my previous dai11y article, pointing to this one.

    Accessibility monitoring of public sector websites and mobile apps 2020-2021

    This report details how the Central Digital and Data Office (CDDO) monitored around 600 public sector websites for accessibility issues over almost two years. They tested based on the EN 301 549 standard, version 2.1.2, which maps closely to WCAG 2.1 accessibility levels A and AA.

    Accessibility issues were found on “nearly all” of the sites. The CDDO would send a report to the website owner and check again after 12 weeks, by which time 59% had fixed the issues or set “short-term deadlines” for fixing the remaining issues. 20% of organisations did not respond to the initial contact.

    “Disproportionate burden may be claimed where the impact of fully meeting the accessibility regulations is too much for an organisation to reasonably complete”. 32% of websites contacted claimed disproportionate burden. Some of these provided detailed reasoning as to the costs and benefits to their users. Some organisations were grateful for their audit report, which was sometimes the first they’d heard about accessibility regulations. Others did not respond positively; one stated it “took valuable resources away from priority pandemic-related work”.

    The most common issues were a lack of keyboard focus styles, low colour contrast and “parsing issues” (e.g. no label associated with form input). Accessibility statements are becoming out of date (many were published in September 2018/2019), with just 7% containing all required information. By the end of the monitoring process, 80% had full compliance.

    The report details what tools CDDO used and how the audit was conducted. Worth a read!

    On the <dl>

    Ben Myers walks us through the <dl> (‘description list’ – previously ‘definition list’ prior to HTML5) element. Name-value pairs are a common UI pattern you’ll have seen all over the place, for example:

    Publisher: New Riders Pub; 3rd edition (October 19, 2009)
    Language: English
    Paperback: 411 pages

    You could mark this up as a series of <div>s, but a screen reader user would lose out on benefits such as knowing how many name-value groups are in the list, and skipping over the list. It is better to use semantic markup, like so:

    <dl>
      <dt>Publisher</dt>
      <dd>New Riders Pub; 3rd edition (October 19, 2009)</dd>
      <dt>Language</dt>
      <dd>English</dd>
      <dt>Paperback</dt>
      <dd>411 pages</dd>
    </dl>
    

    You can use multiple <dd> (description detail) elements per <dt> (description term) if appropriate, e.g. associating multiple authors with a book. Just list the multiple <dd>s one after the other.

    You are also allowed to wrap your <dt>Foo</dt><dd>Bar</dd> element groups with a <div></div>, if needed, for style purposes. This is the only element that is allowed to wrap these.

    If you have multiple description lists in your page, you can differentiate them by adding an aria-label attribute to each <dl> element.

    WCAG 3 is not ready yet

    Article by Eric Eggert, reminding people that WCAG 3 won’t be released for another 3-5 years. The new standard is still in draft form and is subject to change. Commercial and public projects are, generally, required by law to comply to WCAG 2, and WCAG 3 is not backwards compatible, so we must take care to continue to abide by WCAG 2 in the meantime. WCAG 2.1 is the latest official standard, with 2.2 coming sometime this year.

    Eric focuses in on the new colour contrast algorithm that’s coming in WCAG 3: “the visual contrast algorithm, APCA, is a stark departure from the luminosity contrast algorithm used in WCAG 2”. Unlike in WCAG 2, APCA takes font face, size and weight into account, better representing how colour perception works in practice. The trade-off of extra complexity “might be totally worth it”, but there is little actionable advice in the specification at time of writing.

    If we were to have a “modular WCAG”, similar to what CSS is doing, we could package up new success criteria into a new version. Eric says this would give room to change ratings and evaluation guidelines per criterion, without having to release a new major version. It’s an interesting thought!

    Fix web accessibility systematically

    Another WCAG 3 related post by Eric Eggert, who claims the new standard will not be the silver bullet some people think it will.

    Eric laments the current situation of accessibility technologies: the complex set of documents including WCAG 2, ATAG 2 (standards for authoring tools), UAAG 2 (for browsers / user agents), ARIA, ARIA Authoring Practices (designed to be technologically neutral, so lacking HTML best practice), HTML Accessibility API Mappings and ARIA in HTML. This is a complex world for developers. ““Don’t use ARIA unless you have to” is a common phrase uttered by accessibility experts, but how are ordinary developers supposed to know when they have to?”

    The situation isn’t helped by a lack of interoperability, and a lack of traction in browsers. <input type="date"> has been standardised for over a decade, but still “lacks accessibility support in modern browsers”. Early thoughts around ARIA were that “most aspects of it would be converted into native HTML quickly: combo boxes, dialogs, tab panels”, etc – but a world with natively accessible features right out of the box “did not come to pass”. Instead, ARIA is now a meta language that sits between technologies, defining an accessibility vocabulary for them. ARIA takes on features of HTML, instead of the other way around.

    Releasing a new WCAG version will not fix the situation: Eric wants to see much more work done in browsers themselves. Making a form input with a missing label should trigger a console warning for developers. Standardising accessibility support in native elements would greatly simplify documentation and improve reliability. The easier accessibility is to teach, the more accessible the resulting websites.

    https://buttonbuddy.dev/

    A useful micro website by Stephanie Eckles. It explains the requirements for accessible contrast on buttons, and includes a generator for creating buttons of sufficient contrast.

    You have the option of using a colour picker, or switching to “Use text input” mode to put in the CSS hex codes that you intend to use. The generator will then tell you whether or not the button has sufficient contrast, factoring in whether or not the button will be used with ‘large text’ (which is subject to different contrast requirements, detailed on the website).

    The world’s most accessible websites

    This is a study by ToolTester.com, but take its findings with a big pinch of salt.

    The study looks at “the 200 most popular websites in the world”. This list of sites was allegedly “collected from data by Similarweb”, but comparing the study data with the top websites on similarweb.com, a lot of moderation has evidently taken place: the study omits adult websites, non-English websites, and (inexplicably) Reddit.

    asos.com is deemed the ‘least accessible’ site, with the “percentage of site inaccessible” graded as 21.38%. This story has been covered by the Mirror and also covered by ChargedRetail.co.uk, which is what brought my attention to the study in the first place. Both news sources implied that the 21% figure applies to the whole website – the Mirror even headlines ‘1 in 5 pages blocked’ – but according to the ToolTester methodology (at the end of the study), only the homepage was tested.

    ToolTester used ‘Arc Toolkit’ – a Chrome extension – to perform automated tests across these sites. It doesn’t look as though any manual testing was performed. For these reasons, I really think this study is lacking in detail and substance, but it’s an interesting data point nonetheless.

    ASOS performed poorly due to errors including poor colour contrast, missing ARIA and missing labels. Instagram came second in inaccessibility, lots of user generated content with no alt text causing the bulk of issues, but there are other more easily fixable issues, including a lack of alt text on the login page and a lack of ARIA labels on play buttons. Facebook also makes the bottom 10 list.

    Government websites NIH.gov, CDC.gov and GOV.UK fared best, with LinkedIn, H&M, PayPal and Amazon not far behind. All of these websites had more than 99% of their ‘site’ (read: homepage) considered accessible.

    Amazing haptic speaker lets visually impaired people read braille in midair

    ATM with additional big black pad hardware attached to it. A person's hand is hovering above the pad, their fingertips above a separate portion at the top of it, where the braille sensory happens.
    Copyright: Viktorija Paneva. Source: https://www.digitaltrends.com

    This is not a new article, but has been in my bookmarks since May 2020. Researchers at Bayreuth University in Germany have developed a speaker system which emits ultrasound waves that allow people to read braille in mid-air. The research is particularly pertinent during this coronavirus pandemic, where avoiding touching public surfaces is generally a good thing!

    The technology is made up of a 16×16 grid of speakers, and can detect a hand up to a distance of 70cm.

    You can read the full academic study, “HaptiRead: Reading Braille as Mid-Air Haptic Information“.

    Don’t make users switch caps letters to lowercase

    A quick tip by Stas Melnikov: add autocapitalize="off" attribute to your text input to have mobile browsers open a lowercase keyboard (as opposed to an all-caps keyboard). This is well suited to login forms which ask for the user’s email address.

    Accessibility of Content Management Systems – what’s stopping us?

    Back in October 2020, I wrote about how W3C decided not to use WordPress because it was considered inaccessible. They opted for the proprietary Craft CMS instead, as “the Craft team had made the commitment for Craft v4 to comply with ATAG AA standards“. At the time, this spawned a bit of an internet war, pitting ‘accessibility’ against ‘open source’.

    In today’s article (also available as a video, 26m), Marie Manandise reflects on her role at Studio 24, the agency tasked with redesigning the W3C site. Marie’s job was to choose the right CMS.

    Marie talks of “the accessibility paradox”, where CMS providers all claim to “care very much about accessibility”, even when none of them are considered accessible. She suggests that we take for granted how difficult accessibility is to get right, and what resources are needed.

    For example, to properly test that website navigation is accessible to a non-sighted user, Marie says you need to do paired testing: a sighted and non-sighted user sitting side by side, in front of a screen. And that you need to test in the same manner every time you update your website.

    CMS developers “don’t have the knowledge to make the assessment” as to whether or not their CMS is accessible. “Most of us are clueless at accessibility”. Accessibility groups embedded in CMS vendor organisations tend to be “operating in the margins”. Marie says that accessibility experts have an image problem, and don’t carry the “aura of security experts, for example”.

    So what can we do about it? Echoing Eric Eggert’s points the other day, the answer is to simplify the learning material / specifications, and to ensure that accessibility is on the curriculum at courses and bootcamps.

    The endless search for “here” in the unhelpful “click here” button

    • Eric Bailey articulates all the reasons why you should stop using links and buttons with the text value “here” or “click here”. This is such a common mistake across the web and is a habit we need to break out of.
    • Compare the following two sentences:
      1. Click here to learn about how to roast Brussels sprouts
      2. Learn how to roast Brussels sprouts
    • The former makes no sense out of context. If a screen reader user pulls up a list of all links in the page, they’re not going to know what “click here” is referring to. “How to roast Brussels sprouts” is the main action, and makes sense on its own. The latter also has a greater surface area to click on. Finally, some users activate links by saying the name of the link; the latter works well for that, whereas the former would be problematic if there were several links called “click here”.
    • Now consider these instructions: “Click the button below”. There are two problems here:
      • “Click” only makes sense in a desktop/laptop mouse context. It doesn’t make sense for keyboard or touchscreen users. Yes, they’ll probably still understand what to do, but that doesn’t mean we can’t use more universal language, such as “Select”.
      • “Below” is also problematic. What if our content has been translated into a vertically-oriented language, and therefore makes no sense? What if the design is different for desktop, such that the link ‘below’ is actually to the side? What if we’re reading this in VR – does “below” now mean someone will think it’s underneath them? The web is a highly malleable place. Better to use language like “next/previous” or “following/preceding”.
    • Eric ends by pointing to the proposed CSS Logical Properties module. This favours “start/end” properties rather than the more traditional “top/right/bottom/left”, as the latter have an implicit default writing mode of left-to-right & top-to-bottom – not a good look for a global technology.

    WebAIM guidance on Alternative Text

    • This guidance was given a fresh update in October 2021, so I’m reading it anew.
    • “Although technology is getting better at recognizing what an image depicts, algorithms alone cannot understand what an image means within the context of the overall page. A maple leaf might represent Canada, or it might just illustrate the leaf of a tree.”
    • There are several examples of good vs bad alt text, and clarifications around when an empty alt text is appropriate. But I knew that already, so have cherry-picked some of the more interesting content in the points that follow.
    • Other than the alt attribute, “alternative text can be presented within visible body text near the image” or even “on a separate page, linked from either the image or a text link adjacent to the image” (but only “when the text equivalent cannot be presented succinctly”). Note that the longdesc attribute is deprecated and should not be used.
    • A trip down memory lane: image maps. The main image associated with the <map> must have an alt attribute that describes the content within the image, but is not otherwise presented with each image map hot spot. For example, a State of New York map that has an <area> for each county might have alt="Counties of New York", whereas its hot spots would each have an alt attribute containing the name of the county. If the main image does not convey content (just a container for the hot spots), then alt="" is appropriate.
    • Finally, a note on <figure> and <figcaption>. The <img> within the <figure> must have non-empty alt attribute, which should not just be a repeat of the <figcaption> contents. I was surprised by this, so I read the linked How do you figure? blog post by Scott O’Hara. Some highlights from that post:
      • “One of the biggest misunderstandings of using a figcaption is that it’s used in place of image alternative text”.
      • “A figcaption is meant to provide a caption or summary to a figure, conveying additional information that may not be directly apparent from reviewing the figure itself. If an image is given an empty alt, then the figcaption is in effect describing nothing. And that doesn’t make much sense, does it?”
      • Moreover, using an empty alt="" on the image causes serious screen reader issues. It’s essentially the same as an <img alt="" /> anywhere else in the page; in other words, it’s treated as decorative, and ignored by the screen reader. So an empty alt="" will mean your entire <figure> gets skipped over.

    VR Game Gravitational Blends Puzzles With Real Accessibility Challenges

    • Electric Monkeys Studio has built a VR game set in the future, in a scientific facility where gravitational technology is being discovered. The protagonist, Sebastian, uses a wheelchair, presenting an extra challenge in navigating the environment after an explosion destroys much of the facility, as you have to find ways around obstacles in your path.
    • It’s promising to see more representation of wheelchair users, adding to games like Life is Strange and Sly Cooper. In November 2020, Bethesda added wheelchairs to Fallout 76 after a fan asked the developer to add her aid to the game.
    • The article lacks detail on the gameplay, but there are a few reviews on Steam. Whilst there are complaints around the graphical quality and the controls, one positive reviewer goes into detail about some of the accessibility constraints forced on the player, which I thought was interesting:
    • “You can’t look around very much without seeing the start of ‘tunnel vision’ and colors fading, and a red icon reminding you to push a button to re-orient. I accept this because a person with paralysis mainly turns their head, not their body. In real life, such a person has to make big adjustments just to see in a different direction. Yes, it’s annoying, and holds you back. I accept it as simulating part of what it feels like to be this person.”
    • As a VR player myself, one of the most immersion-ruining aspects is movement. Pressing a button to walk or run kind of pulls you out of the experience (and can cause motion sickness), so to have a game where being seated matches what your character is doing, is quite a clever solution to the problem.

    Adding A Dyslexia-Friendly Mode To A Website

    • Smashing Magazine article by John C Barstow. I thought this was going to be one of those “choose a dyslexic-friendly font” type article, but it covers a lot more than that!
    • According to John, “research shows that standard fonts like Helvetica and Times New Roman are just as readable as purpose-built fonts like Dyslexie or Open Dyslexic”. He goes on to clarify that the most important factor is the spacing between letters and words. The reason fonts like Comic Sans are so popular with dyslexic readers is the wider spacing found in that font.
    • We can increase the letter spacing of our chosen font using the ch unit, which is based on the size of the 0 glyph – often a good approximation of the average character width. John comes up with this CSS: .dyslexia-mode { letter-spacing: 0.35ch; word-spacing: 1.225ch; }, which gives a 3.5x letter spacing.
    • Ligatures are when multiple characters are merged into a single glyph; you’ll often see this when “f” and “i” are rendered next to one another, forming a joined-together “fi”. Dyslexic readers may struggle with ligatures, so we can disable the feature with font-variant-ligatures: none, though this may be disabled automatically by some browsers when the letter spacing is set high enough.
    • I learned about Heydon Pickering’s owl selector (* + *), which can be used to apply consistent line-spacing, e.g. * + * { margin-top: 1.5em }.
    • John finishes up by applying a slightly bigger font weight to his text, to counteract the extra whitespace (font-weight: 600, which is “demi-bold”, apparently). He also applies style to his bold text, to differentiate it from the demi-bold regular text: .dyslexia-mode strong { color: #000 }.
    • There’s also a tip around avoiding unnecessarily distracting elements, such as background images, for which you can use the :not pseudo-class. Example: body:not(.dyslexia-mode) main { background-image: url("...") }.
    • The article concludes with a CodePen showing the before-and-after. The comments below the article are also worth a read.

    Collaborative planning, the forgotten step of accessible development

    • A deque article describing “a11yBID”, or “Accessibility Business Informed Development”.
    • It’s essentially BDD (“Behaviour Driven Development”), in that it involves conversations between stakeholders and cross-functional team members to define Acceptance Criteria (AC), often in a formatted plain language format called Gherkin.
    • a11yBID is different to BDD as it “doesn’t discover classic business requirements as BDD does. Instead, it clarifies the accessibility-specific aspects of those business requirements”.
    • Starting with high-fidelity designs (i.e. PDFs), the process begins with an “a11y Amigos” meeting between the designer, the tester and the business analyst. The group reviews the design from an a11y perspective, asking questions around focus management etc, and drafting the “a11yAC” user stories. Here is an example of one:
      • Scenario: A blind screen reader user can understand that content is loading
      • Given I am a blind screen reader user
      • And I have submitted the form
      • And a loading spinner is visible as I await a response from the server
      • When I navigate to the loading spinner image
      • Then I hear the image role
      • And I hear the alt text as “loading”
    • The article concludes with some general advice to make a11yBID scale. For example, making use of a design system and component library, so that you can reuse tried-and-tested designs.

    The CSS “content” property accepts alternative text

    Niagara-made audio game nominated for accessibility Game Award

    • The Vale: Shadow of the Crown, by Falling Squirrel games company, is an audio-only game, released in August 2021.
    • The game gained a nomination at this year’s Game Awards (which was watched by 80 million people in 2020).
    • I found a more informative article on digitaltrends, which notes that the games origins weren’t “altruistic” in nature; the studio director simply didn’t have any design experience, so wanted to build a game on a scale that he could afford!
    • “The story centers around Alex — a feisty, intensely brave, and blind princess — and her companion, Shepherd, and their journey to save their realm from destruction”. The game uses 3D audio technology and controller feedback to immerse the player in the story. There are no visuals other than the menu, which can also be navigated by audio only, i.e. this game is fully accessible to visually impaired players.

    Whew, that was a long newsletter! Did you know that you can subscribe to smaller, more frequent updates? The dai11y, week11y and fortnight11y newsletters get exactly the same content. The choice is entirely up to you! Curated with ♥ by developer @ChrisBAshton.

  • month11y issue 25

    Issue 25 of month11y is a special one: it marks two years since the first issue in December 2019. If you count all the dai11y, week11y, fortnight11y and month11y newsletters together, I’ve now published over 600 newsletters!

    I didn’t honestly know if I’d be able to keep it up, especially after stepping down from frontend web development and becoming a backend developer. But I’ve really enjoyed keeping up to date with the ever-evolving world of accessibility, and sharing my learnings with you. As ever, please do spread the word about the newsletter – your friends and colleagues can sign up here – and do drop me a line if there’s anything you can think of to improve the newsletter (or any feedback you’d like to give).

    Without further ado, let’s kick-off issue 25 with a double HTMHell digest!

    Edge dev tools screenshot: A demo site with broken html like empty buttons, img without alt, wrong aria roles, missing aria roles, and aria-hidden on focusable elements.
    Screenshot of Edge browser’s “Elements” tab, showing ‘warning’ underlines on inaccessible HTML.
    • Debugging HTML: Accessibility
      • “In Chrome or Edge open DevTools, click the Elements tab, select the element you want to inspect and click the Accessibility tab. The accessibility pane shows you how the element is represented in the accessibility tree, which ARIA attributes it has, and its computed properties.”
      • Buttons need a label (denoted by Name:, populated by fields such as aria-label, title, or button innerText).
      • Buttons need a suitable role (denoted by Role: "button").
      • Buttons need to be focusable (denoted by Focusable: true).
      • Note that you also need to be able to activate buttons with Space or Enter, but this information isn’t exposed in the Accessibility tab.
      • There are also instructions for Firefox, which uses a different accessibility API. For example, the role name in Firefox will be pushbutton, rather than button.
    • Debugging HTML: Linting
      • The Edge browser now highlights accessibility issues directly in the elements panel of the DevTools (see screenshot).
      • “The built-in linter highlights potential issues in your HTML by marking affected elements with a squiggly yellow line”.
      • “If you hover over the opening tag, a tooltip with a description of the issue appears.”

    Accessibility inception: sharing your knowledge (video, 46m)

    • This is a Mischa Andrews talk from #ID24 in November 2017. I’ve had it in my bookmarks for a while, and am so pleased I’ve finally managed to watch it.
    • Mischa talks openly and candidly about how you can effect accessibility change in your organisation, whilst overcoming the inevitable office politics that come with the territory.
    • I liked the idea of creating a “decoy audience”. Let’s say you have a colleague who feels they have nothing to learn about accessibility – they “know it all already” – but they consistently make accessibility mistakes. You can teach them how to do things properly, without bruising their ego, by arranging a talk or workshop about accessibility, and inviting them to present part of it. The theory is that they can continue to feel good about their own knowledge, whilst also opening up to learning from your side of the talk.
    • A common tactic used by organisations is to have a ‘gatekeeper’ for accessibility, e.g. someone doing accessibility testing as part of the acceptance tests at the end of a project. Mischa warns that you have to tread carefully here, as it’s often too late or difficult to do much about accessibility issues if they’re left until the end of the process. You may also find people try to work around you, such as go to your manager or try to argue that their project shouldn’t go through the normal process. It is best to only use this ‘gatekeeper’ tactic if your organisation is already practising good accessibility.
    • Make it as easy as possible to do the right thing, e.g. by adding accessibility information directly as code comments, or embedded in Word templates, rather than expecting people to seek out and find the guidance independently.
    • Practice what you preach. You may be seen as the a11y expert in the organisation, and people will reuse your resources, such as colour choices, etc, on the assumption that they’ve already been accessibility tested.
    • It is useful to memorise a handful of things that can be used as opportunities to motivate people – and to convince people to listen to you. If you know statistics around how many people have particular kinds of disabilities, or how much money the organisation loses through being inaccessible, or what accessibility laws your country has to abide by, or the difference between different versions of WCAG, you’ll look knowledgeable enough for your words to carry more weight. You can also slip these facts into conversations, which can help to inspire the next generation of accessibility advocates in your organisation.

    Next is a two-article special, covering accessibility advances by Android and Apple!

    Google Improving Smartphone Accessibility

    • Two new features are coming to Android smartphones: “Camera Switches“, and “Project Activate”. These features will allow users to use gestures like smiling, raising eyebrows, or looking in a particular direction, to issue a command such as returning to the homescreen or opening notifications.
    • The gestures are configurable: users can set how long to hold the gesture for, or how big the gesture must be, to issue the command.
    • “The updates are aimed at people with motor and speech disabilities, Google said, and the new tools were developed with feedback from people who rely on alternative communication technology.”

    Apple is testing AirPods as possible hearing aids, posture improvers and in-ear thermometers

    • Apple is prototyping to see motion sensors inside AirPods can be used to tell users if they’re slouching. They’re also experimenting with measuring core body temperature, and perhaps most excitingly, whether or not AirPods can be used as “proper hearing aids” (they already come with a ‘conversation boost‘ feature).
    • Under US federal law, devices marketed as hearing aids must “be sold through licensed specialists, who adjust them to the specific user”. However, “in July, President Biden signed an executive order directing the Department of Health and Human Services to allow hearing aids to be sold over the counter and be adjusted by consumers”; promising news for Apple.

    Buttons vs. Links

    • Eric Eggert describes the difference between a link and a button:
      • A link changes what the URL in the browser points to; either a new page, or a file to download, or a frame to update the source of.
      • A button performs an action. Originally only available as an <input type="submit" />, with the sole purpose of submitting forms, then along came the <button> element which allowed more versatility. It’s great for creating things like calculators, where the end result URL is not an important thing to be able to share.
    • Links and buttons have different roles. Assistive technologies announce them as “link” and “button” respectively, and this sets a user expectation as to the behaviour.
    • Screen readers have a way of easily presenting all the links in the page; buttons are harder to surface.
    • Links can be activated with the return key, whereas buttons can be activated with return or space.
    • Context is important. You can style a link to look like a button, and that’s fine, if the button says something like “Read the full story”, which hints that it will take you to another page.
    • Eric concludes that the link vs button debate is a grey area. He’s surprisingly unopinionated in the close: “there is no one true way to code or design something”.

    As a bonus for the above article, I also read THE BUTTON CHEAT SHEET (buttoncheatsheet.com). It compares different ways of marking up buttons and button-like things. I don’t really see how useful it can be, but it’s worth a quick look through, if only to see how many different ways it can be done.

    Three Olay jars of cream, in different colours, each topped with a white easy-open lid.
    Credit: beautypackaging.com

    Olay Designs An Easy-Open Lid—& Shares the Inclusive Design

    • Olay, the beauty products manufacturer, have designed a new lid prototype for its creams, designed to be accessible.
    • It has an “easy open winged cap”, “extra grip raised lid”, “high contrast product label”, and Braille text spelling out “face cream”.
    • The lids are currently only available on Olay’s website.
    • The design is open-source, meaning other beauty brands are free to use it and build upon it.

    Gorillas’ nav: a case study

    • A really interesting article by developer & accessibility advocate Kitty Giraudel, explaining how they built the main navigation on their employer’s website, Gorillas.
    • It’s a hamburger menu style across all screen sizes, not just on mobile. You have to tap on the ‘hamburger’ to expand the menu and show the menu items.
    • This behaviour comes for free with the <details>/<summary> HTML elements, which as native elements, work without JavaScript. However, clicking outside of the menu should cause the menu to ‘close’ again, and that doesn’t happen with those elements, so Kitty & the team replace the elements with a <button> if JavaScript is available, adding a listener to the click and focusin events to close the menu if the event takes place outside of the menu container.
    • “Landmarks such as <nav> can be listed by assistive technologies, [therefore] it’s important that the <nav> itself is not the element whose visibility is being toggled. Otherwise, it’s undiscoverable when hidden”. So Kitty’s implementation wraps the menu in a <nav role="navigation"> and the CSS visibility toggling is only applied to its contents, not to the <nav> element itself.
    • Kitty walks through a good example of progressive enhancement in CSS, using the @supports query to check if backdrop-filter is supported before overriding the background-color.
    • Elsewhere on the Gorillas page, there is a language selector. Kitty points out that they avoided using flags to denote language, as flags are ultimately for countries, not languages (think UK vs USA flags for English).
    • The language selector uses 2-letter codes, e.g. “EN” for “English”, with visually hidden text to clarify the language name: <a href="/en" hreflang="en">EN<span class="sr-only" lang="en"> — English</span></a>. Note the hreflang attribute, which I hadn’t heard of before, but is supposed to indicate the language of the page that is being linked to. Kitty admits it “might do nothing”, given the lack of documentation on it.
    • They initially tried applying an aria-hidden to the 2-letter language codes to avoid assistive technologies reading them out (as they’re often incorrect, e.g. “DE” being pronounced “duh”). However, this would fail WCAG SC 2.5.3 Label in name, as voice navigation users should be able to navigate the page by what they see, e.g. “click DE”.
    • Finally, I’ve learned that “When using aria-expanded="true", the label should not mention “open” or “close” (or similar) as the state is already conveyed via the attribute”.

    Vicky Teinaki shares this tip on Twitter: “I was today years old when I found out that I can share a Google Slides presentation in html (for screen reader users and magnification users) by swapping out ‘/edit’ in the URL for ‘/htmlpresent’.”

    Share presentation in html (for screen reader users and magnification users): 
https://docs.google.com/presendation/d/[link censored]/htmlpresent
    Screenshot of a Google Slides URL, ending in “/htmlpresent”.

    National Convention Sponsorship Statement Regarding accessiBe

    • The (American) National Federation of the Blind made a statement in June, about accessiBe, the market leading ‘accessibility overlay’ company that I’ve written about several times now.
    • I missed this when it came out, and wouldn’t have known about it were it not for Steve Faulkner’s tweet. He picks out this pretty damning quote:
    • “This week, the Board of Directors reviewed accessiBe’s business practices at the urging of members who have researched and interacted with the company, and the Board believes that accessiBe currently engages in behavior that is harmful to the advancement of blind people in society”.
    • The statement goes on to announce that the NFB has “revoked accessiBe’s sponsorship of the convention”.

    The ADA lawsuit settlement involving an accessibility overlay

    • A UX Collective article about a recent case against accessibility overlays.
    • Eyebobs is an online glasses company that used an accessibility overlay to attempt to conform to WCAG. It was sued by a blind plaintiff in January 2021, for violations of the ADA (Americans with Disabilities Act).
    • The case enrolled Karl Groves as an expert witness, who wrote a 35-page indictment of how inaccessible the Eyebobs site was even with the overlay. Karl also created overlayfactsheet.com, to educate on how accessibility overlays don’t work.
    • The settlement requires Eyebobs to take the following actions:
      • Create an accessibility coordination team
      • Perform an accessibility audit of its ‘digital properties’ (using an accessibility consultant)
      • Adopt an accessibility statement
      • Implement an accessibility strategy
      • Provide accessibility training to its employees
    • It must comply with these measures within two years.
    • It must also work with third-parties (such as embedded maps) to make their content accessible. The deadline for this can be extended up to five years, reflecting the added complexity.
    • The article ends with a link to Lighthouse vs ADP – “the next lawsuit to keep an eye out for”.

    Next, a two-article special – both written by Raghavendra Satish Peri:

    • The Captcha Conundrum & Accessible Alternatives
      • Raghavendra, a blind, accessibility specialist, talks through the problems they faced trying to create an account on Wikipedia. They were faced with a CAPTCHA (Completely Automated Turing test to tell Computers and Humans Apart). It was visual only, and had no audio alternative and no option to use a one-time confirmation code sent to email or phone.
      • Some CAPTCHA solutions do provide an audio alternative, but this is inaccessible to deafblind users.
      • In addition to email/phone options, you could also use the honeypot method, whereby a text field is added to the form but visually hidden. Bots will find the input and fill it with text, so you can avoid a lot of spam form submissions by filtering out all submissions that contain that input.
      • Another inclusive option is a logical or mathematical test, e.g. “Is fire hot or cold?”, as bots will struggle with this. It can be confusing for some users to know how to respond, however.
      • Google’s reCAPTCHA is apparently quite good, requiring only a box to be checked. However, it sometimes treats screenreader behaviour as bot behaviour.
      • Raghavendra concludes “it’s always better to offer multiple options that work for multiple types of disabilities than just one or two”.
    • Scroll to top: Where should the focus land?
      • This is more of a placeholder than an article, in which Raghavendra asks us, the community, where the focus should land when activating a “scroll to top” link. What exactly is the ‘top’? It’s easy enough to visually scroll to the top of the page, but where should the keyboard focus go? We have three options:
        1. Move focus to the <body> tag (a poor experience in NVDA, as nothing is announced).
        2. Move focus to the “Skip to main content” link.
        3. Move focus to the <h1> heading level one, or <main> region landmark.
      • There is no definitive answer, but there are some interesting comments at the bottom. The community seems largely split on whether it should be 2 or 3.

    Blind People Won the Right to Break Ebook DRM. In 3 Years, They’ll Have to Do It Again

    • This Wired article details how accessibility advocates in America regularly have to go to court in order to be granted an exemption to the Digital Millennium Copyrights Act (DMCA). The exemptions, which last for three years at a time, mean that blind people are able to circumvent copy protections on ebooks for the sake of accessibility. It would otherwise be illegal for these users to use third party programs (such as JAWS) to lift text and save in a different, accessible file format.
    • In 2014, publishers fought Amazon for enabling a text-to-speech (TTS) feature on the Kindle, claiming that it violated their copyright on audiobooks. To this day, publishers are able to disable TTS on their books, which makes it difficult for blind people to consume their content.
    • Even when TTS is enabled by the publisher, many ebooks lack alternative text for their illustrations. Non-profit initiatives like Bookshare can provide semi-accessible versions of inaccessible books, but they must agree not to change the content, meaning they’re not permitted (or, in the world of academia, sufficiently qualified) to fill in any missing alternative text.
    • In Europe, there is already a law (the European Accessibility Act) requiring all ebooks published in the EU to be fully accessible from June 2025. There is hope that this might set a precedent in the USA, meaning that advocates would no longer have to fight the case for exemption every three years.

    Next:

    • Chancey Fleet writes a Twitter thread about their experience using Google Translate’s new “Transcribe” feature for iOS.
    • Chancey wanted to watch Netflix’s House of Flowers, which is in Spanish. It has English subtitles, but the ‘audio description’ of scenes is in Spanish.
    • Chancey uses VoiceOver with a Braille screen reader, i.e. it outputs to a Braille display rather than as speech. Chancey wanted to use Transcribe to catch the dialog and audio description, translate it, and output it to Braille.
    • Evidently, Google was not happy with this, failing immediately with “PLUG IN HEADPHONES TO USE TRANSCRIBE WITH VOICEOVER”. Chancey tried to fool it by plugging in a Lightning headphone dongle, but that didn’t work. They tried closing VoiceOver, starting the Transcribe, and then launching VoiceOver again, at which point the transcribing immediately stopped with the same error message.
    • Why was this happening? Because VoiceOver speech would, naturally, mess with the effectiveness of the transcription. However, outputting to Braille would not interfere with the transcription. This is not a scenario that the team behind Transcribe have considered, so Transcribe simply shuts down, rather than giving the user a friendly warning and then allowing them to continue.
    • In my developer career, I have sometimes been asked if it is possible to detect whether someone is using a screen reader, to give them a different experience. This Twitter thread shows exactly why this is a bad idea. You’re never going to know your users better than they know themselves.

    Letting users tick a ‘none’ checkbox

    • A GOV.UK blog post from the Design System team, describing why they’ve added a new feature to the checkboxes component.
    • When answering questions, users can be unsure what to do if none of the options apply to them. Users “want to give a clear answer, especially if they’re concerned about completing an application accurately and truthfully”.
    • Additionally, some users might assume that if they leave the checkboxes unchecked, that the system will return them to the question later, not realising that they’ve actually skipped the question.
    • Some services using the checkboxes component were already adding their own “None” option, which was not ideal as it meant users could provide contradictory answers, such as “None” in addition to other options.
    • Supporting “None” natively in the component meant that the developers were able to add JavaScript to prevent users from ticking the “None” checkbox in addition to other boxes. It also meant they could style the option slightly differently.
    • It is still up to services to decide on the wording of the “None” checkbox. The blog post advises against directions like “None of the above”, as this is a visual reference that makes little sense to screen reader users. “None of these” is better.

    Twitch streamer beats Dark Souls 3 with a single button

    • Twitch streamer Rudeism used a homemade, single-buttoned controller to complete Dark Souls 3, a notoriously difficult game. In order for the one-button system to work, he mapped the game’s inputs to Morse code.
    • He pressed the button 258,250 times during his two-month run of the game.
    • During the challenge, Rudeism raised money for AbleGamers: “a nonprofit organization that advocates for accessibility in the video game industry”. He was also advocating for games to support more accessibility options and difficulty modifiers as standard.

    Whew, that was a long newsletter! Did you know that you can subscribe to smaller, more frequent updates? The dai11y, week11y and fortnight11y newsletters get exactly the same content. The choice is entirely up to you! Curated with ♥ by developer @ChrisBAshton.

  • month11y issue 24

    Welcome to your monthly frequent11y newsletter, brought to you by @ChrisBAshton. I hope you enjoy these a11y articles I’ve collated and summarised for you. (Psst – if you find these emails too long, consider switching to shorter, more frequent updates). Now on with the show!

    Picture of bump labels for keyboard. There's a bumpy red X over the right arrow key.
    Image: Microsoft

    Surface Adaptive Kit makes Microsoft’s laptops more accessible

    • Microsoft is creating a “Surface Adaptive Kit” for its range of laptops/tablets, to better accommodate people with disabilities.
    • The kit includes “keycap labels, bump labels, port indicators and device openers”.
    • For example, a device opener includes a pull tab and ring, to make it easier to open the laptop lid.
    • There’s no pricing information yet, but it is expected to launch this year.

    Tips for Making HTML Lists Accessible

    • This article is a quick reminder on HTML list markup.
    • First of all, decide whether you actually need a list; sometimes it is better to format your content as paragraphs with headings instead. This way, assistive technology users can easily skip to the heading that they want to read.
    • If you do use a list, decide whether it should be unordered (<ul>), ordered (<ol>) or a description list (<dl>). The latter is useful for glossaries or recipes, e.g. <dl><dt>Chicken</dt><dd>A small bird that lays eggs</dd>...</dl>.

    10 Video Games That Have Great Accessibility Options

    There are some really interesting accessibility options in the games in this article:

    • Uncharted and The Last Of Us Part II are famously accessible, and are called out here.
    • A Blind Legend is a game that “can be played entirely through sound and only asks for touch screen or mouse input”. It does not incorporate visuals.
    • Grounded has the player shrunk to the size of an insect and having to find their way home across their back yard. The developers have considered arachnophobia – the intense fear of spiders – and thus offer an Arachnophobia Safe Mode Slider, allowing players to edit in-game spiders to have no legs, no eyes, or even no textures or sounds at all, without sacrificing the enemies’ difficulty.
    • Hyperdot is a game “where the player avoids incoming attacks by darting around the screen”. The game can be played on any controller, including eye trackers.

    Does WAI-ARIA even work with WebXR?

    As someone who has recently bought an Oculus Quest 2, this is really exciting technology that has come a long way in a very short time. It’s crucial that we address accessibility needs as this technology matures.

    • Thomas Logan writes about his experiment with ARIA and Web XR (“Web Extended Reality”, or VR).
    • He uses aframe-gui, a GUI component framework for A-Frame, which is a web framework for making 3D experiences. Here is Thomas’s demo.
    • Using ARIA to add the necessary role and aria-label to elements, as well as tabindex and onfocus handlers, Thomas has made an XR experience that is navigable via keyboard and by some assistive technology (AT) such as voice assisted navigation and screen readers. The full list of tested AT is in the article, which describes the usability issues encountered. For example, “Voice Control” on iOS/Safari does not detect the link or button in the demo.

    This Brazilian pianist uses ‘bionic gloves’ to play

    • Pianist João Carlos Martins lost the use of his right hand in a mugging in Bulgaria in 1995.
    • Industrial designer Ubiratan Bizarro invented the “Bionic Extender Gloves”, which have rods that make the fingers spring back up after they depress the piano keys, allowing the pianist to continue playing.
    • The first pair of these gloves for Martins cost less than $100 to make, and are made by a 3D printer.
    • It has meant that Martins has been able to play his favorite Bach sonatas once more.

    Twitter thread about “presentational list heuristics” by James Craig. The whole thing is worth a read, but here are the highlights:

    • There used to be a problem with too many lists for assistive tech users: “all I hear when reading news sites is ‘list, two items … end of list, list 4 items…’ and I don’t care about all the lists.”
    • This was caused by developers marking too much content up as lists, even when not appropriate.
    • Therefore, WebKit now applies some heuristics to these lists, to decide whether or not to expose the list semantics to the accessibility tree.
    • It considers whether the list has any bullet points. After all, if a sighted user doesn’t need to know it’s a list, then why should a screen reader user?
    • Similar principles are applied to table markup, which was regularly used for layouts in the early web.
    • “Many people think it’s only display: none; and visibility: hidden; but dozens, if not hundreds, of style characteristics contribute [to computing the accessibility tree].”
    • False positives are extremely rare. That said, developers can force the list semantics to be obeyed by applying role="list" to the <ul>/<ol>.

    5 False Claims 1-Line “AI” Accessibility Script Vendors Make (video, 13m, or read the transcript)

    • Eric Eggert disputes five claims that companies [such as accessiBe] make about their products:
      1. “Accessibility can be fully automated”. Human judgement is required to determine what kind of alt text is appropriate in a given context.
      2. “AI solutions are effortless”. For you maybe, but the effort is simply shifted to the user, i.e. they now have to use the screen reader widget on your site rather than the native screen reader they’re used to.
      3. “These tools protect you from lawsuits”. Eric says that this is a scare tactic, and a poor motivator for implementing accessibility. Only 11,000 ADA Title III lawsuits happened in 2019, despite 98% of all websites not meeting WCAG 2.1, so the chance of being sued is statistically low.
      4. “It’s cheap”. These services cost $1,500 to $5,000 over a three year period of coverage. If you don’t renew, you lose those ‘benefits’, whereas if you pay an accessibility consultant to fix the problem at the source, the fix is permanent.
      5. “WCAG conformance. AA! 100%!”. Eric cites numerous examples of websites using these widgets, and still having accessibility violations. He summarises “I cannot fathom how they claim WCAG 2.1 AA accessibility.”

    Colorblind Accessibility Manifesto

    • colorblindaccessibilitymanifesto.com lists 10 rules developers/designers should follow to not exclude the 350 million colourblind people in the world; nearly 8% of men and 0.4% of women.
      • Start with “Why?” [you are making the change in the first place]
      • Don’t communicate only with colors
      • Design with shapes
      • Choose the right copy
      • Test your designs in black and white
      • Rethink button states
      • Use contrast
      • The smaller the item, the bigger the problems
      • Less fancy, more usable
      • More than you think [have colourblindness]

    Myths about Web Accessibility

    Have Single-Page Apps Ruined the Web? (video, 19m)

    • Talk by Rich Harris, creator of Rollup and Svelte, for Jamstack Conf.
    • He explains what a Single Page App (SPA) is, then starts off critical. “SPAs are terrible because”:
      • Bloated JS framework, complex tooling, poor performance.
      • It will be buggy. Expectations of the web are broken, e.g. CMD + Click should open links in new tabs, but often won’t work in SPAs.
      • Accessibility issues: focus management, scroll management, navigation announcements, etc.
      • Less resilience. Rich shares a webpage he often points people to when they assume that everyone has JavaScript. It is a long flowchart of all of the reasons why JS may not load for someone. Rich also points out that these users are underrepresented in analytics, because analytics typically require JS to run.
    • But then he highlights the benefits:
      • SPAs allow you to do things you can’t do ‘natively’, e.g. transitions between pages.
      • Only need to load third party scripts once, whereas multi-page apps (i.e. the traditional server-rendered sites) have to at least evaluate the JS on each page load, even if the scripts themselves are already cached.
      • Single codebase of JS (rather than 1 for client, and 1 for server, which may be, for example, PHP).
    • Rich proposes a new direction for the web, and coins the term “transitional apps” (from “transitional design” in the interior design industry), which are apps that take the best of both worlds. There is a lot happening in this space, including:

    Stark, a hub for accessible software design, launches a Mac app in beta

    • Stark is a suite of tools for the world’s most popular design apps. “Companies can upload their design files, which then identifies accessibility issues and suggests changes.”
    • It “offers checks and suggestions to make sure that visual materials meet accessibility standards for visually impaired people”. More than 500,000 people have used Stark’s integrated plug-ins for apps like Adobe XD, Figma, Sketch and Google Chrome.
    • Stark have now released Stark for Mac, a standalone app that works with Sketch and will soon work with Figma and Adobe XD. It allows you to detect accessibility issues at scale, rather than on a per-file basis as is the case with the plugins.
    • Stark has a limited free plan, after which it costs $60 per year for the current suite of tools. The private beta version of Stark for Mac is currently free, with pricing yet to be announced.
    Image split into two columns. Left column has 'sad face' smiley, right column says 'Coronavirus is a virus that makes some people very ill. People also call it COVID-19.' On the next row, left column has a happy smiley face with little virus icons over it. Right column says 'It is possible to have Covid-19 without knowing.'
    Example screenshot of an “easy read” format.

    Easy read is hard to get right

    • This is a GOV.UK blog from the Inclusive Design team at UK Health Security Agency.
    • It is about the “easy read” format – something I’d never actually come across before.
    • The format, intended for people with learning difficulties, has a very specific template and definition:
      • wide margins
      • images on the left (to help convey meaning to the text on the right)
      • large text (14 to 16pt)
      • bigger spaces between lines (1.5 spacing)
      • 1 idea per image
    • The nature of these requirements mean that ‘easy read’ content is often published as a PDF. This comes with its own accessibility issues, described in the article.
    • The intended audience often has a ‘support person’ that they share this kind of content with, so it is important that they are easily able to print off the information and keep it together.
    • Some users preferred text-only versions of the content, as they found the use and choice of images patronising.

    Xbox reveals a huge new accessibility feature that puts Sony and Nintendo to shame

    • A clickbait headline, no doubt, but an interesting announcement: Xbox are introducing a classification system to their stores (Xbox.com, PC, Game Pass), ‘tagging’ games with information related to their accessibility. This is to make it easier for disabled gamers to know whether a game supports their needs.
    • “Testing of the feature is currently underway in the public Xbox Accessibility Insider League (XAIL) branch on all modern Xbox consoles. XAIL is free for all Xbox owners to join and is a group specifically designed for testing accessibility features in games and the Xbox operating system. It currently has around 60,000 enrolled members.”
    • Microsoft has made this system quite strict. For example, for a game to be tagged as having accessible “subtitle options”, the game needs to do more than just ‘have subtitles’, as it must allow the subtitles to be customised and resizable to a minimum of 200% of their original size.

    Accessibility overlays are a hot topic in the a11y world, so it’s worth keeping on top of all legal proceedings in this space. In her blog post below, accessibility consultant Julie Moynat writes a cautionary tale of how an accessibility overlay company have started legal proceedings against her, off the back of a single tweet.

    Help for my lawyer’s fees in the FACIL’iti lawsuit against me

    • In November 2020, the French Secretary of State to Digital Transition and Electronic Communications tweeted positively about the use of FACIL’iti to make sites accessible. (You can see the accessibility overlay in action on https://www.facil-iti.com/).
    • Julie responded to the tweet, “expressing disapproval”. Her response ended up getting 9 retweets and 32 likes.
    • At the end of December 2020, FACIL’iti sent a formal notice to Julie’s employer, demanding that the tweet be deleted. NB, Julie had tweeted from her personal account, outside of working hours.
    • Julie deleted the tweet within two days of being informed of the letter, on 28th December.
    • On 21st May 2021, a subpoena letter was served to Julie’s home address, intending to press charges to the tune of €10,500.
    • Julie reached out for help via the blog post above, asking the community to donate to cover her legal fees. She raised almost €6,000, which has fulfilled her target.
    • She updated her blog post on 12th October: the proceedings are still ongoing, and no trial date has yet been set.

    Blaming Screen Readers 🚩×5

    • There is, apparently, a trend going around on Twitter (example tweet): to state something that raises red flags for you, followed by a number of ‘red flag emojis’, i.e. “🚩”.
    • Except that this isn’t a red flag emoji, other than by coincidence. It could just as easily have been yellow or green. What screen readers actually announce when they reach that emoji is “triangular flag on post”. So the meaning is lost on screen reader users.
    • The great Adrian Roselli gives a detailed write-up of the problem – and plenty of places where it’s cropped up in the past – in this blog post. He’s heard a number of responses from people along the lines of “the screen reader is the problem”; Adrian argues otherwise, stating that screen readers don’t use natural language processing and do not ‘see what you see’. Nor can screen readers be updated overnight, to suddenly understand these short-lived trends and memes.
    • The onus is on us to write our content in an accessible way. The blog post summary is frustratingly vague on answers: “Techniques to make your content accessible abound. They are no more than a quick search away should you care to try”, which doesn’t explain what you should do if you want to participate in a trend but the trend is inherently inaccessible. My personal recommendation would be to write an ‘alt text’ “reply” to your tweet, to clarify the original tweet for screen reader users.

    And finally… a spooky-themed game for you, just in time for Halloween!

    HOCUS :FOCUS – A keyboard accessibility horror game.

    • A game that highlights issues caused by missing focus styles, unexpected tab orders, and so on.
    • I completed the game in 1 minute and 16 seconds. Can you beat my time?

    Whew, that was a long newsletter! Did you know that you can subscribe to smaller, more frequent updates? The dai11y, week11y and fortnight11y newsletters get exactly the same content. The choice is entirely up to you! Curated with ♥ by developer @ChrisBAshton.

  • month11y issue 23

    Welcome to your monthly frequent11y newsletter, brought to you by @ChrisBAshton. I hope you enjoy these a11y articles I’ve collated and summarised for you. (Psst – if you find these emails too long, consider switching to shorter, more frequent updates). Now on with the show!

    We start off with a Twitter special! I’ve already recently written about how Twitter’s new design has been giving users headaches. But there have been a flurry of other articles about Twitter, so I thought I’d round them up for you.

    • What’s Really Wrong With the New Twitter Font
      • An interview with Frederick Brennan, who designs open source fonts, though is better known for founding and then trying to shut down the imageboard site 8chan.
      • “[Twitter’s newly commissioned font] Chirp is extremely similar to GT America, which is itself based on Franklin Gothic. They changed the spacing ever so slightly and changed the square dots over i and j, and then the period and comma to be circular”
      • Frederick says that typeface readability is cultural; “in the Middle Ages, people found Gothic lettering to be extremely readable”. Given enough time, people would get used to the new font.
      • There’s a problem with the hinting, causing some letters to look one pixel too tall or short on particular screen sizes. “This is something really fundamental and basic to type design. This definitely points to [Twitter] cheaping out.”
    • Twitter’s web redesign isn’t as accessible as it should be, experts say
      • This TechCrunch article explains that the new high-contrast design, whilst generally making things more legible for those with low vision, is causing ‘strain’ for some users.
      • In September last year, Twitter introduced two dedicated accessibility teams, after previously relying on employees to volunteer to do accessibility work on top of their regular jobs. Whilst this was a positive move, some experts suggest that Twitter did not include disabled people in the design decisions early enough; Twitter disputes this.
      • Twitter has made a11y improvements in other areas, including SRT subtitle file support for videos, and live captioning.
      • The article calls out a saturation slider that Discord added to its desktop app accessibility settings.
      • “Web accessibility isn’t one-size fits all — while some users may need a high-contrast display, others who suffer from chronic migraines might require a more muted experience”. It’s odd that Twitter did not offer an option to reduce contrast or change font, as it already has customisation options for dark/light modes, font size and link colours.
    • Twitter’s new font and Last of Us 2: an accessibility lesson to be learned
      • Continuing the customisation theme, this UX Collective article suggests Twitter should give users more choice over their UI settings, taking inspiration from Last of Us 2, which has over 60 different accessibility settings. It is possible to play the game entirely by sound, or one-handed.
      • The game’s designers initially broke the settings down into ‘accessibility modes’ for hearing impaired gamers, or for those with motor control issues. But users wanted to really be able to fine tune their settings, so the designers had to “give up their nice, tidy menus in favour of something a little messier”.

    In other news…

    How to use the Accessibility Checker in Microsoft Office

    Screenshot showing where to click to enable to accessibility checker in Word. Source: thewindowsclub.com
    • Perhaps obvious if you know how, but as someone who has used Office tools a fair bit over the years, I don’t think I’d ever known about the Accessibility Checker!
    • To use in Microsoft Word, Excel, OneNote, or PowerPoint:
      • click on the “Review” tab
      • then the “Check Accessibility” menu trigger
      • then the “Check Accessibility” option
      • It will display accessibility information in a panel on the right
    • The article is very light on detail, but I imagine this tool captures issues like text being too small or obscured, and colour contrast issues.

    HTMHell Issue #12 – crossed out content

    • The good person behind HTMHell describes the two ways to represent crossed out text in HTML: <del></del>, and <s></s>. They clarify in the article that “crossed out” has semantic meaning that doesn’t necessarily have to manifest itself as crossed out text.
    • The <s> element should be used for highlighting contents that are no longer accurate or relevant. Think “Original price: £10, Special offer: £8″.
    • The <del> element should be used for highlighting a removal from the document, to retain an edit history. Example:
      • The man's name was <del datetime="2021-09-03T17:42:36">Mrak</del> <ins datetime="2021-09-03T17:42:40">Mark</ins>.
    • Different screen readers announce the deletions/insertions in different ways. The article goes into some detail around how to use CSS pseudo elements to add your own textual prefixes/suffixes.

    Google Announces Seismic Change to Docs

    • A WebAIM article talking about the May announcement by Google that it would switch to canvas-based rendering for Google Docs. The “current HTML-based rendering approach” has inconsistencies across platforms, and performance issues, which can be addressed by switching to canvas.
    • Google claims “compatibility for supported assistive technologies such as screen readers, braille devices, and screen magnification features, will not be impacted by the canvas-based rendering change”. No technical approach is outlined in the announcement, but there have been discussions of leveraging a “hidden” DOM through the Accessibility Object Model (AOM).
    • The WebAIM article has a section on “Accessibility Community Feedback” which highlights concerns from the community. An interesting point is that developers look up to Google and try to emulate how they do things, so this change could cause third party sites to switch to canvas based rendering with little regard for the screen reader experience.
    • As of mid August, there is no update on a timeline for when the changes will be rolled out. The proof of concept released by Google has only “rudimentary assistive technology support” and “significant improvements” will be needed before it is up to par.

    FlickType gives up on accessible iPhone keyboard after ‘abuse’ from Apple

    • “FlickType, maker of the accessible iPhone keyboard that has become popular among those with vision impairment, has confirmed it is discontinuing its app after years of obstacles and “abuse” from Apple’s App Store approval team.”
    • “The announcement comes after FlickType submitted an update to fix bugs related to iOS 15 and got “incorrectly” rejected by Apple. The team says Apple has ignored repeated requests for clarification and support.”
    • “FlickType was designed to make iPhone easier to operate for blind users — and it worked. A 2018 report from the American Foundation for the Blind found the keyboard greatly increased typing accuracy and speed, and was significantly easier to use than Apple’s for those with vision impairment.”

    a11y-automation.dev

    • A useful reference of a11y fails, describing at a glance whether or not each failure can be linted, tested, or manually tested.
    • For example “Autoplaying media” has a “Linting status” of “Could Exist”, a “Testing status” of “Exists”, and a “Manual testing status” of “Should Exist”.

    Doctor’s orders: ‘Nature prescriptions’ see rise amid pandemic

    • A really interesting article about how a growing number of doctors – particularly pediatricians – in the USA are prescribing walks in the park. The prescriptions are “specific, just like an antibiotic”, with patients told how often they should go, and where.
    • One doctor gave their patient “a one-year pass to Washington’s state park system”, telling her to “go for walks, go camping, do what you need to do”. Patients see weight loss and decreased anxiety. “More than half of my patients who receive a ‘prescription’ for time in nature go ahead and do so successfully,” said one doctor.
    • The prescriptions do face issues of access, where parks in low-income neighbourhoods tend to be smaller and more crowded.

    Don’t Believe the Type! (video, 50m)

    • I discovered this axe-con 2021 video via Richard Morton’s tweet. I thought it would be good to follow-up on the piece I wrote about the Hyperlegible font.
    • The presentation, by Gareth Ford Williams, David Bailey and Bruno Maag, talks through the data they’ve gathered from around 7,000 hours of user research. They conclude that some so-called ‘accessible’ fonts such as “Open Dyslexic” actually perform worse than standard fonts like Helvetica. However, some accessible fonts perform better, including Atkinson Hyperlegible and BBC Reith Sans.
    • That said, the poor performing fonts “may have fallen into the ‘I hate Comic Sans’ trap”, as they all look quite exaggerated. The top performers were all sans serif fonts.
    • The presenters admit that the survey raises lots of questions, rather than giving lots of answers! But TLDR: that ‘accessible’ font you’re using may not be as accessible as you think.

    Audio killed the video call

    • An interesting article talking about the progression from, pre-pandemic, video-calls happening once or twice a week, to mid-pandemic, where video calls happen for several hours per day. The video fatigue has led to an explosion in popularity for audio-based apps, such as Clubhouse, where users can drop into chatrooms and participate in discussions with strangers.
    • They’re able to “recreate serendipitous moments like chance encounters and coffee machine conversations”, in a way that Zoom doesn’t. But they are ableist by nature, offering poor or zero experience for the Deaf community.
    • The article touches on an interesting point: that this “levels the playing field”; insofar as many blind people “have little interest” in social media apps such as Instagram. The implication is that by the nature of these apps, they’re not going to offer much to certain segments of the disabled community, and there are usually other options to cater to everyone.
    • That’s a difficult line to take, in my opinion. But it does make me wonder how everyone’s needs can be met without fundamentally changing the offering of these apps.

    Some questions on accessibility in email — answered

    • Some interesting nuggets of information here, resulting from a survey of 162 respondents (yes, the sample size is too small to have a lot of confidence in these results).
    • 98% of people find a font size of 16px easy to read, compared to 70% for 14px (a font size that is “often cited as being accessible”). Participants generally did not find 12px easy to read.
    • 88% of participants found a line height of 1.5em easy to read; it was the best performing line height out of the options available (various options from 1em to 2em).
    • There was a clear preference for “accessible text links” (links using border-bottom for their underline), rather than the standard text-decoration: underline links. This approach is to “benefit people living with dyslexia, for whom underlining can cause text to run together, or collide”. I don’t remember coming across this before, so the Accessible Text Links article is worth a read too.

    In Quest of Search

    • Sara Souedian gives her thoughts on why we need a native <search> HTML element. This would be syntactic sugar for <div role="search">, like we already have for <main> / <div role="main">.
    • The first rule of ARIA is to not use it if there is a native HTML element with the semantics of the required behaviour already built in. It could be argued that ARIA should be phased out, “with HTML replacing ARIA bit by bit until its services are no longer required”.
    • Search is such a common feature on websites that making it easier to apply accessible semantics can only be a plus. With it, it should be even easier for users of assistive technologies to jump to the search section of the page.
    • There is a related GitHub issue on the whatwg/html repository, calling for a HTML search element.

    Axe-core vs PA11Y: Which one should you choose?

    • GitLab now offers Pa11y as part of its CI pipeline, with no configuration needed. Craig Abbott compares it to axe-core, which is used by Deque for its acceptance tests. Out of 142 issues tested:
      • axe-core found 39 issues in total, or 27%. 36 were violations and 3 were potential issues which required a user to check manually.
      • pa11y found 29 issues in total, or 20%.
      • 19 issues (13%) were found by both tools.
      • 20 issues (14%) were found by axe-core but not Pa11y.
      • 10 issues (7%) were found by Pa11Y but not axe-core.
      • Combined, 49 issues (35%) were found.
    • Craig recommends using both tools. He also notes that axe-core isn’t necessarily ‘better’ than pa11y; the issues in the set that Craig tested with might just happen to play to axe-core’s strengths.
    Three radio buttons. One is selected. The selected one has a text input associated with it; hence "conditional reveal".
    Screenshot of the ‘conditional reveal’ behaviour.

    An update on the accessibility of conditionally revealed questions

    • A GOV.UK blog about the ‘conditional reveal’ option in the GDS Design System’s radio and checkbox components.
    • The GOV.UK Accessibility Team discovered that the implementation failed WCAG 2.1 Success Criterion 4.1.2: Name, Role, Value, as the act of conditionally revealing content would not notify some screen reader users.
    • This came down to the use of aria-expanded, which the team later realised was “not supported for the role of a radio button or checkbox in the ARIA specification.”
    • Further user research found that some users were in fact notified of changes, despite it not being supported. Additionally, the notification did help users; so they brought their findings to the ARIA Working Group for consideration.
    • The team then prototyped a few different ways of improving the relationship between the question and the revealed content. The conclusion was to avoid using “multiple fields or text content (like warning text) within reveals”. Simple questions with a single input were fine.

    Facebook Rolls Out News Feed Change That Blocks Watchdogs from Gathering Data

    • An update to Facebook, which has not yet been rolled out to all users, obfuscates the page content in the markup of the HTML DOM, potentially excluding disabled users. It adds “superfluous text to news feed posts in the form of ARIA tags” (“junk code”) to make it more difficult for people and bots to “scrape” the content, which this article says includes legitimate users such as researchers and journalists.
    • These junk characters have made similar moves in the past to reduce the efficiency of ad-blocking software.
    • Facebook claims that its new update has been designed not to reduce accessibility. However, the article contains a video demonstrating that the Microsoft Narrator screen reader reads aloud a string of junk characters on at least one occasion.
    • There is a dissonance between making content accessible and building in anti-scraping / anti-ad-blocking measures. It’s difficult, impossible even, to do a good job at both.

    Improving The Accessibility Of Your Markdown

    Another excellent Smashing Magazine article by Eric Bailey. Despite the title, there aren’t many Markdown-specific accessibility tips here, but it is packed with information and I challenge you not to learn something new from it!

    • Markdown is a text to HTML conversion language, created in 2004. It has no editor and therefore no Clippy-esque experience to warn you if you’re introducing anything inaccessible.
    • The main advice is to use headings to structure your content, as this is by far the most popular method assistive technology users use to navigate your page. Eric doesn’t use assistive tech, but he also navigates by headings via the headingsMap browser add-on.
    • Write good alt text for your images, using the W3C alt decision tree if in doubt. And make sure you use punctuation!
    • When linking to SVG images, add the “img” role to it, to prevent assistive tech from skipping it or announcing it as a group. E.g. <img src="foo.svg" role="img" alt="Sunflower" />.
    • Whilst it is possible to write Markdown for opening links in new tabs ([text](url){:target="_blank"}), avoid it, as it can be a WCAG failure and a security risk.
    • Skip links aren’t limited to the main site navigation; you can also use skip links to skip over, say, your Table of Contents, or to avoid keyboard traps.
    • Beware libraries which automatically turn your headings into anchor links, as the markup is tricky to make accessible. I’ve covered this already in dai11y 23/12/2020.

    Whew, that was a long newsletter! Did you know that you can subscribe to smaller, more frequent updates? The dai11y, week11y and fortnight11y newsletters get exactly the same content. The choice is entirely up to you! Curated with ♥ by developer @ChrisBAshton.

  • month11y issue 22

    Welcome to your monthly frequent11y newsletter, brought to you by @ChrisBAshton. I hope you enjoy these a11y articles I’ve collated and summarised for you. (Psst – if you find these emails too long, consider switching to shorter, more frequent updates). Now on with the show!

    A Deep Dive on Skipping to Content

    • Paul Ratcliffe describes a “2021-friendly” implementation of a skip link. It looks something like this (note that the text is hidden visually until it is focused – I’ve omitted this from the code below):
      • <a href="#skip-link-target">Skip to main content</a>
      • <a href="#skip-link-target" id="skip-link-target">Start of main content</a><main>the content</main>
    • Paul points out that the use of <main> markup means savvy screen reader users can skip straight to the main landmark. For those that rely on skip links instead, he recommends a link in the <header> which refers to a link just above the <main> (not inside it, as it would impact SEO).
    • I hadn’t seen an <a> element as the target of a skip link before; Paul says this is to give users feedback that the skip link worked. If the page content is too short, the browser wouldn’t scroll and it could be difficult to show that the focus has moved otherwise.
    • Susanna Celso left some comments for Paul before writing a follow-up blog post, arguing that the proposed implementation could confuse users (linking to a link that links to itself, and also stating that you’ve reached the “start of main content” when technically you’re still outside that landmark. Susanna makes the case for linking to the <main> element directly, though concedes screen readers will automatically start reading all of the text in that element, which can be an awkward experience.
    • Susanna concludes that the best link target would be a <h1>, provided it’s the first element inside the <main> landmark.
    • An interesting and healthy discussion between two clearly knowledgeable developers – worth reading both posts!

    Writing great alt text: Emotion matters

    • Jake Archibald describes how he was trying to decide what alt text to use for his avatar, which would appear alongside his name, in a list of conference speakers. His (and my) instinct was that it should be nullified (alt="") because it would otherwise be repeating information elsewhere in the page.
    • However, in his avatar, Jake is pulling a pose and aiming to inject a bit of humour. It’s not right that screen reader users miss out on that context. So Jake opted for the following alt text: “Jake, cheekily peering from behind a plant”.
    • Léonie Watson has written about this in her blog post, Text descriptions and emotion rich images. Context matters. Developers sometimes worry that descriptive alt text will make the page too ‘noisy’, but as Léonie points out, screen reader users will skip over large swathes of the page in the same way as sighted users would.
    • This seems to be a bit of a trending topic at the moment; I recently covered a similar article by Eric Bailey which concludes that most images nowadays are not purely ‘decorative’ and do require alt text.
    • Jake adds that “if you’re trying to do the right thing, you’re almost certainly improving the experience for real people”. Most of the time, your alt text won’t be worse than no alt text at all.

    Twitter’s new design to get fix after headache complaints

    • BBC article from 16th August. Highlights:
      • “Twitter is making changes to its new redesign, after users complained of headaches and discomfort.”
      • “Unveiled only last week, the redesign mainly involved high-contrast colours and a custom-designed font, Chirp.”
      • Its aim was to “improve content consumption and clean up ‘visual clutter’. But many, especially with accessibility needs, found it confusing, hard to read and uncomfortably bright.”
      • Users have reported the font being smaller and denser, so are having to strain their eyes more to read.
    • Twitter Accessibility have confirmed that fixes are on the way.

    It is time to ditch the title “Evangelist” from Accessibility

    • Ronise Nepomuceno explains why she hates the term ‘Accessibility Evangelist’:
      • It reinforces the idea that accessibility is a ‘nice to have’ that can be deprioritised
      • It has its roots in tech in the 1980’s, when Apple put together a team to ‘evangelise’ developers to develop for the Macintosh platform without the financial incentive compared with their competitor IBM. Ronise feels this is exploitative.
      • It has religious connotations: “they think we are coming for them, to judge for their sins and condemn them all to eternity in Hell”.
      • “It is also essential to respect the boundaries between Digital Accessibility and Disability Rights. They are two different things”.
      • Ronise points out that the term is applied in other parts of tech, e.g. “Cloud Evangelist”.

    What people should know BEFORE writing articles or creating products about accessibility

    • Sheri Byrne-Haber writes about getting disabled users involved in your product development early on. It is possible to build a product that is technically accessible but is inefficient and unusable in practice. “You cannot retrofit lived experience”.
    • Some products don’t support an intersectionality of disabilities. Sheri gives the example of an accessibility overlay that offered profiles for motion sensitivity, and for vision loss, but not for both at the same time.
    • Language is important when it comes to writing about accessibility. Terms that are out of favour include “suffering”, “wheelchair bound”, “high / low functioning”, stigmatizing the individuals being labelled and “conveying nothing about the strengths that individual might possess”.
    • Sheri bemoans the use of “headcounts” to make disability inclusion decisions. “How many people is this going to benefit?” is irrelevant; accessibility is a civil right.
    • Sheri ends with this: “Accessibility is a program, not a project”. If you work from a checklist, or are working to an end date, that is a warning sign.

    ‘May be an image’: What it’s like browsing Instagram while blind

    • Kait Sanchez writes about the experience of screen reader users on social media. The auto generated alt text for photos on Instagram and other sites is often poor: “two brown cats lying on a textured surface” turned out to be a woman in a wedding dress.
    • Kait says that technology can’t replace the human element; a computer is never going to know you posted an image of your dog because of its hilarious quizzical expression, rather than because he is a black-and-white pitbull mix.
    • Alt text hasn’t always been possible to write on social media platforms, who often play catch-up to improve their accessibility only once they gain popularity. There’s an assumption that blind people aren’t interested in visual media. But as Kait points out, culture is moulded on social networks, and it’s not fair for people to miss out on a shared social language.
    • It’s easy to blame the social media users for not providing alt text, or the tech platforms for not educating them. However, content such as memes – rapidly evolving iterations of undescribed images with tiny words in weird fonts – are particularly hard to write alt text for:
      • “The funniest images rely on comedic timing through careful visual composition, prior knowledge of a specific meme, or familiarity with several different cultural references.”
      • “Writing an image description for an esoteric meme can feel like explaining internet culture to your grandparents: you suddenly don’t know how to describe what exactly made you laugh.”
    • We can educate against the simpler problems though. Kent Dodds demonstrates why special characters and emojis in usernames provide a terrible experience for some social media users. “A screen reader isn’t technically incorrect if it reads a character as “mathematical bold capital,” but most sighted people will read it simply as a letter with different formatting.”

    Do not assume users turn off CSS or JavaScript

    • I’ve seen this before, but Stefan Judis’ newsletter pointed it out to me again.
    • This is the Government Digital Service’s “service manual” on “Building a resilient frontend using progressive enhancement”.
    • It maintains that we don’t support no-JS / no-CSS browsers for the sake of a minority of individuals who may disable such features. Instead, we do so to account for all manner of other circumstances, including network errors, ad blockers, firewalls and proxies, all of which can interfere with the loading and execution of CSS/JS.
    • Making services work without JS or CSS makes them more accessible to a wide variety of users.

    Accessibility of the section element

    • Scott O’Hara writes about the <section> element, designed for representing a group of content that has an “overarching theme”. Headings within each <section> are meant to be scoped semantically within that section (you could in theory put <h1> tags inside each <section>), but in practice, nothing different gets programmatically exposed to assistive technologies.
    • The only thing <section> currently does in that regard is to define an implicit role="region". However, this does not get announced to screen readers unless it is given a name, either via aria-labelledby, aria-label, or title.
    • Scott recommends naming <section> elements only when absolutely necessary: “if everything’s a landmark then there’s nothing really special about them, is there?”. Instead, Scott suggests using proper heading levels to indicate sections and sub-sections of content.

    Hyperlegible: an approach to accessible type design (video, 10 minutes)

    • Linus Boman, who I was lucky enough to have as a housemate a few years ago, is a design expert. Here, he talks about the new Atkinson Hyperlegible Font – which he helped to develop – and which is now freely available on Google Fonts for personal and commercial use.
    • The font is designed to be as accessible as possible whilst still embodying harmonious design (avoiding the trap of becoming “some kind of ransom note”, as Linus puts it).
    • Linus describes how each glyph’s apertures are widened to make it easier to distinguish, and walks through other techniques such as adding serifs to differentiate between homoglyphs (e.g. lowercase L and uppercase i).
    • At around 7 minutes in, the video does a particularly good job of illustrating how conditions such as blurry vision or diabetic retinopothy affect the legibility of the characters.
    • Linus has quite an active YouTube channel which is definitely worth checking out further!

    Link shorteners: the long and short of why you shouldn’t use them

    • A blog post by the Government Communication Service.
    • In the old days of social media, URLs used to count towards the character limit, so using a URL shortener was often a necessity. This isn’t the case anymore.
    • Whilst these URL shorteners provide insights into how often a link is clicked, they offer little more than the social media platforms and Google Analytics offer natively.
    • Short URLs provide no clue as to the content, and can’t be trusted. Some link shortening tools threaten user privacy too, installing cookies when people follow our links.
    • GCS go into more detail on creating accessible links for social media:
      • One link per post (as “people who navigate via keyboard shortcuts often find it frustrating to navigate to multiple links”)
      • Clear calls to action (“Read guidance on applying for a driving license + LINK”)
      • Use capital letters at the start of each word in a hashtag, e.g. #AccessibilityAwareness. These tags are often turned into links, and assistive technologies reading the link text should read the words correctly when capitalised.

    Your Image Is Probably Not Decorative

    • Eric Bailey explains why most images nowadays need some form of alternative text.
    • You can ‘nullify’ images – removing them from the screen reader experience – by adding an empty alt text, i.e. <img alt="" ...>. This should only be used when the image doesn’t convey information that is important to understanding the purpose of the page or view.
    • You might nullify your images in the following scenarios:
      • Old layout techniques requiring ‘spacer’ images
      • Where the image repeats content that is already in the page (though this could still be confusing for screen reader users who have partial vision)
      • Supplemental icons (e.g. <button><img alt="" src="icon.svg"> Print</button>).
    • Eric also explains how you can provide alt text when using CSS background images (hint: it uses the spacer gif!)

    The accessibility stalemate

    • Chris Heilmann talks about how the accessibility community holds back the accessibility movement by setting the pedestal too high.
    • There are plenty of great talks about accessibility, but, apparently, many speakers don’t release their slides afterwards. Why? Because people “call out any accessibility problems with the materials”. If the content isn’t 100% accurate, or the platform has one or two of its own accessibility issues, then the materials don’t get released and people aren’t able to benefit from them.
    • Chris says “I saw many conferences not release any of the materials or videos as they couldn’t caption them or host them on a platform that allows for it.” He says that some people enjoy criticising articles for the platform they are published on, e.g. “Isn’t it ironic that I can’t read your article on mobile best practices on my mobile device?”
    • “On the surface, it seems to be valid criticism to call out when [presentations] fail to provide alternatives for each image and video in them. Except, it is a cheap shot and feels like a distraction from the problems the materials talked about.”
    • Controversially, he suggests that not all content needs to be accessible. “What do we gain by ensuring that a presentation about how people use screen readers is accessible by a screen reader? Is that the audience? The one who already knows this information?”

    From A Colourblind Designer To The World: Please Stop Using Red And Green Together

    • A designer with deuteranopia – red/green colourblindness – writes about how the use of green and red in web design is problematic. Namely:
      • Using colour to indicate validation status in forms. Adding other visual indicators such as icons would help to differentiate.
      • Using green and red to indicate primary and secondary actions, e.g. “OK” and “Cancel”. Using fill colour just for the primary action helps to disambiguate.
      • Red and green used to convey meaning in charts – literally unusable for people with colourblindness.
    • If you have to use red and green in your design, choose different luminosity (i.e. make either the red or the green darker and saturated). UK traffic lights look quite similar between red and amber, but the green is very distinct because its saturation is different from the other two.
    • Colourblindness affects 1 in 12 men and 1 in 200 women.

    New in ARIA 1.2: ARIA IDL attributes

    • Scott O’Hara writes about the new ARIA IDL (Interface Definition Language) attributes, allowing you to set element attributes succinctly in JavaScript via foo.role = 'checkbox' and foo.ariaChecked = false. Until now, we’ve had to use setAttribute, i.e. foo.setAttribute('aria-checked', 'false').
    • This is supported in all Chromium browsers, but currently not in Firefox.
    • It’s not yet possible to set attributes in this way if they take multiple IDREFs. For example, aria-labelledby="id1 id2 id3" has no new corresponding IDL attribute yet.

    Tech platform devises new system to simplify process of booking rail travel for disabled travellers

    • Whoosh Media have created a system, “The Real-Time Journey Dashboard”, that allows you to scan QR codes on your train seat, to view information such as location of toilets on the train, as well as a live dashboard demonstrating journey progress and delays.
    • “Travelling by train is very often a hazardous lottery for wheelchair users and those with restricted mobility, simply because rail companies have failed to keep up with the way people research their journeys.”
    • The article above is light on details – I found more information at Onboard Hospitality:
      • Currently found on Northern Rail and Grand Central Rail, with more operators to follow in the coming months.
      • The system is currently receiving around 1500 scans per day.
      • The system can also be used to report antisocial behaviour to the British Transport Police.
      • The system is not an app, though it’s not clear what it is. Presumably it’s just a website that gets loaded via the QR code.

    Move the pointer using head pointer on Mac

    • This is a macOS user guide for how to enable the ‘head pointer’ on your Mac, using your built-in camera to follow your head movement and move your cursor. I was pointed to this via Stefan’s Web Weekly newsletter.
    • It’s quite effective and worth experimenting turning it on to get a feel for what it is like. You may need to adjust the pointer speed as otherwise the cursor may not move enough in sync with your head.

    A day in the life: What it’s like to travel through an airport and on a plane as a wheelchair user

    • An interesting read about just what a wheelchair user goes through on a typical flight. These users must be transferred into a narrow aisle chair (designed to be able to fit in the aisle of the plane) and then transferred into an airplane seat. Their wheelchair is put in the hold.
    • Going through security is difficult as the wheelchair makes the metal detector check redundant, so these passengers have to have a pat-down, which can slow the process down considerably. TSA PreCheck is an option for American fliers to skip the security check.
    • In May, Gabrielle deFiebre travelled from New York to Phoenix on a Delta flight. Her wheelchair was damaged by employees in an incident recorded in a now-viral video. In 2019, airlines damaged more than 10,000 wheelchairs. All Wheels Up is an organisation advocating for allowing wheelchair users to be able to stay in their own wheelchairs during flight.
    • deFiebre doesn’t eat or drink much at all on flights, knowing the difficulties of transferring into the aisle chair and then into the cramped airplane bathroom.

    Whew, that was a long newsletter! Did you know that you can subscribe to smaller, more frequent updates? The dai11y, week11y and fortnight11y newsletters get exactly the same content. The choice is entirely up to you! Curated with ♥ by developer @ChrisBAshton.

  • month11y issue 21

    Welcome to your monthly frequent11y newsletter, brought to you by @ChrisBAshton. I hope you enjoy these a11y articles I’ve collated and summarised for you. (Psst – if you find these emails too long, consider switching to shorter, more frequent updates). Now on with the show!

    What Happens When a Blind Person Test Drives VoiceOver Recognition?

    • An article by Rhea Althea Guntalilib, describing her experience of using the new “VoiceOver Recognition” features of iOS 14. It is a collection of tools including “Screen Recognition” (which I’ll talk about below), “Text Recognition” (which detects text found in images) and “Image Descriptions” (which describes image contents). These features are accessible via Settings > Accessibility > VoiceOver and can then be quick-selected via the VoiceOver rotor.
    • I covered Screen Recognition in dai11y 22/12/2020: “It uses AI to detect interactable elements on the screen, even when such elements aren’t properly labelled / exposed to assistive technology. It has the potential to allow blind users to use apps that are otherwise inaccessible.”
    • Rhea found the Image Descriptions improved her experience of the Facebook and Instagram apps, and also Text Recognition was great at describing her screenshots of captured text messages. Screen Recognition came in handy for her banking apps, which otherwise have no accessible way of transferring funds or paying bills. But she did find she had to turn off Screen Recognition in places, e.g. to properly access the list of available banks, as it would interfere with how VoiceOver worked. Other apps, such as email, had attachments that could not be processed by VoiceOver Recognition.
    • In summary, whilst it has some glitches and limitations, it has “delivered many improvements in the user experience of a blind iOS customer”.

    Accessible SVGs

    • Think you know SVGs? This article is worth a read – you just might learn something.
    • SVGs have an implicit WAI-ARIA role of “graphics-document“. You should only change this if the SVG only contains an image; an attribute of role="img" or role="graphics-symbol" would be appropriate.
    • Hide decorative SVGs from screen readers using aria-hidden="true" – not role="presentation", as this doesn’t hide the contents of the SVG from screen readers.
    • SVGs can have a <title> attribute which acts like an alt attribute on a normal image. It has to be the first child element within the <svg>. There is also an optional <desc> element which can follow this, and should be used to present more detailed textual information. Browser support for both of these is good but not 100%; aria-label can be added for wider support.

    Practical accessibility, part 2: Name (almost) everything

    • It’s not enough to just use semantic markup to, say, create a list in HTML (the “what”), and mark it up with a role="menu" (the “how it’s supposed to work”). We also often need to label the list, to explain “why” it’s there. For example, an aria-label="Main menu" to give some extra context to screen reader users.
    • This article describes how and when you should name things in HTML. It covers the basics, such as associating a label with an input, which effectively gives the input a name, but it also covers the stuff that is more easily omitted, such as applying a label to your ARIA regions.
    • Not every landmark needs a name, but any navigation, form and region should, as well as main (it’s good practice to associate the H1 element with the main content in your page via aria-labelledby). Landmarks that appear once per page, such as banner, should not have a name.

    Online Instruction Did Not Make Things Easier for Disabled Students

    • An interesting article, worth reading as it goes against the current narrative that the disabled community have benefited from the move to online tuition. It covers university undergraduates and graduates in America.
    • “Only 20% of [American] undergraduate students with disabilities reported enjoying online learning, and over one third of students with disabilities reported no increased satisfaction with online learning in general”.
    • The story changes slightly for graduate students with disabilities, who liked online learning more than those without disabilities, but also felt less productive and more disconnected from professors.
    • That said, there were some areas where “disabled students did describe a greater satisfaction than non-disabled students”, such as “comfort levels in speaking up in class” and “connection with other students”.
    • Learning from home rather than university “meant being removed from the protective factor of the university”. Shockingly, only 40% of undergraduate students with multiple disabilities have a “place to live that is free from physical or emotional violence or abuse”.

    Kellogg’s: a game changer in accessible packaging

    • In partnership with RNIB, Kellogg’s has trialled including NaviLens codes on its packaging, giving visually impaired customers a way of scanning products to find out their ingredients, allergen and recycling information.
    • NaviLens codes work in a similar way to QR codes, but can be detected “in a fraction of the time, from up to three metres away”. RNIB and Kellogg’s deduced that NaviLens catered to more people with sight loss, rather than those with specific requirements (such as braille users).
    • 97% of the trial’s participants agreed they’d like to see more of these accessibility features available on grocery packaging.
    • There’s a 5 minute video explaining more about the project.

    Screen Reader User Survey #9 Results

    • The famous WebAIM survey this year had 1568 responses, mostly from North America and Europe, with a pretty even age split. 92.3% of respondents said they have a disability, almost 80% of which was blindness.
    • 57.5% of respondents class themselves as “advanced” screen reader users, versus 37.4% “intermediate” and 5.1% “beginner”. This roughly correlates with their self-assessed levels of “Internet Proficiency”.
    • JAWS is the primary screen reader for over half of respondents, followed by NVDA on around 30%. VoiceOver counts for just 6.5%. This is a decline for NVDA and VoiceOver compared to previous years. Windows Narrator is the primary reader of less than 1% of respondents, but is “commonly used” by 41% of them, compared to 30% in 2019.
    • Chrome is the browser of choice for 53.6% of respondents, followed by Edge at 18.4% and Firefox at 16.5%. Chrome and Edge usage has increased notably. JAWS with Chrome is by far the most common screen reader & browser combination, at 32.5%. 91.1% of respondents use Windows, vs 6.5% on Mac.
    • 72% use iOS mobile devices, vs 25.8% on Android. This corresponds roughly with mobile screen reader usage of 71.5% on VoiceOver and 29.1% on TalkBack, and with choice of browser (Safari: 61.6%, Chrome: 24.2%).
    • 99.4% of respondents have JavaScript enabled.
    • Almost two thirds of screen readers report that they are “very satisfied” with their primary screen reader, and almost a third “somewhat satisfied”.
    • When asked how often they use “skip links” when available, 17.5% said “Always”, 15% said “Often”, 29.7% said “Sometimes”, 22.7% said “Seldom” and 15% said “Never”. Whilst very mixed results, these are largely unchanged from the 2017 survey.
    • Around 39% say web content has become more accessible this year, but around 42% say there has been no change, and 18.5% say content has become less accessible.
    • The majority of screen reader users navigate pages by working through the headings first. About 85% of users find the use of heading levels either very useful or somewhat useful.

    Accessible design: How much motion is too much motion?

    • Heather Waroff, Senior Designer at Microsoft, writes about interaction design. The most useful part of the article for me was the list below, developed “in conjunction with Accessibility specialists”. It describes the types of motion that are considered safe (good), risky (‘it depends’), and non-compliant (bad).
    • Safe Motion:
      • Motion under 5 seconds, of the following types:
        • Show/Hide
        • Glowing
        • Color Transitions
        • Slides
        • Scaling
        • Fading
        • Glyph Transformations
    • Risky motion
      • Any motion longer than 5 seconds
      • Background Parallax
      • Object Parallax
      • Bouncing Effects
      • Fast Effects
      • Image Masking on Scroll
      • Full Width Mask on Scroll
      • Zoom on Scroll
      • Scale on Scroll
    • Non-compliant motion
      • Any motion longer than 5 seconds without a pause button
      • Strobe Effects
      • Rotate on Scroll
      • Fast exit on Scroll
      • Horizontal Directional Scrolling

    Coursera accessibility courses

    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.

    Whew, that was a long newsletter! Did you know that you can subscribe to smaller, more frequent updates? The dai11y, week11y and fortnight11y newsletters get exactly the same content. The choice is entirely up to you! Curated with ♥ by developer @ChrisBAshton.

  • month11y issue 20

    Welcome to your monthly frequent11y newsletter, brought to you by @ChrisBAshton. I hope you enjoy these a11y articles I’ve collated and summarised for you. (Psst – if you find these emails too long, consider switching to shorter, more frequent updates). Now on with the show!

    How anyone can make Maps more accessible

    • Google relies on its community of Local Guides to update Google Maps information by, for example, inputting whether a restaurant has tables suitable for people who use wheelchairs. These guides share some actionable tips for crowd-sourcing information to benefit everyone, particularly people with disabilities:
      • An accessibility checklist can be useful when writing reviews. For example, having a template covering ramp access, wheelchair-accessible toilets, wheelchair-accessible parking etc, where you just have to provide ‘YES’ or ‘NO’ next to each item.
      • You can indicate accessibility features by answering questions about a business you visited, within the Google Maps app. If you’re the business owner, better yet – add these attributes yourself in your “Business Profile on Search and Maps”.
      • Create and share public lists of accessible places, e.g. accessible restaurants in your neighbourhood.

    How to open a budget Accessibility Simulation Lab

    • Andreea Vlad shares how the NHS Business Service Authority built its “budget” Accessibility Simulation Lab.
      • Whilst the article was published in May 2021, it’s not clear when the lab was actually put together. By its nature, it is very “hands on”, and Andreea also recommends having a fruit & candy bowl on site to encourage participation, so it certainly hearkens back to pre-Covid times…!
    • The lab is a single Chromebook, pre-configured with personas that simulate certain disabilities, alongside a mouse, keyboard and headphones. Someone bought several sets of cheap protective glasses, and then applied masking tape, nail polish and permanent markers to try to simulate visual conditions such as glaucoma, central field loss, and low vision. Finally, there are three very old phones, though no reference is made as to how these are used.
    • Andreea suggests that it’s hard to find lab session times that suit everybody; the implication is to let people use the lab in their own time. Try to get structured feedback from people, by asking them “I think we should…”, “I think we should not…”, and “[x]… stops me from caring about accessibility”. This encourages visitors to reflact, and increases their buy-in.

    7 Accessibility FAQ on the Winn-Dixie ADA Appeal Decision (2021)

    • I like to keep an eye on accessibility legislation in the USA, even when it can feel quite far removed from the UK/EU legal system. Here’s a useful write-up of one of the most important web accessibility cases in recent history:
    • In April 2021, a single U.S. Court of Appeals ruled that the Americans with Disabilities Act (ADA) did not apply to the website of supermarket Winn-Dixie, because at the time of filing it did not sell anything online and the plaintiff could access physical stores. In other words, the ADA could not be used to force Winn-Dixie to make their website accessible to blind users.
    • 3 judges were on the panel, and they were split 2-1 on the ruling. The decision only applies in 3 states: Alabama, Florida and Georgia. There have been 3 formal requests for a rehearing since the ruling was made, so a rehearing is quite possible and the ruling could change.
    • Since the case was filed, Winn-Dixie does now offer online shopping, which would likely have changed the ruling, were it not for court rules stopping new facts from being added to the case on appeal.

    Resident Evil Village Has An Accessibility Problem

    • I’ve had a number of bookmarks on the theme of Resident Evil Village, which has been a hot topic in a11y newsletters of late. This article berates Capcom for not providing any accessibility options in the menu of the game, meaning that:
      • The camera is stuck on a zoomed in view, which can lead to motion sickness. There are mods available to configure this.
      • Subtitles are small, and often have terrible contrast on the game background. There’s a Twitter thread with a screenshot. Subtitles don’t specify who is speaking, leaving hard of hearing players to guess. There’s also a lack of subtitles overall, as none of the ambient sounds are conveyed in text.
      • There are no controller remapping options.
      • Can I Play That wrote an accessibility-focused review of Resident Evil Village, rating it just 3/10.
    • This article makes a special call-out to Ratchet & Clank: Rift Apart for its advanced a11y options.

    Accessibility and outdoor socialising: ‘I feel unwelcome in my own city’

    • A BBC article from mid May. As the UK gradually opens up and people are able to dine outside, this must not happen at the expense of wheelchair users. Restaurants are filling pavements and roads with tables for customers, leaving very little (if any) room for wheelchair users to get past.
    • Some wheelchair users are reporting that they can’t use their old bus routes, as the roads to get to the bus stop are “covered with tables and chairs”. They now face arriving 20-30 minutes late, or many hours early.
    • The article references Katie Penick’s videos on Twitter, demonstrating how difficult it is for her to get through the available gaps in public spaces. This is despite the fact that hers is a 23-inches-wide ‘teenagers’ wheelchair, so smaller than most.
    • Holly Greader reflects: “I think the hope was that lockdown had given people an insight into what it can be like for disabled people – the isolation and everything else. I feel like now we’re coming out of the restrictions, we’re forgetting all these things that we’ve learned, and there is a lack of understanding.”

    DWP Accessibility Manual

    WebAIM Screen Reader User Survey #9

    • One of the most important surveys on the web is back, with a close date of June 15th. The survey is aimed at all screen reader users, including those who just use screen readers for evaluation and testing.
    • The last survey of this kind was in September 2019: Screen Reader User Survey #8. It received 1224 responses – it would be great to get this number higher this year.

    The perfect link

    • Rian Rietveld tackles all the common questions around links:
      • It is usually better to stick with the browser default behaviour, i.e. don’t open links in new tabs/windows. However, it’s OK to do so if you make it clear (“Opens in new window” in the text of the link).
      • Link text should be meaningful and understandable on its own. “Click here” is about the worst link text there is. Proper link text is much easier to scan.
      • For emails, use mailto:someone@example.com as your href. For telephone numbers, use tel:+31108429259; these will open emails in email clients and make phone calls respectively. For the link text, it’s a good idea to repeat the email and phone numbers, rather than using “email” and “call us”.
      • For linking to files such as PDFs, but the filetype and size in brackets, e.g. “Web Accessibility Principles (PDF, 327 Kb)”.
      • When embedding images in a link, use alt text that makes sense as link text, e.g. “Wikipedia page on cherry blossoms” rather than “A cherry tree in full bloom”, as the image alt text will get read out by screen readers as part of the link.
      • Links in the body should generally be underlined – relying on colour difference alone isn’t distinguishable for colour-blind or visually impaired users. Links in navigation need not be underlined, as these are more obviously links.
      • As always, ensure your links have hover and focus styles. Rian recommends not removing the browser’s default outline.
      • For internal links, your href attribute should point to an ID – not to another link with a name attribute, which has been obsolete since HTML5.

    We need to talk about WCAG

    • This article is written by Rian Rietveld (my second article in a row by this author, by pure coincidence!)
    • 97.4% of home pages have detectable WCAG 2 failures. Rian concludes that this is a failure in the way we communicate and teach WCAG, which she thinks is partly down to the information architecture of the WCAG docs. When arriving at a W3C page from a search engine, it can be hard to know if a document is a draft, if it is outdated, and whether it is WCAG 2.0 or 2.1. A lot of old W3C content is indexed by search engines, and sometimes it is the old page that is the one at the top of the search results.
    • Rian describes a real world example; searching for “title attribute WCAG”, clicking on the first result, and copying the code example results in code that is bad practice, though not technically a WCAG violation as it is a “Technique” rather than a “Success Criterion”. Rian expects many developers won’t know the difference between the two.
    • Some new Success Criteria will be added in WCAG 2.2; Rian suggests this is counterproductive while so many existing Success Criteria are ignored. She has raised a GitHub issue, and invites you to add a comment.
    • Rian proposes:
      • Adding a message to the top of every out-of-date page saying that it has been superseded, and link to the latest page. Add noindex to these pages to prevent search engines from continuing to index them.
      • Consolidate content about Techniques, Success Criteria and Understanding, so that each topic only has one page. Use the WAI website for education and tutorials.

    Testing fonts for accessibility

    • Colin Shanley shares the 3 things to bear in mind when choosing a font:
      • Imposters: specific letter shapes that look similar to other shapes can be difficult or impossible to differentiate. For example, lowercase L, uppercase i and the number 1. The image below shows Gill Sans on the left (bad) vs Assistant on the right (good):
      • Mirroring: letter pairs (such as lowercase P and Q) should never be the mirror image of one another, as some people flip letters back to front in the brain shape translation process. The image below shows Helvetica on the left (bad) vs Raleway on the right (good):
      • Discernibility: looking at the apertures of shapes (the openings, e.g. the right-hand gap at the opening of the letter “c”), are they close enough that they could be confused with another letter (e.g. “o”)? The image below shows Public Sans on the left (bad) vs Commissioner on the right (good):
    • There is also WCAG SC 1.4.12 to consider. When a user overrides any of the following style properties, your page text should not disappear or overlap other page content:
      • Line height (leading) to at least 1.5x the font size;
      • Spacing following paragraphs to at least 2x the font size;
      • Letter spacing (tracking) to at least 0.12x the font size;
      • Word spacing to at least 0.16x times the font size.

    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.
      1. 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.
      2. Read accessibility acceptance criteria
      3. Write the HTML
      4. 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.
      5. Write automated tests for accessibility
      6. Get it reviewed (code review by engineers, design review by designers)
      7. 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 div or span rather than a button), 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-motion media query.
    • It’s worth at least a skim through – chances are you’ll learn something!

    fingerspelling.xyz

    • 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.”

    Accessibility Advocates Sign Open Letter Urging People Not To Use AccesiBe and Other Overlay Products

    • 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.

    Blind Accessibility Tips

    Whew, that was a long newsletter! Did you know that you can subscribe to smaller, more frequent updates? The dai11y, week11y and fortnight11y newsletters get exactly the same content. The choice is entirely up to you! Curated with ♥ by developer @ChrisBAshton.