a11y & JS

An Unconventional Romance

Lindsey Kopacz - (she/her)

Who am I?

Why do I care?

The great divide

JavaScript isn’t the enemy of accessibility. Instead, the lack of empathy is.

— Lindsey Kopacz 🐞 (@LittleKope) March 28, 2019

WebAIM Million

Sources: Original Report, Report Update

4 out of the 6 main categories got worse

• Low contrast text 85.3% ➡️ 86.1%
• Empty links 58.1% ➡️ 58.9%
• Missing form input labels 52.8% ➡️ 53.2%
• Empty buttons 25% ➡️ 27%

98.0% of homepages had errors in August compared to 97.8% in February

Although, there was a slight decrease of average errors per home page, from 59.7 to 59.1. 🤷🏼

But isn't this talk about JavaScript?

Yes

At the end of the day, JavaScript Frameworks render HTML.

JavaScript frameworks don't produce inaccessible HTML. Web developers produce inaccessible HTML.

How to improve accessibility?

A good start: Improve your HTML that your JavaScript renders

But

Accessible HTML isn't always enough, even if it'll get you most of the way there.

We still have to worry about

• Interactions
• Focus Management
• Using localStorage
• Progressive Enhancement
• Integration Testing for custom functionality

I learned JavaScript because of accessibility not in spite of it.

Now let's get to JavaScript

A few notes...

• JSX is a syntax extension to JavaScript that looks VERY similar to HTML. Think of it as a template.
• JSX that doesn't look like HTML is likely a component
• Components may have props which are pieces of data.
• Components might have state, which is data that can change within the component

Modals

• Properly shifting focus to the modal on open
• "Focus Trapping" - Ensuring that the focus stays in that modal unless you exit
• Upon close, focus should be moved back to where it was before it moved into the modal.
• Should close on ESC keypress

Overall Focus Management

• Making sure the focus isn't going to visually hidden elements.
• Making sure to properly navigate keyboard users where they logically should go.

Using localStorage

• The storage object can be accessed even after you've closed your browser
• Some features are preferences
• We can store those preferences in localStorage
• Examples: Reducing Motion, High Contrast Mode

Progressive Enhancement

• Adding a class that gets removed first when JavaScript loads
• Adding alternative styling if the JavaScript doesn't load
• Adding aria attributes via JavaScript, especially if it indicates interactivity