Evaluate Accessibility of Jupyter pages #38

minrk · 2022-10-04T14:38:29Z

We would like to improve the accessibility of JupyterHub. This microtask will exercise the skills and tools relevant to JupyterHub accessibility project, and improve the accessibility of Jupyter websites!

Many Outreachy applicants can work on this issue at the same time. Please do not select more than one page per person.

Familiarize yourself with the basics of web accessibility
Install the WAVE tool for evaluating web accessibility
Select a page from one of these websites (using this spreadsheet):
Use WAVE to evaluate your selected page
Identify a specific change in the HTML or CSS that improve the page, with respect to accessibility
open an issue (select "Accessibility task"), and follow the steps to suggest an improvement.

We are not asking you to fork repos and propose specific changes (it may be difficult to find where the HTML is defined!). Only suggest changes to the final page. After discussion, we can decide to proceed to submit changes, or not.

The goals of these tasks:

get some familiarity with accessibility
install and use accessibility tools to identify issues
understand the issues you've found
apply what you've learned and the issues the tool has found to propose specific, concrete changes

Update

This microtask will be closed to new applicants on Monday 24th October (end of day UK time).

Please make sure your contributions are recorded and begin your final application on the Outreachy website. If your issue/PR is still open when we close this project, it will still count as a contribution. Closing the project will not affect your ability to record contributions and make your final applications.

brendamoreira · 2022-10-08T18:03:22Z

Hi, I'm Brenda, an outreachy applicant. Can I work on this one? (:

Uzor13 · 2022-10-08T18:35:01Z

Hi, I'm Precious an outreachy applicant, can I work on the accessibility for ipython.org?

mahamtariq58 · 2022-10-08T21:16:45Z

Hi! I am Maham Tariq . I would like to evaluate jupyter.org using WAVE ..

Uzor13 · 2022-10-09T00:39:32Z

IPython's Home Page

Language missing or invalid (error): adding a lang attribute set to the language used in the HTML element if a single language is being used or in the tags of the element where another language is being introduced. E.g <html lang="en">, <h1 lang=”nl”></h1>.
Very low contrast between the text and background colours (contrast errors): ensuring the ratio between the 2 colours are within 4.5:1 for larger texts and 3:1 for smaller text. Reducing the brightness of either the background or text colour can work.
Fully justified text is present (alerts): areas with long paragraphs should maybe not have text-align: justify to keep the texts together and improve readability.
Alternative text is likely insufficient or contains extraneous information (alerts): changing the alt text from alt="Logo" to alt="IPython's Interactive Computing Logo" for more descriptive information.
An image has a title attribute value but no alt value (alerts): adding alt texts that describe the images.
Link text contains extraneous text or may not make sense out of context (alerts): Rather than using a here for the link, the link text can be the title of the page to be visited so that users have more context on what they are clicking on.
Navigation aria-label is missing, screen readers cannot tell which is the main navigation bar as that has been assigned to the sidebar

damli40 · 2022-10-09T12:22:00Z

hi, can i work on this issue

bl-aire · 2022-10-09T12:48:31Z

Hello,

My name is Ogoh Blessing and I would love to work on Binder. I would love to contribute to making Binder more accessible to diverse users so people cutting across different locations, ethnicity, health status etc can have an amazing user experience not minding the device being used to access the site.

Tools used for assessment
I used the following tools to assess the page:

WAVE accessibility testing tool
Axe accessibility testing tool
WCAG Contrast checker

Result from assessment

On accessing the page using with the tools above, I took note of the following parts that can be improved to ensure users with special needs have a better experience:

WAVE result

Axe accessibility testing tool result

Based on the accessment, the following have been spotted and can be improved using the web content accessibility guidelines(WCAG):

Lang missing/invalid:
The lang attribute lang="en" is missing in the opening html tag <html> . This attribute helps search engines switch language profiles so they can provide correct accent/pronunciation. It also helps search engines return language specific results.
Current state of the code: <html style="margin-left: 380px;">
Solution I am proffering: <html lang="en" style="margin-left: 380px;> or lang="fr" when applicable
Missing alt text:
The alt attribute alt="" and its text are missing in images. Apart- from the fact that an alt text gets displayed in place of an image in the browser if the image file has not loaded, it is useful to people with sensory processing/learning disabilities and visual impairment. Visually impaired people depend on screen readers to go through the content of a site. When the alt text is not available or it is not worded properly, they will not know what message an image is trying to pass. It should be noted that 'decorative' images do not need alt text and you should not repeat yourself.

It can be useful to people with certain sensory processing and/or learning disabilities
It's displayed in place of the image in browsers if the image file hasn't loaded, or when the user has chosen not to view images.

An alt text should :

Be specific and briefly and clearly expressed.
Never start with “Image of …” or “Picture of …”
Use keywords sparingly.
Include text that's part of the image.

Current state of the code:

<img id="logo" src="/static/logo.svg? v=fe52c40adc69454ba7536393f76ebd715e5fb75f5feafe16a27c47483eabf3311c14ed9fda905c49915d6dbf369ae68fb855a40dd05489a7b9542a9ee532e92b" width="390px">

Solution I am proffering: To improve this, I would add the following alt text to the code above:

alt="Binder logo"

Low contrast errors:
According to WCAG 2, contrast is a measure of the difference in perceived "luminance" or brightness between two colors. There should be enough contrast between content and the background, so that text and non-decorative images are legible for anyone with low vision or color deficiencies.
Currently, the contrast between the text and their background is 3.85.( like the donate and launch buttons). It should be at least 4.5:1 to meet the WCAG(web content accessibility guidelines) 2 AA ratio threshold contrast. The launch(submit) button is used as an example below.

Current state of the code:

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

.btn-submit{ background-color:rgb(243, 162, 83); box-shadow: 1px 1px rgba(0,0,0,.075); color:white; }

Solution I am proffering: I would solve this by using a deeper shade of the current background color so the text becomes more legible
.btn-submit{ background-color:rgb(242, 138, 35); }

Device dependent event handler present:
Device dependent event handlers are dependent on the use of a mouse (or touch) or keyboard. Examples of this are onmouseover and onmouseout which are used on the donate button. They introduce accessibility issues for people who are blind, have low vision or have health conditions that might be affecting their motor skills. They may be used, as long as any important content or functionality is also available without using the mouse for people who cannot access their mouse. This can be achieved by ensuring all functionality can be used from the keyboard.

Current state of the code:
<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>

Solution I am proffering:
<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>

No page regions:
Most current web browsers support the above HTML5 elements and convey the information to assistive technology through the accessibility APIs. However, to maximize compatibility with web browsers and assistive technologies that support WAI-ARIA but do not yet support HTML5, it is currently advisable to use both the HTML5 elements and the corresponding WAI-ARIA roles.

Current state of code:
At the moment, proper semantic tags are not used on the site Div and spans are used as containers for elements.

Solution I am proffering: To solve the accessibility issue related to page regions, I would use HTML5 elements(semantic elements) and the corresponding WAI-ARIA roles.

