# data[].attributes.title
Shifting left, or: making accessibility easier by doing it earlier

# data[].attributes.blurb.html
Web accessibility is easier to achieve and maintain with the right tools. Some are useful to help you make the right choices, others can find certain problems automatically, often even before your product or page ships. In this talk, Hidde will tell us all about the tools to use to improve web accessibility.

# data[].attributes.slidedeck.data[].slides[].desc.html
👈Shifting left or: making accessibility easier by doing it earlier Hidde de Vries, Accessible Banking, Amsterdam, 27 March 2025 hidde.blog

# data[].attributes.slidedeck.data[].slides[].desc.html
hidde.blog “Why Isn’t Accessibility easier?” —a befriended web developer

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
🤔 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?”

# data[].attributes.slidedeck.data[].slides[].desc.html
👈Shifting left or: making accessibility easier by doing it earlier Hidde de Vries, Accessible Banking, Amsterdam, 27 March 2025 hidde.blog

# data[].attributes.slidedeck.data[].slides[].desc.html
hidde.blog Hi, I’m Hidde accessibility / front-end / standards WCAG / ARIA / EN 301 549 hidde.blog

# data[].attributes.slidedeck.data[].slides[].desc.html
hidde.blog hidde.blog/slides

# data[].attributes.slidedeck.data[].slides[].desc.html
hidde.blog Web accessibility to ensure people with disabilities can use our site/app

# data[].attributes.slidedeck.data[].slides[].desc.html
hidde.blog Web accessibility to ensure people with disabilities can use our service

# data[].attributes.slidedeck.data[].slides[].desc.html
hidde.blog Web accessibility to ensure people with disabilities can buy our product

# data[].attributes.slidedeck.data[].slides[].desc.html
hidde.blog Web accessibility to ensure people with disabilities can buy our product – auditory – physical – visual – cognitive – speech

# data[].attributes.slidedeck.data[].slides[].desc.html
hidde.blog 15-20% of your (potential) users

# data[].attributes.slidedeck.data[].slides[].desc.html
hidde.blog Disability is a spectrum

# data[].attributes.slidedeck.data[].slides[].desc.html
hidde.blog so is access

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
hidde.blog “Assume less”

# data[].attributes.slidedeck.data[].slides[].desc.html
hidde.blog

# data[].attributes.slidedeck.data[].slides[].desc.html
hidde.blog

# data[].attributes.slidedeck.data[].slides[].desc.html
hidde.blog “We’re 100% accessible” — some products

# data[].attributes.slidedeck.data[].slides[].desc.html
hidde.blog “that’s inaccessible!” — an accessibility specialist

# data[].attributes.slidedeck.data[].slides[].desc.html
hidde.blog people use the web in many ways

# data[].attributes.slidedeck.data[].slides[].desc.html
@hdv people use the web in many ways

# data[].attributes.slidedeck.data[].slides[].desc.html
hidde.blog people use the web in many ways timing matters as websites change Somewhat subjective interpretation of Success Criteria

# data[].attributes.slidedeck.data[].slides[].desc.html
hidde.blog accessibility is iterative (the work is never done)

# data[].attributes.slidedeck.data[].slides[].desc.html
hidde.blog Built-in accessibility

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
hidde.blog design systems With components, we can make accessibility reusable and repeatable Sanity UI, Material UI

# data[].attributes.slidedeck.data[].slides[].desc.html
hidde.blog design systems With components, we can make accessibility reusable and repeatable Document Do’s, don’ts, gotchas

# data[].attributes.slidedeck.data[].slides[].desc.html
hidde.blog design systems With components, we can make accessibility reusable and repeatable complex components For reuse in across front-end

# data[].attributes.slidedeck.data[].slides[].desc.html
hidde.blog design systems With components, we can make accessibility reusable and repeatable tests per component With tools like Storybook

# data[].attributes.slidedeck.data[].slides[].desc.html
hidde.blog accessibility is iterative (the work is never done)

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
hidde.blog html f Could o fer more accessibility-by-default components

# data[].attributes.slidedeck.data[].slides[].desc.html
hidde.blog // features that make a11y possible, // e.g. support for alt text <img src=”” alt=”” />

# data[].attributes.slidedeck.data[].slides[].desc.html
hidde.blog // features that make a11y possible, // e.g. support for captions <video> <track>…</track> </video>

# data[].attributes.slidedeck.data[].slides[].desc.html
hidde.blog // features that do accessibility // semantics for you, like headings <h1>Top news</h1>

# data[].attributes.slidedeck.data[].slides[].desc.html
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>

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
hidde.blog aria-expanded state I am popover content hidde.blog/popover-accessibility

# data[].attributes.slidedeck.data[].slides[].desc.html
hidde.blog aria-expanded state aria-details relationship (if apt) I am popover content hidde.blog/popover-accessibility

# data[].attributes.slidedeck.data[].slides[].desc.html
hidde.blog aria-expanded state aria-details relationship (if apt) I am popover content hidde.blog/popover-accessibility group fallback role (if apt)

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
hidde.blog Not built-in: I am popover content hidde.blog/popover-accessibility colour contrast zoom support etc etc

# data[].attributes.slidedeck.data[].slides[].desc.html
hidde.blog cms Could help with accessibility in the authoring process

# data[].attributes.slidedeck.data[].slides[].desc.html
Video: Tyler Frisbee (youtube.com/watch?v=3G_uCbKoG5A) hidde.blog

# data[].attributes.slidedeck.data[].slides[].desc.html
hidde.blog Assessing CMS accessibility wcag atAg For web content For tools that make web content

# data[].attributes.slidedeck.data[].slides[].desc.html
hidde.blog Assessing CMS accessibility wcag atAg For web content For tools that make web content

# data[].attributes.slidedeck.data[].slides[].desc.html
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”

# data[].attributes.slidedeck.data[].slides[].desc.html
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”

# data[].attributes.slidedeck.data[].slides[].desc.html
hidde.blog Your CMS is an accessibility assistant (of the useful kind)

# data[].attributes.slidedeck.data[].slides[].desc.html
hidde.blog Part B of ATAG “Support the production of accessible content”

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
hidde.blog Checks in Jooa11y, for Joomla (based on Sa11y)

# data[].attributes.slidedeck.data[].slides[].desc.html
hidde.blog Checks in Editoria11y v2, for Drupal (Based on Sa11y)

# data[].attributes.slidedeck.data[].slides[].desc.html
Contrast warnings in Gutenberg, for WordPress hidde.blog

# data[].attributes.slidedeck.data[].slides[].desc.html
hidde.blog wysiwym What you see is what you mean

# data[].attributes.slidedeck.data[].slides[].desc.html
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, } )

# data[].attributes.slidedeck.data[].slides[].desc.html
@hdv content tools The CMS as an accessibility assistant https://github.com/hidde/porta11y https://github.com/hidde/portable-text-a11y-validation

# data[].attributes.slidedeck.data[].slides[].desc.html
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? …

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
@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)

# data[].attributes.slidedeck.data[].slides[].desc.html
@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)

# data[].attributes.slidedeck.data[].slides[].desc.html
@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)

# data[].attributes.resources.data[].title
How people with disabilities use the web - tools and techniqeus

# data[].attributes.resources.data[].title
Involving users in web projects for better accessibility - W3C WAI

# data[].attributes.resources.data[].title
The Podcast Transcript Experimentation - Darice de Cuba

# data[].attributes.resources.data[].title
Could browsers fix more accessibility automatically?