Accessibility: ipython.org

Goodiec commented 2 years ago

What page is this for?

ipython.org

WAVE accessibility report

1 Error - Language missing or invalid 48 Contrast Errors - Very low contrast 18 Alerts - 14 X Justified text, 1 X Suspicious alternative text, 2 X Image with title, 1 Suspicious link text 3 Features - 3 X Linked image with alternative 16 Structural Elements - 3 X Heading level 1, 5 X Heading level 3, 1 Heading level 4, 4 X Unordered list, 1 Navigation, 1 Main content, 1 Footer, 1 ARIA label

wave-ipython

Suggestions

Language missing or invalid: Add a lang attribute to the HTML element (e.g. ) whose value represents the primary language of document. Element(s) to be changed: The tag is to be modified to include a lang attribute with the appropriate value. This is the current state of the HTML tag -
Very low contrast errors: The contrast between the text color and the background color should be increased to at least 4.5:1 for small text and 3:1 for large text. The footer text can be changed to #767674 from #888A85 while the other texts with low contrast can be changed from #CE5C00 to #C25700. Element(s) to be changed: All the orange texts on the page (mostly links and nav items) and the texts in the footer. The footer texts should be changed from #888A85 to #767674 and the other affected texts should be changed from #CE5C00 to #C25700
Fully Justified text: The best way to avoid the problem is to avoid justified text.
Suspicious alternative text: The alternative text for the image should be improved to something more descriptive of the content or function of the image like "This is an image of IPython's logo".
Image with title: The alt attribute with information about the image's content should be used.
Suspicious link text: Where appropriate, the link text should be reworded to be more descriptive of its destination when read out of context.

The HTML element to be changed

1. Language missing or invalid
- <html xmlns="http://www.w3.org/1999/xhtml" style="margin-left: 380px;">

2. Very low contrast errors
- <a href="https://jupyter.readthedocs.io/en/latest/install.html" target="_blank" style="color: rgb(206, 92, 0); background-color: rgb(255, 255, 255);">Install</a>
- <a href="documentation.html">Documentation</a>
- <a href="project.html">Project</a>
- <a href="https://jupyter.org/" target="_blank">Jupyter</a>
- <a href="news.html">News</a>
- <a href="citing.html">Cite</a>
- <a href="donate.html">Donate</a>
- <a href="books.html">Books</a>
- a class="reference external" href="http://stackoverflow.com/questions/tagged/ipython">Stack Overflow</a>
- <a class="reference external" href="https://mail.python.org/mailman/listinfo/ipython-dev">Mailing list</a>
- <a class="reference external" href="https://github.com/ipython/ipython/issues">File a bug</a>
- <a class="reference external" href="http://www.reddit.com/r/IPython">Reddit</a>
- <a class="reference external" href="https://mail.python.org/mailman/listinfo/ipython-dev">Mailing list</a>
- <a class="reference external" href="https://gitter.im/ipython/ipython">Development Chat Room</a>
- <a class="reference external" href="https://github.com/ipython/ipython/wiki/Dev:-Index">Development information</a>
- <a class="reference external" href="http://travis-ci.org/#!/ipython/ipython">Travis CI</a>
- a class="reference external" href="https://github.com/ipython/ipython/wiki">Wiki</a>
- <a href="donate.html">Find out more...</a>
- <a class="reference external" href="https://jupyter.org">Jupyter</a>
- <a class="reference external" href="https://ipython.org/ipython-doc/stable/interactive/reference.html#gui-event-loop-support">GUI toolkits</a>
- <a class="reference external" href="https://ipython.org/ipython-doc/stable/interactive/reference.html#embedding-ipython">embeddable</a>
- <a class="reference external" href="https://ipyparallel.readthedocs.io/en/latest/">parallel computing</a>
- <a class="reference external" href="http://nbviewer.ipython.org/github/ipython/ipython/blob/master/examples/Index.ipynb">official example collection </a>
- <a class="reference external" href="https://github.com/ipython/ipython/wiki/A-gallery-of-interesting-IPython-Notebooks">
notebook gallery</a>
- <a class="reference internal" href="presentation.html"><span class="doc">talks and presentations</span>
</a>
- <a class="reference external" href="documentation.html">extensive documentation</a>
- <a class="reference external" href="https://github.com/ipython/ipython/wiki/Projects-using-IPython">other projects</a>
- <a class="reference internal" href="#citing"><span class="std std-ref">cite the project</span></a>
- <a class="headerlink" href="#jupyter-and-the-future-of-ipython" title="Permalink to this headline">¶</a>
- <a class="reference external" href="https://jupyter.org">Jupyter</a>
- <a class="headerlink" href="#announcements" title="Permalink to this headline">¶</a>
- <a class="reference external" href="https://pypi.org/project/ipython/#history">PyPI</a>
- <a class="reference external" href="http://ipython.readthedocs.io/en/stable/whatsnew/version7.html">release notes</a>
- <a class="reference external" href="http://ipython.readthedocs.io/en/stable/whatsnew/version6.html#ipython-6-0">release notes</a>
- <a class="reference external" href="http://jupytercon.com">see the JupyterCon website</a>
- <a class="reference external" href="http://ipython.readthedocs.io/en/stable/whatsnew/version5.html#ipython-5-0">release notes</a>
- <a class="reference external" href="books.html">Learning IPython for Interactive Computing and Data Visualization</a>
- <a class="reference external" href="https://github.com/damianavila">Damian Avila</a>
- <a class="reference external" href="http://MiningTheSocialWeb.com">Mining the Social Web</a>
- <a class="reference external" href="http://amzn.to/GPd59m">book</a>
- <a class="reference external" href="http://bit.ly/MiningTheSocialWeb2E">repository</a>
- <a class="reference external" href="http://nbviewer.ipython.org/github/ptwobrussell/Mining-the-Social-Web-2nd-Edition/tree/master/ipynb/">here</a>
- <a class="reference external" href="news.html">More news…</a>
- <a class="headerlink" href="#citing-ipython" title="Permalink to this headline">¶</a>
- <a class="reference external" href="citing.html">ready-made citation entry</a>
- <div class="footer" role="contentinfo">© Copyright the IPython development team. Created using<a href="http://sphinx-doc.org/">Sphinx</a>1.8.5.</div>

