Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Improve accessibility and color contrast

See original GitHub issue

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="/"><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>

Issue Analytics

State:
Created 6 years ago
Reactions:2
Comments:6 (3 by maintainers)

Top GitHub Comments

3reactions

JoelMarceycommented, Feb 12, 2018

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

1reaction

zanonnicolacommented, Feb 12, 2018

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.

Top Results From Across the Web

CSS Tips for Better Color and Contrast Accessibility

CSS Tips for Better Color and Contrast Accessibility ; 1. Check for Text Readability ; 2. Increase Font Size or Weight ; 3....

Colors with Good Contrast | Web Accessibility Initiative (WAI)

Select text and background colors that provide sufficient contrast. There are tools to help check and select appropriate color combinations. This is ideally ......

Understanding WCAG 2 Contrast and Color Requirements

Contrast and color use are vital to accessibility. Users, including users with visual disabilities, must be able to perceive content on the ...

Improving accessibility: Contrast issues

Course content with poor contrast between text and background colors can be difficult to read for students with visual impairments.

Color Contrast Considerations for Accessibility Design & UX

The first step is to run your color choices through one of the many color contrast accessibility evaluation tools out there, such as...