Web Axe: Recent Episodes
None
More great opportunities! Mostly U.S.
- Accessibility Subject Matter Expert, contract, remote, U.S.
- Senior Accessibility Specialist at Thomson Reuters (hybrid, 4 locations).
- UX Design Accessibility Program Manager 7+ months contract in San Francisco, CA.
- Product Accessibility Customer Manager at Workday in Pleasanton, CA.
- Senior Inclusive Designer at CVS Health, remote.
- Web Accessibility Specialist at Nelnet, remote.
- Accessibility Advisor Lead at USAA in San Antonio, TX.
- Accessibility Tester in Malvern, PA USA.
- UX Accessibility Specialist position at Ally Bank, hybrid in NC.
Results of the 10th WebAIM Screen Reader User Survey are now published (Feb 22, 2024). Thank you WebAIM for continuing this valuable research and other research such as the WebAIM Million and the Survey of Web Accessibility Practitioners.
HighlightsAs with previous surveys, WebAIM announced the results in a blog post containing notable items which include:
- JAWS remains the highest reported primary desktop/laptop screen reader at 40.5% of respondents, though usage dropped compared to NVDA which is now the primary screen reader for 37.7% of respondents. VoiceOver usage remains relatively stable at 9.7%.
- JAWS with Chrome, NVDA with Chrome, JAWS with Edge, and NVDA with Firefox are the most common screen reader/browser combinations.
- 91.3% of respondents use a screen reader on a mobile device, with VoiceOver being the most popular by far at 70.6%.
- Only 34.6% of respondents indicated that web accessibility has improved over the last year, a decrease from 39.3% in 2021.
- Navigating through headings on a page remains by far the most common (71.6%) method of exploring page content. Heading levels (heading 1, heading 2, etc.) are reported as being very useful.
Self DescribingNot code-related, but another interesting noted item in the survey involves the trend of people describing their visual appearance to user at the beginning of a presentation (such as “I’m a dark haired white woman in my 40s wearing glasses and black lipstick”).
68.2% of respondents indicate that individuals should not describe what they look like during a virtual meeting or webinar.
My suggestion is to refrain from doing so.
Problematic ItemsThe most problematic items reported by screen reader users are as follows. WebAIM states the items are “largely unchanged over the last 14 years”.
- CAPTCHA – images presenting text used to verify that you are a human user
- Interactive elements like menus, tabs, and dialogs do not behave as expected
- Links or buttons that do not make sense
- Screens or parts of screens that change unexpectedly
- Lack of keyboard accessibility
- Images with missing or improper descriptions (alt text)
- Complex or difficult forms
- Missing or improper headings
- Too many links or navigation items
- Complex data tables
- Inaccessible or missing search functionality
- Lack of “skip to main content” or “skip navigation” links
Here’s a list of some recent job openings in digital accessibility — some great opportunities around the world!
- Senior Accessibility Specialist at Government Digital Service (GDS) in UK (Bristol, London, or Manchester)
- Project Leader, Digital Accessibility (2-year contract) at City of Mississauga in Ontario, Canada.
- Digital Accessibility Specialist at Qantas in Mascot, Sydney, Australia.
- Senior Accessibility Specialist at Scottish Government, in Glasgow and Edinburgh, UK.
- Inclusive Design Lead at NHS England in UK (Leeds, London, Exeter or Southport).
- Accessibility Specialist at Atos in Bydgoszcz, Poland.
U.S.* Digital Accessibility QA/Tester – WCAG and ARIA at The AES Group in Bellevue, WA (contract, remote US). * Web Accessibility Specialist at Robert Half in Greater Boston (contract, remote, US) via LinkedIn. * Supervisor, Accessibility US Analyst (web, mobile, kiosk) at McDonald’s in Chicago, IL, via LinkedIn. * Accessibility Lead at the University of Michigan Library in Ann Arbor, MI. * Accessibility Digitization Specialist at Princeton University in Princeton, New Jersey. * Accessibility Lead at Cencora in US (remote). * Added: Senior UX Accessibility Specialist at Edward Jones. Candidates must live within in a commutable distance from Tempe, AZ and St. Louis, MO offices.
Mark your calendar! Here are some terrific digital accessibility events coming up in 2024. Please add any good ones that I missed in the comments.
- Feb 20-22, axe-con by Deque Systems, online.
- April 6, Accessibility Camp Toronto, Toronto, Canada, #A11yTOCamp #a11yTO
- April 30-May 1, ACCESS by 3PlayMedia, online.
- March 7, Ability Summit by Microsoft, online.
- March 18-22, 39th Annual CSUN Assistive Technology Conference in Anaheim, CA.
- May 13-16, AccessU 2024 in Austin, Texas.
- May 16, Global Accessibility Awareness Day @gaadfdn #GAAD
- May 27-28, Accessible Canada – Accessible World Conference in Montreal, Quebec.
- June 14, Accessibility Summer Camp, by ICT, online.
- July 3-8, Orlando, Florida, NFB National Convention,
- July 8 -12, ICCHP – International Conference on Computers Helping People with Special Needs, JKU Linz, Austria.
- July 30, HighEdWeb 2024 Accessibility Summit, @highEdWeb, online.
- September 12, Inclusive Design 24 @ID24Conf #ID24, online.
- TBD, Web Accessibility in Mind Conference by WebAIM and Pope Tech, online.
- October 3-4, Accessibility Toronto Conference, in Toronto, Canada, @a11yTO #a11yTOConf
- October 15-17, M-Enabling Summit, Washington DC, @mEnablingSummit
- November 11-15, 27th Annual Accessing Higher Ground in Denver, CO, hybrid.
Your Minimum Viable Product (MVP) Must Be Accessible.
Full stop.
Related:
- MVP and Accessibility by Nic Steenhout
- Accessibility ‘Gaps’ in MVPs by Adrian Roselli
- Accessibility and MVPs by David A. Kennedy
- How does accessibility fit into an MVP? by Obinna Ekwuno and Marcy Sutton.
Strikethrough is an HTML element to indicate text that is crossed out – usually indicated visually with a line through the middle of the text. The W3C definition is:
The s element represents contents that are no longer accurate or no longer relevant.
On e-commerce websites, a strikethrough element is often used to indicate a price is no longer valid and often has a reduced price next to it.
The problem is that most screen readers don’t output the strikethrough semantics. This can be very problematic to the blind user since they won’t know which price is valid. Most in-line semantic elements such as and are not conveyed to screen readers actually. For more on that, reference the article Screen Readers support for text level HTML semantics by TPGi.
Let’s examine four test cases and the level of support. Note that the strikethrough element is mapped to the deletion ARIA role which we’ll use in test Scenario 2.
Test CasesFour code scenarios were tested against 6 screen reader/browser/OS combinations including VoiceOver, NVDA, JAWS, and TalkBack. The actual test cases used are in the second portion of the CodePen Negative number and strikethru tests.
Scenario 1: strikethrough element onlyPrice: ~~$200~~ $100
Price: <s>$200</s> $100
The plain old semantic HTML—an S element around the text. This is obviously the ideal code, but support isn’t quite there yet. Only NVDA and TalkBack passed.
Scenario 2: strikethrough with ARIA ‘deletion’ rolePrice: ~~$200~~ $100
Price: <s role="deletion">$200</s> $100
This is similar to Scenario 1, but with the addition of role=”deletion”. The test results were similar to without the role. The only difference is that VoiceOver on iOS also passed.
Scenario 3: strikethrough with visually hidden textPrice: original price~~$200~~ sale price$100
Price: <span class="visually-hidden">original price</span><s>$200</s> <span class="visually-hidden">sale price</span>$100
This test case uses the old school technique of visually hiding text via CSS. “Original price” outputs before the price with the strikethrough, and “Sale price” outputs before the valid price.
All screen readers passed this scenario.
Scenario 4: strikethrough with visually hidden pseudo-contentPrice: ~~$200~~ $100
Price: <s>$200</s> $100
```
pseudo s::before { content: " [start of stricken text] ";}#pseudo s::after { content: " [end stricken text] ";}#pseudo s::before,#pseudo s::after { clip-path: inset(100%); clip: rect(1px, 1px, 1px, 1px); height: 1px; width: 1px; overflow: hidden; position: absolute; white-space: nowrap;}
``` The fourth test case has the same HTML has Scenario 1. But then applies a brilliant method by Adrian Roselli introduced in 2017 in the article Tweaking Text Level Styles. Pseudo-content (creating a textual phrase via CSS) is used to indicate when the strikethrough starts and ends.
There are a couple issues to mention with this approach:
- Since NVDA now supports the strikethrough tag, it indicates the semantics twice — both the S element semantics (“deleted”) and the pseudo-content (“start of stricken text”) which creates ambiguity for the user.
- Oddly, the double semantics is not conveyed by TalkBack which did pass the previous three scenarios.
- With JAWS, the output is broken up with multiple stops which makes it difficult to follow. (Changing the brackets to parentheses might help.)
This technique technically works for all screen readers, but the user experience is very confusing for NVDA users.
Test ResultsDoes screen reader output “deleted”, “stricken”, or similar?
Test Results| iOS + Safari + VO | MacOS + Safari + VO | Android + Chrome + TalkBack | Win + Chrome + NVDA | Win + Firefox + NVDA | Win + Chrome + JAWS | | --- | --- | --- | --- | --- | --- | | Scenario 1 | No | No | Yes | Yes | Yes | No | | Scenario 2 | Yes | No | Yes | Yes | Yes | No | | Scenario 3 | Yes | Yes | Yes | Yes | Yes | Yes | | Scenario 4 | Yes | Yes | Yes | Yes | Yes | Yes |
ConclusionNVDA has the best support for , the strikethrough element. For now, to best support screen readers overall, we should continue to use Scenario 3 — strikethrough with visually hidden text — to programmatically convey strikethrough semantics. Doing so will ensure that everyone understands strikethrough semantics while browsing the web which often means knowing the correct price of a product or service.
Further reading* Ensuring negative numbers are available for everyone via Deque Systems * How To Use Inline-level and Block-level Elements in HTML by DigitalOcean
Announcing: WCAG 2.2 is now published as a web standard—a W3C Recommendation!
For an introduction to WCAG, see the WCAG 2 Overview. There are also a few updates in the WCAG 2 FAQ.
1 Success Criterion dropped in WCAG 2.2Success Criterion 4.1.1 Parsing has been removed. More info on this highly debated decision from W3C WAI on why 4.1.1 was removed. Also, see the article The 411 on 4.1.1 by Adrian Roselli.
9 new Success Criteria in WCAG 2.2* 2.4.11 Focus Not Obscured (Minimum) (AA) * 2.4.12 Focus Not Obscured (Enhanced) (AAA) * 2.4.13 Focus Appearance (AAA) * 2.5.7 Dragging Movements (AA) * 2.5.8 Target Size (Minimum) (AA) * 3.2.6 Consistent Help (A) * 3.3.7 Redundant Entry (A) * 3.3.8 Accessible Authentication (Minimum) (AA) * 3.3.9 Accessible Authentication (Enhanced) (AAA)
Related Articles* What’s new in WCAG 2.2 by TetraLogical * Deque Systems Welcomes and Announces Support for WCAG 2.2 * What’s new in WCAG 2.2? by Hidde de Vries * New Success Criteria in WCAG 2.2 by TPGi * WCAG 2.2 Map by Intopia * WCAG 2.2 Checklist with Filter and Links by Dennis L
Here’s a list of some recent job openings in digital accessibility — some great opportunities!
- Senior Accessibility Analyst at ADP, US remote
- Senior Accessibility Designer at GitHub, US remote
- Engineering Program Lead, Accessibility at Microsoft
- Staff Accessibility Engineer, UX Platform at ServiceNow in San Diego, CA
- Accessibility Specialist at W3C, US remote
- Lead Product Designer, A11y at Slack
- Accessibility UI/UX Designer/Researcher at Sony Electronicsin San Diego, CA
- Digital Accessibility Manager at Citizens Advice in England and Wales
- Added: Accessibility [Web] Developer at University of Washington in Seattle, WA
Do you need to provide or to purchase an accessible website or other digital product but don’t know how to go about it? You’ll likely need to create or analyze an Accessibility Conformance Report (ACR) which is created from a Voluntary Product Accessibility Template (VPAT). You can download the VPAT templates on the Information Technology […]
Summary: This article suggests that the custom select dropdown is overused. The ARIA combobox pattern to create one is very complex and has inconsistent support. Instead, the native HTML datalist element should be leveraged to create a similar UI control, and its support is pretty good. Code snippets, keyboard testing results, and basic screen reader […]
Fun! Accessibility Daze — a GAAD (Global Accessibility Awareness Day) rap song via YouTube. A transcription is inline below.
Lyrics:
GAAD’s the celebration, this year a musical potion. Sight, sound, touch for all a sonic solution. AWOL, Coop, y’all ready to set it in motion? Yeah.
We come from many places with different biologies to celebrate GAAD and accessible technologies. Why we do what we do, it isn’t a mystery. You just have to go back in time and learn a bit of history.
It started way back in 2011 with nothing more than a blog post by Joe Devon. He was ashamed by devs’ lack of inclusivity, so he suggested we raise awareness of accessibility. Joe’s idea, it was really quite simple. On this day, the idea, it would ripple. Jennison saw the post and had a revelation to help Joe form a foundation, ain’t that amazing? Yeah.
Give them a standing ovation, they made it happen. Bring attention to tech exclusion, that’s why we’re rappin’. Digital access for all is our mission, so bring us your attention, show you how to make a difference. Get ’em.
One in six people on Earth have disabilities. It’s not a lie, the largest minority unequivocally. When sites and apps aren’t built to be accessible the experience is tough, and we need to be more flexible. Visual, auditory, motor, even cognitive, 1.3 billion, all the same, no one’s prerogative. GAAD is the first step to clear the haze. We’re here to pave the way through accessibility days.
Did you know that most sites and apps, they ain’t accessible? The worst part is most bugs are easily addressable. We can’t be followers. No, we got to be the leaders. Alt text on images enabling screen readers. Closed captions available when you play a video. Accessible content should be nothing more than trivial. Motor disabilities can make it impossible to interact with sites when navigation’s illogical.
Maybe with AI, we can open a eye to UI that’s usable without batting a eye. Whether they can’t use their eyes, ears, or any other senses, enable your websites. Don’t put up any fences. I said “screen reader” before, but let me rewind. It helps the dyslexic and others, not just the blind.
We can all make a difference all of the time. Don’t call me crazy. Just design your app to meet the W-C-A-G.
SPEAKER: Find out how to get involved. Visit accessibility.day. Glad to be GAAD — Global Accessibility Awareness Day.
Related:* Global Accessibility Awareness Day * WCAG 2.1 * Podcast #95 announcing Global Accessibility Awareness Day (2012)
Recommended resources on web accessibility from over the last several months:
- The WebAIM Million (updated Feb 2023)
- Defaulting on single page applications (SPA)
- Accessibility for designer: where do I start?
- Structuring Accessible Forms
- Keys To An Accessibility Mindset – Smashing Mag
- Under-Engineered Patterns for #WCBUF – Adrian Roselli
- A Whole Lot of Bovver Over Hover – TPGi
- Visually Accessible Data Visualization
- Know your Standards (updated)
- Foundations: accessible names and descriptions – Tetralogical
- A Guide To Accessible Form Validation – Smashing Mag
- A beginner’s guide to link and text accessibility – Pope Tech
- Accessible Target Sizes
- You Don’t Need ARIA For That – HTMHell
- What we’ve learned about designing for accessibility from our users – Slack design
- BONUS! What Happened To Text Inputs?
“The Web Needs a Native .visually-hidden”. I disagree, particularly as a matter of priority.
A visually-hidden CSS class, as it’s often named, is used to visually hide textual content from sighted users but expose it to screen reader users. This is a common practice in web development, too common in my opinion. Another name for the class you’ll come across is “sr-only” (which I believe stemmed from Bootstrap but was modified in version 5). The properties of the class are complex and implemented in different ways.
So technically, this may be true—a native HTML attribute for the same functionality would be somewhat useful. But it’s not anywhere near the importance of other, more foundational needs. My point is that, in the big picture, a native visually-hidden should be much, much lower on the priority list. So low that it’s a bit discouraging to hear folks requesting it.
What the web really, greatly needs is the following:
- Web developers who practice semantic HTML.
- Designers who don’t want to customize every single UI element.
- VPs who prioritize usability and accessibility.
- Designers and VPs who prioritize usability and accessibility over the latest visual design trends (which most of the time cause accessibility problems).
- A lot less adverts, pop-ups, notifications, and other UI shyte.
These fundamental needs will go tremendously further for usability and accessibility than any HTML attribute, ARIA attribute, automated testing tool, Figma plugin, etc.
Also, as web professionals, we don’t want to encourage the use of visually hidden text but discourage the use — in favor of universal design, creating the same design and experience for all users. This will also save a lot of time and hassle during the SDLC.
Further reading:
- The WebAIM Million
- The Web Needs a Native .visually-hidden
- Inclusively Hidden by Scott O’Hara
- The anatomy of visually-hidden by TPGi
- The State Of Usability In 2023 by Smashing Magazine
- Competing Popups Are an Increasing Menace by NNGroup
Mark your calendar! Here are some terrific digital accessibility events coming up in 2023. Please add any good ones that I missed in the comments.
- March 8, Ability Summit by Microsoft, online
- March 13-17, 38th Annual CSUN Assistive Technology Conference in Anaheim, CA
- March 15-16, axe-con by Deque Systems, online
- May 9-12, John Slatin AccessU 2023 by Knowbility, hybrid
- May 16-18, Virtua11y web accessibility conference 2023 by Nomensa @we_are_Nomensa
- May 18, Global Accessibility Awareness Day @gaadfdn #GAAD
- 21 September, Inclusive Design 24 @ID24Conf #ID24, online
- TBD, Web Accessibility in Mind Conference by WebAIM and Pope Tech
- TBD, Accessibility Toronto Conference, @a11yTO #a11yTOConf
- Nov 6-10, 26th Annual Accessing Higher Ground in Denver, CO, hybrid
- TBD M-Enabling Summit, Washington DC @mEnablingSummit
Also, check out my Twitter list of accessibility meetup groups around the world.
Slightly off topic, but if you’re seeking a stock photo including people with a disability, here is a list of resources. Please submit a comment if you know of any others!
- Pixabay (disability search) – free images & royalty free stock.
- Disability Inclusive Stock Photography – Disability:IN is pleased to offer disability inclusive stock photography to the public. In an effort to empower business to achieve disability inclusion and equality, we encourage corporations to use this in recruitment material, marketing material, internal and external communications, etc. Licensed under a Creative Commons Attribution-NoDerivatives 4.0 International License.
- Pexels (disability search) Free Disability Photos.
- Disabled And Here Collection – This stock library is a disability-led effort to provide free and inclusive images from our own perspective, with photos and illustrations celebrating disabled Black, Indigenous, people of color (BIPOC).
- DisabilityImages – Nice photos but requires payment. Disability Images was acquired by Design Pics Inc. in July of 2019. After building this unique collection depicting authentic persons with real disabilities over the past many years, the previous owners elected to have Disability Images become part the Design Pics family of brands. This transition allows for continued service to the valued clients who have come to rely on this collection to serve their specific image requirements.
- PhotoAbility – Nice photos but requires payment. Stock Image Library featuring individuals with disabilities in Travel, Leisure and Lifestyle settings.
Here’s a list of some of the latest job openings in digital accessibility—some great opportunities!
- Lead Product Designer – Accessibility at Atlassian, remote PST
- Global Accessibility Lead at Red Hat
- Senior Accessibility Program Manager at GitHub, remote US
- Principal Program Manager, Accessibility at Zillow
- Senior Manager Accessibility Specialist at Workday in Pleasanton, CA
- Accessibility Design Lead at Bread Financial, remote US
- Accessibility Testing Lead – Senior Manager at KPMG, UK
- Tech Champion – Digital Accessibility at Arts Council England in UK
- Accessibility Product Engineer at Olark, remote US
- Online Learning Accessibility Coordinator at MIT, full-time for one year
- Digital Accessibility Specialist, remote US
- Added: Section 508 Accessibility Specialist at Oddball, remote US
Recommended articles and presentations from over the last few months:
- Learn Accessibility course on web.dev by Carie Fisher
- 5 Visual Treatments that Improve Accessibility by NNGroup
- Buttons and the Baader–Meinhof phenomenon (how to, and how not to, label buttons) by Manuel Matuzovic
- aria-label is a code smell by Eric Bailey
- Cognitive Overlords A11yTalks with Alex Tait
- 7 tactics that benefit both accessibility and SEO by Deque Systems
- The anatomy of visually-hidden by TPGi
- 5 takeaways from screen reader usability interviews by Jess Bud
- Focus appearance explained and Bag some [WCAG] AAA wins where you can by TemperTemper
- Foundations: HTML semantics by TetraLogical
- Under-Engineered Patterns for #a11yTOconf by Adrian Roselli
- BONUS: Blast from the past! What Is ARIA Even For? A most entertaining and informative video from by Heydon Pickering, Nov 2020.
So much has happened since the last Web Axe post over 18 months ago. The turmoil with Twitter lately (thanks to evil Elon) has inspired a resurgence of a more friendly and responsible Internet – self-publishing and decentralized content, so let’s hope this continues.
One thing we’ve learned over the last couple decades is that large corporations and their owners should not be the owners of the news, of social media, of us.
There will be more Web Axe blog posts coming, and more often. And the Twitter content will be cross-posted from Mastodon, a completely free, decentralized, and open-sourced social media platform. Besides this blog (and RSS feed), please feel free to follow Web Axe on Mastodon at @WebAxe@a11y.info.
PS: good tweets
Elon the new Twitter fail whale. Lol pic.twitter.com/0Bliwc0hZp
— Angry Granny (@AngryGranny1) November 4, 2022
Over 1 million people have joined Mastodon since October 27. Between that and those who returned to their old accounts, the number of active users has risen to over 1.6 million today, which, for context, is over 3 times what it was just about two weeks ago!
— Mastodon (@joinmastodon) November 12, 2022
With CSUN and axe-con ending, what are other events or conferences are coming up? Here’s a list of upcoming digital accessibility events in mid-2021. Feel free to comment with more. TechAccess Oklahoma 2021, April 20-22 Added: Web4All April 19-20 Making a COVID-19 Site Accessible: From Tweet to Action (live YouTube), A11yTalks series, April 22 A Future Date […]
More great opportunities in the field of digital accessibility. Senior UX Designer, Accessibility at Ad Hoc (remonte/DC). Accessibility Director at California Community Colleges (CCC) Technology Center. Web Accessibility Programmer at California Community Colleges in San Mateo, CA. Accessibility Consultant at Deque Systems in Herndon, VA, or remote location. UX Accessibility Specialist II at Edward Jones in San […]
Within a web development organization, it’s ideal to maintain (and enforce usage of) design patterns and a components library. And they should work together; design patterns create consistency among visual elements across projects and the components library creates consistent implementation of those patterns during development. This is especially important on several levels including accessibility. Here […]
There are a few great simulation tools in Chrome which invoke rendering of a couple CSS media queries and simulate several types of color blindness. These are great for testing the implementation of your accessible design! The features include: Emulate CSS media feature prefers-color-scheme Emulate CSS media feature prefers-reduced motion Emulate vision deficiencies Unfortunately, they […]
The card pattern (also know as tiles and blades) has become quite popular over the last several years. There are many accessibility challenges that may arise quickly when web developers attempt to build them including: Providing keyboard access Providing an adequate visible focus indicator Link text that’s not overly verbose for screen reader users Using […]
Many more tremendous opportunities in the field of digital accessibility. Software Development Engineer, accessibility – Alexa shopping, at Amazon in California. Web Accessibility Technical Specialist at Facebook in Menlo Park, CA. Senior Interaction Designer, Accessibility at Google in CA/TX/MA. Senior Accessibility Designer at CVS in Boston, MA. Accessibility Support Associate at Integra Software Services in […]
This is a guest post; a slightly modified letter from Lainey Feingold. Thank you Lainey! Dear Web, I hope this message finds you, your families and colleagues, and all those you love safe and as well as possible during these challenging times, the COVID-19 (Coronavirus) pandemic. I write to share some upcoming accessibility learning opportunities […]