jupyterhub / outreachy

Tasks, management and documentation for Outreachy Internships in JupyterHub
https://jupyterhub-outreachy.readthedocs.io
BSD 3-Clause "New" or "Revised" License
33 stars 25 forks source link

Accessibility: ipython books #103

Closed Bhaybhiisparks closed 1 year ago

Bhaybhiisparks commented 1 year ago

What page is this for?

https://ipython.org/books.html

WAVE accessibility report

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

WAVE PREVIEW for the https://ipython.org/books.html page

ave issue 1 wave issue 2 wave issue 3 wave issue 4 wave issue 5

The HTML element to be changed

1. The language attribute is missing in the following line of code
<html xmlns="http://www.w3.org/1999/xhtml" style="margin-left: 380px;">

2. The following line of code includes an image alt text containing extraneous information (word-LOGO).
 <a href="index.html">
<img class="logo" src="_static/IPy_header.png" alt="Logo">
</a>

3.Very low contrast between text and background color in the line(s) of code below. 
<div class="rel">
<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 </a>
</div>

4. FULLY JUSTIFIED TEXT 
<div class="body" role="main">
<div class="section" id="books-and-videos">
<h1>
Books And Videos
<a class="headerlink" href="#books-and-videos" title="Permalink to this headline">
¶
</a>
</h1>
<div class="section" id="ipython-interactive-computing-and-visualization-cookbook-second-edition">
<h2>
IPython Interactive Computing and Visualization Cookbook, Second Edition
<a class="headerlink" href="#ipython-interactive-computing-and-visualization-cookbook-second-edition" title="Permalink to this headline">
¶
</a>
</h2>
<a class="reference external image-reference" href="_static/ipython-cookbook-2nd.png">
<img alt="IPython Cookbook, Second Edition, by Cyrille Rossant" src="_images/ipython-cookbook-2nd.png" style="width: 200px;">
</a>
<ul class="simple">
<li>
<a class="reference external" href="http://ipython-books.github.io/">
IPython Interactive Computing and Visualization Cookbook, Second Edition
</a>
</li>
<li>
By
<a class="reference external" href="http://cyrille.rossant.net">
Cyrille Rossant
</a>
</li>
<li>
548 pages
</li>
<li>
Packt Publishing
</li>
<li>
January 2018
</li>
</ul>
<p>
Python is one of the leading open source platforms for data science and numerical computing. IPython and the associated Jupyter Notebook offer efficient interfaces to Python for data analysis and interactive visualization, and they constitute an ideal gateway to the platform.
</p>
<p>
IPython Interactive Computing and Visualization Cookbook, Second Edition contains many ready-to-use, focused recipes for high-performance scientific computing and data analysis, from the latest IPython/Jupyter features to the most advanced tricks, to help you write better and faster code. You will apply these state-of-the-art methods to various real-world examples, illustrating topics in applied mathematics, scientific modeling, and machine learning.
</p>

<p>
The first part of the book covers programming techniques: code quality and reproducibility, code optimization, high-performance computing through just-in-time compilation, parallel computing, and graphics card programming. The second part tackles data science, statistics, machine learning, signal and image processing, dynamical systems, and pure and applied mathematics.
</p>
</div>
<div class="section" id="jupyter-for-data-science">

<h2>
Jupyter for Data Science

<a class="headerlink" href="#jupyter-for-data-science" title="Permalink to this headline">
¶
</a>
</h2>
<a class="reference external image-reference" href="_static/jupyter-for-ds.png">

<img alt="Jupyter For dataScience" src="_images/jupyter-for-ds.png" style="width: 200px;">
</a>

<ul class="simple">
<li>

<a class="reference external" href="https://www.packtpub.com/big-data-and-business-intelligence/jupyter-data-science">
Jupyter for Data Science
</a>
</li>
<li>
By Dan Toomey
</li>
<li>
242 pages
</li>
<li>
Packt Publishing
</li>
<li>
October 2017
</li>
</ul>

<p>
Jupyter Notebook is a web-based environment that enables interactive computing in notebook documents. It allows you to create documents that contain live code, equations, and visualizations. This book is a comprehensive guide to getting started with data science using the popular Jupyter notebook.
</p>

<p>
If you are familiar with Jupyter notebook and want to learn how to use its capabilities to perform various data science tasks, this is the book for you! From data exploration to visualization, this book will take you through every step of the way in implementing an effective data science pipeline using Jupyter. You will also see how you can utilize Jupyter’s features to share your documents and codes with your colleagues. The book also explains how Python 3, R, and Julia can be integrated with Jupyter for various data science tasks.
</p>

<p>
By the end of this book, you will comfortably leverage the power of Jupyter to perform various tasks in data science successfully.
</p>
</div>

<div class="section" id="jupyter-in-depth">
<h2>
Jupyter In Depth

<a class="headerlink" href="#jupyter-in-depth" title="Permalink to this headline">
¶
</a>
</h2>
<a class="reference external image-reference" href="_static/jupyter-in-depth.png">

