[outreachy] Registry: web accessibility review and improvements

[svrnm]

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]

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

[svrnm]

Hey @FatumaA, thanks for running the report. Can you run the report on the highest level nevertheless? This way we can choose to resolve the AA issues and then cherry pick from the AAA issues that are reasonable to be solved. I assume that a lot of them are just repetition of the same issue, so we might be able to solve many of them with only a few changes. If you think that the output of the report is too long to be posted in a comment here you can use https://gist.github.com/ to create a place to store it outside.

[FatumaA]

Ok, here is the gist with the full report at the highest setting

[svrnm]

Ok, here is the gist with the full report at the highest setting

Thanks! As suspected there are many issues of the same kind:

$ grep "WCAG2" gistfile1.txt | sort | uniq -c
 397    ├── WCAG2AAA.Principle1.Guideline1_3.1_3_1_AAA.G141
3368    ├── WCAG2AAA.Principle1.Guideline1_4.1_4_6.G17.Fail
   1    ├── WCAG2AAA.Principle3.Guideline3_2.3_2_2.H32.2

You listed WCAG2AAA.Principle3.Guideline3_2.3_2_2.H32.2 already, which is the issue with the missing button.

Then, we have WCAG2AAA.Principle1.Guideline1_3.1_3_1_AAA.G141 as an issue with heading structure (h6 in h4, not h5), etc. I assume most of them are for the same thing just in a repeated manner, since most of them are of the following structure:

 • Error: The heading structure is not logically nested. This h6 element should be an h5 to be properly nested.
   ├── WCAG2AAA.Principle1.Guideline1_3.1_3_1_AAA.G141
   ├── #default-body > li:nth-child(47) > div > div:nth-child(3) > div:nth-child(1) > h6
   └── <h6><i class="fa-solid fa-forward">...</h6>

The one where we should keep the AA level is WCAG2AAA.Principle1.Guideline1_4.1_4_6.G17.Fail vs WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail, let's try to accomplish at least a 4.5:1 ratio, which should lower that number significantly (I hope)

Can you take a look into these issues and see how feasible it is to solve them and raise a PR accordingly? Thanks

[FatumaA]

It seems that the errros are in 3 categories:

1. Color contrasts issue
2. Header hierarchy
3. Form missing submit button

I think they can be handled in one PR

[svrnm]

Yes, one PR is just fine.