Tips & tricks for building accessible web applications

Maël

@maelb

Front-end dev working on a design system in React

Not an a11y expert !

I'll do my best not be too jargony

A few assumptions

(Front-end) web developer

JS framework with ✨components✨

Many developers with varying degrees of a11y expertise

a11y not a business priority

0. Write semantic markup

1. Abstract away a11y

2. Force decision-making

3. Leverage tooling

<div onClick={} />

0. Write semantic markup

1. Abstract away a11y

2. Force decision-making

3. Leverage tooling

<Label htmlFor="name">Name</Label>
<InputText id="name" />

<Label>Name</Label>
<InputText />

<div>Name</div>
<InputText />

<VisuallyHidden>
  <Label htmlFor="search">Search</Label>
</VisuallyHidden>
<InputText id="search" icon="icn_search" />

<InputText id="search" icon="icn_search" />

😥

Make the right thing the easy thing

InputText.propTypes = {
  label: PropTypes.string.isRequired,
  hideLabel: PropTypes.bool
};

<InputText label="search" hideLabel icon="icn_search" />

0. Write semantic markup

1. Abstract away a11y

2. Force decision-making

3. Leverage tooling

Title.defaultProps = {
  size: 'md',
  level: ?
};

<Title size="lg" level="h1">Page title</Title>

Title.propTypes = {
  level: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']).isRequired
};

0. Write semantic markup

1. Abstract away a11y

2. Force decision-making

3. Leverage tooling

CI pipeline

a11y testing 😀

Unit tests

const comp = shallow(<InputText label='example label' hideLabel />);

it('should render a label element', () => {
  expect(comp.find('label')).to.have.lengthOf(1);
});

it('should render the label text', () => {
  expect(comp.contains('example label')).toBe(true);
});

Linting

react-axe, eslint-plugin-jsx-a11y, ...

<div onClick={} />

Included out of the box in Create React App !

0. Write semantic markup

1. Abstract away a11y

2. Force decision-making

3. Leverage tooling

No amount of tooling will make people care for a11y

Thanks !

@maelb