Accessibility: page https://ipython.org/install.html

kerylefondji commented 1 year ago

What page is this for?

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

WAVE accessibility report

Wave accessiblity report

1 Error : 1 X Language missing or invalid.
48 Contrast errors : 48 X very low contrast.
18 Alerts : 14 X justified text, 1 X Suspicious alternative text, 2 X image with title, 1 X Suspicious link text.
3 Features: 3 X Linked image with alternative text.
18 Structural elements: 3 X Heading level 1, 5 X Heading level 3, 1 X heading level 4, 4 X Unordered list, 2 X Inline frame, 1 X Navigation, 1 X Main content, 1 X Footer.
1 ARIA: 1X ARIA Label.

Below is the screenshot of the wave accessibility report:

The HTML element to be changed

Language missing or invalid: The HTML tag <html xmlns="http://www.w3.org/1999/xhtml"> has to be changed.
48 X very low contrast : The CSS code color of all the following has to be change:

 <a href="https://jupyter.readthedocs.io/en/latest/install.html" target="_blank">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="https://jupyter.org">Jupyter</a>
<a class="referenceexternal"href="https://ipython.org/ipythondoc/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="reference external" href="http://stackoverflow.com/questions/tagged/ipython">StackOverflow</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 class="reference external" href="https://jupyter.org">Jupyter</a>
<a class="reference external" href="https://pypi.org/project/ipython/#history">PyPI</a>
<a href="donate.html">Find out more...</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="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>
<a href="http://sphinx-doc.org/">Sphinx</a>

Here is the CSS code that has to be change:

a {
  color: #ce5c00;  
}

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

div.footer, div.footer a {
  color: #888a85;
}

18 Alerts: a) 14 X justified text: The fully justified text has to be change in the CSS for the following:

<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- .........</p>
<div class="section" id="announcements">.....</div>
<p>IPython tends to be released on the last Friday of each month, this section updated rarely........</p>
<p><a class="reference external" href="news.html"></a></p>
<div class="section" id="citing-ipython">..........</div>
<p>Several of the authors of IPython are connected with academic and scientific research, .......</p>
<p>If IPython contributes to a project that leads to a scientific publication, please acknowledge ........</p>
<div class="toctree-wrapper compound"></div>
Here is the CSS code to change:
div.body {
  padding-right: 2em;
  text-align: justify;
}

 b) 1 X Suspicious alternative text: The image tag `<img class="logo" src="_static/IPy_header.png" 
          alt="Logo">` has to be change.
 c) 2 X image with title: The image tag `<img src="_static/nbviewer-thm-8.png" title="IPython 
                           Notebook Viewer">` and `<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/ipython-cookbook-2nd.png">` has to be change.
   d) 1 X Suspicious link text: The link `<a class="reference external" href="http://nbviewer.ipython.org/github/ptwobrussell/Mining-the-Social-Web-2nd Edition/tree/master/ipynb/">here</a> `has to be changed.

3 Features: 3 X Linked image with alternative text : These tag images which is within the links has to be change. They are ; <img class="logo" src="_static/IPy_header.png" alt="Logo"> , <img src="_static/jupytercon-logo.svg" width="180px" alt="JupyterCon 2017"> and <img alt="IPython clients" src="_images/ipy_0.13.png" style="width: 400px;">.

Your proposed HTML (or CSS), after change

Add a lang attribute to the html element whose value represents the primary language of document. i.e <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
If the background is light, then the text color has to be dark enough so users with low vision will be able to read the text. so by changing #ce5c00 color to #c25700, the #888a85 to #6D746D the contrast errors is fix .

a {
  color: #c25700;  
}

div.header div.rel a {
  color: #c25700;
  letter-spacing: .05em;
  font-weight: bold;
}

div.footer, div.footer a {
  color: #6D746D;
}

18 Alerts : a) Removing the justified styling will fix the alert .i.e

                                    div.body {
                                                       padding-right: 2em;
                                                        }

b) Alternative text should describe what is on the image. It is very important for screen readers because it allows describing the content of the image to the user. i.e <img class="logo" src="_static/IPy_header.png" alt="IPython image Logo">

c) Image alt value is used to describe an image textually so that screen readers user can understand what that image is. On the other hand, the image title value is simply used to provide an image with a title, but it’s less important for screen readers user than the alt value. So by replacing the title value by alt attribute value will fix the error alert. i.e

<img src="_static/nbviewer-thm-8.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/ipython-cookbook- 
                          2nd.png">

d) Where appropriate, reword the link text so that it is more descriptive of its destination when read out of context. Remove any extraneous text like "click here”, here ..... So replacing "here" by "IPython’s Notebook Viewer" fix the alert. i.e

<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

No response

welcome[bot] commented 1 year 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 1 year ago

Good suggestions, thank you!

kerylefondji commented 1 year ago

@minrk Thanks sir

sgibson91 commented 1 year ago

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

kerylefondji commented 1 year ago

ok thanks Sarah Gibson, it was a great pleasure for me to contribute to this issue.

Le jeu. 10 nov. 2022 à 12:08, Sarah Gibson @.***> a écrit :

Closed #54 https://github.com/jupyterhub/outreachy/issues/54 as completed.

— Reply to this email directly, view it on GitHub https://github.com/jupyterhub/outreachy/issues/54#event-7782123238, or unsubscribe https://github.com/notifications/unsubscribe-auth/AKPONPAPBGPBG7CDC7ADLE3WHTJSLANCNFSM6AAAAAARFKEKSY . You are receiving this because you authored the thread.Message ID: @.***>

jupyterhub / outreachy