Building Accessible Components

A presentation at A11y Camp 2018 in in Melbourne VIC, Australia by Julie Grundy

Building Accessible Components, Julie Grundy

Building Accessible Components, Julie Grundy

The Accessibility Stack

The Accessibility Stack

An Accessible Process

An Accessible Process

Step 1

Step 1

Original form

Original form

Original form after submitting

Original form after submitting

Original form with error

Original form with error

Add a datepicker button

Add a datepicker button

Datepicker navigation in HTML

Datepicker navigation in HTML

Datepicker navigation continued

Datepicker navigation continued

Add a table for the dates

Add a table for the dates

Add a table for the dates, continued

Add a table for the dates, continued

Avoid click handlers on table cells

Avoid click handlers on table cells

Avoid click handlers on table cells, continued

Avoid click handlers on table cells, continued

Avoid click handlers, continued

Avoid click handlers, continued

Input elements support all click types

Input elements support all click types

Form with radio buttons

Form with radio buttons

Form with checkboxes

Form with checkboxes

Form with buttons

Form with buttons

Step 2

Step 2

Hide until JavaScript is available

Hide until JavaScript is available

HTML with a class of hidden on the button

HTML with a class of hidden on the button

Javascript to show the toggle button

Javascript to show the toggle button

Form with visible button because Javascript is available

Form with visible button because Javascript is available

Make the toggle control the datepicker

Make the toggle control the datepicker

Javascript for the toggle action

Javascript for the toggle action

Form with datepicker open in a modal

Form with datepicker open in a modal

Add Escape key listener to close the modal

Add Escape key listener to close the modal

Replace the HTML table with Javascript table

Replace the HTML table with Javascript table

Add functions for navigation controls

Add functions for navigation controls

Javascript for navigation controls

Javascript for navigation controls

Disable any out-of-scope dates

Disable any out-of-scope dates

Form with working navigation

Form with working navigation

Create date selection function

Create date selection function

Video

Video

Step 3

Step 3

Datepicker with improved styles

Datepicker with improved styles

Close button

Close button

Previous and Next buttons

Previous and Next buttons

Selected date

Selected date

Focused or hovered date

Focused or hovered date

Datepicker zoomed in

Datepicker zoomed in

Text resized

Text resized

Datepicker in high contrast mode

Datepicker in high contrast mode

Step 4

Step 4

Replace 'selected' class with ARIA

Replace 'selected' class with ARIA

Replace 'selected' class, continued

Replace 'selected' class, continued

ARIA live for month notification

ARIA live for month notification

ARIA live, continued

ARIA live, continued

Is it a cycle instead of a process?

Is it a cycle instead of a process?

My final process

My final process

Progressive Enhancement

Progressive Enhancement

Resources

Resources

We often leave accessibility until the last minute, or until a customer complains about our product. But refactoring isn’t the ideal way to make products anyone can use, and Stack Overflow doesn’t have all the information you’ll need.

Integrating accessibility into your day-to-day work will save you time and energy, and creates a more user-friendly product. Julie will show you the 4-step process she uses to build an accessible interactive feature from scratch, using device-independent progressive enhancement.

This talk includes a demonstration date-picker component with HTML, CSS, JavaScript and extra goodies like ARIA.

Video

Resources

The following resources were mentioned during the presentation or are useful additional information.

  • Notes and links

    Links to the resources I used to build my demo, the code on GitHub, and the original Powerpoint slides which may be more accessible than the PDF.

Buzz and feedback

Here’s what was said about this presentation on Twitter.