<img alt="jupyter-in-depth" src="_images/jupyter-in-depth.png" style="width: 200px;">
</a>

<ul class="simple">
<li>

<a class="reference external" href="https://www.packtpub.com/big-data-and-business-intelligence/jupyter-depth-video">
Jupyter In Depth
</a>
</li>
<li>
Jesse Bacon Thursday, August 31, 2017
</li>
<li>
1 hour and 43 minutes
</li>
<li>
Packt Publishing
</li>
<li>
August 2017
</li>
</ul>

<p>
Jupyter has emerged as a popular tool for code exposition and the sharing of research artefacts. It has interactive display capabilities and the pluggable kernel system allows data scientists to switch back and forth between multiple programming languages.
</p>

<p>
The course will walk you through the core modules and standard capabilities of the console, client, and notebook server. By exploring the Python language, you will be able to get starter projects for configurations management, file system monitoring, and encrypted backup solutions for safeguarding their data. In the final Sections, you will be able to build dashboards in a Jupyter notebook to report back information about the project and the status of various Jupyter components.
</p>
</div>

<div class="section" id="jupyter-notebook-for-all-part-ii-video">

<h2>
Jupyter Notebook for All - Part II [Video]

<a class="headerlink" href="#jupyter-notebook-for-all-part-ii-video" title="Permalink to this headline">
¶
</a>
</h2>
<a class="reference external image-reference" href="_static/jupyter-notebook-for-all-II.jpg">
<img alt="Jupyter Notebook for All - Part II" src="_images/jupyter-notebook-for-all-II.jpg" style="width: 200px;">
</a>

<ul class="simple">
<li>

<a class="reference external" href="https://www.packtpub.com/big-data-and-business-intelligence/jupyter-notebook-all-%E2%80%93-part-ii-video">
Jupyter Notebook for All - Part II
</a>
</li>
<li>
By Dan Toomey
</li>
<li>
1 hour and 14 minutes
</li>
<li>
Packt Publishing
</li>
<li>
March 2017
</li>
</ul>

<p>
Jupyter Notebook is a web-based environment that enables interactive computing in notebook documents. It allows you to create and share documents that contain live code, equations, visualizations, and explanatory text. The Jupyter Notebook system is extensively used in domains such as data cleaning and transformation, numerical simulation, statistical modeling, machine learning, and much more. This tutorial starts with a detailed overview of the Jupyter Notebook system and its installation in different environments. Next you will learn to integrate the Jupyter system with different programming languages such as R, Python, JavaScript, and Julia; further, you’ll explore the various versions and packages that are compatible with the Notebook system. Moving ahead, you’ll master interactive widgets, namespaces, and working with Jupyter in multiuser mode. Towards the end, you will use Jupyter with a big dataset and will apply all the functionalities learned throughout the video.
</p>
</div>

<div class="section" id="jupyter-notebook-for-all-part-i-video">
<h2>
Jupyter Notebook for All - Part I [Video]

<a class="headerlink" href="#jupyter-notebook-for-all-part-i-video" title="Permalink to this headline">
¶
</a>
</h2>
<a class="reference external image-reference" href="_static/jupyter-notebook-for-all-I.jpg">

<img alt="Jupyter Notebook for All - Part I" src="_images/jupyter-notebook-for-all-I.jpg" style="width: 200px;">
</a>

<ul class="simple">
<li>
<a class="reference external" href="https://www.packtpub.com/big-data-and-business-intelligence/jupyter-notebook-all-%E2%80%93-part-i-video">
Jupyter Notebook for All - Part I
</a>
</li>
<li>
By Dan Toomey
</li>
<li>
1 hour 23 minutes
</li>
<li>
Packt Publishing
</li>
<li>
March 2017
</li>
</ul>

<p>
Jupyter Notebook is a web-based environment that enables interactive computing in notebook documents. It allows you to create and share documents that contain live code, equations, visualizations, and explanatory text. The Jupyter Notebook system is extensively used in domains such as data cleaning and transformation, numerical simulation, statistical modeling, machine learning, and much more. This tutorial starts with a detailed overview of the Jupyter Notebook system and its installation in different environments. Next you will learn to integrate the Jupyter system with different programming languages such as R, Python, JavaScript, and Julia; further, you’ll explore the various versions and packages that are compatible with the Notebook system. Moving ahead, you’ll master interactive widgets, namespaces, and working with Jupyter in multiuser mode. Towards the end, you will use Jupyter with a big dataset and will apply all the functionalities learned throughout the video.
</p>
</div>
<div class="section" id="learning-jupyter">
Heading level 2
<h2>
Learning Jupyter

<a class="headerlink" href="#learning-jupyter" title="Permalink to this headline">
¶
</a>
</h2>
<a class="reference external image-reference" href="_static/learning-jupyter-book.png">
Linked image with alternative textRedundant alternative text
<img alt="Learning Jupyter" src="_images/learning-jupyter-book.png" style="width: 200px;">
</a>
Unordered list
<ul class="simple">
<li>

