Skip to content

Commit

Permalink
Merge pull request #1 from octo-technology/wip-session-20230728
Browse files Browse the repository at this point in the history 
Ajout des pages "Travail d'équipe" et "Stack Technique"
  • Loading branch information
@elba-octo
elba-octo committed Oct 6, 2023
2 parents 9c016d5 + 8c598f6 commit 235bab9
Showing 1 changed file with 93 additions and 3 deletions.
96 changes: 93 additions & 3 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
</head>
<body>
<header>
<img src="./octo-logo.png" alt=""/>
<img src="./octo-logo.webp" alt=""/>
<p lang="en">Quick reference card</p>
<ul>
<li>
Expand All @@ -24,7 +24,7 @@ <h1>Web <span lang="en"><abbr title="accessibility">a11y</abbr></span> pour tout


<h2>Vos utilisateurs</h2>
<p>Savez-vous <strong>vraiment</strong> comment vos utilisateurs·rices visitent votre interface ?</p>
<p>Savez-vous <strong>vraiment</strong> comment vos utilisateurs&middot;rices visitent votre interface ?</p>

<!-- <h4>Croyance</h4>-->
<!-- &lt;!&ndash; figcaption? pour faire le lien entre schema utilisateur-interface et diversité associé &ndash;&gt;-->
Expand Down Expand Up @@ -86,10 +86,100 @@ <h3>Ce que dit la loi</h3>

<h2>Travail d'équipe</h2>

<h3>La <span lang="en">dream team <abbr>a11y</abbr></span></h3>
<figure>
<figcaption>Répartition des critères d'accessibilité <abbr title="Référentiel Général d'Amélioration de l'Accessibilité">RGAA</abbr> sur chaque profil</figcaption>
<ul>
<li>
61% Développement front
<a href="#define-html"><abbr lang="en" title="HyperText Markup Language">HTML</abbr></a> /
<a href="#define-js"><abbr lang="en" title="JavaScript">JS</abbr></a> /
<a href="#define-aria"><abbr lang="en" title="Accessible Rich Internet Application">ARIA</abbr></a>
</li>
<li>
26% Production de contenus (textes, images, graphiques, PDF, vidéos, transcripts, &hellip;)
</li>
<li>
13% Design
(<abbr lang="en" title="User Experience">UX</abbr> +
<abbr lang="en" title="User Interface">UI</abbr>)
inclusif et accessible
</li>
</ul>
<img src="/donut.webp" alt=""/>
</figure>
<p>Tous les profils sont concernés. C'est un travail d'équipe sous la houlette des <abbr lang="en" title="Product Owners">PO</abbr></p>

<h3>
La <span lang="en">dream team <abbr>a11y</abbr></span>
<small id="competences-clef-a11y-web">Les compétences clef pour l'accessibilité web</small>
</h3>
<ul aria-describedby="competences-clef-a11y-web">
<li>
<strong>Designer</strong> formé au design accessible
</li>
<li>
<strong>Dev <span lang="en">Front</span></strong> maîtrisant
<a href="#define-html"><abbr lang="en" title="HyperText Markup Language">HTML</abbr></a> /
<a href="#define-js"><abbr lang="en" title="JavaScript">JS</abbr></a> /
<a href="#define-aria"><abbr lang="en" title="Accessible Rich Internet Application">ARIA</abbr></a>
</li>
<li>
<strong><abbr lang="en" title="Co-Product Owner">CoPO</abbr></strong>
sachant prioriser et recetter l'accessibilité
</li>
<li>
<strong>Référent accessibilité</strong>
pilote l'application de la politique d'accessibilité
</li>
<li>
<strong>Rédacteurs</strong>
formés à la production accessible de contenus
</li>
<li>
<strong>Expert <abbr title="Référentiel Général d'Amélioration de l'Accessibilité">RGAA</abbr></strong>
(si nécessaire) pour vérifier la conformité
</li>
</ul>

<h2><span lang="en">Stack</span> Technique</h2>

<p>
Le <dfn id="define-html"><abbr lang="en" title="HyperText Markup Language">HTML</abbr></dfn> structure et porte l'information d'une page web. Il est nativement accessible à condition d'utiliser les
balises en respectant leurs valeurs sémantiques. Exemple : <code>&lt;div&gt;</code> et <code>&lt;span&gt;</code> n'ont pas de valeur sémantique,
elles servent à mettre en forme et grouper des éléments.
</p>
<p>
Chaque composant <abbr lang="en" title="HyperText Markup Language">HTML</abbr> apporte par défaut des comportements facilitant l'interaction avec l'application.
Sans coût supplémentaire, il devient alors plus facile et moins frustrant de naviguer sur l'application.
</p>
<p>
Exemple : Utiliser une balise <code>&lt;a&gt;</code> pour un lien permet à l'utilisateur&middot;rice de savoir si iel l'a déjà visité.
</p>
<p>
<strong>Le <dfn id="define-css"><abbr lang="en" title="Cascading Style Sheet">CSS</abbr></dfn> permet de mettre en forme l'information déjà présente sur la page via le <abbr lang="en" title="HyperText Markup Language">HTML</abbr></strong>.
Si une information est portée seulement par le <abbr lang="en" title="Cascading Style Sheet">CSS</abbr>, on risque de ne pas la rendre accessible à tous
les utilisateur&middot;ices.
</p>
<p>
Le <dfn id="define-js">JavaScript</dfn> régit les interactions complexes (cartes interactives, notifications&hellip;).
Dans la plupart des cas, il ne sera pas nécessaire.
Il permet de coder des composants au-delà de ce qui est proposé par le <abbr lang="en" title="HyperText Markup Language">HTML</abbr>.
</p>
<p>
<dfn id="define-aria" lang="en"><abbr>ARIA</abbr> (Accessible Rich Internet Applications)</dfn> ; un ensemble d'attributs pour enrichir le <abbr lang="en" title="HyperText Markup Language">HTML</abbr> pour :
</p>
<ul>
<li>expliciter les liens entre éléments de la page, par exemple : lier une image à sa description</li>
<li>expliciter l'état d'un élément, par exemple : un onglet actif.</li>
</ul>
<p>
<strong>Il permet de donner plus d'informations aux technologies d'assistance (lecteur d'écran&hellip;).</strong>
À utiliser avec parcimonie : <strong>pas d'attribut <abbr lang="en" title="Accessible Rich Internet Application">ARIA</abbr> vaut mieux qu'un attribut <abbr lang="en" title="Accessible Rich Internet Application">ARIA</abbr> mal renseigné.</strong>
</p>

<img src="pyramid-tech.webp"
alt="L'accessibilité se repose avant tout sur le HTML, puis le CSS, le Javascript et enfin ARIA">

<h2>Comment vérifier ?</h2>

<footer>
Expand Down

0 comments on commit 235bab9

Please sign in to comment.