Accessibility: Improve accessibility of Binder page #57

bl-aire · 2022-10-14T19:00:22Z

What page is this for?

WAVE accessibility report

Result from evaluation:
From the WAVE accessibility tool's assessment, the following are presenting accessibility issues on the page:

Missing alternative text
Missing or invalid language
Very low contrast
No page regions
Missing first level heading
Device dependent event

The HTML element to be changed

The HTML/CSS of elements to be changed are seen below:

1. Missing alt text:
<img id="logo" src="/static/logo.svg?v=fe52c40adc69454ba7536393f76ebd715e5fb75f5feafe16a27c47483eabf3311c14ed9fda905c49915d6dbf369ae68fb855a40dd05489a7b9542a9ee532e92b" width="390px">

<img id="badge" src="/static/images/badge_logo.svg?v=51b20aa16836ea83f5ed69194c660eb85c4c2c1e32565312baedb7d534e3ffcf592881dbbe3da441d8293ded842755c906b91fb4aadf15220cf48111ebf701c4">

<img class="icon" src="/static/images/markdown-icon.svg?v=d1115f582236340620dcc613052d5984f85f1742eed0e220e1a90c9f331bb71d3ef817bee9c6936ad6019c94cab66eb628528c929ca0bee3d25a4bdf634033cd">

<img class="icon" src="/static/images/rst-icon.svg?v=4846f2074f6bde5a7934a0bf36c3a12198f1d7fe7bb5e6545747a984db8fc9a3a7beb0205b072c7f44237f2d68d2ccffdcf983c18c9f91f5a4b5e0272ad9bb03">

2. Missing or invalid language:
<html style="margin-left: 380px;">

3. Very low contrast:
<div style="flex:1;text-align:center;">
    Thanks to <a href="https://cloud.google.com/"> Google Cloud </a>, <a 
    href="https://www.ovh.com/">OVH</a>,
    <a href="https://notebooks.gesis.org">GESIS Notebooks</a>
    and the <a href="https://turing.ac.uk"> Turing Institute </a> for supporting us! 🎉
 </div>

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

HTML:
<span class="point point-orange">
1
</span>
<span class="point point-red">
2
</span>
<span class="point point-blue">
3
</span>

CSS:
.point-orange{
    border-color:rgb(243, 162, 83);
    color: rgb(243, 162, 83);
}
.point-red{
    border-color: rgb(208, 102, 129);
    color: rgb(208, 102, 129);
}
.point-blue{
    border-color:rgb(87, 154, 202);
    color: rgb(87, 154, 202);
}

HTML:
<button id="submit" class="btn-submit" type="submit">
    launch
</button>

CSS:
.btn-submit{
    background-color:rgb(243, 162, 83);
}

4. No page regions:
The entire page content has to be formatted using sematic HTML tags like <header>, <nav>, <section>, <aside> and <footer>. The page's current header code is seen below:

<body style="height: 2064.56px;">
    <div id="banner-container">
        <div style="display:flex;align-items:center;">
            <div style="flex:1;text-align:center;">
                Thanks to <a href="https://cloud.google.com/"> Google Cloud </a>, <a href="https://www.ovh.com/"> OVH </a>, <a href="https://notebooks.gesis.org"> GESIS Notebooks </a> and the <a href="https://turing.ac.uk"> Turing Institute </a>
                for supporting us! 🎉
            </div>
            <a class="btn"
                style="width:fit-content;height:fit-content;padding:10px;background-color:#e66581;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>
    ...
</body>

5.Missing first level heading:
<h3>
    Turn a Git repo into a collection of interactive notebooks
</h3>
<h4>
    New to Binder? Get started with a <a href="https://the-turing-way.netlify.app/communication/binder/zero-to-binder.html" 
    target="_blank"> Zero-to-Binder tutorial </a> in Julia, Python, or R.
</h4>

6. Device dependent event:
<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>

Your proposed HTML (or CSS), after change

I am proposing these changes are made to improve the page's accessibility:

1. Missing alt text:
<img id="logo" src="/static/logo.svg?v=fe52c40adc69454ba7536393f76ebd715e5fb75f5feafe16a27c47483eabf3311c14ed9fda905c49915d6dbf369ae68fb855a40dd05489a7b9542a9ee532e92b" width="390px" alt="Binder logo">

<img id="badge" src="/static/images/badge_logo.svg?v=51b20aa16836ea83f5ed69194c660eb85c4c2c1e32565312baedb7d534e3ffcf592881dbbe3da441d8293ded842755c906b91fb4aadf15220cf48111ebf701c4" alt="Binder badge logo">

<img class="icon" src="/static/images/markdown-icon.svg?v=d1115f582236340620dcc613052d5984f85f1742eed0e220e1a90c9f331bb71d3ef817bee9c6936ad6019c94cab66eb628528c929ca0bee3d25a4bdf634033cd" alt="Markdown icon">

<img class="icon" src="/static/images/rst-icon.svg?v=4846f2074f6bde5a7934a0bf36c3a12198f1d7fe7bb5e6545747a984db8fc9a3a7beb0205b072c7f44237f2d68d2ccffdcf983c18c9f91f5a4b5e0272ad9bb03" alt="restructured text icon">

