Built-in accessibility: blessing or curse?

Slide 1

Hidde de Vries, International Government Design community call “Built-in” accessibility: blessing or curse?

Slide 2

25 years ago…

Slide 3

Slide 4

Websites with sticky elements that cover everything when zoomed aren’t accessible codepen.io/hidde/pen/PovjPYV

Slide 5

Websites with FAQs that aren’t reachable by just a keyboard aren’t accessible codepen.io/hidde/pen/ExzXVmb

Slide 6

Websites with important election results in an image with no alternatives aren’t accessible codepen.io/hidde/pen/ExzXVmb

Slide 7

We need better websites…

Slide 8

(lack of) Accessibility is a website problem, not a user problem

Slide 9

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 10

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 •

Slide 11

We need to look for opportunities to build accessibility into systems

Slide 12

Like CMSes… Can they be accessibility assistants?

Slide 13

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

Slide 14

Like user agents…

Slide 15

Like user agents… Force colour contrast Force focus indication

Slide 16

Like design systems… —nl-button-border-color: #2446AE —nl-button-color: #2446AE Save —nl-button-background-color: #ffffff

Slide 17

—nl-button-border-color: #2446AE —nl-button-color: #2446AE Save —nl-button-background-color: #ffffff

Slide 18

—nl-button-border-color: #2446AE —nl-button-color: #cccccc Save —nl-button-background-color: #ffffff

Slide 19

—nl-button-border-color: #2446AE —nl-button-color: #cccccc Save 🚨 —nl-button-background-color: #ffffff

Slide 20

“Built-in” accessibility It’s not trivial, not a oneoff, not a quick “fix”. It can be done. It’s worthwhile.

Slide 21

Thanks! linkedin.com/in/hiddedevries front-end.social/@hdv bsky.app/profile/hidde.blog