Category: dai11y

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

The only accessibility specialist in the room

It’s hard being the only one in your organisation or team responsible for accessibility. If that sounds familiar, I salute you, and this one’s for you.

This article by Henny Swan might resonate with some of you. Henny has some advice:

1. You are not the only person responsible for accessibility. You may be the only person with “accessibility” in your job title, but it’s everyone’s responsibility, from CEOs to content editors, designers and developers.
2. Your role is as much about relationships as it is about accessibility. Look for the managers and decision makers who can make things happen, and look for the designers, developers, editors and testers that want to get into accessibility: they can be powerful advocates.
3. Find ways to scale. Think about what questions you’re asked the most, and document your answers in shared spaces (Confluence, wiki, design system documentation, etc). Document processes that can be followed within teams, e.g. reviewing designs for accessibility, triaging a11y issues or writing user stories for accessibility.
4. You can’t know everything. Tell people you will need to go and research something, and come back with options for them to consider. Get a consultant if specialist knowledge is needed. If you need a budget, invest some time in writing a business case for accessibility.
5. Build a support network. Set up an a11y Slack channel. Join the Champions of Accessibility Network (CAN) on LinkedIn, and the WebAIM discussion list. Consider getting a mentor, e.g. at Accessible Community.

---

Prefer longer newsletters? You can subscribe to week11y, fortnight11y or even month11y updates! Every newsletter gets the same content; it is your choice to have short, regular emails or longer, less frequent ones. Curated with ♥ by developer @ChrisBAshton.

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

Toggles suck!

This somewhat inflammatory headline by AxessLab leads into a very long but enjoyable article about toggle design. The author argues that real world toggles (light switches) work well because:

1. It’s clear whether it’s worked, via the context (the light immediately comes on)
2. One can press the switch as many times as one wants, and have the same outcome (i.e. pushing down extra hard on the switch to make sure something comes on).

In the digital world, the design doesn’t carry over so well. For setting things like cookie preferences, there is no obvious visual feedback to enabling/disabling the setting. And activating the switch will flutter back and forth between ‘on’ and ‘off’.

There are lots of illustrations and screenshots in the article, highlighting that it’s often unclear what state a toggle is in. Designs vary, and whilst “most western designers seem to assume that “right = active””, that’s not always the case.

It is possible to make accessible toggles. The author links to articles by industry heavyweights: Heydon Pickering’s article on Toggle Buttons, an article on Toggle Switch design by Sara Soueidan, and Under Engineered Toggles by Adrian Roselli.

The author also cites examples of toggles done well. They show a screenshot of a toggle for filtering on Airbnb, where a toggle button limits the amount of available houses. “Users can understand by the reduced amount of houses that the filter is active, even if they don’t understand the toggle control. The number in the button is physically close to the toggle control, and many users will notice the change as it happens and draw the correct conclusion from context”.

But whilst Airbnb is a big name, other big names are content to not use toggles. The author shows screenshots of Amazon using plain old radio buttons, and Slack using plain old buttons. The author concludes with advice to “just use a checkbox or radio group”.

There were a few other bits of interesting info tangential to the theme of toggles.

“In our user tests, a majority of users will assume an empty text field is actually mandatory and expect an input to be made. So much so that we even recommend you to not use asterisks * to indicate mandatory fields, and instead mark optional fields as “optional”.”

Indeed, “the “filled in = active / touched / done” pattern is so well recognized that if a text input field is not empty, many users will believe it’s done and requires no more work. That’s why you should try to avoid placeholder text and labels that are positioned inside the input field like the commonly used Material UI component, even if it “moves away” on focus.”

A worthwhile read!

---

Prefer longer newsletters? You can subscribe to week11y, fortnight11y or even month11y updates! Every newsletter gets the same content; it is your choice to have short, regular emails or longer, less frequent ones. Curated with ♥ by developer @ChrisBAshton.

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

Don’t meddle with user input

Martin Underhill warns against designs that manipulate user input, and the maxlength attribute in particular, which prevents users from typing anything beyond a certain character limit.

Whilst these features are often implemented with the best of intentions – to assist the user in inputting data in the correct format, for example – they’re not very accessible solutions.

Martin references the GOV.UK Design System’s Date Input component, which expects a format like 27 3 2007 but does not prevent users from typing longer numbers (or indeed typing a-z characters). Someone raised a GitHub issue to discuss adding maxlength to the fields, but Hanna Laakso responds:

If you use maxlength attribute on a form field to limit user input, users might not receive appropriate feedback of the limit. For instance, the user might not notice that not all the information they entered appeared in the form field … It is generally better to let users enter their information in a way that suits them and allow them to submit the form.=

Instead, using hint text to nudge the user in the right direction, alongside validation to tell the user how to fix the problem in any particular form field, is the suggested way forward. Martin notes that “this should also help satisfy 3.3.2 Labels or Instructions and 3.3.3 Error Suggestion, respectively, from the Web Content Accessibility Guidelines (WCAG)”.

