Open
Description
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.
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>