web-dev-qa-db-fra.com

Le rôle = "contentinfo" doit-il toujours être ajouté dans l'élément pied de page?

Sur les sites de démonstration ARIA, role="contentinfo" est généralement ajouté sur l'élément footer.

Cependant, pieds de page dans la conception de sites Web modernes peut être créatif afin qu'il puisse également contenir des éléments tels que des liens de navigation supplémentaires, des liens vers des sites Web sociaux ou même un formulaire de newsletter.

Prenons par exemple les codes de pied de page suivants. Devrait role="contentinfo" être ajouté sur l'élément footer ou p?

<footer>
    <nav>
        <ul>
            ........
            ........
            ........
            ........
            ........
        </ul>
    </nav>
    <form>
        ........
        ........
        ........
    </form>
    <p>© 2012 Website.com. All rights reserved.</p>
</footer>


EDIT: J'avais posé cette question en utilisant la liste de diffusion W3C ARIA, et Steve Faulkner, membre du groupe de travail HTML du W3C a répondu. Voici sa suggestion:

Je prendrais également en compte la façon dont les navigateurs mappent l'élément de pied de page aux API d'accessibilité.
Dans Firefox, le pied de page est mappé sur ARIA role = contentinfo
Dans Webkit/safari/chrome, le pied de page est mappé sur ARIA role = group s'il est contenu dans une section ou un élément d'article sinon il est mappé sur role = contentinfo
Dans IE il n'est pas mappé

Ce faisant:
<div role = "contentinfo">
Du contenu
<footer> du contenu </footer>
</div>

entraînera l'annonce de repères imbriqués contentinfo dans les navigateurs qui mappent déjà le pied de page à contentinfo.

Je suggérerais donc que l'ajout de role = contentinfo au pied de page principal, sans trop se soucier du contenu que vous pensez ne pas être approprié dans le pied de page.


L'approche suggérée consiste donc à ajouter role="contentinfo" au principal footer.

htmlfooterwai-aria
32
Ian Y.

Je pense que cela devrait être sur l'étiquette de pied de page dans votre cas.

Il est destiné à donner des informations sur le document parent, donc je l'utiliserais si vos éléments de pied de page donnent un bon contexte du parent.

http://www.w3.org/TR/wai-aria/roles#contentinfo

10
bcm

Pour l'instant, il n'y a pas de bonne réponse définitive.

Si vous respectez la spécification: http://www.w3.org/TR/wai-aria/roles#contentinfo , contentinfo est décrit comme:

"Une grande région visible qui contient des informations sur le document parent. Des exemples d'informations incluses dans cette région de la page sont les droits d'auteur et les liens vers les déclarations de confidentialité."

Donc, dans ce cas, il doit être placé sur votre <p> tag.

Cependant, faites comme si vous utilisiez ces points de repère. Si tout le monde place le role="contentinfo" sur le footer, alors c'est ce que l'utilisateur attend. L'utilisateur ne se soucie pas de ce que dit une "spécification", il veut juste une expérience cohérente lorsqu'il navigue d'un site Web à l'autre. Ils s'attendent probablement à ce que les liens de bas de page et autres soient dans la section contentinfo, car c'est ainsi que cela est implémenté sur de nombreux sites, et comme vous l'avez mentionné, c'est la méthode recommandée par de nombreux experts en accessibilité.

Je préfère répondre à l'utilisateur, et donc je l'applique sur l'élément footer, mais je garde à l'esprit que cela va à l'encontre de la spécification (ou à au moins mon interprétation) et que la mise en œuvre de cela pourrait changer à mesure que les navigateurs et autres technologies accessibles commenceront à implémenter l'accessibilité de manière plus cohérente.

7
Mike McLin

J'irais avec le <p> élément. Je veux dire, le but du HTML est de donner du contexte à votre texte. Donnez donc le contexte approprié en faisant un balisage approprié.

Donnez le rôle à l'élément le plus approprié, ce n'est pas un attribut limité aux éléments de pied de page.

3
Madara Uchiha

Il s'agit d'informations redondantes car la sémantique est déjà transmise via les spécifications HTML5 https://dequeuniversity.com/assets/html/jquery-summit/html5/slides/landmarks.html#the_difference_between_html5_and_aria

En règle générale, vous pouvez ignorer les rôles ARIA s'ils chevauchent la compréhension sémantique de l'élément HTML5.

Je pense que c'est vrai, mais il faut tester à partir des lecteurs d'écran pour déterminer que c'est exact.

1
Mike Gifford