---

Prefer longer newsletters? You can subscribe to week11y, fortnight11y or even month11y updates! Every newsletter gets the same content; it is your choice to have short, regular emails or longer, less frequent ones. Curated with ♥ by developer @ChrisBAshton.

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

The difference between Increased Contrast Mode and Windows High Contrast Mode (Forced Colours Mode)

Martin Underhill describes Increased Contrast Mode (ICM) – a setting that users can opt into, and which website designers/developers can accommodate through a media query:

@media (prefers-contrast: more) {
    /* High contrast styling goes here */
}

Not a lot of people know about this, or they don’t have it high on their list of priorities. It’s utterly reliant on the website creator to support.

Windows High Contrast Mode (WHCM), on the other hand, is a ‘forced colours mode’. It doesn’t rely on the website creator, and instead forces the chosen theme onto the website. It has a well supported media query like ICM, but only allows a handful of carefully selected things to be styled:

@media (forced-colors: active) {
    /* WHCM styling goes here */
    /* Limited to things like text colour, background colour and keyboard focus outline colour */
}

Martin has made the decision to not attempt to define styles for WHCM users, instead delegating this to the user’s operating system. It should mean they have a more consistent/familiar experience, and it will automatically support their choice of dark or light theme.

---

Prefer longer newsletters? You can subscribe to week11y, fortnight11y or even month11y updates! Every newsletter gets the same content; it is your choice to have short, regular emails or longer, less frequent ones. Curated with ♥ by developer @ChrisBAshton.

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

Become an accessibility champion by using simple mockup annotations

“Accessibility annotations” detail interaction design behaviours in UI designs. They communicate the intended experience for keyboard and screen reader users, allowing developers to implement the design just as they would implement a visual one. This speeds up the design QA and development process, but also ensures designers have thought about accessible interactions from the start.

The article shows screenshots of some annotated designs, with symbols clarifying the intended focus tab order of a component, or call-outs to screen-reader-specific text. Even the underlying semantics – whether a list should be ordered or unordered, for example – are clarified with markup annotations.

There is also a Jira ticket template “to facilitate design accessibility review discussions while reviewing the visual mockups”.

The article links to Deque’s downloadable accessibility annotations toolkit, which has files for Adobe Illustrator and Sketch as well as individual SVGs.

---

Prefer longer newsletters? You can subscribe to week11y, fortnight11y or even month11y updates! Every newsletter gets the same content; it is your choice to have short, regular emails or longer, less frequent ones. Curated with ♥ by developer @ChrisBAshton.

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

Everyone Watches TV with Subtitles Now. How’d That Happen?

I thought this article was interesting to call out, as in my experience we still often assume captions should be an ‘opt in’ thing. But perhaps things have pivoted to them being ‘opt out’. Indeed, some captions are now ‘on’ by default on social media.

In a 2022 survey of 1,200 people, language learning company Preply determined that 50 percent of Americans used subtitles and closed captions the vast majority of the time they watch content.

According to Preply, 57 percent of all Americans watch shows or movies or videos in public on their mobile devices, but a very significant 74 percent of Gen Z do the same. Even if you’re (hopefully) using headphones while in public, it’s likely you’re getting poor audio quality… subtitles are practically a necessity.

The article also cites ‘habit’ as one of the main reasons. People are simply more used to using subtitles; the article cites that in 2020, nearly 30 percent of on-demand streaming was for non-US shows.

Finally, there are some modern technical issues that could explain why hearing dialogue is more difficult:

For some, the problem is the design of modern televisions; the majority of which place internal speakers at the bottom of the set instead of facing towards the audience, causing significantly worse audio quality. Other issues are caused by sound designs optimized for theatrical experiences, which can result in compressed audio when translated to home.

---

Prefer longer newsletters? You can subscribe to week11y, fortnight11y or even month11y updates! Every newsletter gets the same content; it is your choice to have short, regular emails or longer, less frequent ones. Curated with ♥ by developer @ChrisBAshton.

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

ShatGPT

Steve Faulkner gives a frank accessibility review of the ChatGPT UI:

1. The chat history is not navigable using the keyboard, as the links are not focusable. It makes use of <a> markup without a href or tabindex, so is not keyboard-accessible.
2. The UI contains lots of unlabelled buttons, relying on icons alone to convey intent. JAWS announces them as “unlabelled button 1, unlabelled button 2, unlabelled button 3” – good luck using the interface!
3. Similarly, the buttons fail WCAG 1.4.11 Non-text contrast, as their contrast ratio is just 2.1:1.
4. The information panel describing “Reasoning/Speed” and “Conciseness” is largely hidden from screen reader users.

Steve goes on to try to ask ChatGPT how it should make the markup more accessible, and is not impressed with the result.

But I think the bigger takeaway is that this multi-billion dollar company clearly has little regard for the accessibility of its product, which seems to be a trend with hyped and emerging technologies. So frustrating.

