1178 sujets

Accessibilité du Web

Questions sur les WAI-AIRA

Bonjour,

Dans le cadre du cours de WEB, on doit réaliser un site web, uniquement la partie HTML, selon un modèle, de la manière la plus accessible possible. Je dois donc utiliser les WAI-ARIA.

Dans le livre de Rodolphe Rimelé, il en parle à partir de la page 695.

Mais voilà, je bloque sur certains attributs. Notamment role="main", role="complementary" et role="article".

J'ai lu sur un post de ce site que l'attribut role="main" était unique, il ne peut être mit qu'une seule et unique fois dans la page. Mais voila, j'ai découpé ma page en plusieurs sections. Je vous mets le liens d'une image, pour vous montrer ce que je dois faire, ce sera plus compréhensible je pense.

https://dl.dropboxusercontent.com/u/107675652/index.png

J'ai donc décider de faire 3 sections. Un pour "Yearbook 2014-2015", l'autre pour "Web Design" et une dernière pour "Notre actu" (qui contient trois bloc article) (je ne parle pas ici du footer "Et ensuite" qui est à part).

Mais voila, comme je ne comprends pas bien les attributs du haut, je ne vois pas lequel mettre. Actuellement j'ai fais ça, pour la section "Yearbook 2014-2015", je lui ai attribué le rôle "main". Pour le reste, j'ai mis "complementary".

Et pour les articles, je n'ai pas mis role="article", je pense que c'est inutile?

J'ai bien compris que "main" était pour le contenu principal de ma page, mais en faite, tout est le contenu principal et donc, ça ne va pas.

Donc voila, j'en fais toute une botte de foin, je ne comprend pas très bien. Si vous pouviez m'égailler, ce serait très appréciable !

Merci beaucoup,

Jimmy.
Administrateur
Bonjour et bienvenue,

si tu as la 1ère édition du livre de dew, il y a un chapitre à télécharger ainsi que l'index. Si tu as la 2nde édition, je suppose qu'elle a été imprimée et que ce n'est plus nécessaire.

Ce qui ne figure probablement pas dans son livre parce que c'est plus récent : il existe un élément HTML5 main qui a le même rôle (natif pour le coup) que d'ajouter un attribut ARIA role="main".
HTML5doctor
W3C HTML5 main element (plus récent que l'article d'HTML5doctor, HTML5 étant une REC depuis quelques semaines seulement et cette partie ayant été réécrite au moins 2 ou 3 fois par S. Faulkner)
Tu peux donc utiliser, si c'est pertinent, un <main role="main"> englobant tout le contenu principal de la page.