<a class="reference external" href="https://www.packtpub.com/big-data-and-business-intelligence/learning-jupyter">
Learning Jupyter
</a>
</li>
<li>
By Dan Toomey
</li>
<li>
238 Pages
</li>
<li>
Packt Publishing
</li>
<li>
November 2016
</li>
</ul>
<p>
Jupyter Notebook is a web-based environment that enables interactive computing in notebook documents. It allows you to create and share documents that contain live code, equations, visualizations, and explanatory text. The Jupyter Notebook system is extensively used in domains such as data cleaning and transformation, numerical simulation, statistical modeling, machine learning, and much more.
</p>

<p>
This book starts with a detailed overview of the Jupyter Notebook system and its installation in different environments. Next we’ll help you will learn to integrate Jupyter system with different programming languages such as R, Python, JavaScript, and Julia and explore the various versions and packages that are compatible with the Notebook system. Moving ahead, you master interactive widgets, namespaces, and working with Jupyter in a multiuser mode.
</p>
<p>
Towards the end, you will use Jupyter with a big data set and will apply all the functionalities learned throughout the book.
</p>
</div>

<div class="section" id="mastering-ipython-4-0">

<h2>
Mastering IPython 4.0

<a class="headerlink" href="#mastering-ipython-4-0" title="Permalink to this headline">
¶
</a>
</h2>
<a class="reference external image-reference" href="_static/mastering-ipython-book.png">
Linked image with alternative textRedundant alternative text
<img alt="Mastering IPython" src="_images/mastering-ipython-book.png" style="width: 200px;">
</a>

<ul class="simple">
<li>

<a class="reference external" href="https://www.packtpub.com/big-data-and-business-intelligence/mastering-ipython-40">
Mastering IPython 4.0
</a>
</li>
<li>
by

<a class="reference external" href="https://www.packtpub.com/books/info/authors/thomas-bitterman">
Thomas Bitterman
</a>
</li>
<li>
382 pages
</li>
<li>
Packt Publishing
</li>
<li>
May 2016
</li>
<li>
Code available under MIT License

<a class="reference external" href="https://github.com/PacktPublishing/Mastering-IPython-4">
on GitHub
</a>
</li>
</ul>

<p>
This book will get IPython developers up to date with the latest advancements in IPython and dive deep into interactive computing with IPython. This an advanced guide on interactive and parallel computing with IPython will explore advanced visualizations and high-performance computing with IPython in detail.
</p>
<p>
You will quickly brush up your knowledge of IPython kernels and wrapper kernels, then we’ll move to advanced concepts such as testing, Sphinx, JS events, interactive work, and the ZMQ cluster. The book will cover topics such as IPython Console Lexer, advanced configuration, and third-party tools.
</p>

<p>
By the end of this book, you will be able to use IPython for interactive and parallel computing in a high-performance computing environment.
</p>
</div>
Justified text
<div class="section" id="ipython-cookbook">

<h2>
IPython Cookbook
<a class="headerlink" href="#ipython-cookbook" title="Permalink to this headline">
¶
</a>
</h2>
<a class="reference external image-reference" href="_static/ipython-cookbook.jpg">
<img alt="IPython Cookbook" src="_images/ipython-cookbook.jpg" style="width: 200px;">
</a>
<ul class="simple">
<li>

<a class="reference external" href="http://ipython-books.github.io/cookbook/">
IPython Interactive Computing and Visualization Cookbook
</a>
</li>
<li>
by
<a class="reference external" href="http://cyrille.rossant.net">
Cyrille Rossant
</a>
</li>
<li>
512 pages
</li>
<li>
Packt Publishing
</li>
<li>
September 25 2014
</li>
</ul>

<p>
This is an advanced-level guide to IPython for data science, and the sequel of the IPython minibook.
</p>
</div>
<div class="section" id="ipython-minibook">
<h2>
IPython Minibook
<a class="headerlink" href="#ipython-minibook" title="Permalink to this headline">
¶
</a>
</h2>
<a class="reference external image-reference" href="_static/ipython-book.jpg">
<img alt="IPython Minibook" src="_images/ipython-book.jpg" style="width: 200px;">
</a>
Unordered list
<ul class="simple">
<li>
<a class="reference external" href="http://ipython-books.github.io/minibook/">
Learning IPython for Interactive Computing and Data Visualization
</a>
</li>
<li>
by
<a class="reference external" href="http://cyrille.rossant.net">
Cyrille Rossant
</a>
</li>
<li>
175 pages
</li>
<li>
Packt Publishing
</li>
<li>
October 25 2015
</li>
</ul>
<p>
This book is a beginner-level introduction to Python for data analysis, covering IPython, the Jupyter Notebook, pandas, NumPy, matplotlib, and many other libraries. There is an introduction to the Python programming language for complete beginners. There are also contents for more advanced users, like parallel computing with IPython and high-performance computing with Numba and Cython.
</p>
</div>
<div class="section" id="get-your-book-on-this-page">
Heading level 2
<h2>
Get your Book on this page
<a class="headerlink" href="#get-your-book-on-this-page" title="Permalink to this headline">
¶
</a>
</h2>
<p>
Getting your book on this page will automatically add it on the sidebar.
</p>
<p>
Thanks for writing about IPython or Jupyter, we would be happy to get a link to your book on this page, the simplest would be to submit a GitHub Pull Request against
Very low contrast
<a class="reference external" href="https://github.com/ipython/ipython-website/blob/master/books.rst">
The IPython website repository page
</a>

. You can also directly contact us in order to do that for you.
</p>
<p>
A requirement for a book to be listed on this page is that all the code examples included in the book are licensed under an OSI-approved license. Besides, we recommend non-copyleft license such as CC-0.
</p>
<p>
We reserve the right to refuse or remove any publication at our discretion.
</p>
<p>
You can get more information by reading our
<a class="reference internal" href="books_policy.html#books-policy">
Very low contrast
<span class="std std-ref">
Books Policy
</span>
</a>

.
</p>
</div>
</div>
</div>

5. Very low contrast between the link text and the background color of the following lines of code. 
-- <a class="headerlink" href="#books-and-videos" title="Permalink to this headline"> ¶ </a>

-- <a class="headerlink" href="#ipython-interactive-computing-and-visualization-cookbook-second-edition" title="Permalink to this headline"> ¶ </a> 

-- <a class="reference external" href="http://ipython-books.github.io/"> IPython Interactive Computing and Visualization Cookbook, Second Edition </a>

-- <a class="reference external" href="http://cyrille.rossant.net"> Cyrille Rossant </a>

-- <a class="reference external" href="https://www.packtpub.com/big-data-and-business-intelligence/jupyter-data-science">
Jupyter for Data Science
</a>

-- <a class="reference external" href="https://www.packtpub.com/big-data-and-business-intelligence/jupyter-depth-video">
Jupyter In Depth
</a>

-- <a class="reference external" href="https://www.packtpub.com/big-data-and-business-intelligence/jupyter-notebook-all-%E2%80%93-part-ii-video">
Jupyter Notebook for All - Part II
</a>

-- <a class="reference external" href="https://www.packtpub.com/big-data-and-business-intelligence/jupyter-notebook-all-%E2%80%93-part-i-video">
Jupyter Notebook for All - Part I
</a>

-- <a class="reference external" href="https://www.packtpub.com/big-data-and-business-intelligence/learning-jupyter">
Learning Jupyter
</a> 

-- <a class="reference external" href="https://www.packtpub.com/big-data-and-business-intelligence/mastering-ipython-40">
Mastering IPython 4.0
</a>

--<a class="reference external" href="https://www.packtpub.com/books/info/authors/thomas-bitterman">
Thomas Bitterman
</a>

-- <a class="reference external" href="https://github.com/PacktPublishing/Mastering-IPython-4">
on GitHub
</a>

-- <a class="reference external" href="http://ipython-books.github.io/cookbook/">
IPython Interactive Computing and Visualization Cookbook
</a>

-- <a class="reference external" href="http://cyrille.rossant.net">
Cyrille Rossant
</a>

-- <a class="reference external" href="http://ipython-books.github.io/minibook/">
Learning IPython for Interactive Computing and Data Visualization
</a>

-- <a class="reference external" href="http://cyrille.rossant.net">
Cyrille Rossant
</a>

-- <a class="reference external" href="https://github.com/ipython/ipython-website/blob/master/books.rst">
The IPython website repository page
</a>

-- <span class="std std-ref">
Books Policy
</span>

-- <div class="footer" role="contentinfo">
© Copyright the IPython development team. Created using
<a href="http://sphinx-doc.org/">
Sphinx
</a>
1.8.5.
</div>

6. THE FOLLOWING LINES OF CODE WERE FLAGGED with this issue "An image element has non-empty alternative text, is within a link, and no other text (or images with alternative text) is present within the link" .
-- <a href="index.html">
<img class="logo" src="_static/IPy_header.png" alt="Logo">
</a>

-- <a href="http://jupytercon.com">
<img src="_static/jupytercon-logo.svg" width="180px" alt="JupyterCon 2017">
</a>

-- <a class="reference external image-reference" href="_static/ipython-cookbook-2nd.png">
<img alt="IPython Cookbook, Second Edition, by Cyrille Rossant" src="_images/ipython-cookbook-2nd.png" style="width: 200px;">
</a>

-- <a class="reference external image-reference" href="_static/jupyter-for-ds.png">
<img alt="Jupyter For dataScience" src="_images/jupyter-for-ds.png" style="width: 200px;">
</a>

-- <a class="reference external image-reference" href="_static/jupyter-in-depth.png">
<img alt="jupyter-in-depth" src="_images/jupyter-in-depth.png" style="width: 200px;">
</a>