Missing first level heading:
Headings communicate the organization of the content on the page. Web browsers, plug-ins, and assistive technologies like screen readers use them to provide in-page navigation. Screen readers typically offer a shortcut that brings up a list of all headings within the page as a means of user navigation. If screen readers announce the heading level, the skipped number would make it seem like the user had missed some hidden content when they haven't. Another scenario given below illustrates how missing level headings can affect accessibility:

if a person using a screen reader was cycling through the headings (ex. h1, then h2's then h3's) and the reader reported nothing for a given level of heading (h4's in this case), then the user would likely stop going through the headings under the assumption that there are no more headings (potentially missing any h5's and h6's).

Solution:
I would fix the hierarchy of header elements to solve this. There shouldn't be any need to skip a level heading if CSS can be used to style elements the way you would want them to be.

damli40 · 2022-10-09T13:19:13Z

I evaluated the accessibilty of http://mybinder.org/ and http://ipython.org/ using the WAVE tool that was recommnded by the mentor, here are the issues and how i think they can be fixed:

IPYTHON's home page

The language of the document is not identified or a lang attribute value is invalid.(problem) This can be fixed by identifying the document language using the attribute with a valid value (e.g., ). Ensure that all lang attribute values are valid(fix)
Some links on the page and the navigation bar have very low contrast(problem). This can be fixed by increasing the contrast between the foreground (text) color and the background color. Large text (larger than 18 point or 14 point bold) does not require as much contrast as smaller text, You can install a contrast checker on chrome to be sure it complies with WCAG contrast ratio(fix).
Fully justified text is present, Large blocks of justified text can negatively impact readability due to varying word/letter spacing and 'rivers of white' that flow through the text(Problem). This can be fixed by removing the justified alignment on the text(fix).
The alt text for the Ipython's Logo is not descriptive enough(problem). Use a more descriptive text like "Ipython's Logo"(fix).
2 images have a title attribute value but no alt value(problem). This can be fixed by giving the images an alt text for better
page accessibility(fix).
Link text contains extraneous text or may not make sense out of context(problem). reword the link text so that it is more descriptive of its destination when read out of context. Remove any extraneous text (such as "click here").(fix)

http://mybinder.org/ 's Home Page

4 images do not have alternative text (problem). Add an alt attribute to the image. The attribute value should accurately and succinctly present the content and function of the image.(fix)
The language of the document is not identified or a lang attribute value is invalid(problem). Identify the document language using the attribute with a valid value (e.g., ). Ensure that all lang attribute values are valid.(fix)
Very low contrast between text and background colors in the page with some links. Adequate contrast of text is necessary for all users, especially users with low vision. This can be fixed by increasing the contrast between the foreground (text) color and the background color. Large text (larger than 18 point or 14 point bold) does not require as much contrast as smaller text, You can install a contrast checker on chrome to be sure it complies with WCAG contrast ratio(fix).
No page regions or ARIA landmarks were found. The whole page was not built using semantic HTML and proper sectioning(problem). If the page has visual regions or significant page areas, ensure the regions are defined with header, nav, main, footer, etc. elements.(fix)
The page does not have a first level heading(problem). The text "Turn a Git repo into a collection of interactive notebooks" should have a <h1></h1> tag as its the first heading on th page.
On the "click to Donate" button, an event handler is present that may not be accessible.(problem) Ensure that critical functionality and content is accessible by using a device independent event handler (which responds to both keyboard and mouse) or by using both a mouse dependent and a keyboard dependent event handler.(fix)

These are the results from the WAVE web app accessibility tester. All fixes can be done with just simple HTML and CSS.

Dapper50 · 2022-10-09T15:20:41Z

Jupyter Homepage: http://jupyter.org/

Contrast Errors: It means very low contrast between text and background colors, as adequate contrast of text is necessary for all users, especially users with low vision.It can be fixed by Increasing the contrast between the foreground (text) color and the background color. Large text (larger than 18 point or 14 point bold) does not require as much contrast as smaller text. I.e when Text is present that has a contrast ratio less than 4.5:1, or large text (larger than 18 point or 14 point bold) has a contrast ratio less than 3:1. WCAG requires that page elements have both foreground AND background colors defined (or inherited) that provide sufficient contrast. When text is presented over a background image, the text must have a background color defined (typically in CSS) that provides adequate text contrast when the background image is disabled or unavailable. WAVE does not identify contrast issues in text with CSS transparency, gradients, or filters.
Alerts possible heading: It means texts appears to be a heading but is not a heading element, It should fixed by ensuring the paragraph is a section heading, use a heading element instead <h1>-<h6> i.e </p> element contains less than 50 characters and is either 20 pixels or bigger or 16 pixels or bigger and bold and/or italicized.
Features alternative text: It means Image alternative text is present, the content or function of an image to screen reader users or in other situations where images cannot be seen or are unavailable. It can be corrected by ensuring that the alternative text conveys the content and function of the image accurately and succinctly. The alt attribute should be equivalent, accurate, and succinct. I.e A non-empty alt attribute is present on an image.
Features linked image with alternative text: It means alternative text is present for an image that is within a link, It can be corrected by ensuring that the alternative text presents the content of the image and/or the function of the link. If the full content and function of the link is presented in text within the link (an image and a text caption both within the same link, for example), then the image should generally be given empty/null alternative text alt="" to avoid redundancy. I.e 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.
Features language: It means the language of the document or a page element is identified, It can be fixed by ensuring the language is properly identified for the page e.g <html lang="en"> If content within the page is in a language different than the page's language, identify it using a valid lang attribute value e.g, <p lang="fr">. I.e A document or an element has a valid lang attribute value.
Structural Elements heading level 2: It means that a second level heading <h2></h2> tag is present. It can be fixed by ensuring that the text in question is truly a heading and that it is structured correctly in the page outline. I.e An <h2></h2> tag is present.
Heading level 3: It means that a third level heading <h3></h3> element is present. It can be fixed by ensuring that the text in question is truly a heading and that it is structured correctly in the page outline. i.e An <h3></h3> element is present.
Unordered list: It means that an unordered or bulleted list <ul></ul>element is present, It can be fixed by ensuring that an unordered (bulleted) list is appropriate for the context. If list items are sequential or numbered, an ordered list <ol></ol> is likely more appropriate. I.e An underline list element is present.
Navigation: It means that a <nav> element or navigation landmark is present. It can be fixed by ensuring the element defines page navigation. Multiple navigation elements on one page can be differentiated with ARIA labels. i.e A <nav> element or role="navigation" is present.
Structural Elements Footer: It means that a <footer> element or contentinfo landmark is present. It can be fixed by ensuring the element surrounds and defines page or page section footer content. i.e A <footer> element or role="contentinfo" is present.

Suggestion: These are the results from the WAVE web app accessibility tester. The stated errors has to be fixed to remove barriers that makes it difficult or impossible for some people to use like people with disabilities. This can be fixed with HTML and CSS.

Mackenzie-OO7 · 2022-10-09T19:45:22Z

Suggestions for improving Binder and IPython's website

IPython

I evaluated the ipython.org's website using the WAVE tool as instructed. Below are the changes I suggest can be made to improve accessibility for users:

The language of the document, which is supposed to be defined at the beginning of the document, is missing. It makes screen readers unable to read the content in the appropriate language, thus preventing users with visual disabilities from making use of the website. It also makes automatic translation of the website's content difficult, which can be limiting for non-English speakers.
Suggestion: This can be solved by updating the document language using the <html lang> attribute with a valid value (e.g. <html lang="en">). Ensure that all lang attribute values are valid.
The website contains a lot of contrast errors: That is, a lot of text present have a contrast ratio less than 4.5:1, or large text (larger than 18 point or 14 point bold) has a contrast ratio less than 3:1. This makes it uneasy for users with low vision to navigate the website.
Suggestion: This can be solved by increasing the contrast between the foreground (text) color and the background color. Large text (larger than 18 point or 14 point bold) does not require as much contrast as smaller text. We can get color suggestions. in the Contrast option of the WAVE tool.
Fully justified text is present: There are <p> and <div> elements that have more than 500 characters and are styled with text-align:justify. Large blocks of justified text can negatively impact readability due to varying word/letter spacing and 'rivers of white' that flow through the text and make the website inaccessible to users with neurological disabilities.
Suggestion: Remove the full justification from the text.
The alternative text to the website's logo at the header of the page says "logo", which is insufficient, seeing as it does not particularly state what company's logo it is. Due to this, users who make use of screen readers will not get adequate information.
Suggestion: Ensure that the alternative text for the image or image input provides a succinct, yet equivalent alternative to the content and function of the image. Screen readers and browser presentation inform the user that the object is an image, so alternative text of "image of..." (and similar) should be avoided. If the image does not convey content or if the content is presented in nearby text (e.g., a caption), null/empty alternative text (alt="") is appropriate.
There are two images on the website with title attribute value, but no alternative text. The title attribute value for images that lack an alt attribute value will be presented to screen reader users. However, providing image content in the alt attribute typically value provides better accessibility, and should be used in most cases. In addition, the title attribute will generate a mouse hover tooltip which more or may not be desired - this tooltip will not be presented to touch screen or keyboard users, so ultimately, it is better practice to include an alternative text.
Suggestion: Ensure the title attribute value presents the content and function of the image. For better accessibility, the alt attribute should be used when possible.
Suspicious link text: A link to IPython’s Notebook Viewer is embedded in the word "here", which is not descriptive enough can cause confusion for certain users when read out of context. The purpose of the link should be easily determined from the link text alone, or from the link text and its context (e.g. surrounding text, list item, previous heading, or table headers).
Suggestion: The link should be embedded in "IPython’s Notebook Viewer" instead.
For the images with alternative texts, I think the texts do not contain enough information. For example:
- The IPython Interactive Computing logo should say "IPython Interactive Computing logo" not just "logo"
- The JupyterCon logo should say "JupyterCon logo" and not "JupyterCon 2017"
- In the image with alt text "IPython Clients", the text does not properly describe what the image looks like.
There are three <h1> headings where there should be only one.
Suggestion: Change "Announcements" and "Citing Python" tags from <h1> to <h2>.

Binder

After evaluation, I came up with the following suggestions for improvement:

Add an alternative text such as "Binder logo" to the Binder logo image on the website.
Add an alternative text such as "launch binder button" to the button that displays "launch binder".
Two hidden images are missing an alternative text, add a descriptive alternative text to them. The markdown badge should have an alt text of "Markdown badge", while the RST badge should have an alt text of "RST badge".
The language of the page is not specified. In the code, change the <html> tag at the head to <html lang="en">.
There is low contrast between some text and the background color. From the Contrast option in the wave tool, we can use any value between #F9D6AE and #FCECDA for the foreground, while the background color can be adjusted to any value between #000000 and #424242.
Semantic tags should be used to restructure the page.
The <h3> heading that contains the text "Turn a Git repo into a collection of interactive notebooks" that is the title, should be changed to a <h1> heading.
The "click to donate" button should use a device independent event handler (which responds to both keyboard and mouse).

mahamtariq58 · 2022-10-09T22:48:31Z

Familiarity with the basics of web accessibility
Installation of WAVE Extension
WAVE Evaluation of jupyter.org page

Lilianada · 2022-10-10T07:58:59Z

I evaluated the Jupyter.org governance page using the WAVE tool as instructed and found 9 errors which will be listed below with possible solutions. Some of the errors were duplicated with different components.

The <html lang> attribute is missing or empty, or a lang attribute value is not a valid language identifier.
Suggestion: Add the document language identifier using the attribute with a valid value (e.g., <html lang="en">).
Two or more <label>s are associated with a single <input>.
Suggestion: Change the "aria-label=" in the code to "aria-labelledby=".
Empty form label that does not contain any text or images with an alternative text, it will not present any information about the form control to the user.
Suggestion: A descriptive title attribute may be added to the form control instead of the label if it isn't visually necessary.
A element is present that contains no text content
Suggestion: Adding a value attribute to the button to state its value.

minrk · 2022-10-10T08:59:10Z

Thanks for the contributions, everyone! I added a spreadsheet where you can claim a page to work on. Pick a page from the list. If there's a page you'd like to look at that's not on the list, feel free to post here and we can add it.

bl-aire · 2022-10-10T09:32:41Z

Thanks for the contributions, everyone! I added a spreadsheet where you can claim a page to work on. Pick a page from the list. If there's a page you'd like to look at that's not on the list, feel free to post here and we can add it.

Hello @minrk

On the spreadsheet, my username is on the column that says done. What am I to do next please? And since I have shown interest in mybinder.org page, would I be working on the repository for the project?

Uzor13 · 2022-10-10T10:59:06Z

Jupyter's Community page

- No errors :) 👍🏾

