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

A presentation at Accessible Banking Live Event in March 2025 in Amsterdam, Netherlands by Hidde de Vries

Slide 1

Slide 1

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

Slide 2

Slide 2

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

Slide 3

Slide 3

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

Slide 4

Slide 4

🤔 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?”

Slide 5

Slide 5

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

Slide 6

Slide 6

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

Slide 7

Slide 7

hidde.blog hidde.blog/slides

Slide 8

Slide 8

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

Slide 9

Slide 9

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

Slide 10

Slide 10

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

Slide 11

Slide 11

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

Slide 12

Slide 12

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

Slide 13

Slide 13

hidde.blog Disability is a spectrum

Slide 14

Slide 14

hidde.blog so is access

Slide 15

Slide 15

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

Slide 16

Slide 16

hidde.blog “Assume less”

Slide 17

Slide 17

hidde.blog

Slide 18

Slide 18

hidde.blog

Slide 19

Slide 19

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

Slide 20

Slide 20

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

Slide 21

Slide 21

hidde.blog people use the web in many ways

Slide 22

Slide 22

@hdv people use the web in many ways

Slide 23

Slide 23

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

Slide 24

Slide 24

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

Slide 25

Slide 25

hidde.blog Built-in accessibility

Slide 26

Slide 26

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

Slide 27

Slide 27

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

Slide 28

Slide 28

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

Slide 29

Slide 29

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

Slide 30

Slide 30

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

Slide 31

Slide 31

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

Slide 32

Slide 32

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

Slide 33

Slide 33

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

Slide 34

Slide 34

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

Slide 35

Slide 35

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

Slide 36

Slide 36

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

Slide 37

Slide 37

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

Slide 38

Slide 38

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>

Slide 39

Slide 39

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

Slide 40

Slide 40

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

Slide 41

Slide 41

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

Slide 42

Slide 42

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

Slide 43

Slide 43

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

Slide 44

Slide 44

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

Slide 45

Slide 45

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

Slide 46

Slide 46

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

Slide 47

Slide 47

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

Slide 48

Slide 48

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

Slide 49

Slide 49

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

Slide 50

Slide 50

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”

Slide 51

Slide 51

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”

Slide 52

Slide 52

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

Slide 53

Slide 53

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

Slide 54

Slide 54

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

Slide 55

Slide 55

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

Slide 56

Slide 56

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

Slide 57

Slide 57

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

Slide 58

Slide 58

Contrast warnings in Gutenberg, for WordPress hidde.blog

Slide 59

Slide 59

hidde.blog wysiwym What you see is what you mean

Slide 60

Slide 60

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, } )

Slide 61

Slide 61

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

Slide 62

Slide 62

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? …

Slide 63

Slide 63

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

Slide 64

Slide 64

@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)

Slide 65

Slide 65

@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)

Slide 66

Slide 66

@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)