Trucs et astuces pour construire une Single Page App accessible
Maël
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 !
Trucs et astuces pour construire une Single Page App accessible
By maelig