---

Prefer longer newsletters? You can subscribe to week11y, fortnight11y or even month11y updates! Every newsletter gets the same content; it is your choice to have short, regular emails or longer, less frequent ones. Curated with ♥ by developer @ChrisBAshton.

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

W3C Design System

A redesigned W3C website has launched with a Design System. The design system draws inspiration from the GOV.UK design system and uses some GOV.UK-owned components such as accessible autocomplete.

DAC performed accessibility audits of the new W3C website, and their reports can be downloaded from the redesign project website.

Thanks to Derren at GDS for sharing this with me!

---

Prefer longer newsletters? You can subscribe to week11y, fortnight11y or even month11y updates! Every newsletter gets the same content; it is your choice to have short, regular emails or longer, less frequent ones. Curated with ♥ by developer @ChrisBAshton.

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

My Thoughts on Accessibility of NFTs and Web3

Apologies if this is so last year (this post has been in my bookmarks since February 2022, and admittedly we haven’t heard much about Web3 since the rise of ChatGPT). But this article by Crystal Preston-Watson evaluates an emerging and hyped technology for its accessibility, so there’s certainly a crossover.

Crystal explains that a non-fungible token (NFT) is a unique digital asset that can be bought using blockchain technology. Crystal has a visual impairment, but is not a screen reader poweruser. So, she attempted to go through the process of creating a Coinbase wallet, buying Ethereum (ETH) and then purchasing an NFT on OpenSea, testing the end-to-end transaction from an accessibility perspective.

The first takeaway is perhaps surprising: whilst there were significant accessibility issues, Crystal didn’t encounter anything more or less accessible than the process of buying items on many other eCommerce sites right now.

There were some unique challenges, such as having to verify their identity for the Coinbase account, which requires the app taking pictures of the front and back of one’s driving license, and also taking a selfie. Crystal notes that some users would require in-person assistance, opening them up to security vulnerabilities of sensitive information.

Before using OpenSea, Crystal has to transfer ETH to a wallet. Coinbase directed them to set up a passcode/biometrics, then generated a recovery phrase (for backup wallet recovery). Coinbase prompted Crystal to either back up the phrase in the cloud, or write it down, or copy the words to the phone’s clipboard (for then storing somewhere locally). Crystal elected for the latter, but was then told the phrase would only be copied to the clipboard for one minute. This time limit was insufficient given Crystal was using a screen reader, so they were forced to use cloud storage instead.

The biggest blocker to the transaction turned out to be the utter lack of alt text on OpenSea, and then the financial burden of the ‘gas fees’. Crystal ended up not buying an NFT.

It’s easy to get caught up in the hype of a new technology – but we should do all we can to ensure disabled users aren’t left behind.

---

Prefer longer newsletters? You can subscribe to week11y, fortnight11y or even month11y updates! Every newsletter gets the same content; it is your choice to have short, regular emails or longer, less frequent ones. Curated with ♥ by developer @ChrisBAshton.

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

What it’s really like to be openly disabled in an interview process:

This Medium article is written by Mal: a “multi-disciplinary designer + artist, storyteller, neurodivergent (autist + adhd); she/they”. She shares three interview experiences, two positive and one negative.

The first was for an interview last September, in which Mal received the interview questions in advance. Though she didn’t get the job, “the interview went well, I said exactly the stories I wanted to say to each question, and was only a normal level of anxious the whole time”.

The second was the interview for her current job, where she didn’t ask for the questions in advance. She realised halfway through the Zoom call that she was unable to process anything, and told the interviewers what was happening. She asked to follow up and answer the rest of the questions in an email that day. She got the job offer, and given the interview proces was so inclusive, she felt that working there would be a similar experience, so accepted.

The negative experience Mal had concerns an interview somewhere else, where Mal asked for either the questions a day or two in advance, or the opportunity to submit written responses (with a virtual follow-up meeting to meet face to face). The HR person phoned Mal out of the blue and asked her if she had anything official to send that could ‘prove’ her autism.

Mal offered to send a diagnosis assessment from her psychologist, but that it would not explain how she is at work or why she needs these specific accommodations. The HR person followed up and asked Mal to get her doctor to fill out an accommodation form.

Mal ultimately didn’t go through with it. Where Mal lives, doctors would charge around $100 for such a request. Mal would have to find a way to print the form without owning a printer, and would have to spend half an hour on hold to make an appointment, and would have to schedule an appointment that fits within her existing work schedule, and would have to explain to the GP what is needed and hope the GP fills in the form correctly. All for a form she would only use once, given its specific nature tied just to this job application. And all just to participate in the interview process.

Don’t be like this HR person.

---

Prefer longer newsletters? You can subscribe to week11y, fortnight11y or even month11y updates! Every newsletter gets the same content; it is your choice to have short, regular emails or longer, less frequent ones. Curated with ♥ by developer @ChrisBAshton.