Contrast errors: The view buttons have contrast issues because the text has a lesser ratio than the background colour due to its size. Increasing the text size or decreasing the brightness of the button can help with the contrast issue.
Suspicious link text: Using ambiguous words that do not describe the link would not help users have an understanding of what they're clicking on. Using more descriptive text like See community content rather than using this page would give users and screen readers more context.
Redundant links: Adjacent links that go to the same URL. Combining the link text into one and giving more information would help users not bounce around the same page.

Bhaybhiisparks · 2022-10-10T11:10:23Z

Thanks for the contributions, everyone! I added a spreadsheet where you can claim a page to work on. Pick a page from the list. If there's a page you'd like to look at that's not on the list, feel free to post here and we can add it.

Thanks @minrk

minrk · 2022-10-10T11:25:38Z

@bl-aire you are free to work on more detailed suggestions for the mybinder.org page. If you like, you can make suggestions.

On the spreadsheet, my username is on the column that says done. What am I to do next please? And since I have shown interest in mybinder.org page,

@bl-aire you are free to work on more detailed suggestions for the mybinder.org page. If you have specific HTML changes, you can make suggestions in the binderhub repo. The HTML templates are here.

would I be working on the repository for the project?

The repo where we will do the work in the internship is actually https://github.com/jupyterhub/jupyterhub but its pages are not publicly available, so they require installing and running jupyterhub to access.We've selected publicly accessible pages for the initial period.

