Built-in accessibility: blessing or curse?
A presentation at Design in Government Community, International call #36 • accessibility and inclusion by Hidde de Vries
Hidde de Vries, International Government Design community call “Built-in” accessibility: blessing or curse?
25 years ago…
Websites with sticky elements that cover everything when zoomed aren’t accessible codepen.io/hidde/pen/PovjPYV
Websites with FAQs that aren’t reachable by just a keyboard aren’t accessible codepen.io/hidde/pen/ExzXVmb
Websites with important election results in an image with no alternatives aren’t accessible codepen.io/hidde/pen/ExzXVmb
We need better websites…
(lack of) Accessibility is a website problem, not a user problem
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
In defense of websites… Hard to ind good code examples • Conformance vs guidance • AT/browser support vs actual usability • WCAG often can’t tell you what to do (for reasons, but still) f •
We need to look for opportunities to build accessibility into systems
Like CMSes… Can they be accessibility assistants?
// features that do some accessibility // semantics for you, like popover <button popovertarget=”p”> Toggle popover </button> <div popover id=”p”> … </div> See: On popover accessibility: what the browser does and doesn’t do https://hidde.blog/popover-accessibility/ Like web platform features…
Like user agents…
Like user agents… Force colour contrast Force focus indication
Like design systems… —nl-button-border-color: #2446AE —nl-button-color: #2446AE Save —nl-button-background-color: #ffffff
—nl-button-border-color: #2446AE —nl-button-color: #2446AE Save —nl-button-background-color: #ffffff
—nl-button-border-color: #2446AE —nl-button-color: #cccccc Save —nl-button-background-color: #ffffff
—nl-button-border-color: #2446AE —nl-button-color: #cccccc Save 🚨 —nl-button-background-color: #ffffff
“Built-in” accessibility It’s not trivial, not a oneoff, not a quick “fix”. It can be done. It’s worthwhile.
Thanks! linkedin.com/in/hiddedevries front-end.social/@hdv bsky.app/profile/hidde.blog