CSS for nav items:
div.header div.rel a {
    color: #ce5c00;
    letter-spacing: .05em;
    font-weight: bold;
}

CSS for link texts:
a {
    color: #ce5c00;
}

CSS for permalinks:
a.headerlink {
    visibility: hidden;
    color: #dddddd;
    padding-left: .3em;
}

CSS for footer text and link text:
div.footer, div.footer a {
    color: #888a85;
}

3. Justified Texts
- <div class="body" role="main">...</div>
- <p>IPython provides a rich architecture for interactive computing with:</p>
- <p>To get started with IPython in the Jupyter Notebook, see our...</p>
- <p>To learn more about IPython, you can download our...</p>
- <p>IPython supports Python 2.7 and 3.3 or newer. Our older 1.x series supports Python 2.6 and 3.2.</p>
- <div class="section" id="jupyter-and-the-future-of-ipython">...</div>
- <p>IPython is a growing project, with increasingly language-agnostic components. IPython 3.x was...</p>
- <div class="section" id="announcements">...</div>
- <p>IPython tends to be released on the last Friday of each month, this section updated rarely. Please have a look at the release history on<a class="reference external" href="https://pypi.org/project/ipython/#history">PyPI</a>.</p>
- <p><a class="reference external" href="news.html">More news…</a></p>
- <div class="section" id="citing-ipython">...</div>
- <p>Several of the authors of IPython are connected with academic and scientific research, so it is important for us to be able to show the impact of our work in other projects and fields.</p>
- <p>If IPython contributes to a project that leads to a scientific publication, please acknowledge this fact by citing the project. You can use this<a class="reference external" href="citing.html">ready-made citation entry</a>.</p>
- <div class="toctree-wrapper compound"></div>

CSS:
div.body {
    padding-right: 2em;
    text-align: justify;
}

4. Suspicious alternative text
- <img class="logo" src="_static/IPy_header.png" alt="Logo">

5. Image with title
- <img src="_static/nbviewer-thm-9.png" title="IPython Notebook Viewer">
- <img title="Packt Publishing donates a portion of the proceeds from this book to support IPython's development." width="160" height="200" id="sidebar-book-cover" style="margin-bottom: 10px;" src="_static/jupyter-for-ds.png">

6. Suspicious link text
- <a class="reference external" href="http://nbviewer.ipython.org/github/ptwobrussell/Mining-the-Social-Web-2nd Edition/tree/master/ipynb/">here</a>

Your proposed HTML (or CSS), after change

1. Adding a lang attribute to the HTML opening tag fixes the _Language missing or invalid_ error
<html xmlns="http://www.w3.org/1999/xhtml" style="margin-left: 380px;" lang="en">

2. Adjusting the CSS rule for the affected elements and changing the background color of just the "Find out more..." link text in the "Support IPython" block or the background color for that block to #ffffff fixes the _Very low contrast_ errors 

CSS for nav items:
div.header div.rel a {
    color: #C25700;
    letter-spacing: .05em;
    font-weight: bold;
}

CSS for links:
a {
    color: #C25700;
}

CSS for permalinks:
a.headerlink {
    visibility: hidden;
    color: #757575;
    padding-left: .3em;
}

CSS for footer text and link text:
div.footer, div.footer a {
    color: #767674;
}

CSS for the "Find out more..." link text in "Support IPython" side block:
div.sphinxsidebar a, div.header a {
    text-decoration: none;
    background-color: #ffffff;
}

3. Removing text-align: justify from the div.body rule fixes all the _Justified text_ alerts
div.body {
    padding-right: 2em;
}

4. Adding a more descriptive alternative text fixes the _Suspicious alternative text_ alert
- <img class="logo" src="_static/IPy_header.png" alt="This is an image of IPython's logo">

5. Replacing the title attribute with an alt attribute fixes the _Image with title_ alert
- <img src="_static/nbviewer-thm-9.png" alt="IPython Notebook Viewer">
- <img alt="Packt Publishing donates a portion of the proceeds from this book to support IPython's development." width="160" height="200" id="sidebar-book-cover" style="margin-bottom: 10px;" src="_static/jupyter-for-ds.png">

6. on <a class="reference external" href="http://nbviewer.ipython.org/github/ptwobrussell/Mining-the-Social-Web-2nd-Edition/tree/master/ipynb/">IPython’s Notebook Viewer</a>

More info

Wave accessibility test result after the above changes have been implemented on the ipython.org page

new-evaluation

new-evaluation2

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:

minrk commented 2 years ago

Those are all great suggestions, thank you!

sgibson91 commented 2 years ago

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

jupyterhub / outreachy