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

@hdv “Why Isn’t Accessibility easier?” —a befriended web developer

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

🤔 “Hard to know when it is accessible” “Find time to refactor a er audit results come in” ft “Which docs / components can I trust?” @hdv

👈Shifting left or: making accessibility easier by doing it earlier Hidde de Vries, a11y Talks, online, 12 April 2022 @hdv

@hdv@front-end.social Hi, I’m Hidde accessibility specialist / developer Formerly at W3C/WAI, Mozilla, Sanity, Dutch government. hidde.blog hiddedevries.nl

@hdv@front-end.social Web accessibility to ensure people with disabilities can use our site/app

@hdv@front-end.social Web accessibility to ensure people with disabilities can use our service

@hdv Web accessibility to ensure people with disabilities can buy our product

@hdv 1-2% 4% blind/visually impaired colour blind ` OOGVERENIGING (1 IN 12 MEN, 1 IN 250 WOMEN) neurological conditions This concerns a lot of people 9% motor impairments 15% deaf/heard of hearing low numerate / low literate HOORWIJZER ALGEMENE REKENKAMER

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

@hdv “Assume less”

@hdv

@hdv “We’re 100% accessible” — some products

@hdv “that’s inaccessible!” — an accessibility specialist

@hdv people use the web in many ways

@hdv people use the web in many ways timing matters as websites change Somewhat subjective interpretation of Success Criteria

Accessibility doesn’t have to be perfect, it just has to be a little bit better than yesterday. Léonie Watson, accessibility expert / Director @ Tetralogical @hdv

@hdv it can make sense to pretend we’re sure

@hdv dashboard.digitoegankelijk.nl

@hdv@front-end.social / @hdv Built-in accessibility

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

@hdv@front-end.social / @hdv design systems With components, we can make accessibility reusable and repeatable Sanity UI, Material UI

@hdv@front-end.social / @hdv design systems With components, we can make accessibility reusable and repeatable Document Do’s, don’ts, gotchas

@hdv@front-end.social / @hdv design systems With components, we can make accessibility reusable and repeatable complex components For reuse in across front-end

@hdv@front-end.social / @hdv design systems With components, we can make accessibility reusable and repeatable tests per component With tools like Storyblok

@hdv@front-end.social / @hdv 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

@hdv@front-end.social / @hdv 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

@hdv@front-end.social / @hdv html f Could o fer more accessibility-by-default components

@hdv@front-end.social / @hdv cms Could help with accessibility in the authoring process

@hdv@front-end.social / @hdv Cmses and their accessibility

@hdv@front-end.social / @hdv Assessing CMS accessibility wcag atAg For web content For tools that make web content

@hdv@front-end.social / @hdv atag report tool f O fered by W3C to help create ATAG audit reports

@hdv@front-end.social / @hdv list of tools Soon open for submissions

@hdv@front-end.social / @hdv challenges - Accounting for - customisability Scope / target Usability beyond WCAG, like real time collaboration

@hdv@front-end.social / @hdv Assessing CMS accessibility wcag atAg For web content For tools that make web content

@hdv@front-end.social / @hdv atAg Part A: Editing experience Part B: Output Photo left: Austin Public Library (Flickr), photo right: source of Wikipedia page for “Content Management System”

@hdv@front-end.social / @hdv Part B of ATAG “Support the production of accessible content”

@hdv@front-end.social / @hdv tables with headers Part B of ATAG contrast-rich hero images form fields with labels Support the production of accessible content sensible heading structures carousels that can pause nested according to spec captioned video multilingual content with lang attributes

@hdv@front-end.social / @hdv tables with no headers Part B of ATAG heros with illegible text nameless form field Support the production avoid inof accessible content headings for the wrong reasons non-standard nesting carousels with no pause button no captions on videos multilingual content without lang attributes

@hdv@front-end.social / @hdv Few CMSes have these features, so let’s ask does it have the feature, or is it trivial to add?

@hdv@front-end.social / @hdv B.1.1.2 When content is generated, it is accessible • nested according to HTML spec • no empty links

@hdv@front-end.social / @hdv B.1.1.2 When content is generated, there is a prompt for required information fi • caption for a table • alt text for images in a carousel • labels for form elds

@hdv@front-end.social / @hdv B.1.1.2 When content is generated, there are automated accessibility checks

@hdv@front-end.social / @hdv B.1.1.2 When content is generated, manual checks are suggested • check if heading structure makes sense • verify if centrally managed image alternatives apply in this use case

@hdv@front-end.social / @hdv

<ul><li>List item</li></ul> B.2.1.1 Allows for creating accessible content fi fi fi • for each image eld, there is an alt text eld • for each video player eld, there is a captions upload button

@hdv@front-end.social / @hdv B.2.4.1 Have accessible templates for common use cases

@hdv@front-end.social / @hdv B.2.5.1 Provide accessible UI components “pre-authored content”

lorem ipsum dolor sit B.3.1.1 Warn about colour contrast issues @hdv@front-end.social / @hdv

lorem ipsum dolor sit B.3.1.1 Warn about colour contrast issues ! @hdv@front-end.social / @hdv Not enough contrast Use a background color, larger text or a bolder font.

@hdv@front-end.social / @hdv <button type=”button”>Swbmit</button> B.3.1.1 Add a spellchecker to content fields Swbmit

@hdv@front-end.social / @hdv <button type=”button”>Submit</button> B.3.1.1 Add a spellchecker to content fields Submit

@hdv@front-end.social / @hdv B.3.1.1 Report readability levels

@hdv@front-end.social / @hdv B.4.2.1 Provide accessible examples

@hdv@front-end.social / @hdv Cmses as accessibility assistants

@hdv@front-end.social / @hdv Checks in Jooa11y, for Joomla (based on Sa11y)

@hdv@front-end.social / @hdv Checks in Editoria11y v2, for Drupal (Based on Sa11y)

Contrast warnings in Gutenberg, for WordPress @hdv@front-end.social / @hdv

@hdv@front-end.social / @hdv structured content A.k.a. no HTML in the database

@hdv@front-end.social / @hdv structured content A.k.a. no HTML in the databas

@hdv@front-end.social / @hdv wysiwym What you see is what you mean

@hdv@front-end.social / @hdv { wysiwym Content as data “_createdAt”: “2022-06-15T08:56:43Z”, “_id”: “drafts.d228e6f4-8bac-4308-8594-017644b947ba”, “_rev”: “j9sf54-qce-ggx-p2r-9215tp845”, “_type”: “book”, “_updatedAt”: “2022-11-08T10:47:51.706Z”, “content”: [ { “_key”: “e262fe1222ce”, “_type”: “block”, “children”: [ { “_key”: “cefad41247d1”, “_type”: “span”, “marks”: [], “text”: “It was a fantastic book!” } ], “markDefs”: [], “style”: “normal” }, { “_key”: “3ff4ffd7ea38”, “_type”: “block”, “markDefs”: [], “style”: “normal”,

@hdv@front-end.social / @hdv 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

@hdv@front-end.social / @hdv more validations while you create content - Do headings have hierarchy? - Are links empty? - Does link that only contains image have non-empty alternative? …

@hdv@front-end.social / @hdv previews If you can customise previews, you can preview accessibility (or lack thereof)

@hdv “Why Isn’t Accessibility easier?” a befriended web developer —

More built-in - We’re never done - CMSes that can warn early and preview for review

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