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

Evaluate Accessibility of Jupyter pages #38

Closed minrk closed 1 year ago

minrk commented 1 year ago

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 commented 1 year ago

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

Uzor13 commented 1 year ago

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

mahamtariq58 commented 1 year ago

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

Uzor13 commented 1 year ago

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 commented 1 year ago

hi, can i work on this issue

bl-aire commented 1 year ago

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 test result

WAVE result

AXE test 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. HTML semantic elements

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 commented 1 year ago

accessibility accessibility2

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 commented 1 year ago

Screen Shot 2022-10-09 at 15 41 38

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 commented 1 year ago

Suggestions for improving Binder and IPython's website

IPython

ScreenShot_10_9_2022_8_40_21_PM

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

ScreenShot_10_9_2022_9_56_47_PM

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 commented 1 year ago

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

Lilianada commented 1 year ago

jupyter org_governance_intro html

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

minrk commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

@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 commented 1 year ago

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

bl-aire commented 1 year ago

@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 commented 1 year ago

Screenshot (212) Screenshot (213)

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 commented 1 year ago

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 commented 1 year ago

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

FaithKovi commented 1 year ago

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

Olaedey commented 1 year ago

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 commented 1 year ago

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

Mackenzie-OO7 commented 1 year ago

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

Thanks!

damli40 commented 1 year ago

accessibility3 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 commented 1 year ago

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

ipython

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.

M0Hassan commented 1 year ago

Wave_Evaluation

I evaluated the Ipython Interactive Computing page using the Wave tool to determine its accessibility. The following are my findings;

The page has a text form that does not have a corresponding form label. This can easily be fixed by adding the <label> element to describe the purpose of the text form.
Missing language or invalid value. The language of the page is not identified. This can be fixed by using the <html lang=""> attribute with a valid value; for example: <html lang-“en”>.
Very low contrast between text and background colors. Adequate contrast of text is necessary for all users, especially users with low vision. This issue 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.
Link text contains extraneous text or may not make sense out of context. Links, which are often read out of context, should clearly describe the destination or function of the link. Ambiguous text, text that does not make sense out of context, and extraneous text (such as "click here") can cause confusion and should be avoided. 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").
An accesskey attribute is present. 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 can be fixed by removing the Accesskeys.

Goodiec commented 1 year ago

Jupyter (jupyter.org)

wave-jupyter

Evaluation:

Very low contrast errors: The contrast of the text on the button elements against the background is very low contrast and this can make it difficult or impossible for many users especially those with low vision to read. Suggestion: The contrast between the text color and the background color should be increased to at least 4.5:1 for small text and 3:1 for large text. In this case, adjusting the background from rgb(228, 110, 46) to rgb(196, 84, 23).
Nearby images have the same alternative text: When two images have the same alternative text, this often causes redundancy or indicates incorrect alternative text. Suggestion: Ensure that the alternative text for each image or image button is appropriate while removing unnecessary redundancy.
Missing first-level heading (h1): the page does not have a first-level heading. One of the main reasons that the h1 element should appear at the beginning of the main content is that screen reader users can use keyboard shortcuts to navigate directly to the first h1 element, which, in principle, should allow them to jump directly to the main content of the web page. If there is no h1 element, or if the h1 element appears somewhere other than at the start of the main content, screen reader users will have to listen to additional web page content to understand the page structure, wasting valuable time. Suggestion: The main content of the page should be started with an h1 element.

Ipython.org (ipython.org)

wave-ipython

Evaluation:

Language missing or invalid: The element of the page does not have a [lang] attribute. The HTML document element must contain a valid lang attribute or must correspond to a valid lang code for multilingual screen reader users who may prefer a language other than the default. If a page doesn't specify a lang attribute, a screen reader assumes that the page is in the default language that the user chose when setting up the screen reader. If the page isn't actually in the default language, then the screen reader might not announce the page's text correctly. Suggestion: Add a lang attribute to the HTML element (e.g. ) whose value represents the primary language of document.
Very low contrast errors: The contrast of links, nav items, and footer text on the page against the background color. Some people with low vision experience low contrast, meaning that there aren't very many bright or dark areas. Everything tends to appear about the same brightness, which makes it hard to distinguish outlines, borders, edges, and details. Text that is too close in brightness to the background can be hard to read. Suggestion: The contrast between the text color and the background color should be increased to at least 4.5:1 for small text and 3:1 for large text. The footer text can be changed to #767674 from #888A85 while the other texts with low contrast can be changed from #CE5C00 to #C25700.
Fully Justified text: Justification impacts readability and tracking. Tracking is following lines of text and getting to the next line. In CSS, text-align options are: left, right, center, justify (="full justification"). With full justification, the text is flush with both the right and left margins (for left-right and right-left scripts). Fully justified text has adjusted spacing between words and sometimes adjusted space between letters. Justified text aligned to both the left and the right margins creates rivers of white running down the page due to extra word spacing. This makes the justified text difficult to read for some people. Suggestion: The best way to avoid the problem is to avoid justified text.
Suspicious alternative text: The alternative text for the header logo just says "Logo" which is insufficient. If the alternative text for an image does not provide the same content or information conveyed by the image, that content will not be available to screen reader users when images are unavailable. Suggestion: The alternative text for the image should be improved to something more descriptive of the content or function of the image like "This is an image of IPython's logo".
Image with title: Image has a title attribute value but no alt attribute value. Providing an alt attribute for the image provides better accessibility than the title attribute. 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. Suggestion: The alt attribute with information about the image's content should be used.
Suspicious link text: Link text contains extraneous text or may not make sense out of context. Ambiguous text, text that does not make sense out of context, and extraneous text (such as "click here") can cause confusion and should be avoided. Suggestion: Where appropriate, the link text should be reworded to be more descriptive of its destination when read out of context.

Olaedey commented 1 year ago

Screenshot 10-10-2022 13 49 46

Having evaluated https://ipython.org/project.html with WAVE accessibility tester, the following are the issues that need to be fixed and the suggestions to fix them.

1. Language missing or invalid (1): The language of the document is not identified or a lang attribute value is invalid. Suggestion: the document language using the attribute with a valid value (e.g., ) should be identified. Validity of all lang attribute values should be ensured.

2. Contrast Errors - Very low contrast (24): contrast between text and background colors. Suggestion: The contrast between the foreground (text) color and the background color should be increased. Large text (larger than 18 point or 14 point bold) does not require as much contrast as smaller text.

3. Justified text (3): Fully justified text is present. Suggestion: Full justification should be removed from the text.

4. Suspicious alternative text (1): Alternative text is likely insufficient or contains extraneous 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.

5. Image with title (2): An image has a title attribute value but no alt value. 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.

6. Features (2): Linked image with alternative text. Suggestion: Ensure that the alternative text presents the content of the image and/or the function of the link.

7. Structural Elements (15): Heading level 1 (1), Heading level 3 (3), Heading level 4 (1), Unordered list (2), Inline frame (3), Navigation (1), Main content (1). Suggestion: Ensure that they are all structured correctly in the page outline.

8 ARIA (1): An aria-label or aria-labelled by attribute is present. Suggestion: Ensure the aria-label value or element referenced by aria-labelled by provides a descriptive, accurate label. When possible, use standard HTML or other mark-up to make the association.

brendamoreira commented 1 year ago

Jupyter About Page

