Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Accessibilité] Audit ? #51

Open
FlorentTorregrosa opened this issue Feb 28, 2018 · 7 comments

Comments

@FlorentTorregrosa
Copy link
Member

commented Feb 28, 2018

Avoir un audit d'accessibilité avant le lancement de la nouvelle version du site ?

@wallon-ines

This comment has been minimized.

Copy link
Contributor

commented Mar 19, 2018

On peut déjà s'aider de ça si on a des interrogations

https://www.accede-web.com/notices/html-css-javascript/

@vmaucorps

This comment has been minimized.

Copy link

commented Mar 21, 2018

@FlorisMoriceau

This comment has been minimized.

Copy link
Member

commented Sep 13, 2018

Je prends en fil rouge.

@FlorisMoriceau

This comment has been minimized.

Copy link
Member

commented May 10, 2019

@simongeorges , je te relance, pourrais-tu, stp, me donner le résultat de ton pa11y, ou encore mieux, nous monter un serveur pa11y dashboard quelque part pour que je puisse corriger le tir ?
Merci d'avance pour votre considération,
Veuillez agréer, M. le Président, toutes mes salutations les plus drupaliennes.

@simongeorges

This comment has been minimized.

Copy link
Member

commented May 13, 2019

@FlorisMoriceau : test effectué à l'instant sur la pré-prod en ligne (ça s'installe en 2 minutes en local, le luxe serait de le mettre dans une CI, mais en attendant, on peut faire comme ça ;-)).

Results for URL: https://drupal8.h337pre.drupalfr.org/home

• Error: This button element does not have a name available to an accessibility API. Valid names are: title undefined, element content, aria-label undefined, aria-labelledby undefined.
├── WCAG2A.Principle4.Guideline4_1.4_1_2.H91.Button.Name
├── #inner-wrap > div > header > div:nth-child(1) > div:nth-child(1) > button
└──

• Error: Duplicate id attribute value "block-drupal-france-main-menu" found on the web page.
├── WCAG2A.Principle4.Guideline4_1.4_1_1.F77
├── #block-drupal-france-main-menu
└──

<h2 class="bloc...

• Error: Duplicate id attribute value "block-drupal-france-main-menu-menu" found on the web page.
├── WCAG2A.Principle4.Guideline4_1.4_1_1.F77
├── #block-drupal-france-main-menu-menu
└──

Main navigation

• Error: Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.
├── WCAG2A.Principle1.Guideline1_1.1_1_1.H37
├── #node-1 > div > div > div > div:nth-child(1) > section > div > div:nth-child(2) > div > div > div > article > div > div > div > div > img
└──

• Error: Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.
├── WCAG2A.Principle1.Guideline1_1.1_1_1.H37
├── #node-1 > div > div > div > div:nth-child(4) > section > div > div:nth-child(2) > div > div > div > article > div > div > div > div > img
└── <img class="b-lazy media__image media__element" data-src="/sites/default/files/styles/raw/public/default_images/Homepage_Documentation.png?itok=Sy9kUVOL" height="478" width="851" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAAB...

• Error: Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.
├── WCAG2A.Principle1.Guideline1_1.1_1_1.H37
├── #node-1 > div > div > div > div:nth-child(5) > div > div > div:nth-child(2) > div > section > div > div > div > div:nth-child(2) > div:nth-child(1) > article > div:nth-child(1) > div > div > div > div > div:nth-child(2) > div > div > img
└── <img class="b-lazy media__image media__element" data-src="/sites/default/files/styles/rect_400_200/public/default_images/News_1.png?itok=i6IIFFrV" height="200" width="400" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAI...

• Error: Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.
├── WCAG2A.Principle1.Guideline1_1.1_1_1.H37
├── #node-1 > div > div > div > div:nth-child(5) > div > div > div:nth-child(2) > div > section > div > div > div > div:nth-child(2) > div:nth-child(2) > article > div:nth-child(1) > div > div > div > div > div:nth-child(2) > div > div > img
└── <img class="b-lazy media__image media__element" data-src="/sites/default/files/styles/rect_400_200/public/default_images/News_2.png?itok=7t2w7XT-" height="200" width="400" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAI...

• Error: Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.
├── WCAG2A.Principle1.Guideline1_1.1_1_1.H37
├── #node-1 > div > div > div > div:nth-child(5) > div > div > div:nth-child(2) > div > section > div > div > div > div:nth-child(2) > div:nth-child(3) > article > div:nth-child(1) > div > div > div > div > div:nth-child(2) > div > div > img
└── <img class="b-lazy media__image media__element" data-src="/sites/default/files/styles/rect_400_200/public/default_images/News_3.png?itok=GleSYerE" height="200" width="400" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAI...

• Error: Anchor element found with a valid href attribute, but no link content has been supplied.
├── WCAG2A.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
├── #node-1 > div > div > div > div:nth-child(6) > div > div > div:nth-child(2) > div > section > div:nth-child(3) > div:nth-child(2) > div:nth-child(2) > a
└── <i class="fa fa-ch...

• Error: Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.
├── WCAG2A.Principle1.Guideline1_1.1_1_1.H37
├── #node-1 > div > div > div > div:nth-child(7) > div > div > div:nth-child(2) > div > section > div > div > div > div:nth-child(2) > div:nth-child(1) > article > div:nth-child(1) > div > div > div > div > img
└── <img class="b-lazy media__image media__element" data-src="/sites/default/files/styles/rect_400_200/public/default_images/lorempixel_nature_square_1.jpeg?itok=hRAYRePr" height="200" width="400" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BA...

