Accessibility: Jupyter About Page

brendamoreira commented 2 years ago

What page is this for?

https://github.com/jupyterhub/outreachy/issues/38#issuecomment-1273541852

WAVE accessibility report

Jupiter "About" page Wave evaluation:

Detailed contrast errors and alerts & contrast information:

Screenshot 2022-10-14 at 13 51 24 Screenshot 2022-10-14 at 13 53 13 (The first image represent the first and second contrast information. The second image represents the third one)

Structural elements (showing on the page the ones that do not belong):

ARIA label (examples):

The HTML element to be changed

Contrast Errors:
<a href="https://opensource.org/licenses/BSD-3-Clause" style="color: rgb(197, 84, 11); background-color: rgb(245, 245, 245);">(...)</a>
<a href="https://numfocus.org" style="color: rgb(197, 84, 11); background-color: rgb(245, 245, 245);">(...)</a>
<div class="orange-button"><a href="https://numfocus.salsalabs.org/donate-to-jupyter/index.html" target="noopener noreferrer" style="color: rgb(255, 255, 255); background-color: rgb(228, 110, 46);">(...)</a></div>    
.about-box .orange-button {
    background-color: #e46e2e;
(...)
}

Alerts (redundant alternative text):
<img class="biocard-photo" alt="Mehmet Bektas" src="/assets/bios/Mehmet_Bektas.jpg" (...)>
<img class="biocard-photo" alt="David Brochart" src="/assets/bios/David_Brochart.jpg" (...)>

Alert(long alternative text):
<img src="/assets/logos/EC-H2020.svg" alt="Horizon 2020 European Union funding for Research and Innovation logo - OpenDreamkit funded project - Home Page" (...)>

Structural elements:
<h2 id="project-jupyter">Project Jupyter<a (...)></a></h2><ul><li>(...)</li></ul>
<h2 id="subprojects">Subprojects<a (...)></a></h2><ul><li>(...)</li></ul>
<h2 id="follow-us">Follow us<a (...)></a></h2><ul><li>(...)</li></ul>

ARIA labels:
<a class="anchorjs-link " aria-label="Anchor" data-anchorjs-icon=" " href="#distinguished-contributors" (...)></a>
<a class="anchorjs-link " aria-label="Anchor" data-anchorjs-icon="" href="#2021-cohort" (...)></a>
<a class="anchorjs-link " aria-label="Anchor" data-anchorjs-icon="" href="#2020-cohort" (...)></a>
<a class="anchorjs-link " aria-label="Anchor" data-anchorjs-icon="" href="#special-election-cohort" (...)></a>

Your proposed HTML (or CSS), after change

Contrast Errors:
<a href="https://opensource.org/licenses/BSD-3-Clause" style="color: rgb(138, 55, 0);background-color: rgb(245, 245, 245);text-decoration: underline;">(...)</a>
<a href="https://numfocus.org" style="color: rgb(138, 55, 0); background-color: rgb(245, 245, 245);text-decoration: underline;">(...)</a>

<div class="orange-button"><a href="https://numfocus.salsalabs.org/donate-to-jupyter/index.html" target="noopener noreferrer" style="color: rgb(0, 0, 0); background-color: rgb(228, 110, 46);">(...)</a></div>    
.about-box .orange-button {
    background-color: #E58957;
(...)
}

Alerts (redundant alternative text):
<img class="biocard-photo" alt="Mehmet Bektas avatar" src="/assets/bios/Mehmet_Bektas.jpg" (...)>
<img class="biocard-photo" alt="David Brochart avatar" src="/assets/bios/David_Brochart.jpg" (...)>

Alert(long alternative text):
<img src="/assets/logos/EC-H2020.svg" alt="Horizon 2020 European Union logo" (...)>

Structural elements:
<ul id="project-jupyter" style="font-size: 1.1em; font-weight: bold;">Project Jupyter<a (...)></a><li>(...)</li></ul>
<ul id="subprojects" style="font-size: 1.1em; font-weight: bold;">Subprojects<a (...)></a><li>(...)</li></ul>
<ul id="follow-us" style="font-size: 1.1em; font-weight: bold;">Follow us<a (...)></a><li>(...)</li></ul>

ARIA labels:
<a class="anchorjs-link " aria-label="Distinguished Contributors section link" data-anchorjs-icon=" " href="#distinguished-contributors" (...)></a>
<a class="anchorjs-link " aria-label="2021 Cohort section link" data-anchorjs-icon="" href="#2021-cohort" (...)></a>
<a class="anchorjs-link " aria-label="2020 Cohort section link" data-anchorjs-icon="" href="#2020-cohort" (...)></a>
<a class="anchorjs-link " aria-label="Special Election Cohort section link" data-anchorjs-icon="" href="#special-election-cohort" (...)></a>

More info

By creating this issue I realised that the 70th alert, the redundant link, is not present in the original website, but the wave itself makes the link become redundant and point it as wrong, so it doesn't really exist. So no changes suggested for it. For all of the 68 alerts about redundant alternative text my suggestion is to add the word "avatar" in the end of the alt. I only put two examples in the code suggestion to not be redundant myself, and to present a more succinct code, since there are a lot of other changes to be presented. I did the same about the ARIA labels, only put four examples so it wouldn't be so long. But the suggestion is to change the anchor by putting the name of the section adding section link at the end, as shown in the proposed html change.

p.s.: I didn't know if was best not to add text to separate the HTML per error, but I believe that would be better to be understood. If necessary I can change.

welcome[bot] commented 2 years ago

Thank you for opening your first issue in this project! Engagement like this is essential for open source projects! :hugs:
If you haven't done so already, check out Jupyter's Code of Conduct. Also, please try to follow the issue template as it helps other other community members to contribute more effectively. welcome You can meet the other Jovyans by joining our Discourse forum. There is also an intro thread there where you can stop by and say Hi! :wave:
Welcome to the Jupyter community! :tada: