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.

Sign up for GitHub

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

Jump to bottom

Improve accessibility and color contrast #1570

Open
zanonnicola opened this issue Feb 12, 2018 · 6 comments
Open

Improve accessibility and color contrast #1570

zanonnicola opened this issue Feb 12, 2018 · 6 comments
Labels
help wanted new site any issues for the new site using docusaurus

Comments

@zanonnicola
Copy link
Contributor

I was previewing the new website on my phone and I noticed that the color contrast is quite low on the search form at the top. So I checked the whole front page with Pa11y and found out that there are quite a few errors in terms of accessibility.

The majority of them are quite easy to fix so it shouldn't take long to do that.

Screenshot

A few errors

 Error: The html element should have a lang or xml:lang attribute which describes the language of the document.
   ├── WCAG2AA.Principle3.Guideline3_1.3_1_1.H57.2
   ├── html
   └── <html><head><meta charset="utf-8"><me...</html>

 • Error: Img element is the only content of the link, but is missing alt text. The alt text should describe the purpose of the link.
   ├── WCAG2AA.Principle1.Guideline1_1.1_1_1.H30.2
   ├── html > body > div:nth-child(1) > div > header > a
   └── <a href="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/"><img class="logo" src="/img/bab...</a>

 • 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.
   ├── WCAG2AA.Principle1.Guideline1_3.1_3_1.F68
   ├── #search_input_react
   └── <input type="text" id="search_input_react" placeholder="Search" class="aa-input" autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-labelledby="search_input_react" aria-owns="algolia-autocomplete...

 • Error: This textarea element does not have a name available to an accessibility API. Valid names are: label element, title attribute, aria-label attribute, aria-labelledby attribute.
   ├── WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.Textarea.Name
   ├── #hero-repl-in > textarea
   └── <textarea class="ace_text-input" wrap="off" autocapitalize="off" spellcheck="false" readonly="" style="opacity: 0; height: 21px; width: 9.60938px; right: 347.516px; bottom: 155px;"></textarea>

 • 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.
   ├── WCAG2AA.Principle1.Guideline1_3.1_3_1.F68
   ├── #hero-repl-in > textarea
   └── <textarea class="ace_text-input" wrap="off" autocapitalize="off" spellcheck="false" readonly="" style="opacity: 0; height: 21px; width: 9.60938px; right: 347.516px; bottom: 155px;"></textarea>

 • Error: This textarea element does not have a name available to an accessibility API. Valid names are: label element, title attribute, aria-label attribute, aria-labelledby attribute.
   ├── WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.Textarea.Name
   ├── #hero-repl-out > textarea
   └── <textarea class="ace_text-input" wrap="off" autocapitalize="off" spellcheck="false" readonly="" style="opacity: 0; height: 21px; width: 9.60938px; right: 424.391px; bottom: 155px;"></textarea>

 • 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.
   ├── WCAG2AA.Principle1.Guideline1_3.1_3_1.F68
   ├── #hero-repl-out > textarea
   └── <textarea class="ace_text-input" wrap="off" autocapitalize="off" spellcheck="false" readonly="" style="opacity: 0; height: 21px; width: 9.60938px; right: 424.391px; bottom: 155px;"></textarea>

 • Error: Img element is the only content of the link, but is missing alt text. The alt text should describe the purpose of the link.
   ├── WCAG2AA.Principle1.Guideline1_1.1_1_1.H30.2
   ├── html > body > div:nth-child(2) > div > div:nth-child(1) > div > div > div > div:nth-child(3) > div > div > div > div > a:nth-child(1)
   └── <a href="https://code.facebook.com/projects" target="_blank"><img src="/img/sponsors/faceboo...</a>

 • Error: Img element is the only content of the link, but is missing alt text. The alt text should describe the purpose of the link.
   ├── WCAG2AA.Principle1.Guideline1_1.1_1_1.H30.2
   ├── html > body > div:nth-child(2) > div > div:nth-child(1) > div > div > div > div:nth-child(3) > div > div > div > div > a:nth-child(2)
   └── <a href="https://www.ampproject.org" target="_blank"><img src="/img/sponsors/amp.svg...</a>
@hzoo hzoo added new site any issues for the new site using docusaurus help wanted labels Feb 12, 2018
@hzoo
Copy link
Member

hzoo commented Feb 12, 2018

Looks like @zanonnicola will try to tackle it this week ^

@JoelMarcey
Copy link

@zanonnicola TIL about Pa11y. I can use it to check our Docusaurus main site and other sites as well. Thanks!

@zanonnicola
Copy link
Contributor Author

Pa11y is great. I have that running on Travis as part of my build chain. Maybe once the main errors are fixed it can be added here as well.
Food for thought.

@hzoo hzoo mentioned this issue Feb 15, 2018
Closed
9 tasks
@JoelMarcey
Copy link

Just ran Pa11y on docusaurus.io 😮

We have, um, just a few errors 😛

Looks like there is some fixes to do.

Thanks for the pointer on this tool.

@JoelMarcey
Copy link

facebook/docusaurus#462

@zanonnicola
Copy link
Contributor Author

No problem! Let me know if I can help in any way!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
help wanted new site any issues for the new site using docusaurus
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@hzoo @JoelMarcey @zanonnicola