• Error: Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.
├── WCAG2A.Principle1.Guideline1_1.1_1_1.H37
├── #node-1 > div > div > div > div:nth-child(7) > div > div > div:nth-child(2) > div > section > div > div > div > div:nth-child(2) > div:nth-child(2) > article > div:nth-child(1) > div > div > div > div > img
└── <img class="b-lazy media__image media__element" data-src="/sites/default/files/styles/rect_400_200/public/default_images/lorempixel_nature_square_1.jpeg?itok=hRAYRePr" height="200" width="400" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BA...

• Error: Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.
├── WCAG2A.Principle1.Guideline1_1.1_1_1.H37
├── #node-1 > div > div > div > div:nth-child(7) > div > div > div:nth-child(2) > div > section > div > div > div > div:nth-child(2) > div:nth-child(3) > article > div:nth-child(1) > div > div > div > div > img
└── <img class="b-lazy media__image media__element" data-src="/sites/default/files/styles/rect_400_200/public/default_images/lorempixel_nature_square_2.jpeg?itok=S9U0t5T3" height="200" width="400" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BA...

• Error: Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.
├── WCAG2A.Principle1.Guideline1_1.1_1_1.H37
├── #node-1 > div > div > div > div:nth-child(8) > div > div > div:nth-child(2) > div > section > div > div > div > div > div > div:nth-child(1) > div > div > div > img
└── <img class="b-lazy media__image media__element" data-src="/sites/default/files/styles/rect_220x150/public/default_images/Reference_1.png?itok=HtZ-pkof" height="150" width="220" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAA...

• Error: Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.
├── WCAG2A.Principle1.Guideline1_1.1_1_1.H37
├── #node-1 > div > div > div > div:nth-child(8) > div > div > div:nth-child(2) > div > section > div > div > div > div > div > div:nth-child(2) > div > div > div > img
└── <img class="b-lazy media__image media__element" data-src="/sites/default/files/styles/rect_220x150/public/default_images/Reference_2.jpg?itok=T3U4jwvF" height="150" width="220" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAA...

• Error: Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.
├── WCAG2A.Principle1.Guideline1_1.1_1_1.H37
├── #node-1 > div > div > div > div:nth-child(8) > div > div > div:nth-child(2) > div > section > div > div > div > div > div > div:nth-child(3) > div > div > div > img
└── <img class="b-lazy media__image media__element" data-src="/sites/default/files/styles/rect_220x150/public/default_images/Reference_3.jpg?itok=uQO3Bnwb" height="150" width="220" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAA...

• Error: Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.
├── WCAG2A.Principle1.Guideline1_1.1_1_1.H37
├── #node-1 > div > div > div > div:nth-child(8) > div > div > div:nth-child(2) > div > section > div > div > div > div > div > div:nth-child(4) > div > div > div > img
└── <img class="b-lazy media__image media__element" data-src="/sites/default/files/styles/rect_220x150/public/default_images/Reference_4.jpg?itok=wdHVuA4I" height="150" width="220" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAA...

• Error: Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.
├── WCAG2A.Principle1.Guideline1_1.1_1_1.H37
├── #node-1 > div > div > div > div:nth-child(8) > div > div > div:nth-child(2) > div > section > div > div > div > div > div > div:nth-child(5) > div > div > div > img
└── <img class="b-lazy media__image media__element" data-src="/sites/default/files/styles/rect_220x150/public/default_images/Reference_5.jpg?itok=-Kt5Etym" height="150" width="220" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAA...

• Error: Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.
├── WCAG2A.Principle1.Guideline1_1.1_1_1.H37
├── #node-1 > div > div > div > div:nth-child(8) > div > div > div:nth-child(2) > div > section > div > div > div > div > div > div:nth-child(6) > div > div > div > img
└── <img class="b-lazy media__image media__element" data-src="/sites/default/files/styles/rect_220x150/public/default_images/Reference_6.jpg?itok=PFj2jeaf" height="150" width="220" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAA...

• Error: Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.
├── WCAG2A.Principle1.Guideline1_1.1_1_1.H37
├── #node-1 > div > div > div > div:nth-child(8) > div > div > div:nth-child(2) > div > section > div > div > div > div > div > div:nth-child(7) > div > div > div > img
└── <img class="b-lazy media__image media__element" data-src="/sites/default/files/styles/rect_220x150/public/default_images/Reference_7.jpg?itok=RHwadYzm" height="150" width="220" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAA...

• Error: This emailinput element does not have a name available to an accessibility API. Valid names are: label element, title undefined, aria-label undefined, aria-labelledby undefined.
├── WCAG2A.Principle4.Guideline4_1.4_1_2.H91.InputEmail.Name
├── #mce-EMAIL
└──

• Error: This textinput element does not have a name available to an accessibility API. Valid names are: label element, title undefined, aria-label undefined, aria-labelledby undefined.
├── WCAG2A.Principle4.Guideline4_1.4_1_2.H91.InputText.Name
├── #mc-embedded-subscribe-form > div:nth-child(2) > input
└──

• Error: This form field should be labelled in some way. Use the label element (either with a "for" attribute or wrapped around the form field), or "title", "aria-label" or "aria-labelledby" attributes as appropriate.
├── WCAG2A.Principle1.Guideline1_3.1_3_1.F68
├── #mc-embedded-subscribe-form > div:nth-child(2) > input
└──

22 Errors

@simongeorges

This comment has been minimized.

Copy link
Member

commented May 13, 2019

Évidemment, GitHub échappe le HTML… Du coup, cf P.J.
drupalfr.txt

@FlorisMoriceau

This comment has been minimized.

Copy link
Member

commented May 13, 2019

OK, ça va, il n'y a pas grand chose en fait.
Merci. Je vais m'occuper de ça.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
5 participants
You can’t perform that action at this time.