-- <a class="reference external image-reference" href="_static/jupyter-notebook-for-all-II.jpg">
<img alt="Jupyter Notebook for All - Part II" src="_images/jupyter-notebook-for-all-II.jpg" style="width: 200px;">
</a>

-- <a class="reference external image-reference" href="_static/learning-jupyter-book.png">
<img alt="Learning Jupyter" src="_images/learning-jupyter-book.png" style="width: 200px;">
</a>

-- <a class="reference external image-reference" href="_static/mastering-ipython-book.png">
<img alt="Mastering IPython" src="_images/mastering-ipython-book.png" style="width: 200px;">
</a>

-- <a class="reference external image-reference" href="_static/ipython-cookbook.jpg">
<img alt="IPython Cookbook" src="_images/ipython-cookbook.jpg" style="width: 200px;">
</a>

-- <a class="reference external image-reference" href="_static/ipython-book.jpg">
<img alt="IPython Minibook" src="_images/ipython-book.jpg" style="width: 200px;">
</a>

7. In the following lines of code, the image has a title attribute value but no alt value.

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

8. ARIA LABEL 
<div class="sphinxsidebar" role="navigation" aria-label="main navigation">
<div class="sphinxsidebarwrapper">
<div class="sidebarblock">
<div id="cse-search-form" style="width: 100%;">
Loading
</div>
<script src="https://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('search', '1', {language : 'en'}); google.setOnLoadCallback(function() { var customSearchControl = new google.search.CustomSearchControl( '017950022472296044740:wfr9nyfshwo'); customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET); var options = new google.search.DrawOptions(); options.enableSearchboxOnly("searchresults.html"); customSearchControl.draw('cse-search-form', options); }, true);
</script>
<link rel="stylesheet" href="https://www.google.com/cse/style/look/default.css" type="text/css">
<style type="text/css">
input.gsc-input { border-color: #BCCDF0; } input.gsc-search-button { border-color: #666666; background-color: #CECECE; padding: 0; } div.sphinxsidebar input[type="text"] { width: 100%; } div.sphinxsidebar input[type="submit"] { width: 100%; }
</style>
</div>
<div class="sidebarblock">

<h3>
JupyterCon
</h3>
<a href="http://jupytercon.com">

<img src="_static/jupytercon-logo.svg" width="180px" alt="JupyterCon 2017">
</a>
</div>
<div class="sidebarblock">

<h3>
Notebook Viewer
</h3>

Share your notebooks
<div class="nbviewer-thm-random">
<script src="_static/nbviewer_thm.js"></script>
<script type="text/javascript">
nbviewer_random_thumbnail();
</script>
<div class="nbviewer-thm">
<a href="http://nbviewer.ipython.org">

<img src="_static/nbviewer-thm-6.png" title="IPython Notebook Viewer">
</a>
</div>
</div>
</div>
<div class="sidebarblock">

<h3>
Community
</h3>

<ul class="simple">
<li>

<a class="reference external" href="http://stackoverflow.com/questions/tagged/ipython">
Stack Overflow
</a>
</li>
<li>

<a class="reference external" href="https://mail.python.org/mailman/listinfo/ipython-dev">
Mailing list
</a>
</li>
<li>

<a class="reference external" href="https://github.com/ipython/ipython/issues">
File a bug
</a>
</li>
<li>

<a class="reference external" href="http://www.reddit.com/r/IPython">
Reddit
</a>
</li>
</ul>
<div style="margin-top:10px">
<!-- sharing buttons-->
<!-- twitter-->
Inline frame
<iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="true" class="twitter-share-button twitter-share-button-rendered twitter-tweet-button" style="position: static; visibility: visible; width: 73px; height: 20px;" title="Twitter Tweet Button" src="https://platform.twitter.com/widgets/tweet_button.7dae38096d06923d683a2a807172322a.en.html#dnt=true&hashtags=ipython&id=twitter-widget-0&lang=en&original_referer=https%3A%2F%2Fipython.org%2Fbooks.html&size=m&text=IPython%20-%20interactive%20computing.&time=1666286053016&type=share&url=http%3A%2F%2Fipython.org&via=ipythondev" data-url="http://ipython.org"></iframe>
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
</script>
<!-- google+-->
<g:plusone size="medium" annotation="none"></g:plusone>
</div>
<!-- sharing buttons-->
</div>
<div class="sidebarblock">
Heading level 3
<h3>
For developers
</h3>

<ul class="simple">
<li>

<a class="reference external" href="https://mail.python.org/mailman/listinfo/ipython-dev">
Mailing list
</a>
</li>
<li>

<a class="reference external" href="https://gitter.im/ipython/ipython">
Development Chat Room
</a>
</li>
<li>
<a class="reference external" href="https://github.com/ipython/ipython/wiki/Dev:-Index">
Development information
</a>
</li>
<li>
<a class="reference external" href="http://travis-ci.org/#!/ipython/ipython">
Travis CI
</a>
</li>
<li>

<a class="reference external" href="https://github.com/ipython/ipython/wiki">
Wiki
</a>
</li>
</ul>
</div>
<div class="sidebarblock">

<h3>
Book
</h3>
<a href="books.html">

<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">
</a>
<script language="javascript">
// most recent at the end var urls = [ "_static/ipython-book.jpg", "_static/learning-jupyter-book.png", "_static/mastering-ipython-book.png", "_static/jupyter-notebook-for-all-I.jpg", "_static/jupyter-notebook-for-all-II.jpg", "_static/jupyter-in-depth.png", "_static/jupyter-for-ds.png", "_static/ipython-cookbook-2nd.png", ] function pick(){ var len = urls.length; var num = Math.floor(Math.sqrt(Math.random()*len*len)); return urls[num]; } function repick(){ $("#sidebar-book-cover").attr("src", pick()); } window.onload = repick ; var seconds = 1000; setInterval(repick, 60*seconds)
</script>
</div>
<div class="sidebarblock">
<div class="tile" id="donate">

<h4>
Support IPython
</h4>
<!-- This relies on some CSS & JS which is added in the _templates folder-->
<a style="background: #34677c; border-radius:0px 0px 0px 0px; font-weight:normal; font-family:Arial, Helvetica, sans-serif; border:none; box-shadow:none; left: 50%; margin-left:-72.5px; margin-top: 1em; margin-bottom: 1em; clear: both; display: block; width:145px; height:45px; line-height:2.8; position:relative; font-size:16px; text-align:center; cursor:pointer; color:#fff; text-decoration: none; z-index:1" href="https://numfocus.salsalabs.org/donate-to-ipython/index.html">
Donate Now
</a>

<a href="donate.html">
Find out more...
</a>
</div>
</div>
</div>
</div>

Your proposed HTML (or CSS), after change

1. To correct this, I will add the lang="en" attribute.
<html xmlns="http://www.w3.org/1999/xhtml" style="margin-left: 380px;" lang="en">

2.To correct this, I'll add an alt text providing relatable information concerning the image. 
 <a href="index.html">
<img class="logo" src="_static/IPy_header.png" alt="Ipython Header Logo">

3.FIX: I will add the following style to make the linked text brighter compared to the it's parent background color. I will either add it to the div wrapping all links or add it to individual link. In this example, I added it to the div wrapper.

<div class="rel" style="filter: contrast(120%);">
<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 </a>
</div>

4.Change the text align property of the following div elements from text-align: justify; to text-align: left; . I'll add this style to the div wrapper with class"body" / div wrapper with class "section" so it affects the whole content.

<div class="body" role="main" style="text-align: left;">
And/OR
<div class="section" id="books-and-videos" style="text-align: left;">

</div>
</div>

5. Give each link text a style="filter: contrast(120%);" or 140% depending on their position in the page.

-- <a class="headerlink" href="#books-and-videos" title="Permalink to this headline" style="filter: contrast(120%);"> ¶ </a>

-- <a class="headerlink" href="#ipython-interactive-computing-and-visualization-cookbook-second-edition" title="Permalink to this headline" style="filter: contrast(120%);"> ¶ </a> 

-- <a class="reference external" href="http://ipython-books.github.io/" style="filter: contrast(120%);"> IPython Interactive Computing and Visualization Cookbook, Second Edition </a>

-- <a class="reference external" href="http://cyrille.rossant.net" style="filter: contrast(120%);"> Cyrille Rossant </a>

-- <a class="reference external" href="https://www.packtpub.com/big-data-and-business-intelligence/jupyter-data-science" style="filter: contrast(120%);">
Jupyter for Data Science
</a>

-- <a class="reference external" href="https://www.packtpub.com/big-data-and-business-intelligence/jupyter-depth-video" style="filter: contrast(120%);"> 
Jupyter In Depth
</a>

-- <a class="reference external" href="https://www.packtpub.com/big-data-and-business-intelligence/jupyter-notebook-all-%E2%80%93-part-ii-video" style="filter: contrast(120%);">
Jupyter Notebook for All - Part II
</a>

-- <a class="reference external" href="https://www.packtpub.com/big-data-and-business-intelligence/jupyter-notebook-all-%E2%80%93-part-i-video" style="filter: contrast(120%);">
Jupyter Notebook for All - Part I
</a>

-- <a class="reference external" href="https://www.packtpub.com/big-data-and-business-intelligence/learning-jupyter" style="filter: contrast(120%);">
Learning Jupyter
</a> 

-- <a class="reference external" href="https://www.packtpub.com/big-data-and-business-intelligence/mastering-ipython-40" style="filter: contrast(120%);">
Mastering IPython 4.0
</a>

--<a class="reference external" href="https://www.packtpub.com/books/info/authors/thomas-bitterman" style="filter: contrast(120%);">
Thomas Bitterman
</a>

-- <a class="reference external" href="https://github.com/PacktPublishing/Mastering-IPython-4" style="filter: contrast(120%);">
on GitHub
</a>

-- <a class="reference external" href="http://ipython-books.github.io/cookbook/" style="filter: contrast(120%);">
IPython Interactive Computing and Visualization Cookbook
</a>

-- <a class="reference external" href="http://cyrille.rossant.net" style="filter: contrast(120%);">
Cyrille Rossant
</a>

-- <a class="reference external" href="http://ipython-books.github.io/minibook/" style="filter: contrast(120%);">
Learning IPython for Interactive Computing and Data Visualization
</a>

-- <a class="reference external" href="http://cyrille.rossant.net" style="filter: contrast(120%);">
Cyrille Rossant
</a>

-- <a class="reference external" href="https://github.com/ipython/ipython-website/blob/master/books.rst" style="filter: contrast(120%);">
The IPython website repository page
</a>

-- <span class="std std-ref" style="filter: contrast(130%);">
Books Policy
</span>

-- <div class="footer" role="contentinfo" style="filter: contrast(130%);">
© Copyright the IPython development team. Created using
<a href="http://sphinx-doc.org/">
Sphinx
</a>
1.8.5.
</div>

6. FIX: Set the alt text of the image to null ("") because some links  have sufficient information about the image embedded within them while others have image alternative texts carrying redundant information.

-- <a href="index.html">
<img class="logo" src="_static/IPy_header.png" alt="">
</a>

-- <a href="http://jupytercon.com">
<img src="_static/jupytercon-logo.svg" width="180px" alt="">
</a>

-- <a class="reference external image-reference" href="_static/ipython-cookbook-2nd.png">
<img alt="" src="_images/ipython-cookbook-2nd.png" style="width: 200px;">
</a>

-- <a class="reference external image-reference" href="_static/jupyter-for-ds.png">
<img alt="" src="_images/jupyter-for-ds.png" style="width: 200px;">
</a>

-- <a class="reference external image-reference" href="_static/jupyter-in-depth.png">
<img alt="" src="_images/jupyter-in-depth.png" style="width: 200px;">
</a>

-- <a class="reference external image-reference" href="_static/jupyter-notebook-for-all-II.jpg">
<img alt="" src="_images/jupyter-notebook-for-all-II.jpg" style="width: 200px;">
</a>

-- <a class="reference external image-reference" href="_static/learning-jupyter-book.png">
<img alt="" src="_images/learning-jupyter-book.png" style="width: 200px;">
</a>

-- <a class="reference external image-reference" href="_static/mastering-ipython-book.png">
<img alt="" src="_images/mastering-ipython-book.png" style="width: 200px;">
</a>

-- <a class="reference external image-reference" href="_static/ipython-cookbook.jpg">
<img alt="" src="_images/ipython-cookbook.jpg" style="width: 200px;">
</a>

-- <a class="reference external image-reference" href="_static/ipython-book.jpg">
<img alt="" src="_images/ipython-book.jpg" style="width: 200px;">
</a>

7. FIX: Add alt text conveying relevant information 
-- <img src="_static/nbviewer-thm-6.png" title="IPython Notebook Viewer" alt="Ipython Cookbook Second Edition">

-- <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" alt="Jupyter for Data Science">

8. Improve aria label description of the div class="sphinxsidebar" from aria-label="main navigation" to  aria-label="Ipython.org book's page main navigation"

<div class="sphinxsidebar" role="navigation" aria-label="Ipython.org book's page main navigation">
<div class="sphinxsidebarwrapper">
<div class="sidebarblock">
<div id="cse-search-form" style="width: 100%;">
Loading
</div>
<script src="https://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('search', '1', {language : 'en'}); google.setOnLoadCallback(function() { var customSearchControl = new google.search.CustomSearchControl( '017950022472296044740:wfr9nyfshwo'); customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET); var options = new google.search.DrawOptions(); options.enableSearchboxOnly("searchresults.html"); customSearchControl.draw('cse-search-form', options); }, true);
</script>
<link rel="stylesheet" href="https://www.google.com/cse/style/look/default.css" type="text/css">
<style type="text/css">
input.gsc-input { border-color: #BCCDF0; } input.gsc-search-button { border-color: #666666; background-color: #CECECE; padding: 0; } div.sphinxsidebar input[type="text"] { width: 100%; } div.sphinxsidebar input[type="submit"] { width: 100%; }
</style>
</div>
<div class="sidebarblock">

<h3>
JupyterCon
</h3>
<a href="http://jupytercon.com">

<img src="_static/jupytercon-logo.svg" width="180px" alt="JupyterCon 2017">
</a>
</div>
<div class="sidebarblock">

<h3>
Notebook Viewer
</h3>

Share your notebooks
<div class="nbviewer-thm-random">
<script src="_static/nbviewer_thm.js"></script>
<script type="text/javascript">
nbviewer_random_thumbnail();
</script>
<div class="nbviewer-thm">
<a href="http://nbviewer.ipython.org">

<img src="_static/nbviewer-thm-6.png" title="IPython Notebook Viewer">
</a>
</div>
</div>
</div>
<div class="sidebarblock">

<h3>
Community
</h3>

<ul class="simple">
<li>

<a class="reference external" href="http://stackoverflow.com/questions/tagged/ipython">
Stack Overflow
</a>
</li>
<li>

<a class="reference external" href="https://mail.python.org/mailman/listinfo/ipython-dev">
Mailing list
</a>
</li>
<li>

<a class="reference external" href="https://github.com/ipython/ipython/issues">
File a bug
</a>
</li>
<li>

<a class="reference external" href="http://www.reddit.com/r/IPython">
Reddit
</a>
</li>
</ul>
<div style="margin-top:10px">
<!-- sharing buttons-->
<!-- twitter-->
Inline frame
<iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="true" class="twitter-share-button twitter-share-button-rendered twitter-tweet-button" style="position: static; visibility: visible; width: 73px; height: 20px;" title="Twitter Tweet Button" src="https://platform.twitter.com/widgets/tweet_button.7dae38096d06923d683a2a807172322a.en.html#dnt=true&hashtags=ipython&id=twitter-widget-0&lang=en&original_referer=https%3A%2F%2Fipython.org%2Fbooks.html&size=m&text=IPython%20-%20interactive%20computing.&time=1666286053016&type=share&url=http%3A%2F%2Fipython.org&via=ipythondev" data-url="http://ipython.org"></iframe>
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
</script>
<!-- google+-->
<g:plusone size="medium" annotation="none"></g:plusone>
</div>
<!-- sharing buttons-->
</div>
<div class="sidebarblock">
Heading level 3
<h3>
For developers
</h3>

<ul class="simple">
<li>

<a class="reference external" href="https://mail.python.org/mailman/listinfo/ipython-dev">
Mailing list
</a>
</li>
<li>

<a class="reference external" href="https://gitter.im/ipython/ipython">
Development Chat Room
</a>
</li>
<li>
<a class="reference external" href="https://github.com/ipython/ipython/wiki/Dev:-Index">
Development information
</a>
</li>
<li>
<a class="reference external" href="http://travis-ci.org/#!/ipython/ipython">
Travis CI
</a>
</li>
<li>

<a class="reference external" href="https://github.com/ipython/ipython/wiki">
Wiki
</a>
</li>
</ul>
</div>
<div class="sidebarblock">

<h3>
Book
</h3>
<a href="books.html">

<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">
</a>
<script language="javascript">
// most recent at the end var urls = [ "_static/ipython-book.jpg", "_static/learning-jupyter-book.png", "_static/mastering-ipython-book.png", "_static/jupyter-notebook-for-all-I.jpg", "_static/jupyter-notebook-for-all-II.jpg", "_static/jupyter-in-depth.png", "_static/jupyter-for-ds.png", "_static/ipython-cookbook-2nd.png", ] function pick(){ var len = urls.length; var num = Math.floor(Math.sqrt(Math.random()*len*len)); return urls[num]; } function repick(){ $("#sidebar-book-cover").attr("src", pick()); } window.onload = repick ; var seconds = 1000; setInterval(repick, 60*seconds)
</script>
</div>
<div class="sidebarblock">
<div class="tile" id="donate">

<h4>
Support IPython
</h4>
<!-- This relies on some CSS & JS which is added in the _templates folder-->
<a style="background: #34677c; border-radius:0px 0px 0px 0px; font-weight:normal; font-family:Arial, Helvetica, sans-serif; border:none; box-shadow:none; left: 50%; margin-left:-72.5px; margin-top: 1em; margin-bottom: 1em; clear: both; display: block; width:145px; height:45px; line-height:2.8; position:relative; font-size:16px; text-align:center; cursor:pointer; color:#fff; text-decoration: none; z-index:1" href="https://numfocus.salsalabs.org/donate-to-ipython/index.html">
Donate Now
</a>

<a href="donate.html">
Find out more...
</a>
</div>
</div>
</div>
</div>

More info

I realized that wave flagged the heading (structural element) not as a warning, just as a suggestion. When I went through the page, I discovered the headings were actually used in the right manner. The same goes for the other structural elements like main, navigation and footer. Lastly I suggest more aria labels should be added to the page in places like all the DIV elements with the class "SECTION"

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

Thanks for the suggestions! I'm intrigued by the use of contrast filters, instead of modifying the actual colors used. Do you know what colors result?

Bhaybhiisparks commented 1 year ago

Not really. The CSS filter property seems to work great on images. I was hoping it would have the same effect on texts.

Bhaybhiisparks commented 1 year ago

So I ran a test with one of the links. Here's the result

TEST:

send to github 1

RESULT:

send to github 2
sgibson91 commented 1 year ago

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