search

open-telemetry / opentelemetry.io

The OpenTelemetry website and documentation
https://opentelemetry.io
Creative Commons Attribution 4.0 International
533 stars 1.16k forks source link

[outreachy] Registry: web accessibility review and improvements #5371

Open svrnm opened 2 days ago

svrnm commented 2 days ago

Outreachy task for @FatumaA

Based on your user experience report, please provide the following suggested improvement via a PR:

The submit button's hover effect does not meet web accessibility guidelines on color contrast (WCAG 2.0 at Level AAA) but they meet Level AA. And the language and type filter buttons have the same styling even though they represent different things. This gives the visual impression that they do the same thing.

Please use a automated accessibility auditing tools to identify existing issues and share the list of issues as a comment to this thread (in textual form or as screenshots). We can then select the issue(s) for you to work on in a PR.

Note: This is an assigned issue for a participant that has completed the user experience report, if you are an outreachy participant as well, find instructions here: #5290

FatumaA commented 18 hours ago

I used pa11y CLI against the registry section of the website on the standard setting (WCAG 2.1 AA), and this was the output:

pa11y http://localhost:1313/ecosystem/registry/                                                                

Welcome to Pa11y

 > Running Pa11y on URL http://localhost:1313/ecosystem/registry/

Results for URL: http://localhost:1313/ecosystem/registry/

 • Error: This form does not contain a submit button, which creates issues for those who cannot submit the form using the keyboard. Submit buttons are INPUT elements with type attribute "submit" or "image", or BUTTON elements with type "submit" or omitted/invalid.
   ├── WCAG2AA.Principle3.Guideline3_2.3_2_2.H32.2
   ├── #searchForm
   └── <form action="/ecosystem/registry" id="searchForm"><div class="input-group"><span ...</form>

 • Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 3.68:1. Recommendation:  change background to #0d1115.
   ├── WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
   ├── #searchForm > div > button:nth-child(6)
   └── <button type="button" class="btn btn-outline-success" onclick="document.getElementById(&quot;searchForm&quot;).submit()">Submit</button>

2 Errors

It produces a lot more errors on the highest setting but it seems more reasonable to meet the acceptable level (AA) first before aiming for full compliance