If anyone would like to test the JupyterHub pages, I can suggest how to install jupyterhub locally and look at the pages.

ChiomaNwosisi · 2022-10-10T11:32:26Z

HI My name is Chioma cani i work on the accessibility of mybinder.org

bl-aire · 2022-10-10T11:33:29Z

@bl-aire you are free to work on more detailed suggestions for the mybinder.org page. If you like, you can make suggestions.

On the spreadsheet, my username is on the column that says done. What am I to do next please? And since I have shown interest in mybinder.org page,

@bl-aire you are free to work on more detailed suggestions for the mybinder.org page. If you have specific HTML changes, you can make suggestions in the binderhub repo. The HTML templates are here.

would I be working on the repository for the project?

The repo where we will do the work in the internship is actually https://github.com/jupyterhub/jupyterhub but its pages are not publicly available, so they require installing and running jupyterhub to access.We've selected publicly accessible pages for the initial period.

If anyone would like to test the JupyterHub pages, I can suggest how to install jupyterhub locally and look at the pages.

Okay.

Thanks for guiding me.

Ibom99 · 2022-10-10T11:34:12Z

After I evaluated the https://docs.jupyter.org/en/latest/install.html page using the WAVE browser extension as instructed by the mentor.
Here are some of the errors and my suggested changes to improve its accessibility.

Missing Alternative Text: I'll add an alternative text to the img tag (e.g alt = "Ad by EthicalAds")
Empty Form Label: This means that the label is present but without content that describes the function of the associated form control. Labels are not required for images without an alt attribute, and in this cause it contains an icon tag eg="<i></i>".
I'll add a descriptive title attribute to the form control, such as an id="" attribute or an alt="" to the icon since it's an arrow that shows more content, on click.
Contrast Errors (26): This means the contrast between the text and background colors are low. I will increase the contrast between the foreground (text) color and the background color. Making the text a deeper color and a bolder font weight.
Alerts for suspicious alternative text: The alt text for the logo says "Logo Image". I'll change the alt of the logo to alt="Jupyter Logo"
Redundant Links: Means adjacent links go to the same URL. This causes repetition for screen readers. I'll suggest, combining redundant links of the same product image and product name into one link.

Ibom99 · 2022-10-10T11:46:12Z

Thanks for the contributions, everyone! I added a spreadsheet where you can claim a page to work on. Pick a page from the list. If there's a page you'd like to look at that's not on the list, feel free to post here and we can add it.

I'll like to be assigned to this page https://docs.jupyter.org/en/latest/install.html and it's not on the spreadsheet. I have ran WAVE on it and evaluated its accessibility and added my suggestions. I'll love for it to be added to the spreadsheet please.

Mackenzie-OO7 · 2022-10-10T11:59:12Z

@minrk I'd like to test the JupyterHub pages. Can you guide me on how to install JupyterHub locally?

FaithKovi · 2022-10-10T12:01:39Z

@minrk I am an outreachy applicant and I will like to evaluate jupyter.org pages

Olaedey · 2022-10-10T12:15:08Z

Thanks for the contributions, everyone! I added a spreadsheet where you can claim a page to work on. Pick a page from the list. If there's a page you'd like to look at that's not on the list, feel free to post here and we can add it.

Thanks @minrk

mahamtariq58 · 2022-10-10T12:26:10Z

@Mackenzie-OO7 @brendamoreira
There is a installation guide in JupyterHub docs Jupyterhub setup locally ..Hope this will help 🙂

Mackenzie-OO7 · 2022-10-10T12:54:39Z

@Mackenzie-OO7 @brendamoreira There is a installation guide in JupyterHub docs Jupyterhub setup locally ..Hope this will help 🙂

Thanks!

damli40 · 2022-10-10T13:12:21Z

I ran an accessibilty test on https://ipython.org/ipython-doc/stable/interactive/reference.html using the WAVE tool and here are my observations and possible solutions:

The form is missing form labels. This can be fixed by adding a <label></label> describing the input.
The language of the document is not identified or a lang attribute value is invalid. This can be fixed by specifying the language in the html tag <html lang ='en'>
Very low contrast between text and background colors. This can be fixed by Increasing the contrast between the foreground (text) color and the background color. Large text (larger than 18 point or 14 point bold) does not require as much contrast as smaller text. going by the WCAG rules,it has to have a 4:5:1 ratio. color: value in CSS file should work.
Link text contains extraneous text or may not make sense out of context. This can be fixed by rewording the link text so that it is more descriptive of its destination when read out of context. Remove any extraneous text (such as "click here"). eg <a href='#'> Link to x</a> in HTML will do the job.
Adjacent links go to the same URL. This is a redundancy on the page, Solution If possible, combine the redundant links into one link and remove any redundant text or alternative text (for example, if a product image and product name are in the same link, the image can usually be given alt="").
An Accesskey is present on the page. Accesskey provides a way to define shortcut keys for web page elements. Accesskeys often conflict with user or assistive technology shortcut keys and should be avoided or implemented with care. This is a simple fix as you just have to rmove th accesskey.
Title and alt text are similar, The title attribute value is used to provide advisory information. It typically appears when the users hovers the mouse over an element. The advisory information presented should not be identical to or very similar to the element text or alternative text. This can be fixd by removing the title or changing the title text to not match the alt.

Joel-Ando · 2022-10-10T13:42:12Z

Hi! every one,
I am Joel Ando an Outreachy applicant contributing to the JupyterHub web Accessiblity
As instructed above by mentor MINRK using the WAVE TOOL to Analyze Web Accessibility.
Below are the results and possible solutions on IPYTHON.org project

1 LANGUAGE MISSING OR UNIDENTIFIED: this indicate a missing <HTML> language attribute, which is a necessity for all web pages that allows users know which language they are interacting with on the page, search engines and screen readers
solution adding a proper <html lang = "en"> attribute at the <head> of the webpage
2 CONTRAST ERRORS: There are low contrast between texts and background. Users especially those with low vision will find it difficult to distinguish text from background.
Solution: increase the brightness between the texts and the background.
3 ALERTS: There are a good number of alerts.
-Fully justified text is present: block of text that stretch with justification can negatively impact readability due to white spacing that exist between word.
solution: remove the full justification completely and also play around with letter-spacing or left-alignment.
-Suspicious Alternative text: Alternative text is either insufficient or is unrelated to the IPYTHON image hence content would not be available if image is not available to screen-readers.
solution : add alt text attribute which describes the image <alt ="ipython interactive computing logo">
-Suspicious link text: Links, which are often read out of context, should clearly describe the destination of the link. text like ( click here) are confusing to the users because it is not clear enough to describe its purpose.
solution: instead of "click Here" "IPython’s Notebook Viewer" should be use as the link text.
-image no alt value: complex images( pie chart, bar chart, maps etc) like the IPYTHON NOTE BOOK VIEWER should have alt text that describes the image as this type of images become difficult to understand
solution: add alt text with proper description to image when possible.
4 STRUCTURAL ELEMENTS: We also have some structure elements like <h1> <h3> <h4> . HTML heading tags should follow the right hierarchy h1, h2, h3, h4 . and properly structure on web page
-Unordered(bulleted list) is present: ensure that if using an <ul> on a webpage it is appropriate for the context. On the IPYTHON web page the ANNOUNCEMENT section should use ORDERED list since the content is sequential
-Inline frame <iframe> is present: iframes are read as if it were part of the page that contains it that is it should be easily accessed.
Solution: the iframe at the footer should be made visible and not hidden to ease accessibility.
Solution the aria-label labels the <nav> as main navigation which will be confusing with the <main> content to users
aria-label should label nav with <aria-label="nav-menu"> for better accessibility.