2. Missing or invalid language:
<html style="margin-left: 380px;" lang="en">` or `<html style="margin-left: 380px;" lang="fr"> etc

3. Very low contrast:

Add class to HTML container div:
<div style="flex:1;text-align:center;" class="header-links">
    Thanks to <a href="https://cloud.google.com/"> Google Cloud </a>, <a 
    href="https://www.ovh.com/">OVH</a>,
    <a href="https://notebooks.gesis.org">GESIS Notebooks</a>
    and the <a href="https://turing.ac.uk"> Turing Institute </a> for supporting us! 🎉
 </div>

Increase contrast using CSS:
.header-links a{
    color: rgb(41, 124, 184); 
}

Use darker shade of background color
<a class="btn" style="width: fit-content; height: fit-content; padding: 10px; background-color: rgb(232, 53, 92); 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>

CSS:
.point-orange{
    border-color: rgb(247, 144, 42);
    color: rgb(247, 144, 42);
}
.point-red{
    border-color: rgb(204, 67, 101);
    color: rgb(204, 67, 101);
}
.point-blue{
    border-color: rgb(41, 124, 184);
    color: rgb(41, 124, 184);
}

HTML:
<button id="submit" class="btn-submit" type="submit">
    launch
</button>

CSS:
.btn-submit{
    background-color:rgb(223, 132, 41);
}

4. No page regions:
The entire page content has to be formatted using sematic HTML tags like <header>, <nav>, <section>, <aside> and <footer>. In this instance, the header was formatted.

<body style="height: 2064.56px;">
    <header>
        <nav id="banner-container">
            <ul style="display:flex;align-items:center;">
                <li style="flex:1;text-align:center;">
                    Thanks to <a href="https://cloud.google.com/"> Google Cloud </a>, <a href="https://www.ovh.com/"> OVH </a>, <a href="https://notebooks.gesis.org"> GESIS Notebooks </a> and the <a href="https://turing.ac.uk"> Turing Institute </a>
                    for supporting us! 🎉
                </li>
                <li>
                  <a class="btn"
                    style="width:fit-content;height:fit-content;padding:10px;background-color:#e66581;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>
                </li>
            </ul>
        </nav>
    </header>
    <main></main>
    <footer></footer>
</body>

CSS:
nav ul li{
    list-stye-type: none;
}

5.Missing first level heading:
HTML:
<h1>
    Turn a Git repo into a collection of interactive notebooks
</h1>
<h2>
    New to Binder? Get started with a <a href="https://the-turing-way.netlify.app/communication/binder/zero-to-binder.html" 
    target="_blank"> Zero-to-Binder tutorial </a> in Julia, Python, or R.
</h2>

CSS:
h1{
    font-size:1.25em;
}

h2{
    font-size:1.125em;
}

6. Device dependent event:
<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>

More info

No response

welcome · 2022-10-14T19:00:25Z

Thank you for opening your first issue in this project! Engagement like this is essential for open source projects! 🤗

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! 👋

Welcome to the Jupyter community! 🎉

minrk · 2022-10-17T12:23:28Z

These are great suggestions! Would you like to try to implement one or two of them?

The pages can be found here: https://github.com/jupyterhub/binderhub/tree/master/binderhub/templates

bl-aire · 2022-10-17T12:31:46Z

These are great suggestions! Would you like to try to implement one or two of them?

The pages can be found here: https://github.com/jupyterhub/binderhub/tree/master/binderhub/templates

Thanks for the review. I would love to implement them and I'll get to work right away.

sgibson91 · 2022-11-10T11:08:05Z

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

bl-aire added needs: review Outrreachy applicant proposal or microtask submission, needs review by a mentor outreachy-dec22 Issues related to the December 2022 cohort of Outreachy project: improve-accessibility Related to the accessibility project labels Oct 14, 2022

minrk removed the needs: review Outrreachy applicant proposal or microtask submission, needs review by a mentor label Oct 17, 2022

bl-aire mentioned this issue Oct 18, 2022

Improve BinderHub page Accessibility jupyterhub/binderhub#1559

Merged

sgibson91 closed this as completed Nov 10, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Accessibility: Improve accessibility of Binder page #57

Accessibility: Improve accessibility of Binder page #57

bl-aire commented Oct 14, 2022 •

edited

Loading

welcome bot commented Oct 14, 2022

minrk commented Oct 17, 2022

bl-aire commented Oct 17, 2022

sgibson91 commented Nov 10, 2022

Accessibility: Improve accessibility of Binder page #57

Accessibility: Improve accessibility of Binder page #57

Comments

bl-aire commented Oct 14, 2022 • edited Loading

What page is this for?

WAVE accessibility report

The HTML element to be changed

Your proposed HTML (or CSS), after change

More info

welcome bot commented Oct 14, 2022

minrk commented Oct 17, 2022

bl-aire commented Oct 17, 2022

sgibson91 commented Nov 10, 2022

bl-aire commented Oct 14, 2022 •

edited

Loading