Shifting left, or: making accessibility easier by doing it earlier

👈Shifting left or: making accessibility easier by doing it earlier Hidde de Vries, Accessible Banking, Amsterdam, 27 March 2025 hidde.blog

hidde.blog “Why Isn’t Accessibility easier?” —a befriended web developer

WAI-ARIA Techniques understanding coga ACT-Rules wcag 2.1 LEVEL A/A/AAA ATAG axe low vision ASSISTIVE TECH accessible VR xaur UAAG ACT maturity model WEBVTT AGWG LAWS & POLICIES SEMANTICS CONFORMANCE EVALUATION EARL AUTHORING PRACTICES WCAG-EM ACCESSIBILITY STATEMENTS

🤔 hidde.blog “Hard to know when it is accessible” “Find time to x things a er audit results come in” ft fi “Which docs / components can I trust?”

👈Shifting left or: making accessibility easier by doing it earlier Hidde de Vries, Accessible Banking, Amsterdam, 27 March 2025 hidde.blog

hidde.blog Hi, I’m Hidde accessibility / front-end / standards WCAG / ARIA / EN 301 549 hidde.blog

hidde.blog hidde.blog/slides

hidde.blog Web accessibility to ensure people with disabilities can use our site/app

hidde.blog Web accessibility to ensure people with disabilities can use our service

hidde.blog Web accessibility to ensure people with disabilities can buy our product

hidde.blog Web accessibility to ensure people with disabilities can buy our product – auditory – physical – visual – cognitive – speech

hidde.blog 15-20% of your (potential) users

hidde.blog Disability is a spectrum

hidde.blog so is access

hidde.blog people will - zoom in - use high contrast modes - use a screenreader - not use a mouse - use voice recognition - be unable to turn their device W3C/WAI, How People with Disabilities Use the Web https://www.w3.org/WAI/people-use-web/tools-techniques

hidde.blog “Assume less”

hidde.blog

hidde.blog “We’re 100% accessible” — some products

hidde.blog “that’s inaccessible!” — an accessibility specialist

hidde.blog people use the web in many ways

@hdv people use the web in many ways

hidde.blog people use the web in many ways timing matters as websites change Somewhat subjective interpretation of Success Criteria

hidde.blog accessibility is iterative (the work is never done)

hidde.blog Built-in accessibility

hidde.blog overlays Promise to x accessibility don’t use in content automatically, but “ine fectiveness of overlays is something that has broad agreement among accessibility practitioners” fi f https://overlayfactsheet.com

hidde.blog design systems With components, we can make accessibility reusable and repeatable Sanity UI, Material UI

hidde.blog design systems With components, we can make accessibility reusable and repeatable Document Do’s, don’ts, gotchas

hidde.blog design systems With components, we can make accessibility reusable and repeatable complex components For reuse in across front-end

hidde.blog design systems With components, we can make accessibility reusable and repeatable tests per component With tools like Storybook

hidde.blog accessibility is iterative (the work is never done)

hidde.blog browsers Could x a small subset of accessibility issues in content automatically for end users fi fi https://talks.hiddedevries.nl/KKW74X/could-browsers- x-more-accessibility-problems-automatically

hidde.blog Untruncate text Force focus indication Force colour contrast Suppress autoplay of gifs and videos fi https://talks.hiddedevries.nl/KKW74X/could-browsers- x-more-accessibility-problems-automatically

hidde.blog html f Could o fer more accessibility-by-default components

hidde.blog // features that make a11y possible, // e.g. support for alt text <img src=”” alt=”” />

hidde.blog // features that make a11y possible, // e.g. support for captions <video> <track>…</track> </video>

hidde.blog // features that do accessibility // semantics for you, like headings <h1>Top news</h1>

hidde.blog // features that do some accessibility // semantics for you, like popover <button popovertarget=”p”> Open popover </button> <div popover id=”p”> I am popover content </div>

hidde.blog // features that do some accessibility // semantics for you, like popover <button popovertarget=”p”> Open popover </button> <div popover id=”p”> I am popover content </div> I am popover content

hidde.blog aria-expanded state I am popover content hidde.blog/popover-accessibility

hidde.blog aria-expanded state aria-details relationship (if apt) I am popover content hidde.blog/popover-accessibility

hidde.blog aria-expanded state aria-details relationship (if apt) I am popover content hidde.blog/popover-accessibility group fallback role (if apt)

hidde.blog aria-expanded state aria-details relationship (if apt) I am popover content hidde.blog/popover-accessibility group fallback role (if apt) some focus management

hidde.blog Not built-in: I am popover content hidde.blog/popover-accessibility colour contrast zoom support etc etc

hidde.blog cms Could help with accessibility in the authoring process

Video: Tyler Frisbee (youtube.com/watch?v=3G_uCbKoG5A) hidde.blog

hidde.blog Assessing CMS accessibility wcag atAg For web content For tools that make web content

hidde.blog atAg Part A: Editing experience Part B: Output Photo left: Austin Public Library (Flickr), photo right: source of Wikipedia page for “Content Management System”

hidde.blog Your CMS is an accessibility assistant (of the useful kind)

hidde.blog Part B of ATAG “Support the production of accessible content”

tables with headers Part B of ATAG contrast-rich hero images form fields with labels hidde.blog captioned video of accessible content sensible heading structures carousels that can pause nested according to spec multilingual content with lang attributes

heros with illegible text tables with no headers nameless form field avoid of in accessible content headings for the wrong reasons non-standard nesting carousels with no pause button hidde.blog no captions on videos multilingual content without lang attributes

hidde.blog Checks in Jooa11y, for Joomla (based on Sa11y)

hidde.blog Checks in Editoria11y v2, for Drupal (Based on Sa11y)

Contrast warnings in Gutenberg, for WordPress hidde.blog

hidde.blog wysiwym What you see is what you mean

hidde.blog wysiwym Validations in JavaScript function noFakeLists(options = {}) { return function (blocks) { const regex = options.regex || /^\s*[-*+–—]/ const fakeListBlocks = (blocks || []) .filter( block => block._type === ‘block’ && block.children.some( blockPart => blockPart._type === ‘span’ && regex.test(blockPart.text) ) ) .map((block, index) => [{ _key: block._key }] || [index]) || [] return ( fakeListBlocks.length === 0 || { message: options.message || ‘This looks like a list, but it is plain text. Use the bulleted list option.’, paths: fakeListBlocks, } )

@hdv content tools The CMS as an accessibility assistant https://github.com/hidde/porta11y https://github.com/hidde/portable-text-a11y-validation

hidde.blog more validations while you create content - Do headings have hierarchy? - Are links empty? - Does link that only contains image have non-empty alternative? …

hidde.blog “Why Isn’t Accessibility easier?” a befriended web developer —

Built-in to shift left - It’s iterative - Use your design system and CMSes

@hdv thank you! n o e v i l e r a s k n i l + s e Slid h i Contact/resources talks.hiddedevries.nl @hdv@front-end.social hidde@hiddedevries.nl Typefaces Bungee by David Jonathan Ross (DJR) Rasa by Anna Giedryś, David Březina (Rosetta)

@hdv thank you! Contact/resources talks.hiddedevries.nl @hdv@front-end.social hidde@hiddedevries.nl Typefaces Bungee by David Jonathan Ross (DJR) Rasa by Anna Giedryś, David Březina (Rosetta)