À voir ton image :
ce qui ne doit pas figurer dans un élément main : la bannière verte, le moteur de recherche et la navigation ainsi que le pied de page (lien vers Contact et l'adresse à droite qui fera un parfait role="contentinfo")
ce qui doit y figurer : le reste, le contenu. Pour ça, comme tu l'as correctement envisagé tu ne peux pas utiliser 3 éléments main (ni 3 éléments avec un role="main"), il ne reste donc comme solution qu'à créer un parent aux 3 blocs de contenu qui aura un role="main". Avec l'existence de l'élément main, c'est simple, autant que ce soit cet élément Smiley smile
Si tu ne veux pas rajouter d'élément alors ne pas utiliser cet élément ni ce role car ce serait pire de faire croire que 2/3 du contenu n'est pas du contenu principal... (mais pourquoi ne pas vouloir rajouter un élément ? Il est utile... Bon sur un site existant où on casse trop de choses on peut avoir ses raisons mais en dehors de ça...). Dans ce cas-là, à défaut de landmark role, il y aura tout de même des titres H1 pour chacun des 3 blocs de contenu. Ou 3 H2 précédés d'1 H1, enfin quelque chose de cohérent avec pour contraintes que le 1er titre du code HTML soit un H1 et qu'ensuite il n'y ait pas de "saut" de niveau (H1 suivi de H3 niet)

complementary ? Il n'y en a à mon avis pas dans cette page.
Quoique les actus pourraient être considérées en tant que tel, c'est justifiable et seraient donc sorties de main. Par contre web design c'est la suite du 1er bloc, c'est pas un autre sujet à mon avis.

Il y a encore un role search et puis la navigation le bandeau gris
Merci beaucoup pour cette réponse qui m'en apprend beaucoup Felipe.

J'ai bien le livre dans sa deuxième version et le chapitre sur les WAI-ARIA est inclus.

Pour mon header, je lui ai donné un rôle <header role="banner"> comme conseillé dans le livre.
Pour ma barre de navigation, je lui ai donné un rôle <nav role="navigation">.

J'ai un fil d'Ariane à incorporer dans mes autres pages, puis-je utiliser le même attribut pour lui?
exemple : <div role="navigation"> ou pas? Etant donné que c'est également une zone de navigation, pourquoi pas? J'avais hésité à faire un deuxième nav, mais je lui ai préféré le <div>.

Pour la suite, j'ai donné comme titre principal de la page (et donc hors section), <h1 role="heading" aria-level="1">1er bac infographie</h1>

Si j'ai bien compris, je peux envelopper mes trois sections dans un main ?

J'ai ceci :


<h1 role="heading" aria-level="1">1<sup>er</sup> Bac Infographie</h1>
   <main role="main">
       <section>
           <h2 role="heading" aria-level="1"><span lang="en">Yearbook</span>...</h2>
        </section>
        <section>
            <h2...></h2>
         </section>
....
     </main>


Cela semble t'il bon ?

Dois-je changer quelque chose pour ma section comportant trois articles? Dois-je donner à mes articles un role="article" ?

J'ai évidemment un bon outline, j'ai le H1 comme titre principal de la page, mes H2 comme titre de <section>, c'est-à-dire Yearbook 2014-2015, Web Design, Notre actu et aussi pour le footer "Et ensuite?". Les titres d'articles sont en <h3>.

J'ai attribué le rôle "search" à la barre de recherche du haut.

J'avais mis role="contentinfo" à tout mon footer mais grâce à toi, je me rend compte que c'est une erreur. Je vais donc le mettre à mon bloc "address".


Je suis désolé pour toutes ces questions, j'ai envie de bien faire. C'est notre premier vrai gros travaille en HTML et j'ai envie d'en faire le maximum. D'ailleurs, c'est une bonne révision pour les examens qui se profilent en Janvier. Et puis, il est mieux d'apprendre directement les bonnes bases, je n'en serais que meilleur par la suite!

Merci encore,

Jimmylet.
Ah, et j'ai également un petit soucis avec role="search"... il ne passe pas la validation de TotalValidator.

Je l'ai essayé sur 


<form role="search" id="recherche" method="get" action="#">


et sur fieldset mais rien n'y fait. C'est normal?
Salut,

Ton h1, tu peux le mettre dans l'élément main. Quant aux rôles ARIA qui y figurent, ils sont purement et simplement inutiles : n'importe quel lecteur d'écran sait ce qu'est un h1 et les navigateurs leur en transmettent correctement la sémantique, et ce depuis des années.

Quant à la validation du code HTML, utilise plutôt le validateur du W3C (éventuellement, sa variante Nu spécialisée sur le HTML 5, voire le validateur tout-en-un pour valider également les CSS et les flux de syndication, entre autres). D'ailleurs, ton code avec role="search" est valide aux yeux du validateur du W3C.
Salut Victor BRITO,

Merci pour l'astuce du h1 dans l'élément main.

Pour le "aria-level="x"", nos professeurs nous ont demandé de l'utiliser. Je n'oserais pas ne pas l'utiliser pour ce travail. Mais je leur poserais la question. Il est pourtant reprit dans le livre de Rodolphe Rimelé comme élément qui existe, donc, pourquoi ne pas l'utiliser?

Pout la question du validateur, là aussi ça pose problème. On utilise "TotalValidator" à l'école, ils ont hésité début d'année mais ils ont du faire un choix et ont fait celui là. Peut-être est-ce l'application intégrée sur MAC et WINDOWS qui ne nécessite pas de connexion internet (pour les examens...).

Quoi qu'il en soit, si l'élément role="search" est valide sur le validateur du W3C, je ne vois pas pourquoi il ne serait pas accepté. Je vais tout de même poser la question à mon professeur, car une erreur donnée de la part du validateur vaut -20% sur la côte de la page.

--------

C'est la première fois que je valide ma page avec le validateur que tu viens de me présenter.
Effectivement, il me dit que le <h1 role="heading" aria-level="1"> est de trop. Par contre, il ne me dit rien pour les autres niveau de titre. Est-ce une mauvaise manipulation, dés lors, de les garder?

J'ai également mit l'élément "contentinfo" dans la balise "address" de mon footer.
Il me met ceci " Error: Bad value contentinfo for attribute role on element address. ". Je suppose que je dois le remonter vers la balise <footer> ?
Modifié par jimmylet (23 Dec 2014 - 23:41)
J'ai une dernière interrogation. Après, j'arrête, promis !

Voici mon outline :

https://dl.dropboxusercontent.com/u/107675652/Capture%20d%E2%80%99%C3%A9cran%202014-12-21%20%C3%A0%2021.12.58.png
https://dl.dropboxusercontent.com/u/107675652/Capture%20d%E2%80%99%C3%A9cran%202014-12-21%20%C3%A0%2021.13.05.png

J'ai une interrogation avec ce dernier. J'ai un <nav> qui précède mon titre principal.

J'ai donc mon <nav> comportant le titre <h1> (si je mets un autre, ça ne va pas avec l'outline), puis mon titre principal "1er bac infographie". Seulement voilà, n'y a t'il pas une erreur. Mon <nav> doit-il avoir un niveau de titre <h1> ? et surtout, qui précède mon <h1> qui est le titre de mon document (et affiché comme tel dans l'outline).

Voila,

Je vous remercie encore une fois!
Pour <h1 role="heading" aria-level="1"> ça permet de faire comprendre aux lecteurs d'écran un peu anciens comment fonctionne l'outline HTML5, ou bien çA permet d'utiliser l'ancien système HTML4.

Par exemple si tu as section>section>h1, les lecteurs d'écran les voient comme un h2. ILs ne sont pas capables de déterminer si c'est le modèle outline HTML5 ou l'ancien système HTML4 qui est utilisé.
Modifié par QuentinC (27 Dec 2014 - 20:59)
Salut,

Je me permet un petit hors sujet;

Quand j'ai vu l'énoncé de ton problème d'école je me suis dis que c'était vraiment trop cool de donner cela à faire à des élèves en début d'apprentissage.

Je trouvais que ça correspondais bien à l'enseignement trop cool que j'ai eu, avec mes supers profs trop cool… et puis bim, en voyant la maquette je me rend compte que c'est probablement les mêmes profs !

C'est bien de venir s'informer/se former chez Alsacréations, c'est la clé de la réussite !

Bonne continuation Smiley smile
QuentinC a écrit :
Pour &lt;h1 role=&quot;heading&quot; aria-level=&quot;1&quot;&gt; ça permet de faire comprendre aux lecteurs d'écran un peu anciens comment fonctionne l'outline HTML5, ou bien çA permet d'utiliser l'ancien système HTML4.

Par exemple si tu as section&gt;section&gt;h1, les lecteurs d'écran les voient comme un h2. ILs ne sont pas capables de déterminer si c'est le modèle outline HTML5 ou l'ancien système HTML4 qui est utilisé.


Entendu, c'est ce que l'on me conseillais de faire Smiley smile !

Gili a écrit :
Salut,

Je me permet un petit hors sujet;

Quand j'ai vu l'énoncé de ton problème d'école je me suis dis que c'était vraiment trop cool de donner cela à faire à des élèves en début d'apprentissage.

Je trouvais que ça correspondais bien à l'enseignement trop cool que j'ai eu, avec mes supers profs trop cool… et puis bim, en voyant la maquette je me rend compte que c'est probablement les mêmes profs !

C'est bien de venir s'informer/se former chez Alsacréations, c'est la clé de la réussite !

Bonne continuation Smiley smile


Ah et bien, heureux de te rencontrer ! C'est vrai que d'après ce que j'ai pu constater pour le moment, ils me font grosse impression. Evidemment, on ne sait pas tout voir en profondeur à l'école, par manque de temps, c'est pour ça que je viens m'informer ici !

Merci !


Jimmy.
Sujet clos
Aller à