What page is this for?
https://ipython.org/project.html
WAVE accessibility report
![Screenshot-project](https://user-images.githubusercontent.com/93148657/196050978-176216ac-2ef7-442b-9678-8ac7e95f3d22.png)
Evaluation Tools Used:
- Wave Accessibility Tool
- Colour Contrast Checker
1. Errors
1 X Language missing or invalid: The language of the document is not identified or a lang attribute value is invalid.
2. Contrast Errors
24 X Very low contrast: Very low contrast between text and background colors.
3. 6 X Alerts
3 X Justified text: Fully justified text is present.
1 X Suspicious alternative text: Alternative text is likely insufficient or contains extraneous information.
2 X Image with title: An image has a title attribute value but no alt value.
The HTML element to be changed
<html xmlns="http://www.w3.org/1999/xhtml" style="margin-left: 380px;">
<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" style="color: rgb(206, 92, 0); background-color: rgb(255, 255, 255);">Documentation</a>
<a href="#" style="color: rgb(206, 92, 0); background-color: rgb(255, 255, 255);">Project</a>
<a href="https://jupyter.org/" target="_blank" style="color: rgb(206, 92, 0); background-color: rgb(255, 255, 255);">Jupyter</a>
<a href="news.html" style="color: rgb(206, 92, 0); background-color: rgb(255, 255, 255);">News</a>
<a href="citing.html" style="color: rgb(206, 92, 0); background-color: rgb(255, 255, 255);">Cite</a>
<a href="donate.html" style="color: rgb(206, 92, 0); background-color: rgb(255, 255, 255);">Donate</a>
<a href="books.html" style="color: rgb(206, 92, 0); background-color: rgb(255, 255, 255);">Books</a>
<li><a class="reference external" href="http://stackoverflow.com/questions/tagged/ipython" style="color: rgb(206, 92, 0); background-color: rgb(255, 255, 255);">Stack Overflow</a></li>
<li><a class="reference external" href="https://mail.python.org/mailman/listinfo/ipython-dev" style="color: rgb(206, 92, 0); background-color: rgb(255, 255, 255);">Mailing list</a></li>
<li><a class="reference external" href="https://github.com/ipython/ipython/issues" style="color: rgb(206, 92, 0); background-color: rgb(255, 255, 255);">File a bug</a></li>
<li><a class="reference external" href="http://www.reddit.com/r/IPython" style="color: rgb(206, 92, 0); background-color: rgb(255, 255, 255);">Reddit</a></li>
<li><a class="reference external" href="https://mail.python.org/mailman/listinfo/ipython-dev" style="color: rgb(206, 92, 0); background-color: rgb(255, 255, 255);">Mailing list</a></li>
<li><a class="reference external" href="https://gitter.im/ipython/ipython" style="color: rgb(206, 92, 0); background-color: rgb(255, 255, 255);">Development Chat Room</a></li>
<li><a class="reference external" href="https://github.com/ipython/ipython/wiki/Dev:-Index" style="color: rgb(206, 92, 0); background-color: rgb(255, 255, 255);">Development information</a></li>
<li><a class="reference external" href="http://travis-ci.org/#!/ipython/ipython" style="color: rgb(206, 92, 0); background-color: rgb(255, 255, 255);">Travis CI</a></li>
<li><a class="reference external" href="https://github.com/ipython/ipython/wiki" style="color: rgb(206, 92, 0); background-color: rgb(255, 255, 255);">Wiki</a></li>
<li><a class="reference external" href="https://github.com/ipython/ipython/wiki" style="color: rgb(206, 92, 0); background-color: rgb(255, 255, 255);">Wiki</a></li>
<a href="donate.html" style="color: rgb(206, 92, 0); background-color: rgb(225, 232, 236);">Find out more...</a>
<a class="reference external" href="https://github.com/ipython" style="color: rgb(206, 92, 0); background-color: rgb(255, 255, 255);">ipython</a>
<a class="reference external" href="https://jupyter.org/" style="color: rgb(206, 92, 0); background-color: rgb(255, 255, 255);">Project Jupyter</a>`
`<img class="logo" src="_static/IPy_header.png" alt="Logo">
<img src="_static/nbviewer-thm-1.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/learning-jupyter-book.png">
Your proposed HTML (or CSS), after change
<!--1. Errors-->
<!--Insert Lang attribute in html tag-->
<html xmlns="http://www.w3.org/1999/xhtml" style="margin-left: 380px;" lang= "en">
<!--2. Contrast Errors
Improve the contrast of the link by changing the color style from rgb(206, 92, 0) to rgb(140, 45, 1)-->
<a href="https://jupyter.readthedocs.io/en/latest/install.html" target="_blank" style="color: rgb(140, 45, 1); background-color: rgb(255, 255, 255);">Install</a>
<a href="documentation.html" style="color: rgb(140, 45, 1); background-color: rgb(255, 255, 255);">Documentation</a>
<a href="#" style="color: rgb(140, 45, 1); background-color: rgb(255, 255, 255);">Project</a>
<a href="https://jupyter.org/" target="_blank" style="color: rgb(140, 45, 1); background-color: rgb(255, 255, 255);">Jupyter</a>
<a href="news.html" style="color: rgb(140, 45, 1); background-color: rgb(255, 255, 255);">News</a>
<a href="citing.html" style="color: rgb(140, 45, 1); background-color: rgb(255, 255, 255);">Cite</a>
<a href="donate.html" style="color: rgb(140, 45, 1); background-color: rgb(255, 255, 255);">Donate</a>
<a href="books.html" style="color: rgb(140, 45, 1); background-color: rgb(255, 255, 255);">Books</a>
<li><a class="reference external" href="http://stackoverflow.com/questions/tagged/ipython" style="color: rgb(140, 45, 1); background-color: rgb(255, 255, 255);">Stack Overflow</a></li>
<li><a class="reference external" href="https://mail.python.org/mailman/listinfo/ipython-dev" style="color: rgb(140, 45, 1); background-color: rgb(255, 255, 255);">Mailing list</a></li>
<li><a class="reference external" href="https://github.com/ipython/ipython/issues" style="color: rgb(140, 45, 1); background-color: rgb(255, 255, 255);">File a bug</a></li>
<li><a class="reference external" href="http://www.reddit.com/r/IPython" style="color: rgb(140, 45, 1); background-color: rgb(255, 255, 255);">Reddit</a></li>
<li><a class="reference external" href="https://mail.python.org/mailman/listinfo/ipython-dev" style="color: rgb(140, 45, 1); background-color: rgb(255, 255, 255);">Mailing list</a></li>
<li><a class="reference external" href="https://gitter.im/ipython/ipython" style="color: rgb(140, 45, 1); background-color: rgb(255, 255, 255);">Development Chat Room</a></li>
<li><a class="reference external" href="https://github.com/ipython/ipython/wiki/Dev:-Index" style="color: rgb(140, 45, 1); background-color: rgb(255, 255, 255);">Development information</a></li>
<li><a class="reference external" href="http://travis-ci.org/#!/ipython/ipython" style="color: rgb(140, 45, 1); background-color: rgb(255, 255, 255);">Travis CI</a></li>
<li><a class="reference external" href="https://github.com/ipython/ipython/wiki" style="color: rgb(140, 45, 1); background-color: rgb(255, 255, 255);">Wiki</a></li>
<li><a class="reference external" href="https://github.com/ipython/ipython/wiki" style="color: rgb(140, 45, 1); background-color: rgb(255, 255, 255);">Wiki</a></li>
<a href="donate.html" style="color: rgb(140, 45, 1); background-color: rgb(225, 232, 236);">Find out more...</a>
<a class="reference external" href="https://github.com/ipython" style="color: rgb(140, 45, 1); background-color: rgb(255, 255, 255);">ipython</a>
<a class="reference external" href="https://jupyter.org/" style="color: rgb(140, 45, 1); background-color: rgb(255, 255, 255);">Project Jupyter</a>
<!--3. 6 X Alerts
1 X Suspicious alternative text: Let the screen reader know this is an image through alternative text and make it more descriptive.-->
<img class="logo" src="_static/IPy_header.png" alt="IPY header Image logo">
<!--2 X Image with title: alternative attribute used instead of title attribute.-->
<img src="_static/nbviewer-thm-1.png" alt="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/learning-jupyter-book.png" alt="Packt Publishing image IPython's development">
More info
I will suggest using semantic elements like <main>
, <headaer>
, <footer>
, <article>
, <nav>
etc where appropriate instead of <div>
all through.
Semantic Elements are paramount because they make our code easy to read, accessible, and equally lead to a more consistent code.
This will improve how screen readers read and interpret our web pages, hence, improved accessibility.