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
Tips & tricks for building accessible web applications
By maelig
