Trucs et astuces pour construire une Single Page App accessible

Maël

@maelb

Développeur front-end

Examples en React, mais applicables partout

Projets React + design system chez Keytrade Bank

Conseils techniques, pratiques et/ou organisationnels

Single Page App & frameworks JavaScript

Frameworks JS et accessibilité

Un projet typique

Framework JS avec des ✨composants✨

Plusieurs développeurs avec des degrés variables de maitrise et sensibilité aux problématiques liées à l'a11y

L'a11y n'est pas perçue comme une priorité business

1. Faciliter la réutilisation des composants accessibles

2. Abstraire l'a11y

3. Forcer la prise de décision

4. Gérer le focus

5. Profiter de l'outillage

Caractéristiques d'un bon composant UI :

Responsabilité unique

Composable

API claire et cohérente

Documenté

1. Faciliter la réutilisation des composants accessibles

2. Abstraire l'a11y

3. Forcer la prise de décision

4. Gérer le focus

5. Profiter de l'outillage

<Label for='name'>Nom</Label>
<Input id='name' />

// Input.jsx
return (
 <input id={props.id} />
)

// Label.jsx
return (
 <label htmlFor={props.for}>
)

<Input />

<div>Nom</div>
<Input/>

<Label>Nom</Label>
<Input/>

😥

//Input.jsx
Input.propTypes = {
 label: PropTypes.string.isRequired,
 hideLabel: PropTypes.bool
}

props.hideLabel
 ? <VisuallyHidden>
    <label htmlFor={props.id || props.label}>{props.label}</label>
   </VisuallyHidden>
 : <label htmlFor={props.id || props.label}>{props.label}</label>

<Input label='search for an account' hideLabel />

Faire en sorte que le bon choix soit le choix facile

1. Faciliter la réutilisation des composants accessibles

2. Abstraire l'a11y

3. Forcer la prise de décision

4. Gérer le focus

5. Profiter de l'outillage

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

<Title size="lg" level="h1">Un titre de page</Title>

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

Forcer la prise de décision

1. Faciliter la réutilisation des composants accessibles

2. Abstraire l'a11y

3. Forcer la prise de décision

4. Gérer le focus

5. Profiter de l'outillage

Page web "classique"

Page web "SPA"

tabindex + set focus

// Modal.jsx
useEffect(() => {
 modalRef.focus();
});

return (
 <div tabindex='-1' ref={modalRef}>
  ...
 </div>
)

1. Faciliter la réutilisation des composants accessibles

2. Abstraire l'a11y

3. Forcer la prise de décision

4. Gérer le focus

5. Profiter de l'outillage

Pipeline CI/CD

tests d'a11y 😀

Test unitaires

const comp = mount(<Input label='example label' hideLabel />);

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

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

Linting

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

<div onClick={} />

Inclus dans Create React App !

1. Faciliter la réutilisation des composants accessibles

2. Abstraire l'a11y

3. Forcer la prise de décision

4. Gérer le focus

5. Profiter de l'outillage

Aucun outil ne peut faire en sorte que les gens se préoccupent de l'a11y

Merci !

@maelb