Biki-das · 2022-10-19T05:28:10Z

Jupyter.org Page Evaluation work

As stated by the project mentor, I evaluated the Python.org homepage with the Wave accessibility tool and these were the obeservation along with suggestions to improve

Total errors: 0

Contrast Errors 7

7 contrast errors were found, which conveyed that the foreground color and background color has very low contrast which could pose as a problem to users with low vision.

removing the text shadow and making the text a little darker helps to make the color really accessible

Alt text warning 5

2 images with the same alt text were found which can be fixed by using unique alt text for the images

Missing h1 head tag

Almost every web page has a defined hierarchy of its elements , such as the heading from h1 to h6, this current home page lacks a proper h1 tag heading

Possibility of using heading

p tags were used for text which seems to be a heading , using a h2 can be a better option and a viable way to make the site more accessible

No further Accessibility issues were found by the WAVE tool.

sgibson91 · 2022-10-20T10:07:49Z

Update

This microtask will be closed to new applicants on Monday 24th October (end of day UK time).

Please make sure your contributions are recorded and begin your final application on the Outreachy website. If your issue/PR is still open when we close this project, it will still count as a contribution. Closing the project will not affect your ability to record contributions and make your final applications.

bumblebib · 2022-10-20T17:34:47Z

While studying to work on the second part of the project, I found some links that I would like to share so it can help others too!

To understand how ARIA works and how to implement it efficiently on a website, I recommend watching "ARIA HTML Tutorial - What is ARIA & Why it's Important to Use!" .
W3C has a course on EDx you can watch it for free on types of disabilities and how people with disabilities interact with the web. It's called Introduction to Web Accessibility

I hope it can help some of you the same way it helped me! Good luck everyone !

Divine-peace · 2022-10-20T19:25:59Z

This is the Summary and Suggestions for the Evaluation of https://jupyter.org/ with Wave:

Suggestions for Contrast Errors:
Adequate contrast of text is necessary for all users, especially users with low vision.

Increase the contrast between the foreground (text) color and the background color. Large text (larger than 18 point or 14 point bold) does not require as much contrast as smaller text.
Change the color of the text and background.
The contrast ratio between text and its background should be at least 4.5:1. For large-scale text (at least 18-point normal or 14-point bold), a contrast ratio of at least 3:1 between text and its background is recommended.

Suggestions for Alert (Nearby Images have the same Alt text ):

When two images have the same alternative text, this often causes redundancy or indicates incorrect alternative text.

Ensure that the alternative text for each image or image button is appropriate while removing unnecessary redundancy. If the content of the image is already conveyed elsewhere (through text or the alternative text of a nearby image) or if the image does not convey content, the image may generally be given empty/null alternative text (alt="").
Change or replace alt text for one the images.
Suggestions for Alert (Missing first level heading heading):
Headings facilitate page navigation for the users of many assertive technologies. They also provide semantic and visual meaning and structure to the document.

A first level heading (<h1>) should be present on nearly all pages.
The main heading of the page, that is, Jupyter should be placed within an <h1> element.

Suggestions for Alert ( Possible heading):

From the above code evaluation, I recommend that a heading element should be used to replace the paragraph
element.

Suggestions for Features (Linked image with alt text):

Ensure that the alternative text presents the content of the image and/or the function of the link. If the full content and function of the link is presented in text within the link (an image and a text caption both within the same link, for example), then the image should generally be given empty/null alternative text (alt="") to avoid redundancy.

Suggestions for Features (Alternative text):

Ensure that the alternative text conveys the content and function of the image accurately and succinctly.
The alt attribute should be equivalent, accurate, and succinct.

Suggestions for Structural Elements (Heading levels):

Ensure that the text in question is truly a heading and that it is structured correctly in the page outline.

Suggestions for Structural Elements(Unordered list):

Ensure that an unordered (bulleted) list is appropriate for the context.
If list items are sequential or numbered, an ordered list (<ol>) is likely more appropriate.

Suggestions for Structural Elements (Unordered list):

Ensure the element defines page navigation.
Multiple navigation elements on one page can be differentiated with ARIA labels.

Suggestions for Structural Elements (Footer):

Ensure the element surrounds and defines page or page section footer content.

Suggestions for Features (Language):

Ensure the language is properly identified for the page (e.g., ). If content within the page is in a language different from the page's language, identify it using a valid lang attribute value (e.g.,

preshpi · 2022-10-20T19:31:51Z

Jupyter.org Enforcement guidelines and principles

After evaluating this page with the wave tools, these were the errors I got.
https://wave.webaim.org/report#/https://jupyter.org/governance/conduct/enforcement.html#conflicts-of-interest

9 Errors

