Gestion des notes de bas de page avec l’attribut aria-describedby. Voir également notre page de tests pour l’attribut aria-describedby.

Implémentation proposée avec aria-describedby

Pour une bonne tarte à la rhubarbe, prévoir une abaisse de pâte brisée [1], environ 1 kg de rhubarbe épluchée, 100 g de sucre, 3 œufs, 25 cl de crème fraîche liquide et de la cannelle [2].

Notes

  • [1] Pour la pâte brisée, mélanger 110 g de beurre froid coupé en morceau à 330 g de farine. Incorporer ensuite 110 g d’eau froide.

  • [2] à votre convenance.

<p>Pour une bonne tarte à la rhubarbe, prévoir une abaisse de pâte brisée [<a href="#nb1" id="nh1" aria-describedby="nb1">1</a>], environ 1 kg de rhubarbe épluchée, 100 g de sucre, 3 œufs, 25 cl de crème fraîche liquide et de la cannelle [<a href="#nb2" id="nh2" aria-describedby="nb2">2</a>].</p> 
<footer> 
    <h3>Notes</h3>
    <ul>
        <li id="nb1" tabindex="-1">
            <p><a href="#nh1" title="retour au texte">[1]</a> Pour la pâte brisée, mélanger 110 g de beurre froid coupé en morceau à 330 g de farine. Incorporer ensuite 110 g d’eau froide.</p> 
        </li>
        <li id="nb2" tabindex="-1">
            <p><a href="#nh2" title="retour au texte">[2]</a> à votre convenance.</p>
        </li>
    </ul> 
</footer>
Restitution de la note de bas de page liée au lien « 2 » par aria-describedby, en fonction du lecteur d’écran et du navigateur
NVDA 2021.3 JAWS 2021 VoiceOver
Firefox 104 restitution conforme : « [2] lien puce [2] à votre convenance. » restitution conforme : « Lien [2], puce [2] à votre convenance. » non applicable
Edge 104 restitution conforme : « [2] lien [2] à votre convenance. » restitution conforme : « Lien sur la même page [2], puce [2] à votre convenance. » non applicable
Chrome 104 restitution conforme : « [2] lien [2] à votre convenance. » restitution conforme : « Lien sur la même page [2], puce [2] à votre convenance. » non applicable
Safari 15.6 (macOS Monterey 12.5) non applicable non applicable restitution conforme : « lien, [2], [2] à votre convenance. »

Mobile

Support de la note de bas de page liée au lien « 2 » par aria-describedby, en fonction du lecteur d’écran sur mobile
Talkback Android natif 12 VoiceOver iOS 15.6
Chrome 104 comportement et restitution conformes : « [2], Lien, [2] à votre convenance. » non applicable
Safari non applicable comportement et restitution conformes : « [2], Lien interne, [2] à votre convenance. »

Ressources

Retour à l’index des tests