Améliorer l'accessibilité d'un site web

# Améliorer .pink[l'accessibilité] d'un site web (sans utiliser ARIA !)

</br>
.semi-bold.subtitle[.blue[Maxime Le Conte des Floris] — .yellow[@mlcdf]]
    
</br>
</br>
<div class="unicorn"></div>

---

## Sommaire

1. Accessibilité et handicap

2. Standards et référentiels

3. Bonnes pratiques : par où commencer ?

---

## Qui suis-je ?

<div style="line-height: 32px; width: 100%">
    <span class="semi-bold" style="line-height: 24px; font-size: 1.5rem">Maxime Le Conte des Floris</span>
 
  <div>Développeur web/python/devops</div>
  <div>
    Chez Conserto depuis juin 2018 (!!)
  </div>
  <br>
  <div>
    5 ans d'expériences :
  </div>

- Dev front/java pour la CAPEB
  - Dev front/java pour EDF
  - Dev front/python/devops pour La Banque Postale

</div>
</div>
---
class: center, middle
  
## Qui êtes-vous ?

---

## Accessibilité et handicap

### Définition de l'accessibilité

--
count: false
> L'accessibilité est la mise à disposition de vos sites web au plus grand nombre. 
--
count: false
On pense souvent que cela s'adresse aux personnes ayant un handicap, mais cela concerne également d'autres groupes comme ceux utilisant des appareils mobiles ou ceux qui ont des connexions internet de faible débit.
— "[Qu'est ce que l'accessibilité?](https://developer.mozilla.org/fr/docs/Apprendre/a11y/What_is_accessibility)", *Mozilla Developer Network*

--
count: false
<br>
> Everyone has abilities, and limits to those abilities. Designing for people with permanent disabilities actually results in designs that benefit people universally
— Microsoft Design

---

## Accessibilité et handicap

### Le handicap
  
<div style="display:flex; flex-direction: row; width: 100%; justify-content: center;">
    <div style="width: 100%">

<ul>
  <li>Les déficiences sont intrinsèques au corps.</li>
  <li>Les incapacités sont liées au contexte.</li>
</ul>

</div>
  
  <div style="width: 100%; display: flex; flex-direction: row; justify-content: center;">
    <img src="https://cdn.glitch.com/c965ecd4-0a68-4811-8b1e-4a51ccfb00e0%2Faa4f623b-ec68-4189-8fb9-f915d19613bc.image.png?v=1611131583466">
  </div>

</div>

---

## Standards et référentiels

- [Web Content Accessibility Guidelines (WCAG) 2.0](https://www.w3.org/TR/WCAG20/)
- [Accessible Rich Internet Applications (ARIA)](https://developer.mozilla.org/fr/docs/Accessibilit%C3%A9/ARIA)

<br>
### Opquast

- [Check-list Qualité Web d'Opquast](https://checklists.opquast.com/fr/assurance-qualite-web/detail/)
- Sur 240 recommandations, plus de 70 sont en liens avec l'accessibilité
- Qualité web va de pair avec accessibilité

---