There are 3 contrast errors in the Donate section of the page, due to the dark background and dark font color. To change that you can change either, or both colours. The first two I would change the color of the "a" element from a{color:#c5540b} to a{color:#8A3700}. And for the third I'd change the font color from the element itself adding style="color: rgb(0, 0, 0) to the element and the background color from the parent from .about-box .orange-button{background-color: #E46E2E } to .about-box .orange-button{background-color: #E58957}.
There are 70 alerts. 68 are from redundant alternative text, since the alt is simply the person's name, which is the exact same text that is being shown after the image. The solution I suggest is adding the word "avatar" to the alt attribute. E.g <img (...) alt="Mehmet Bektas avatar" (...) src="/assets/bios/Mehmet_Bektas.jpg" (...)>. The 69th is a long alternative text, because the alt text must be descriptive but succinct. As a suggestion I would change the alt text from <img (...) alt="Horizon 2020 European Union funding for Research and Innovation logo - OpenDreamkit funded project - Home Page" (...)> to <img (...) alt="Horizon 2020 European Union logo" (...)>. The 70th alert consists in a Redundant link. Because there are two links next to each other that go to the same page, both the image and the text next to it. This results in a redundant navigation. So it's best to remove either one of them, in this case, the span text can be completely removed.
The structural elements: In the footer there are 3 <h2> elements that don't correspond to a heading to a <h1> element. They are there only for styling, which is not the purpose of the element. Making difficult for navigation. As a solution they can be easily replaced as a <ul> element, since they are the title for an unordered list, and then add the styling to the element. So instead of <h2 id="project-jupyter">Project Jupyter</h2> <ul>(...)</ul> it can become <ul id="project-jupyter" style="font-weight: bold">Project Jupyter <li>(...)</li>(...)</ul> The other structural elements are correctly used.
ARIA. There are 14 links that uses ARIA labels to describe themselves as "Anchor", which is not very sufficient descriptive. As a suggestion it could be changed by the title of the section it points to plus the string "section link". E.g <h2 (...)>Distinguished Contributors <a (...) aria-label="Distinguished Contributors section link">.

BenedictaUche commented 1 year ago

ipython contribution

41

After carrying out an accessibility test on Installing Ipython page, these are my observations and solutions:

Language missing or invalid: The page's natural language definition is missing due to the absence of the language property. These details are used by screen readers, browser add-ons, and other software. Solution: One approach would be to add a lang attribute to the HTML element if just one language is being utilized in that element. E.g <html lang="en">
Justified text: There are a lot of these contrast errors from justifying texts. Justifying the texts made empty spaces between texts which interrupts reading and also aesthetically unpleasing. In terms of accessibility, justified text is very difficult for those with vision issues or dyslexia to read. Solution: An approach to solving this problem is to remove full justification from the texts
Image title alert: There are two images with no alt values, thereby an accessibility issue. It provides better image context to users Solution: The alt value should be used e.g <img src="_static/nbviewer-thm-6.png" alt="image_text">
Contrast Errors: There is a low contrast between texts and background colors Solution: For the foreground, contrast ratios of 7.02:1 to 7.37:1 and colors between #000000 to #080808. For the background, contrast ratios7.09:1 to21:1 and colors between #969696 and #FFFFFF
Suspicious text: The single-word alt text doesn't provide enough context for the logo Solution: Include sufficiently descriptive texts that provide better context of the logo. E.g alt = Jupytercon logo #

Bhaybhiisparks commented 1 year ago

I evaluated the accessibility of https://ipython.org/books.html using the WAVE tool as recommended by the MENTOR. These are the issues and how I think they can be fixed:

IPYTHON’s books page

Missing/Invalid Document Language: The language of the document is not identified or a lang attribute value is invalid. Basically, the attribute is missing. This can be fixed by identifying the document language using the attribute with a valid value (e.g., < html lang="en" >), and ensuring all lang attribute values are valid.
Contrast Errors: There is very low contrast between text and background colors. Some text present have a contrast ratio less than 4.5:1, some large text (larger than 18 point or 14 point bold) have a contrast ratio less than 3:1. 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.
Alignment Error : There are fully justified text present which means a < p >, < div >, or < td > element has more than 500 characters and is styled with ‘text-align: justify’. I suggest removing the full justification from the text as large blocks of justified text can negatively impact readability due to varying word/letter spacing and 'rivers of white' that flow through the text.
Redundancy: There are 4 redundant alternative text on this page. This means an alternative (alt) text is the same as nearby or adjacent text(mostly within 15 characters away) and will be presented multiple times to screen readers when images are unavailable. I suggest changing either the alternative text or the adjacent text to eliminate the redundancy. In most cases, give the image empty/null alternative text (alt="") because the content of the image is already provided in context through text. Additionally, linked images may often be combined with the adjacent text into one link, in which case the image may be given null/empty alternative text (alt="").
Erroneous Alternate Text: There is presence of an alternative text containing either insufficient information or irrelevant information. For example the alt text value of an image or image button begins with: ‘graphic of’, ‘image of’, ends with ‘image,’ or ‘graphic’, or a generalizing name like "drawing", "painting", "artwork", "logo", "bullet", diagram etc. This most likely means that the correct information content would not be available to screen reader users when images are unavailable. I suggest that the alternative text for the image provides a succinct, yet equivalent alternative to the content and function of the image. Basically, 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 but should be used as last resort.
Missing Attribute Error: Two images have a title attribute value but no alt value. 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. 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. This can be fixed by ensuring the title attribute value presents the content and function of the image. For better accessibility, the alt attribute should be used when possible.
Possible Invalid Embedded Link: Alternative text is present for an image that is within a link, which translates to: 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.
Misuse Of Structural Element: One first level heading (< h1 > element), ten (10) second level headings (< h2 > element), five(5) third level headings (< h3 > element) and one fourth level heading (< h4 > element) are 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.
Misuse Of Structural Element 2: A < ul > element is present but might not be placed correctly or might be misued. 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.
Misuse Of Structural Element 3: An inline frame (< iframe >) is present but missing some accessibility features. The content of an inline frame is read as if it were part of the page that contains it. The content of the iframe must be accessible. A title attribute value for the iframe will generally be read by a screen reader when the iframe is encountered. This can be fixed by ensuring the content within the iframe is accessible. Optionally, a title attribute value can be added to provide a brief, advisory description of the iframe.
Misuse Of Structural Element 4: A < 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.
Misuse Of Structural Element 5: 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.
Misuse Of Structural Element 6: A < 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-LABEL Errors: An aria-label or aria-labelledby attribute is present, but missing additional attributes. 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. To correct this, 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.

Gospeland commented 1 year ago

wave webaim org-WAVEReportofSupportIPythonDevelopment—IPython

I would like to work on this page: https://ipython.org/donate.html. The text contrast error is something I can resolve. I think that a color like black would be good there. Though black sounds common but it sure would be perfect for the background of the website. Second option would be to add a background to the navigation links and then changing the link colors to make them more pronounced and blend with the website, For instance, black or navyblue background with white or smoky link color

OluwatuyiAbiola commented 1 year ago

ipython Presentation Page

Screenshots

ipython

Evaluation

Language missing or invalid: The language of the document is not identified or a lang attribute value is invalid. Suggestion: Identify the document language using the attribute with a valid value (e.g., <html lang="en">). Ensure that all lang attribute values are valid
Contrast Errors: Very low contrast between text and background colors. Suggestions: Increase the contrast between the foreground (text) color and the background color. Large text (larger than 18 points or 14 points bold) does not require as much contrast as smaller text. Changing color :#7A3700.
Justified text: Fully justified text is present. Suggestion: Remove the full justification from the text. A <p>,<div>, or <td> element has more than 500 characters and is styled with
```
text-align:justify
```
Suspicious alternative text: Alternative text is likely insufficient or contains extraneous 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 presentations inform the user that the object is an image, so the 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.
Image with title: Two images has a title attribute value but no alt value. Suggestions: 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: Three-link text contains extraneous text or may not make sense out of context. Suggestions: Where appropriate, 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").
Link to PDF document: Twenty-four link to a PDF document is present. Suggestions: Ensure the PDF document is natively accessible. Additionally, inform the user that the link will open a PDF document. Because PDF documents may have limitations in accessibility (particularly for complex content) and require a separate program, HTML content should often be used in place of or in addition to the PDF document.
Audio: An audio file or link is present. Suggestions: For video content, ensure that synchronized captioning and a transcript is provided. For audio-only content, ensure that a transcript is provided.
YouTube video: An embedded or linked YouTube video is present. Suggestions: Ensure that YouTube video presents equivalent, synchronized captions.
ARIA label: An aria-label or aria-labelled by attribute is present. Suggestions: Ensure the aria-label value or element referenced by aria-labelled by provides a descriptive, accurate label. When possible, use standard HTML <label> or another markup to make the association.

james95-developer commented 1 year ago

Capture https://jupyter.org/install 1.Very low contrast between texts and background colors which fail to meet Web Content Accessibility requirement making it difficult for people with disabilities to view the content clearly. Suggestions 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. 2.A page does not have a first level heading this may cause accessibility issues in accessing content by various users including people with disabilities. Suggestions If the page presents a main heading, place it within an <h1> element. Add other sub-headings as necessary in order to improve it's accessibility by various users. 3.Two images near each other have the same alternative text. Suggestions 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=""). Image buttons always convey a specific function, and thus cannot be given null alternative text. 4.A page does not have a first level heading. Suggestion If the page presents a main heading, place it within an <h1> element. Add other sub-headings as necessary. 5.Text appears to be a heading but is not a heading element. Suggestion If the paragraph is a section heading, use a heading element instead (<h1>-<h6>). 6.Image alternative text is present. Suggestion 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.

Ibom99 commented 1 year ago

Screenshot (218) Screenshot (219)

I ran WAVE on https://ipython.org/usersurvey2011.html, these are the web accessibility evaluation reports and my suggestions to improves its accessibility.

Evaluation:

Language missing or invalid: This means the language of the document is not identified. Identifying the language of the page or page elements allows screen readers to read the content in the appropriate language. Suggestion: I will add the lang="en" attribute to the html tag at the top of the document, being that the document is in English. Doing this aids automatic translation, identifies the document language and ensures it's value is a valid language identifier.
Contrast Errors (very low contrast): This means there's very low contrast between the text and background colors. Adequate color contrasts are essential for low vision users. Suggestion: I will make the text a deeper color, closer to maroon#800000 or burgundy #800020, to contrast with the background of the page.
ALERT: Justified Text: The content within a div is styled with text-align: justify; this creates wider plain space in-between words of the text, affecting readability. Suggestion: I will remove that styling on the content of the div, so that the words are normally spaced.
ALERT: Suspicious alternative text: Alternative text contains extraneous information. If the alternative text of an image isn't descriptive enough or isn't in-line with the content of the image, it becomes unavailable to screen-readers. Suggestion: I will change the alternative text alt="logo" to alt="IPython Logo" and the ones on the graphs to a more descriptive alternative text like alt="Pie chart of Countries recorded".
ALERT: Image Title: This image contains a title attribute and no alt="" attribute. Suggestion: I will add an alternative text to the image such as alt="IPython Notebook Viewer" to better accessibility for touch screen and keyboard users.
ALERT: Suspicious Link Text: Link text contains extraneous text. In this case the use of the word "here", that can create confusion. Suggestion: I will change the text for that link to be more descriptive of the location the link takes the reader to, such as the words 'Spreadsheet of the 240 responses.'

zeelyha commented 1 year ago

Screenshot (20)

The WAVE Evaluation of the JupyterHub Governance Page

Suggestions:

Empty form label: The element associated with the form should contain text to present information about the form control to the user. E.g <label for="html">HTML</label><br>

Multiple form labels: The form control should have at most one associated label element to ensure that assistive technology reads the appropriate label.

Missing lang attribute: Identifying the language of the page or page elements allows screen readers to read the content in the appropriate language. It also facilitates automatic translation of content. E.g <html lang="fr">.

Missing button: adding a descriptive text to a button helps screen readers indicate the function of the button during navigation.

Bhaybhiisparks commented 1 year ago

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

JUPYTER: Governance_Decision Making.

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
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/Form Control Clash: 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.
Incorrect Use Of Structural Element: Three first level heading(s) (< h1 > element) and Four (4) second level heading(s) (< h2 > element) 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: A < 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 4: A < 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 5: 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 6: A < 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: An 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: An 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.

luquiceno commented 1 year ago

jupyter.org -> https://jupyter.org/governance/conduct/reporting_online.html

accessibility_ReportingOnlinePage

THE RESULT OF THE EVALUATION USING "WAVE TOOL".

1. Language of the page: This page doesn’t contain the "lang" attribute in the element. This attribute allows to identifying the language of the page.

To solve this issue please add the following e.g. <html lang="en">

2. Button “Fullscreen mode”: This button doesn’t have a value text. For screen reader users, it is important to describe the function or what the button does on the web pages. A possible solution for this issue, is using the aria-label attribute as follows: e.g

<button aria-label="acceptbutton"></button>

In the "MDN Web Docs" explain that when an element has no accessible name, or an accessible name that isn't accurate, and there is no content visible in the DOM, you can use aria-label.

3. Errors with labels: To evaluate the page, the result shows that there are some labels without any text content and 2 multiple form labels. A possible solution for the text content error, is try to use the attribute title, because the assistive technology can recognize them.

<label title="descriptivename"></label>

And for the multiple form labels, a possible solution is use the attribute aria-labelledby.

<input type="checkbox" class="sidebar" aria-labelledby="Toggle navigation sidebar">

4. ARIA label: The web page analyzed highlights the use of 5 times "aria" and 7 times "aria-label". Although "aria" defines ways to make our web pages more accesible for people with disabilities, it’s important to note that not all browsers support its use. In this case you should use the native or standard HTML such as <h1>, <h2> etc.

Changes to consider in the 5 cases using "aria-level":

It's suggested to change the order of the role attribute, to make it a little more understandable that the specified aria-level is a heading, as follow

 `<p role="heading" aria-level="2" class="caption">` …

It is recommended to try to use more of the standard or native HTML elements, rather than using aria-level and role.

5. Image without a proper description: the attribute "alt" is used inside the tag <img> to give a detailed description of the image to be displayed. On our evaluation page the attribute "alt" of the license image is very short. To solve this issue please update the "alt" atttribute for example with:

<img src="https://licensebuttons.net/p/zero/1.0/88x31.png" style="border-style: none;" alt="Creative Commons Zero license CC0">

zeelyha commented 1 year ago

@minrk Screenshot (21)

The WAVE Evaluation of the JupyterHub Reporting Guide Page

Suggestions:

Empty form label: The element associated with the form should contain text to present information about the form control to the user. E.g <label for="html">HTML</label>

Multiple form labels: The form control should have at most one associated label element to ensure that assistive technology reads the appropriate label.

Empty button: adding a descriptive text to a button helps screen readers indicate the function of the button during navigation.

Suspicious Link: Links should be reworded to clearly describe the destination or function of the link to prevent ambiguity and confusion on the part of the users. Extraneous texts like “found here” in this case should also be removed and replaced with something like “ found in the code of conduct”.

Redundant Link: Redundant links should be combined into one link to prevent additional navigation and repetition for keyboard and screen readers. Redundant text or alternative text should also be removed (for example, if a product image and product name are in the same link, the image can usually be given alt="").

kerylefondji commented 1 year ago

Hi everyone, am an outreachy applicant I evaluated the page https://ipython.org/index.html and these was my observations and suggestion:

The language of the document is not identified : The attrubute <html lang="en"> has to be included in the code inorder for the screen readers to read the content in the appropiate language.
Very low contrast : The contrast between the text and the background has to be increase because the minimum acceptable contrast ratio for WCAG 2.1 AA compliance is 4.5:1 for body text or any smaller font sizes 18 pixels and below. Text larger than 18 pixels or fonts that are 14 pixels and bold can have a contrast ratio of 3:1 and still be compliant. For reference, here are examples of text with a contrast ratio of 4.5:1:
```
Gray (#767676) on a white background
Blue (#4D29DB) on a teal background (#83D1D8)
Orange (#BE551D) on a black background
```

uyiehiabhi commented 1 year ago

Snip1

I evaluated the accessibility of the website ipython.org using the WAVE tool and made some suggestions as required.

The language on the website is not identified or the language identifier is not valid. An identified language makes translation of content by the viewers easy especially for people with disability and limitations. I recommend that the language is identified with a valid language identifier.
There are 48 contrast errors. The contrast between the texts and background is low, this will make it difficult for viewers with low visions to access the website content. I recommend increasing contrasts between the texts and the background. Also change the sizes of some texts in relation to other elements.
Justified text could discourage viewers from reading through the content therefore I recommend removing the full justification from the text. Insufficient alternative text makes content unavailable to viewers, an image with title attribution has no alt value and link with out of context content should be avoided therefore including sufficient alternative text, images with title attribute and alt value and ensuring link texts are descriptive and not out of context is recommended.

Olaedey commented 1 year ago

# Screenshot 10-11-2022 11 10 04

https://ipython.org/news.html was evaluated using WAVE accessibility testing tool. The following were the issues encountered and the suggestions to fix them.

Error (1) Language missing or invalid: The language of the document is not identified or a lang attribute value is invalid. Suggestion: Identify the document language using the attribute with a valid value (e.g., <html lang="en"> ). Ensure that all lang attribute values are valid.
Contrast Errors (197) Very low contrast: Very low contrast between text and background colors. Suggestion: 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.
Alerts (173) Justified text (157): 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. Suggestion: Remove the full justification from the text. Suspicious alternative text(4): Alternative text is likely insufficient or contains extraneous 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. Image with title (2): An image has a title attribute value but no alt value. 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 (9): Link text contains extraneous text or may not make sense out of context. Suggestion: Where appropriate, 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"). Link to PDF document (1): A link to a PDF document is present. Suggestion: Ensure the PDF document is natively accessible. Additionally, inform the user that the link will open a PDF document. Because PDF documents may have limitations in accessibility (particularly for complex content) and require a separate program, HTML content should often be used in place of or in addition to the PDF document.
Features (2) Linked image with alternative text: Alternative text is present for an image that is within a link. Suggestion: 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.
Structural Elements (86) Heading level 1 (1): A first level heading (<h1> element) is present. Suggestion: Ensure that the text in question is truly a heading and that it is structured correctly in the page outline. Heading level 2 (72): A second level heading (<h2> element) is present. Suggestion: Ensure that the text in question is truly a heading and that it is structured correctly in the page outline. Heading level 3 (5) : A third level heading (<h3> element) is present. Suggestion: Ensure that the text in question is truly a heading and that it is structured correctly in the page outline. Heading level 4 (1): A fourth level heading (<h4> element) is present. Suggestion: Ensure that the text in question is truly a heading and that it is structured correctly in the page outline. Unordered list (3): An unordered (bulleted) list (<ul> element) is present. Suggestion: 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. Inline frame (1): An inline frame (<iframe>) is present. Suggestion: Ensure that the content within the iframe is accessible. Optionally, a title attribute value can be added to provide a brief, advisory description of the iframe. Navigation (1): A <nav> element or navigation landmark is present. Suggestion: The navigation identifies a section of navigation links and can facilitate page semantics and navigation. Main content (1): A <main> element or main landmark is present. Suggestion: Ensure the element surrounds and defines page main content. Footer (1): A <footer> element or content info landmark is present. Suggestion: Ensure the element surrounds and defines page or page section footer content.
ARIA (1) ARIA label : An aria-label or aria-labelledby attribute is present. Suggestion: 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.

Maryann-01 commented 1 year ago

Hello everyone ,I am Amaraizu Mmesoma Maryann and I worked on Binder(http://mybinder.org/) homepage using the WAVE tool and I noticed the following: Screenshot (59)

Absence of the html language attribute() Suggestion:I suggest that the language attribute be included to enable screenreaders provide the correct accent and pronounciation.

2.Low contrast between the text and background color. I suggest that a contrast ratio of 4:5:1 be used for the smaller texts while the bigger texts require a contrast ratio of 3:1. I equally recommend that lighter and darker colors be picked as background colors and text colors to avoid low contrast.

3.No use of semantic html Suggestion: Use of div tags in place of semantic html tags like header,footer,main,nav,aside etc should be avoided to enable screen-readers interprete better and for readability of the code.

4.No use of alternative texts in some images. Suggestion: Alternative texts that describe the image should be used to aid the screen-readers read aloud the description of the image for users that are unable to see.

5.Presence of inaccessible event handlers. Suggestion :Device independent handlers such as onfocus ,onblur ,onclick which responds to both keyboard and mouse should be used. Mouse dependent and a keyboard dependent handler can be used too.

6.ARIA attributes should be included to aid accessibility.

Abolade017 commented 1 year ago

My name is Adeola Tawakalitu Adenike. After accessing the jupyter.org website with WAVE tool, the evaluation to the website accessibility is the image below:

jupytercon page

The following is the detailed evaluation done on the website accessibility:

Contrast error (7) : There is a very low contrast between text and background colors. We can fix this error 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.
A nearby image has the same alternative text (2) : We can fix this alert by ensuring 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=""). Image buttons always convey a specific function, and thus cannot be given null alternative text.
Missing <h1> first level element (1) : Headings facilitate page navigation for users of many assistive 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. It should contain the most important heading on the page (generally the document title). If the page presents a main heading, place it within an <h1> element. Add other sub-headings as necessary.
Possible heading (2) : Text appear to be a heading but it is not a heading element. Heading elements (<h1>-<h6>) provide important document structure, outlines, and navigation functionality to assistive technology users. If heading text is not a true heading, this information and functionality will not be available for that text. If the paragraph is a section heading, use a heading element instead (<h1>-<h6>).
Images having alternative text that is not equivalent to the images function or content (20) : Alternative text presents 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 fix 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.
Link images with alternative text (30) : Alternative text is present for an image that is within a link. This can be fixed 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.
Language (1) : Language of the document or a page element is identified. Identifying the language of the page or portion of page (if different from the page itself) allows screen readers to read the content appropriately. 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">).
Heading level (19) : This comprises of seven heading level two (<h2>) and twelve heading level three (<h3>) This can be fixed by ensuring that the text in question is truly a heading and that it is structured correctly in the page outline.
Unordered list (5) : An unordered (bulleted) list (<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>) is likely more appropriate.
Navigation (1) : A <nav> element or navigation landmark is present. The navigation identifies a section of navigation links and can facilitate page semantics and navigation. it can be fixed by ensuring the element defines page navigation. Multiple navigation elements on one page can be differentiated with ARIA labels.
Footer (1) : A <footer> element or contentinfo landmark is present.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. it can be fixed by ensuring the element surrounds and defines page or page section footer content.

james95-developer commented 1 year ago

enforcement1 https://jupyter.org/governance/conduct/enforcement.html

Empty form label A form label is present, but does not contain any content therefore, it will not present any information about the form control to the user. Suggestion 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. If more than one label element is associated to the control, assistive technology may not read the appropriate label Suggestion Ensure that at most one label element is associated to the form control. If multiple form labels are necessary, use ARIA-.
Empty button A button is empty or has no value text. When navigating to a button, descriptive text must be presented to screen reader users to indicate the function of the button. Suggestion Place text content within the <button> element or give the element a value attribute.
Language missing or invalid The language of the document is not identified or a lang attribute value is invalid. Identifying the language of the page or page elements allows screen readers to read the content in the appropriate language. It also facilitates automatic translation of content. Suggestion Identify 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 5.ARIA label An 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. Suggestion 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

Olaedey commented 1 year ago

Screenshot 10-11-2022 13 42 22

I evaluated https://ipython.org/pyreadline.html using WAVE accessibility testing tool. The followings were the issues encountered and the suggestions to fix them.

Errors (1) Language missing or invalid: The language of the document is not identified or a lang attribute value is invalid. Suggestion: Identify 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.
Contrast Errors (24) Very low contrast: Very low contrast between text and background colors. Suggestion: 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.
Alerts (7) Justified text (4): Fully justified text is present. Suggestion: Remove the full justification from the text. Suspicious alternative text (1): Alternative text is likely insufficient or contains extraneous 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. Image with title (2): An image has a title attribute value but no alt value. Suggestion : 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. 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.
Features (2) Linked image with alternative text: Alternative text is present for an image that is within a link. Suggestion: 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.
Structural Elements(13) Heading level 1 (1): A first level heading (<h1> element) is present. Suggestion: Ensure that the text in question is truly a heading and that it is structured correctly in the page outline. Heading level 3 (5): A third level heading (<h3> element) is present. Suggestion: Ensure that the text in question is truly a heading and that it is structured correctly in the page outline. Heading level 4 (1): A fourth level heading (<h4> element) is present. Suggestion: Ensure that the text in question is truly a heading and that it is structured correctly in the page outline. Unordered list (2): An unordered (bulleted) list (<ul> element) is present. Suggestion: 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. Inline frame (1): An inline frame (<iframe>) is present. Suggestion: Ensure that the content within the iframe is accessible. Optionally, a title attribute value can be added to provide a brief, advisory description of the iframe. Navigation (1): A <nav> element or navigation landmark is present. Suggestion: Ensure the element defines page navigation. Multiple navigation elements on one page can be differentiated with ARIA labels. Main content (1): A <main> element or main landmark is present. Suggestion: Ensure the element surrounds and defines page main content. Footer(1): A <footer> element or contentinfo landmark is present. Suggestion: Ensure the element surrounds and defines page or page section footer content.
ARIA(1) ARIA label: An aria-label or aria-labelledby attribute is present. Suggestion: 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.

Abolade017 commented 1 year ago

I accessed the https://jupyter.org/try page, the evaluation done is below:

try jupyter

Evalutaion

Alternative text (1) : Alternative text presents 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 fixed 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.
Linked image with alternative text (10) : Alternative text is present for an image that is within a link. 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. it can be fixed 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.
Language (1) : The language of the document or a page element is identified. Identifying the language of the page or portion of page (if different from the page itself) allows screen readers to read the content appropriately. it can be fixed by ensuring that 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">).
Heading level (15) : A second level heading (<h2> element) is present and fourteen third level heading (<h3> element) is present. Headings facilitate page navigation for users of assistive technologies. They also provide semantic and visual meaning and structure to the document. Ensure that the text in question is truly a heading and that it is structured correctly in the page outline.
Unordered list (4) : An unordered (bulleted) list (<ul> element) is present. Ordered lists present a group of related, parallel items. Users of many assistive technologies can navigate by and within lists. 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>) is likely more appropriate.
Navigation (1) : A <nav> element or navigation landmark is present. The navigation identifies a section of navigation links and can facilitate page semantics and navigation. it can be fixed by ensuring the element defines page navigation. Multiple navigation elements on one page can be differentiated with ARIA labels.
Footer (1) : A <footer> element or contentinfo landmark is present. 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. Ensure the element surrounds and defines page or page section footer content.
ARIAL label (14) : An 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. Ensure the aria-label value or element referenced byaria-labelledby provides a descriptive, accurate label. When possible, use standard HTML <label> or other markup to make the association.

Ibom99 commented 1 year ago

Screenshot (225) I evaluate https://jupyter.org/widgets and these are my suggestions to improve it's accessibility

Evaluation:

Contrast Errors: Very Low Contrast: There's very low contrast between the text and it's background. This is a problem for low vision user. Suggestion: On this page I'll make that particular text color a deeper blue to contrast with it's background. eg: #00308F.
ALERT: Skipped Heading Level: A heading level was skipped. This causes navigation difficulty or confusion for users of assistive technology. Suggestion: I will follow the <h1></h1> tag with <h2></h2> to ease the navigation.
ALERT: Redundant Link: Adjacent Links go to the same URL. This causes repetition for keyboard and screen reader users. Suggestion: I will put the redundant links into one so they lead to one URL..

@minrk 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.