Your CMS is an accessibility assistant

@hdv@front-end.social Your CMS is an accessibility assistant Hidde de Vries, 14 February 2025, Web Camp Venlo

@hdv@front-end.social Hi, I’m Hidde occassional blogger + accessibility specialist hidde.blog

@hdv@front-end.social I ❤ accessibility

@hdv@front-end.social why accessibility? service bigger audience meet legislation build better

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

@hdv@front-end.social accessibility = to ensure people with disabilities can use our services – auditory – physical – visual – cognitive – speech

@hdv@front-end.social 15-20% of your users

@hdv@front-end.social Disability is a spectrum

Users will - zoom in - use high contrast mode - use a screenreader - avoid using a mouse - control the tech with their voice - be unable to turn their device Source: W3C/WAI, How people with disabilities use the web

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

@hdv@front-end.social “Why Isn’t Accessibility easier?” —a befriended web developer

@hdv@front-end.social ‘Built-in’ accessibility

@hdv@front-end.social 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 design systems With components, we can make accessibility reusable and repeatable Sanity UI, Material UI

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

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

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

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

@hdv@front-end.social Untruncate text Force focus indication Force colour contrast Suppress autoplay of gifs and videos https://talks.hiddedevries.nl/KKW74X/could-browsers-fix-more-accessibility-problems-automatically

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

@hdv@front-end.social // features that make a11y possible, // e.g. support for alt text <img src=”” alt=”” />

@hdv@front-end.social // features that make a11y possible, // e.g. support for captions <video> <track>…</track> </video>

@hdv@front-end.social // features that do accessibility // semantics for you, like headings <h1>Top news</h1>

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

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

@hdv@front-end.social aria-expanded state I am popover content hidde.blog/popover-accessibility

@hdv@front-end.social aria-expanded state aria-details relationship (if apt) I am popover content hidde.blog/popover-accessibility

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

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

@hdv@front-end.social Not built-in: I am popover content hidde.blog/popover-accessibility colour contrast zoom support etc etc

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

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

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

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

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

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

@hdv@front-end.social 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 Your CMS is an accessibility assistant (of the useful kind)

@hdv@front-end.social 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 @hdv@front-end.social 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 @hdv@front-end.social no captions on videos multilingual content without lang attributes

@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 • caption for a table • alt text for images in a carousel • labels for form fields

@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 • for each image field, there is an alt text field • for each video player field, 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 Cmses as accessibility assistants

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

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

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

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

@hdv@front-end.social 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 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 previews If you can customise previews, you can preview accessibility (or lack thereof)

@hdv@front-end.social Input/feedback from the TYPO3 community johan.huijkman@ictu.nl

@hdv@front-end.social accessibility at every step

@hdv@front-end.social Planning/ Strategy Interaction Design Visual Design Development Quality Assurance Launch

@hdv@front-end.social Interaction Design Development Planning/ Strategy Launch Visual Design Quality Assurance

@hdv@front-end.social Planning/ Strategy Interaction Design Visual Design Development Quality Assurance Launch

@hdv@front-end.social Planning/ Strategy Interaction Design Choose an authoring tool that supports accessibility Visual Design Development Quality Assurance Launch

@hdv@front-end.social Planning/ Strategy Interaction Design Visual Design Document all accessibility aspects of the UI Test authoring with users with disabilities Development Quality Assurance Launch

@hdv@front-end.social Planning/ Strategy Interaction Design Visual Design Development Quality Assurance Set constraints for customising colour combinations (for contrast) Provide accessible examples, like large enough touch targets Launch

@hdv@front-end.social Planning/ Strategy Interaction Design Visual Design Development Quality Assurance Pick themes with accessibility support Pick plugins with accessibility support Launch

@hdv@front-end.social Planning/ Strategy Interaction Design Visual Design Development Quality Assurance Launch Embed automated accessibility tests in the authoring process

@hdv@front-end.social Planning/ Strategy Interaction Design Visual Design Development Quality Assurance Launch

@hdv@front-end.social accessibility is easier when you do it earlier

@hdv@front-end.social conclusion

@hdv@front-end.social accessibility can be easier when we consider it in: • • • • Design systems Browsers HTML CMSes

@hdv@front-end.social Thanks! • questions: now or on hidde@hiddedevries.nl Slides + links are live on i h