Accessibility:

[PreciousOritsedere]

What page is this for?

https://mybinder.org/

WAVE accessibility report

The HTML element to be changed

1. <div id="banner-container">
<div style="display:flex;align-items:center;">
<div style="flex:1;text-align:center;">
Thanks to
Very low contrast
<a href="https://cloud.google.com/">
Google Cloud
</a>

,
Very low contrast
<a href="https://www.ovh.com/">
OVH
</a>

,
Very low contrast
<a href="https://notebooks.gesis.org">
GESIS Notebooks
</a>

and the
Very low contrast
<a href="https://turing.ac.uk">
Turing Institute
</a>

for supporting us! 🎉
</div>
Device dependent event handlerVery low contrast
<a class="btn" style="width: fit-content; height: fit-content; padding: 10px; background-color: rgb(230, 101, 129); color: white; font-weight: bold; margin: -8px 0px;" onmouseover="this.style.backgroundColor='#d15b75'" onmouseout="this.style.backgroundColor='#e66581'" href="https://numfocus.salsalabs.org/donate-to-binder" target="_blank">
🤍 Donate to mybinder.org!
</a>
</div>
</div>

2. <div id="logo-container">
Missing alternative text
<img id="logo" src="/static/logo.svg?v=fe52c40adc69454ba7536393f76ebd715e5fb75f5feafe16a27c47483eabf3311c14ed9fda905c49915d6dbf369ae68fb855a40dd05489a7b9542a9ee532e92b" width="390px">
</div>

3. <a class="btn" style="width: fit-content; height: fit-content; padding: 10px; background-color: rgb(230, 101, 129); color: white; font-weight: bold; margin: -8px 0px;" onmouseover="this.style.backgroundColor='#d15b75'" onmouseout="this.style.backgroundColor='#e66581'" href="https://numfocus.salsalabs.org/donate-to-binder" target="_blank"> 🤍 Donate to mybinder.org! </a>

4. <div class="container">
<div class="row text-center">
Heading level 3
<h3>
questions?
<br>

join the
<a href="https://discourse.jupyter.org/c/binder">
discussion
</a>

, read the
<a href="https://mybinder.readthedocs.io/en/latest/">
docs
</a>

, see the
<a href="https://github.com/jupyterhub/binderhub">
code
</a>
</h3>
</div>
</div>

Your proposed HTML (or CSS), after change

<nav>
     <div id="banner-container">
<div style="display:flex;align-items:center;">
<div style="flex:1;text-align:center;">
Thanks to
Very low contrast
<a href="https://cloud.google.com/">
Google Cloud
</a>

,
Very low contrast
<a href="https://www.ovh.com/">
OVH
</a>

,
Very low contrast
<a href="https://notebooks.gesis.org">
GESIS Notebooks
</a>

and the
Very low contrast
<a href="https://turing.ac.uk">
Turing Institute
</a>

for supporting us! 🎉
</div>
Device dependent event handlerVery low contrast
<a class="btn" style="width: fit-content; height: fit-content; padding: 10px; background-color: rgb(230, 101, 129); color: white; font-weight: bold; margin: -8px 0px;" onmouseover="this.style.backgroundColor='#d15b75'" onmouseout="this.style.backgroundColor='#e66581'" href="https://numfocus.salsalabs.org/donate-to-binder" target="_blank">
🤍 Donate to mybinder.org!
</a>
</div>
</div>
<nav>

2. <div id="logo-container">
Missing alternative text
<img id="logo" src="/static/logo.svg?v=fe52c40adc69454ba7536393f76ebd715e5fb75f5feafe16a27c47483eabf3311c14ed9fda905c49915d6dbf369ae68fb855a40dd05489a7b9542a9ee532e92b" width="390px" alt="binder logo">
</div>

3. <a class="btn" style="width: fit-content; height: fit-content; padding: 10px; background-color: rgb(230, 101, 129); color: white; font-weight: bold; margin: -8px 0px;" onmouseover="this.style.backgroundColor='#d15b75'" onfocus="this.style.backgroundColor='#d15b75'" onmouseout="this.style.backgroundColor='#e66581'" onfocus="this.style.backgroundColor='#e66581'" href="https://numfocus.salsalabs.org/donate-to-binder" target="_blank"> 🤍 Donate to mybinder.org! </a>

4. <footer>
   <div class="container">
<div class="row text-center">
Heading level 3
<h3>
questions?
<br>

join the
<a href="https://discourse.jupyter.org/c/binder">
discussion
</a>

, read the
<a href="https://mybinder.readthedocs.io/en/latest/">
docs
</a>

, see the
<a href="https://github.com/jupyterhub/binderhub">
code
</a>
</h3>
</div>
</div>
<footer>

More info

No response

[welcome[bot]]

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. 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:

[minrk]

Thanks! Can you provide a little more detail about the issues being fixed? What issues are fixed by each change?

[PreciousOritsedere]

Thanks! Can you provide a little more detail about the issues being fixed? What issues are fixed by each change?

Good day, Here are the issues being fixed:

1. The web page does not have a defined nav region. Page regions are very important because they identify significant page areas which improve the page's accessibility. Wrapping the nav region with the nav element fixes this issue.
2. The binder logo as well as other images in the web pages lacks the alt attribute. On a web page, an image must have an alt attribute. so that, the content of the image will available to the users when the image is unavailable or does not render. Including the alt attribute with a detailed description of the image, fixes this issue.
3. The event handlers present on the Donate to Binder button may not be accessible to users who are blind. The button contains an onmouseover event handler but does not have the onfocus event handler. Adding an onfocus event handler to the present code base fixes this issue.
4. This is similar to the first issue. The web page does not have a defined footer region. Page regions are very important because they identify significant page areas which improve the page's accessibility. Wrapping the footer region with the footer element fixes this issue.

[sgibson91]

Thank you for your contribution! Since the contribution period is now over, we will close this issue.