5x Empty form label (A form label is present, but does not contain any content.)
SOLUTIONS: Text should be included in the form label describing the form control's function.
2x Multiple-form labels (A form control has more than one label associated with it.)
SOLUTION: Form controls should have no more than one label element associated with them. If multiple form labels are necessary, use aria-labelledby.
1x Language missing or invalid (The document's language is not identified or a lang attribute value is invalid.)
SOLUTION: Identify the document language using the attribute with a valid value <html lang="en">. Ensure that all lang attribute values are valid.
1x Empty button (A button is empty or has no value text.)
SOLUTION: Place text content within the element or give the element a value attribute.

5 Alerts

5x Possible heading (Text appears to be a heading but is not a heading element.) Heading elements (<h1>-<h6>) provide important document structure, outlines, and navigation functionality to assistive technology users.
SOLUTION: If the paragraph is a section heading, use a heading element instead (<h1>-<h6>).

Features

1 X Linked image with an alternative text (Including appropriate alternative text on an image within a link ensures that the function and purpose of the link and the content of the image is available to screen reader users or when images are unavailable.)
SOLUTION: Ensure that the alternative text presents the content of the image and/or the function of the link.
2 X Form label (A properly associated form label is presented to a screen reader user when the form control is accessed.)
SOLUTION: Ensure that the label is accurate, descriptive, succinct and that it is associated with the correct form control element.

33 Structural Elements

3x Heading level 1 (Headings facilitate page navigation for users of assistive technologies.)
SOLUTION: Be sure that the text is truly a <h1> and is structured correctly on the page
7x Heading level 2 (Headings facilitate page navigation for users of assistive technologies)
SOLUTION: Be sure that the text is truly a <h2> and is structured correctly on the page
17x Unordered list (Ordered lists present a group of related, parallel items. Users of many assistive technologies can navigate by and within lists.)
SOLUTION:Ensure that an unordered (bulleted) list is appropriate for the context. If list items are sequential or numbered, an ordered <ol> is likely more appropriate.
3 X Navigation
SOLUTION: Multiple navigation elements on one page can be differentiated with ARIA labels.
1x Main content
SOLUTION: The <main> element or role="main" attribute identifies the main content for the page.main should surround the page
2x Footer ( It typically identifies authorship, related links, copyright date, or other footer content. Footers facilitate page semantics and navigation.)
SOLUTION: footer should surround the footer content of the page

8 ARIA

1x ARIA (ARIA provides enhanced semantics and accessibility for web content.) An ARIA role, state, or property is present, excluding landmark roles, aria-labelledby, or aria-describedby which are distinct WAVE items.
SOLUTION: ARIA must be used correctly and also know that support for ARIA is limited in older browsers and assistive technologies.
7x ARIA Label
SOLUTION: ARIA labels are important for screen readers which access names to be read by the screen reader. Ensure the aria-label value or element referenced by aria-labelledby provides a descriptive, accurate label. When possible, use standard HTML <label> or other markup to make the association.

smart882 · 2022-10-21T05:38:29Z

Jupyter.org page Microtask

Hello Everyone,

My name is Jimmy Inieke, I'm interested in working on jupyter.org project.
After my assessment using WAVE tool on jupyter.org,
0 error was noticed,

3 contrast errors were identified; which are basically the color combinations that was used in the HTML to differentiate href tags from the paragraph text.
I suggest that reducing the lightness of the foregroundcolor and increasing the lightness of the backgroundcolor of the href tags will make the page more accessible by the people with disability. Also,

70 Alerts were identified; Majority of the alerts were found on the img section, indicating the "alt" was not properly labelled. E.g Image shows a photo of Gibson, While the Alt="Gibson", My Contribution is to make the Alt more descriptive by writing something like: Alt ="Gibson's Photo".

28 Features were identified; This indicates what to be done to improve web accessibility. I noticed that "Home page" was added to the list of all the Sponsors of Jupyterhub in the Alt text which results in redundancy in the HTML.
My suggestions are: The Alt text should be in this format: alt="Google logo", alt= "Microsoft logo", etc. Also, the "Home page" should be removed to improve accessibility since it is not really necessary.

14 ARIA were Identified; Aria provides a descriptive, accurate label. I noticed that the Aria have the same labels "Anchor" in all the "a" tags in the About Us page which is not supposed to be so.
My suggestion is for ARIA to be labelled based on its specific function. Example: instead of aria-label="Anchor", it should be; aria-label = "Steering Council".

sugarmango66 · 2022-10-22T14:44:57Z

Hi I'm Suzan Song from China. I really learned a lot in the practice process of this microtask. Here is my submission in issue section, feel free to give me your insight. Discussions are welcomed!

Trailblazer007 · 2022-10-22T16:19:40Z

Hi, I'm Precious an outreachy applicant, can I work on the accessibility for ipython.org?

Yes, sure you can. Just try to be quick about it because the deadline is close

Josephsanya · 2022-10-23T12:41:05Z

I'm Joseph Sanyaolu, an Outreachy applicant who worked on the website mybinder.org

BINDER.ORG WAVE ACCESSIBILITY RESULTS

I evaluated the website using WAVE accessibility tool and the following is the result:

-- 0 Errors, which is a good thing

-- 3 Contrast Errors
--This is due to very low contrast between text and background colors.
--FIX: We can increase the contrast between the foreground which is the text color and the background color.

-- 3 Yellow Alerts (2 Suspicious alternative text & 1 redundant link)
--Suspicious alternative text is caused by insufficient text description or a text containing extraneous information
--FIX: Ensure that the alternative text for the image or image input provides a succinct, yet equivalent alternative to the content and function of the image
--Redundant link is caused by adjacent links going to the same URL
--FIX: Combine the redundant links into one link and remove any redundant text or alternative text.

We got 3 features, which means we have well implemented features, 15 structural elements which shows that our website is well structed and 7 ARIAs.

Here is the link to the issue I created on this accessibility evaluation issue#115

Trailblazer007 · 2022-10-23T17:15:46Z

@bl-aire you are free to work on more detailed suggestions for the mybinder.org page. If you like, you can make suggestions.

On the spreadsheet, my username is on the column that says done. What am I to do next please? And since I have shown interest in mybinder.org page,

@bl-aire you are free to work on more detailed suggestions for the mybinder.org page. If you have specific HTML changes, you can make suggestions in the binderhub repo. The HTML templates are here.

would I be working on the repository for the project?

The repo where we will do the work in the internship is actually https://github.com/jupyterhub/jupyterhub but its pages are not publicly available, so they require installing and running jupyterhub to access.We've selected publicly accessible pages for the initial period.

If anyone would like to test the JupyterHub pages, I can suggest how to install jupyterhub locally and look at the pages.

I'm actually interested in this, I mean, installing jupyterhub locally and testing the JupyterHub pages

Bhaybhiisparks · 2022-10-23T21:45:12Z

I evaluated the accessibility of https://jupyter.org/governance/papers.html using the WAVE tool as recommended by the MENTOR. These are the issues and how I think they can be fixed:
JUPYTER: Governance/Papers.

Empty form label: A form label is present, but does not contain any content. A < label > element that is associated to a form control but does not contain text will not present any information about the form control to the user. To correct this, ensure that the form label contains text that describes the function of the associated form control. Labels are not required for image, submit, reset, button, or hidden form controls. If a label is not necessary visually, a descriptive title attribute may be added to the form control.
Multiple form labels: A form control has more than one label associated with it. This means two or more < label >s are associated to a single < input > (except types of image, submit, reset, button, or hidden), < select >, or < textarea >. A form control should have at most one associated label element. If more than one label element is associated to the control, assistive technology may not read the appropriate label. Ensure that at most one label element is associated to the form control. If multiple form labels are necessary, use aria-labelledby.
Document Language Error: The < html lang > attribute is missing or is empty, or a lang attribute value is not a valid language identifier. To correct this, Identify the document language using the attribute with a valid value (e.g., < html lang="en" >). Ensure that all lang attribute values are valid.
Empty Button Error: A < button > element is present that contains no text content (or alternative text), or an < input type="submit" >, < input type="button" >, or < input type="reset" > has an empty or missing value attribute. To correct this, place text content within the element or give the element a value attribute
Contrast Error: There is very low contrast between text and background colors. Adequate contrast of text is necessary for all users, especially users with low vision. To fix this, increase the contrast between the foreground (text) color and the background color. Large text (larger than 18 point or 14 point bold) does not require as much contrast as smaller text.
Possible Invalid Embedded Link: An image element that has non-empty alternative text is within a link, and no other text (or images with alternative text) is present within the link. A suggestion would be to make sure the alternative text presents the content of the image and/or the function of the link. If the full content and function of the link is presented in text within the link (an image and a text caption both within the same link, for example), then the image should generally be given empty/null alternative text (alt="") to avoid redundancy.
Form Label : A < label > element is present and properly associated to < input > (except types of image, submit, reset, button, or hidden), < textarea >, or < select > element. A remedy to this is to ensure that the label is accurate, descriptive, succinct, and that it is associated with the correct form control element.
Structural Element: Three first level heading(s) (< h1 > element) and Four (4) second level heading(s) (< h2 > element), five(5) third level heading(s) and five(5) fourth level heading(s) is present but might not be conveying their true significance or might be placed wrongly. Headings facilitate page navigation for users of assistive technologies. They also provide semantic and visual meaning and structure to the document. First level heading should contain the most important heading(s) on the page (generally the document title), and other level heading(s) follow in an order of decreasing level. To correct this, ensure that the text in question is truly a heading and that it is structured correctly in the page outline.
Incorrect Use Of Structural Element 2: Twenty four < ul > element is present but might not be placed correctly. Ordered lists present a group of related, parallel items. Users of many assistive technologies can navigate by and within lists. I suggest making sure that an unordered (bulleted) list is appropriate for a context before it is used. If list items are sequential or numbered, an ordered list (< ol >) is likely more appropriate.
Incorrect Use Of Structural Element 3: Three < nav > element or navigation landmark is present but might present accessibility issues if other < nav > elements are added to the page without any way to differentiate them. The navigation identifies a section of navigation links and can facilitate page semantics and navigation. This can be fixed by differentiating multiple navigation elements with ARIA labels.
Incorrect Use Of Structural Element 4: A < main > element or main landmark is present, but might be used incorrectly. The < main > element or role="main" attribute identifies the main content for the page. This facilitate page semantics and navigation. To tackle this, ensure the element surrounds and defines page main content.
Incorrect Use Of Structural Element 5: Two(2) < footer > element or role="contentinfo" is present, but might be used incorrectly. Footers identify a footer for the page or a page section. It typically identifies authorship, related links, copyright date, or other footer content. Footers facilitate page semantics and navigation. To tackle this, ensure the element surrounds and defines page or page section footer content.
ARIA Errors: Five(5) ARIA role, state, or property is present, excluding landmark roles, aria-labelledby, or aria-describedby which are distinct WAVE items. To tackle this, ensure the ARIA role, state, or property is used correctly. Use standard HTML accessibility features when possible. Be aware that support for ARIA is limited in older browsers and assistive technologies.
ARIA Label Error: Seven(7) aria-label or aria-labelledby attribute is present. ARIA labels define accessible names to be read by screen readers for interface elements. They may be used when HTML associations (label, alternative text, etc.) are not sufficient. A remedy to this problem would be to ensure the aria-label value or element referenced by aria-labelledby provides a descriptive, accurate label. When possible, use standard HTML < label > or other markup to make the association.

Divine-peace · 2022-10-23T23:26:15Z

This is the Summary and Suggestions for evaluating https://ipython.org/news.html with Wave

Suggestions for Errors (Language missing or invalid):

Add the document language using the attribute with a valid value (e.g., ).
Ensure that all lang attribute values are valid.

Suggestions for Contrast Errors (Install):
Foreground Color should be rgb(132, 62, 0).
Background Color should be rgb(225, 225 ,225)
Contrast Ratio should be 7.58:1

Suggestions for Contrast Errors (Documentation):
Foreground Color should be rgb(132, 62, 0).
Background Color should be rgb(225, 225 ,225)
Contrast Ratio should be 7.58:1

Suggestions for Contrast Errors (Project):
Foreground Color should be rgb(132, 62, 0).
Background Color should be rgb(225, 225 ,225)
Contrast Ratio should be 7.58:1

Suggestions for Contrast Errors (Jupyter):
Foreground Color should be rgb(132, 62, 0).
Background Color should be rgb(225, 225 ,225)
Contrast Ratio should be 7.58:1

Suggestions for Contrast Errors (News):
Foreground Color should be rgb(132, 62, 0).
Background Color should be rgb(225, 225 ,225)
Contrast Ratio should be 7.58:1

Suggestions for Contrast Errors (Cite):
Foreground Color should be rgb(132, 62, 0).
Background Color should be rgb(225, 225 ,225)
Contrast Ratio should be 7.58:1

Suggestions for Contrast Errors (Donate):
Foreground Color should be rgb(132, 62, 0).
Background Color should be rgb(225, 225 ,225)
Contrast Ratio should be 7.58:1

Suggestions for Contrast Errors ( Books):
Foreground Color should be rgb(132, 62, 0).
Background Color should be rgb(225, 225 ,225)
Contrast Ratio should be 7.58:1

Suggestions for Contrast Errors (Stack Overflow):
Foreground Color should be rgb(112 ,50, 0)
Background Color should be rgb(225, 225 ,225)
Contrast Ratio should be 9.78:1

Suggestions for Contrast Errors (Mailing list):
Foreground Color should be rgb(112 ,50, 0)
Background Color should be rgb(225, 225 ,225)
Contrast Ratio should be 9.78:1

Suggestions for Contrast Errors (File a bug):
Foreground Color should be rgb(112 ,50, 0)
Background Color should be rgb(225, 225 ,225)
Contrast Ratio should be 9.78:1

Suggestions for Contrast Errors ( Reddit):
Foreground Color should be rgb(112 ,50, 0)
Background Color should be rgb(225, 225 ,225)
Contrast Ratio should be 9.78:1

Suggestions for Contrast Errors ( Mailing list):
Foreground Color should be rgb(107, 46, 0 )
Background Color should be rgb(225, 225 ,225)
Contrast Ratio should be 10.41:1

Suggestions for Contrast Errors (Development Chat Room):
Foreground Color should be rgb(107, 46, 0 )
Background Color should be rgb(225, 225 ,225)
Contrast Ratio should be 10.41:1

Suggestions for Contrast Errors (Development information):
Foreground Color should be rgb(107, 46, 0 )
Background Color should be rgb(225, 225 ,225)
Contrast Ratio should be 10.41:1

Suggestions for Contrast Errors ( Travis CI):
Foreground Color should be rgb(107, 46, 0 )
Background Color should be rgb(225, 225 ,225)
Contrast Ratio should be 10.41:1

Suggestions for Contrast Errors ( Wiki):
Foreground Color should be rgb(107, 46, 0 )
Background Color should be rgb(225, 225 ,225)
Contrast Ratio should be 10.41:1

Suggestions for Contrast Errors ( ¶):
Foreground Color should be rgb(221, 221, 221 )
Background Color should be rgb(69, 69,69)
Contrast Ratio should be 10.41:1

Suggestions for Contrast Errors (release notes):
Foreground Color should be rgb(138, 60, 0 )
Background Color should be rgb(225, 225 ,225)
Contrast Ratio should be 7.71

Suggestions for Contrast Errors (Jupyter Blog):
Foreground Color should be rgb(138, 60, 0 )
Background Color should be rgb(225, 225 ,225)
Contrast Ratio should be 7.71

Suggestions for Alerts (Fully justified text is present):
Remove the full justification from the text.

Suggestions for Alerts (Suspicious alternative text):
Ensure that the alternative text for the image or image input provides a succinct, yet equivalent alternative to the content and function of the image.

Suggestions for Alerts (Suspicious Link text):
Where appropriate, reword the link text so that it is more descriptive of its destination when read out of context.

Suggestions for Alerts (An image has a title attribute value ):
Ensure the title attribute value presents the content and function of the image.
For better accessibility, the alt attribute should be used when possible.

Suggestions for Alerts (Link to PDF document):
Ensure the PDF document is natively accessible.
Inform the user that the link will open a PDF document.

Suggestions for Structural Elements (Heading Level 3):
Ensure that the text in question is truly a heading and that it is structured correctly in the page outline.
From the code evaluation, I recommend that the <h3> heading level on the sidebar should be replaced with a <h2> heading level for proper page structuring.

Suggestions for Structural Elements (Heading Level 4):
Ensure that the text in question is truly a heading and that it is structured correctly in the page outline.
From the code evaluation, I recommend that the <h4> heading level on the sidebar should be replaced with a <h2> heading level for proper page structuring.

Suggestions for Structural Elements (Footer):
Ensure the element surrounds and defines page or page section footer content.
From the code evaluation, I recommend that the copyright text be placed within a <p> paragraph element.

sgibson91 · 2022-10-24T19:00:05Z

This issue is now closed to new contributors. Thank you all for your contributions. Please remember to record them in Outreachy and submit your final application!

DBAKITA · 2022-11-03T17:09:31Z

Hello @minrk please see my open issue #130 with suggestions on on how the html and css of ipython documentation page https://ipython.org/documentation.html can be improved

minrk added microtask Microtask for Outreachy applicants to complete during the contribution period outreachy-dec22 Issues related to the December 2022 cohort of Outreachy labels Oct 4, 2022

sgibson91 added the multiple Multiple applicants can work on this task at the same time label Oct 5, 2022

This was referenced Oct 19, 2022

Accessibility: governance #90

Closed

Accessibility: #91

Closed

Accessibility: jupyter.org/community #93

Closed

Accessibility: jupyter.org/community #94

Closed

luquiceno mentioned this issue Oct 19, 2022

Accessibility: https://jupyter.org/governance/conduct/reporting_online.html #96

Closed

This was referenced Oct 20, 2022

Accessibility: ipython.org #98

Closed

Accessibility: governance intro #102

Closed

Bhaybhiisparks mentioned this issue Oct 20, 2022

Accessibility: ipython books #103

Closed

Ibom99 mentioned this issue Oct 22, 2022

Accessibility: https://docs.jupyter.org/en/latest/install.html #113

Closed

preshpi mentioned this issue Oct 23, 2022

Accessibility: Improving the accessibility in enforcement guidelines and principles page #116

Closed

Bhaybhiisparks mentioned this issue Oct 23, 2022

Accessibility: Governance/Decision_Making #117

Closed

Bhaybhiisparks mentioned this issue Oct 23, 2022

Accessibility: governance/papers #120

Closed

Ibom99 mentioned this issue Oct 24, 2022

Accessibility: https://ipython.org/usersurvey2011.html #124

Closed

sgibson91 closed this as completed Oct 24, 2022

This was referenced Oct 28, 2022

Accessibility: #129

Closed

Accessibility: #130

Closed

Evaluate Accessibility of Jupyter pages #38

Evaluate Accessibility of Jupyter pages #38

Comments

minrk commented Oct 4, 2022 • edited by sgibson91 Loading

Update

brendamoreira commented Oct 8, 2022

Uzor13 commented Oct 8, 2022

mahamtariq58 commented Oct 8, 2022

Uzor13 commented Oct 9, 2022 • edited Loading

IPython's Home Page

damli40 commented Oct 9, 2022

bl-aire commented Oct 9, 2022 • edited Loading

damli40 commented Oct 9, 2022

IPYTHON's home page

http://mybinder.org/ 's Home Page

Dapper50 commented Oct 9, 2022 • edited Loading

Mackenzie-OO7 commented Oct 9, 2022 • edited Loading

Suggestions for improving Binder and IPython's website

IPython

Binder

mahamtariq58 commented Oct 9, 2022

Lilianada commented Oct 10, 2022

minrk commented Oct 10, 2022

bl-aire commented Oct 10, 2022

Uzor13 commented Oct 10, 2022

Jupyter's Community page

Bhaybhiisparks commented Oct 10, 2022

minrk commented Oct 10, 2022

ChiomaNwosisi commented Oct 10, 2022

bl-aire commented Oct 10, 2022

Ibom99 commented Oct 10, 2022

Ibom99 commented Oct 10, 2022

Mackenzie-OO7 commented Oct 10, 2022

FaithKovi commented Oct 10, 2022 • edited Loading

Olaedey commented Oct 10, 2022

mahamtariq58 commented Oct 10, 2022

Mackenzie-OO7 commented Oct 10, 2022

damli40 commented Oct 10, 2022

Joel-Ando commented Oct 10, 2022

Biki-das commented Oct 19, 2022 • edited Loading

Jupyter.org Page Evaluation work

Contrast Errors 7

Alt text warning 5

Missing h1 head tag

Possibility of using heading

sgibson91 commented Oct 20, 2022

Update

bumblebib commented Oct 20, 2022

Divine-peace commented Oct 20, 2022

preshpi commented Oct 20, 2022 • edited Loading

Jupyter.org Enforcement guidelines and principles

9 Errors

5 Alerts

Features

33 Structural Elements

8 ARIA

smart882 commented Oct 21, 2022

Jupyter.org page Microtask

sugarmango66 commented Oct 22, 2022

Trailblazer007 commented Oct 22, 2022

Josephsanya commented Oct 23, 2022

BINDER.ORG WAVE ACCESSIBILITY RESULTS

Trailblazer007 commented Oct 23, 2022

Bhaybhiisparks commented Oct 23, 2022

Divine-peace commented Oct 23, 2022

sgibson91 commented Oct 24, 2022

DBAKITA commented Nov 3, 2022

minrk commented Oct 4, 2022 •

edited by sgibson91

Loading

Uzor13 commented Oct 9, 2022 •

edited

Loading

bl-aire commented Oct 9, 2022 •

edited

Loading

Dapper50 commented Oct 9, 2022 •

edited

Loading

Mackenzie-OO7 commented Oct 9, 2022 •

edited

Loading

FaithKovi commented Oct 10, 2022 •

edited

Loading

Biki-das commented Oct 19, 2022 •

edited

Loading

preshpi commented Oct 20, 2022 •

edited

Loading