Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div lang="fr" class="container">
  <h1>Tests d'accessibilité des descriptions d'images (mai 2020)</h1>
  <h2>Image avec description via l'attribut <code>aria-describedby</code></h2>
  <p>En théorie, il est possible de lier une description d'une image à celle-ci via l'attribut <code>aria-describedby</code> selon cette <a href="https://www.w3.org/TR/WCAG20-TECHS/ARIA15.html#ua8.14.1">technique ARIA</a>. Vérifions si cela fonctionne avec les lecteurs d'écran.</p>
  
  <p><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2e/Alopex_lagopus%2C_Asahikawa_Asahiyama_Zoological_Park.jpg/330px-Alopex_lagopus%2C_Asahikawa_Asahiyama_Zoological_Park.jpg" alt="Renard polaire" aria-describedby="desc-image" /></p>

  <p id="desc-image">Description <code>aria-describedby</code> : Un renard polaire dans la neige. Il fréquente les régions arctiques. (Source : <a href="https://fr.wikipedia.org/wiki/Renard">Wikipedia</a>)</p>
  
  <h2>Image avec description via l'attribut <code>longdesc</code></h2>
  <p><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2e/Alopex_lagopus%2C_Asahikawa_Asahiyama_Zoological_Park.jpg/330px-Alopex_lagopus%2C_Asahikawa_Asahiyama_Zoological_Park.jpg" alt="Renard polaire" longdesc="#longdesc-image" /></p>
  
  <p id="longdesc-image">Description <code>longdesc</code> : Un renard polaire dans la neige. Il fréquente les régions arctiques. (Source : <a href="https://fr.wikipedia.org/wiki/Renard">Wikipedia</a>)</p>
  
    
  <h2>Compatibilité avec les lecteurs d'écran</h2>
  
  <table>
    <caption>Compatibilité des descriptions d'image avec les lecteurs d'écran</caption>
    
    <thead>
      <tr>
        <th>-</th>
        <th id="th-aria-describedby">Image avec <code>aria-describedby</code></th>
        <th id="th-longdesc">Image avec <code>longdesc</code></th>
      </tr>
    </thead>
    
    <tbody>
      <tr>
        <th id="th-jaws-2018-ie11"><p>JAWS 2018 + IE 11</p><p>JAWS 2019 + IE 11</p><p>JAWS 2020 + IE 11</p></th>
        <td headers="th-aria-describedby th-jaws-2018-ie11" class="ko">Pas de restitution de la description</td>
        <td headers="th-longdesc th-jaws-2018-ie11" class="ok"><p><strong>Restitution :</strong> <q>Graphique Renard polaire. Appuyez sur Alt + Entrée pour la description longue</q></p>
          <p><strong>Comportement :</strong> Ouvre la description longue dans une nouvelle fenêtre (avec un bug avec l'ancre lié à CodePen qui ne supporte plus IE11)</p></td>
      </tr>
      <tr>
        <th id="th-jaws-2018-edge"><p>JAWS 2018 + Edge 42</p><p>JAWS 2019 + Edge 42</p><p>JAWS 2020 + Edge 44</p></th>
        <td headers="th-aria-describedby th-jaws-2018-edge" class="ko">Pas de restitution de la description</td>
        <td headers="th-longdesc th-jaws-2018-edge" class="ko">Pas de restitution de la description</td>
      </tr>
      <tr>
        <th id="th-jaws-2018-19-chrome83"><p>JAWS 2018 + Chrome 83</p><p>JAWS 2019 + Chrome 83</p></th>
        <td headers="th-aria-describedby th-jaws-2018-19-chrome83" class="ok"><p><strong>Restitution :</strong> <q>Graphique renard polaire. Appuyez sur JAWS + Alt + R pour lire le descriptif</q></p>
          <p><strong>Comportement :</strong> Lit bien la description après appuie sur <kbd>JAWS + Alt + R</kbd></p></td>
        <td headers="th-longdesc th-jaws-2018-19-chrome83" class="ko"><p><strong>Restitution :</strong> <q>Renard polaire graphique. Appuyez sur Alt + Entrée pour la description longue</q></p>
          <p><strong>Comportement :</strong> Si le focus est sur un lien, <kbd>Alt + Entrée</kbd> télécharge la page HTML du lien. Si le focus n'est nul part, il ne se passe rien. La description n'est pas lue.</p></td>
      </tr>
      <tr>
        <th id="th-jaws-2020-chrome83">JAWS 2020 + Chrome 83</th>
        <td headers="th-aria-describedby th-jaws-2020-chrome83" class="ko">Plus de restitution de la description… (régression)</td>
        <td headers="th-longdesc th-jaws-2020-chrome83" class="ko"><p><strong>Restitution :</strong> <q>Renard polaire graphique. Appuyez sur Alt + Entrée pour la description longue</q></p>
          <p><strong>Comportement :</strong> Si le focus est sur un lien, <kbd>Alt + Entrée</kbd> télécharge la page HTML du lien. Si le focus n'est nul part, il ne se passe rien. La description n'est pas lue.</p></td>
      </tr>
      <tr>
        <th id="th-nvda-2018-4-firefox-65"><p>NVDA 2018.4 + Firefox 65</p><p>NVDA 2020.1 + Firefox 76</p></th>
        <td headers="th-aria-describedby th-nvda-2018-4-firefox-65" class="ko">Pas de restitution de la description</td>
        <td headers="th-longdesc th-nvda-2018-4-firefox-65" class="mi-ok"><p><strong>Restitution :</strong> <q>Graphique a une description longue, Renard polaire</q> mais ne dit pas comment y accéder.</p>
          <p><strong>Comportement :</strong> <kbd>NVDA + D</kbd> ouvre la description longue dans une nouvelle fenêtre (même si c'est une ancre) et la restitue.</p></td>
      </tr>
      <tr>
        <th id="th-nvda-2018-4-chrome-71"><p>NVDA 2018.4 + Chrome 71</p><p>NVDA 2020.1 + Chrome 83</p></th>
        <td headers="th-aria-describedby th-nvda-2018-4-chrome-71" class="ko">Pas de restitution de la description</td>
        <td headers="th-longdesc th-nvda-2018-4-chrome-71" class="ko">Pas de restitution de la description</td>
      </tr>
      <tr>
        <th id="th-voiceover-safari"><p>VoiceOver + Safari, OSX 10.14</p><p>VoiceOver + Safari 13.1, macOS 10.15.4</p></th>
        <td headers="th-aria-describedby th-voiceover-safari" class="ok"><p>Description restituée</p>
          <p><strong>Comportement :</strong> Lit l'alternative puis la description (pas de raccourci clavier)</p></td>
        <td headers="th-longdesc th-voiceover-safari" class="ko">Pas de restitution de la description</td>
      </tr>
      <tr>
        <th id="th-voiceover-safari-ios"><p>VoiceOver + Safari, iOS 12.1</p><p>VoiceOver + Safari, iOS 13.5</p></th>
        <td headers="th-aria-describedby th-voiceover-safari-ios" class="ok"><p>Description restituée</p>
          <p><strong>Comportement :</strong> Lit l'alternative puis la description (pas de raccourci clavier)<br />À noter : sous iOS, VoiceOver est doté d'une fonctionnalité de reconnaissance d'image et détecte « neige et ours » sur l'image.</p></td>
        <td headers="th-longdesc th-voiceover-safari-ios" class="ko">Pas de restitution de la description</td>
      </tr>
    </tbody>
  </table>
  
  <p>À titre informatif, voilà :</p>
  <ul>
    <li><a href="https://webaim.org/techniques/alttext/longdesctestcases.htm">les tests de WebAIM en 2015 à propos de <code>longdesc</code></a> ;</li>
    <li><a href="https://www.powermapper.com/tests/screen-readers/labelling/img-aria-describedby/">les tests de PowerMapper en janvier 2020 à propos d'une image avec <code>aria-describedby</code></a>. Ce lien contient plus de détails et est donc très intéressant car il relève d'autres bugs que je n'ai pas forcément dans mon exemple.</li>
  </ul>
  <p>Merci à <a href="https://twitter.com/goetsu">@goetsu</a> et <a href="https://twitter.com/romaingervois">Romain Gervois</a> pour leur aide sur les tests avec VoiceOver</p>
  
  <h2>Conclusion</h2>
  <p>Au regard des résultats des tests de compatibilité, il peut être intéressant d'envisager d'autres solutions (cf. <a href="http://rgaa.tanaguru.com/rgaa4-criteres.html#crit-1-6">le RGAA au critère 1.6</a>) :</p>
  <ul>
    <li><q>un lien ou un bouton adjacent permettant d'accéder à la description détaillée</q></li>
    <li><q>une alternative textuelle contenant la référence à une description détaillée adjacente à l'image</q> : ici, on peut, par exemple, imaginer un petit contenu dépliant sous l'image qui permettrait d'en afficher la description détaillée et on précise dans l'alternative de l'image que cet élément existe</li>
  </ul>
</div>
              
            
!

CSS

              
                body {
  font-family: Arial, sans-serif;
  line-height: 1.4;
} 

.container {
  max-width: 1000px;
}

table {
  border-collapse: collapse;
}

th,
td {
  padding: 0.5em;
  border: 1px solid #B0B0B0;
}

q {
  font-style: italic;
}

.ok {
  background-color: #D8F2D9;
}

.ko {
  background-color: #FFE0E0;
}

.mi-ok {
  background-color: #FFE1C2;
}
              
            
!

JS

              
                
              
            
!
999px

Console