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].
<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>
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
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. » |