Evaluate Accessibility of Jupyter pages

[minrk]

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.

1. Familiarize yourself with the basics of web accessibility

2. Install the WAVE tool for evaluating web accessibility

3. Select a page from one of these websites (using this spreadsheet):

   1. jupyter.org
   2. ipython.org
   3. mybinder.org

4. Use WAVE to evaluate your selected page

5. Identify a specific change in the HTML or CSS that improve the page, with respect to accessibility

6. 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:

1. get some familiarity with accessibility
2. install and use accessibility tools to identify issues
3. understand the issues you've found
4. 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.

[Abolade017]

i accessed https://jupyter.org/community page. The following below is the evaluation:

Evaluation

• Contrast error (9) : Very low contrast between text and background colors. Adequate contrast of text is necessary for all users, especially users with low vision. it can be fixed by 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.
• Suspicious link text (1) : 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. it can be fixed by rewording the link text so that it is more descriptive of its destination when read out of context where appropriate. Remove any extraneous text (such as "click here").
• Redundant link (2) : It means adjacent links go to the same URL. When adjacent links go to the same location (such as a linked product image and an adjacent linked product name that go to the same product page) this results in additional navigation and repetition for keyboard and screen reader users. 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="").
• Alternative text (1) : Image alternative text is present. 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. 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.
• Linked image with alternative (1) : 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. Ensure 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 (8) : this comprises of one first level heading (<h1> element) is present and seven heading level two (<h2> element) is present. Headings facilitate page navigation for users of assistive technologies. They also provide semantic and visual meaning and structure to the document. First level headings should contain the most important heading(s) on the page (generally the document title), heading(s) 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 (5) : 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 that 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 that the element surrounds and defines page or page section footer content.
• ARIAL label (23) : 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. it can be fixed by ensuring that 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.

[damli40]

I evaluated the accessibilty of https://jupyter.org/governance/list_of_standing_committees_and_working_groups.html

here are the issues and my solutions:

• A form label is present, but does not contain any content. This can be fixed by adding a label text that describes the function to be carried out.
• A form control has 2 label tags. From what i can see the second label attribute is the arial-label, this can be fixed by ensuring that at most one label element is associated to the form control. If multiple form labels are necessary, use aria-labelledby
• The language of the document is not identified or a lang attribute value is invalid. This can be fixed by using the lang='en' in the opening HTML tag.
• A button is empty or has no value text. This can be fixed by placing text content within the <button> element or give the <input> element a value attribute.
• 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").

These issues can be fixed from simple HTML

[Maryann-01]

@minrk ,please I am confused. Are we to work on any of the three links you posted or on the links posted in spreadsheet? I took a screenshot for better understanding of my question .Are we to work on any of the links marked with blue or the links in the spreadsheet marked with red?

[damli40]

@minrk I made my first PR on the binder hub page, can you check it out ?

[damli40]

@minrk ,please I am confused. Are we to work on any of the three links you posted or on the links posted in spreadsheet? I took a screenshot for better understanding of my question .Are we to work on any of the links marked with blue or the links in the spreadsheet marked with red?

You can work on any of the 3 links, Just make sure to update it on the spreadsheet, there are also more links on the spreadsheet...you can work on those too.

[bumblebib]

The page I chose for evaluation was the Microsoft Corporation sponsors IPython

Evaluation:

1. Overall accessibility: The page doesn't offer a responsive layout for those accessing the website from a Mobile device. The document needs to be updated with the meta viewport tag <meta name="viewport" content="width=device-width, initial-scale=1.0"> for a responsible layout.

Also, still on responsible layout, another suggestion is implementing CSS media queries to help on adjusting content accordingly to the device's screen.

Another suggestion would be using updated tags such as <section> and <main> to organize sections within the page. Those using screen readers cannot differentiate the main content from the sidebar content of the page, this can cause some confusion about what the page is about.

The final suggestion would be to nest the main menu inside the <nav> tag, the HTML5 semantics recommend that for main link controlling for other sections of the website, <nav> should be used. This can also help user agents such as screen readers to determine whether to omit the initial rendering of navigation-only content.

2. Errors: The language of the document is not identified. The main <html> tag is declared as <html xmlns="http://www.w3.org/1999/xhtml"> without the language of the document being declared. Declaring the language within the HTML tag as xml:lang="en" lang="en". This helps screen readers to identify the language the text should be read, and it helps the Google Translation function to identify the language and translate it.

It also doesn't have the <meta charset> tag, which defines what characters the language uses.

3. Contrast Errors: There's in total 25 contrast errors present on this page, this means 25 texts with very low contrast against the background color, which can be inconvenience for those that suffer with color blindness. Right now, the accent colors for links are #ce5c00. My suggestion is to use a dark version of the color such as #2C558C that is approved to have a higher contrast against the white background.

4. Alerts: There are a total of 5 justified text alerts. Having large blocks of justified text can have a negative impact in readability. This blocks of text can have awkward spacing between each word and even splitting words into syllables. My suggestion would be instead of having justified text, set in CSS a letter-spacing property to add a natural spacing between the letters, thus helping the readability and overall look of the text.

Images with title or no alternative text. Making sure that both title and alt text of the image says not only it's content, but also it's function (e.g: icons) can help screen readers describe the image, and if for whatever reason the image won't load, the alternative text is shown in its place to let the user know what the image was about. The same problem is found for images that are nested within links.

5. Structural Elements: As mentioned at the beginning of the evaluation, a better structure of the HTML tags are advised. Adding tags such as <header>, <nav>, <footer> among others is better than having <div> with named classes. Most of the reading screen agents, are guided by semantic HTML tags, so it's important to structure pages using them. It's important to mention that the sidebar content, is read before the main content of the page. I would recommend implementing a large <footer> with the other social links.

6. Aria: An aria-label or aria-labelledby attribute is present. However, is not used accordingly. It points to the side menu, with the aria label as aria-label="main navigation", it would be better having the label of "main navigation" for the menu at the top, and having a label such as "sidebar menu" or "other links" for the side menu. This can help screen readers point to users where are the most important links, such as "download", "documentation" etc.

In conclusion: Most of the problems and bugs found can be fixed by going through the HTML file and updating it to recent standards for accessibility. But it's important to give the main focus on structuring the page with the correct tags and making it responsible with the help of CSS.

[bl-aire]

@minrk I made my first PR on the binder hub page, can you check it out ?

Hi, Please I need clarification. Are we to work on the pages now and create PRs?

@sgibson91 mentioned work is to be done on them during the internship so I'm a bit confused.

[damli40]

@minrk I made my first PR on the binder hub page, can you check it out ?

Hi, Please I need clarification. Are we to work on the pages now and create PRs?

@sgibson91 mentioned work is to be done on them during the internship so I'm a bit confused.

I'm not sure about that :(

[bl-aire]

@minrk I made my first PR on the binder hub page, can you check it out ?

Hi, Please I need clarification. Are we to work on the pages now and create PRs?

@sgibson91 mentioned work is to be done on them during the internship so I'm a bit confused.

I'm not sure about that :(

Okay.Thank you I remember seeing that on Gitter.

[Divine-peace]

[sgibson91]

Hi, Please I need clarification. Are we to work on the pages now and create PRs?

@sgibson91 mentioned work is to be done on them during the internship so I'm a bit confused.

@bl-aire This issue should be worked on now. I meant that the issue you specifically opened in the jupyterhub repo regarding creating a developers guide for testing accessibility was more like the work we want to do during the internship as it was quite advanced. If we did that level of work during the contribution period, we wouldn't need to take on an intern!

[bl-aire]

Hi, Please I need clarification. Are we to work on the pages now and create PRs?

@sgibson91 mentioned work is to be done on them during the internship so I'm a bit confused.

@bl-aire This issue should be worked on now. I meant that the issue you specifically opened in the jupyterhub repo regarding creating a developers guide for testing accessibility was more like the work we want to do during the internship as it was quite advanced. If we did that level of work during the contribution period, we wouldn't need to take on an intern!

Okay.

I get it now. Thank you

[james95-developer]

jupyter.org>https://jupyter.org/governance/executive_council.html 1.Multiple form labels A form control has more than one label associated with it. 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. Suggestion Ensure that at most one label element is associated to the form control. If multiple form labels are necessary, use aria-labelledby.

2. Empty form label A form label is present, but does not contain any content. <label for="__navigation" .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. 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.
3. 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 element or give the <input> element a value attribute.

[Joel-Ando]

Hi, Please I need clarification. Are we to work on the pages now and create PRs? @sgibson91 mentioned work is to be done on them during the internship so I'm a bit confused.

@bl-aire This issue should be worked on now. I meant that the issue you specifically opened in the jupyterhub repo regarding creating a developers guide for testing accessibility was more like the work we want to do during the internship as it was quite advanced. If we did that level of work during the contribution period, we wouldn't need to take on an intern!

Please! Mrs @sgibson91 are we to use only wave to evaluate accessibility of Jupyter pages or we can span to other ways

[Dev-Liz]

1. Evaluating the accessibility of https://ipython.org/sloan-grant.html

1 Error (Language missing or invalid):

This error requires that a lang attribute should be added to the <html> tag, to declare the language of the webpage.

27 Contrast Errors (Very low contrast):

This error requires an enhanced contrast between the text and background colors of the navigation links.

14 Alerts

• 9 Fully justified texts present: Fully justified texts impairs readability. It creates patterns of unintended whitespace that distract the eye from the natural flow of text. This prompts requires that paragraph texts of this web page should be left-aligned or center-aligned, for easy readability.

• 1 Suspicious Alternative Text: Alternative text on the page logo is insufficient, and should be more descriptive. For e.g, writing “Logo of Ipython” instead of just “Logo”

• 2 Images with title: The first and second images on the sidebar, has a ‘title’ attribute that is not visible to screen readers. An alt-text attribute should be used in the <img> tag instead.

• 2 Links to PDF Documents: Ensure that embedded documents meet accessibility requirements (by using document accessibility check tools like acrobat), before being linked to the web page. Or link the PDF to a dedicated website that gives a detailed description of the document, before being downloaded.

17 Structural Elements:

HTML semantic elements such as <header> <nav> <section> etc., should be used to ensure that the page is well structured.

[Dev-Liz]

2. Evaluating the accessibility of https://jupyter.org/governance/distinguished_contributors.html

9 Errors:

• 5 empty form labels: Label should be used to display input contents and not icons. The <label> tag used to wrap the <i> tag, should be replaced with a <span>

• 2 multiple form labels: form inputs should not contain more than one aria-label

• 1 Language missing or invalid: This webpage requires that a lang attribute should be added to the <html> tag, to declare the language of the page.

• 1 empty button: Ensure to display button content or value.

[Dev-Liz]

3. Evaluating the accessibility of https://ipython.org/whatsnew083.html

1 Error (Language missing or invalid):

This error requires that a lang attribute should be added to the <html> tag, to declare the language of the webpage.

22 Contrast Errors (Very low contrast):

This error requires an enhanced contrast between the text and background colors of the navigation links.

20 Alerts

• 17 Fully justified texts present: Fully justified texts impairs readability. It creates patterns of unintended whitespace that distract the eye from the natural flow of text. This prompts requires that paragraph texts of this web page should be left-aligned or center-aligned, for easy readability.

• 1 Suspicious Alternative Text: Alternative text on the page logo is insufficient, and should be more descriptive. For e.g, writing “Logo of Ipython” instead of just “Logo”

• 2 Images with title: The first and second images on the sidebar, has a ‘title’ attribute that is not visible to screen readers. An alt-text attribute should be used in the <img> tag instead.

19 Structural Elements:

HTML semantic elements such as <header> <nav> <section> etc., should be used to ensure that the page is well structured.

[falyne]

https://jupyter.org/governance/newsubprojects.html Evaluation 9 ERRORS 5 Empty form label errors because the search input and the search button have a label associated with them but contain no content. To improve accessibility we need to ensure that the form label contains text that describes the function of the associated form control. A descriptive title attribute may be added to the form control. Two errors of Multiple form labels. This indicates that multiple form labels are tied to the same input. This can affect screen reader users and mouse readers (when clicking on a search form the browser can get confused) To improve accessibility to these forms we need to give unique ids to the form inputs One empty Button. This indicates that A button is empty or has no value text. To Improve accessibility, we need to place text content within the 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 the solution to this is to identify the document language using the attribute with a valid value (e.g., ). Ensure that all lang attribute values are valid.

CONTRAST ERRORS -Very Low contrast error found on the page -Adequate contrast of text is necessary for all users, especially users with low vision To improve on this issue, there needs to be an increase in the contrast between the foreground (text) color and the background color. Large text does not require as much contrast as smaller text.

6 ALERTS 1 Suspicious link text- Some Link text contains extraneous text or may not make sense out of context. The solution is to re-write link text to be more descriptive and to ensure the absence of any extraneous text 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 can cause confusion and should be avoided. 5 Redundant link Adjacent Links go to the same URL The solution is to 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=""). FEATURES 1-Alternative text is present for an image that is within a link. This presents the content of the image and/or the function of the link. 2 Form Label -For Form Labels on the page the label is accurate, descriptive, succinct, and it is associated with the correct form control element. STRUCTURAL ELEMENTS -The structure of the Elements of the page shows a right placement/flow of elements Hierarchically. Each element is rightly placed -The Page has most accessibility features for a vast group of people -ARIA labels define accessible names to be read by screen readers for interface elements. -ARIA role, state, or property present on the page provides enhanced semantics and accessibility for web content

[Divine-peace]

Suggestions for Form labels present but do not contain any content: 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. From the code evaluation, I suggest that a label element should not be used as a container for icons rather a div element.

Suggestions for Multiple form labels: Ensure that at most one label element is associated with the form control. If multiple form labels are necessary, use aria-labelledby. I would recommend simply using aria-labelledby instead of aria-label for multiple form labels.

Suggestions for Language missing or invalid: I suggest that a lang attribute should be used instead of a style attribute to indicate the language of an html document.

Suggestions for Empty buttons: Place text content within the element or give the element a value attribute.

Suggestions for Redundant link Alert: 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="").

Suggestions for Features: 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. Ensure that labels are accurate, descriptive, succinct, and that they are associated with the correct form control element.

Suggestions for Stuctured Elements: Headings facilitate page navigation for users of assistive technologies. They also provide semantic and visual meaning and structure to the document. From the code evaluation, I suggest that the page should have only one H1 tag which helps convey the title of the page and not two.

[Abolade017]

I have evaluated the accessibility of https://ipython.org/ page. My evaluation is the following below:

Evaluation

• Language missing or invalid (1) : The <html lang> attribute is missing or is empty, or a lang attribute value is not a valid language identifier. 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. it can be fix by Identifying 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 error (47) : 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. 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.
• Justified text (14) : A <p>, <div>, or <td> element has more than 500 characters and is 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. it can be fixed by removing the full justification from the text.
• Suspicious alternative text (1) : Alternative text is likely insufficient or contains extraneous information or is empty. it can be fixed by ensuring 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 is present that does not have an alt attribute or alt attribute value, but does have a title attribute 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. It can be fixed by ensuring that 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 (1) : A link (including alt text of linked images) contains the phrase "click here" or "click", or the link text is "click here", "here","more", "more...", "details", "more details","link", "this page", "continue", "continue reading", "read more", or "button". 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. It can be fixed by appropriately 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").
• Link image with alternative text (3) : 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. 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.
• Heading level element (9) : Three heading level 1 (<h1> element) is present, five heading level 3 element is also present and one heading level 4 is present. Headings facilitate page navigation for users of assistive technologies. They also provide semantic and visual meaning and structure to the document. First level headings should contain the most important heading(s) on the page (generally the document title). 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.
• Unordered list (4) : 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.
• Inline frame (1) : An inline frame (<iframe>) is present. 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. It can be fixed by ensuring 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 role="navigation" 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.
• Main content (1) : A <main> element or role="main" is present. The <main> element or role="main" attribute identifies the main content for the page. This facilitate page semantics and navigation. It can be fixed by ensuring that the element surrounds and defines page main content.
• Footer (1) : A <footer> element or role="contentinfo" 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 that the element surrounds and defines page or page section footer content.
• ARIA label (1) : 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. It can be fixed by ensuring that 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]

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

Errors (9) Empty form label (5): A form label is present, but does not contain any content. 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 (2): A form control has more than one label associated with it. Suggestion: Ensure that at most one label element is associated to the form control. If multiple form labels are necessary, use aria-labelledby. Language missing or invalid (1): 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. Empty button (1): A button is empty or has no value text. Suggestion: Place text content within the element or give the element a value attribute.

Features (3) Linked image with alternative text (1): 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. Form label (2): A form label is present and associated with a form control. Suggestion: Ensure that the label is accurate, descriptive, succinct, and that it is associated with the correct form control element.

[Abolade017]

I evaluated the web accessibility of https://jupyter.org/hub page. My evaluation is the following:

Detailed Evaluation

• Missing first level heading element (1) : A page does not have an <h1> element. 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.
• Alternative text (2) : A non-empty alt attribute is present on an image. 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 (1) : 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. 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) : A document or an element has a valid lang attribute value. 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 2 (7) : An <h2> element is present. Headings facilitate page navigation for users of assistive technologies. They also provide semantic and visual meaning and structure to the document. 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.
• Unordered list (4) : A <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 role="navigation" is present. The navigation identifies a section of navigation links and can facilitate page semantics and navigation. It can be fixed by ensuring that the element defines page navigation. Multiple navigation elements on one page can be differentiated with ARIA labels.
• Footer (1) : A <footer> element or role="contentinfo" 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 that the element surrounds and defines page or page section footer content.
• ARIA labels 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. It can be fixed by ensuring 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.

[kerylefondji]

hello everyone i can't see my evaluation i did yesterday, what can be the problem?

[Abolade017]

I evaluated the web accessibility of https://jupyter.org/governance/intro.html page. The evaluation is the following:

Evaluation

• Empty form label (5) : 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. It can be fixed by ensuring 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(2) : 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. It can be fixed by ensuring that at most one label element is associated to the form control. If multiple form labels are necessary, use aria-labelledby.
• language (1) : The <html lang> attribute is missing or is empty, or alang attribute value is not a valid language identifier. 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. It can be identifying 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.
• Empty button (1) : 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. When navigating to a button, descriptive text must be presented to screen reader users to indicate the function of the button. It can be fixed by Placing text content within the <button> element or give the <input> element a value attribute.
• Redundant link (1) : Two adjacent links go to the same URL. When adjacent links go to the same location (such as a linked product image and an adjacent linked product name that go to the same product page) this results in additional navigation and repetition for keyboard and screen reader users. If possible,it can be fixed by combining 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="").
• Linked imaged with alternative text (1) : 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. 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.
• Form label (2) : A <label> element is present and properly associated to <input> (except types of image, submit, reset, button, or hidden), <textarea>, or <select> element. A properly associated form label is presented to a screen reader user when the form control is accessed. Additionally, a label can be clicked with the mouse to set focus to the form control. It can be fixed by ensuring that the label is accurate, descriptive, succinct, and that it is associated with the correct form control element.
• Heading level element (6) : There are 3 first level heading elements (<h1> element) and 3second level heading elements(<h2>) are present. Headings facilitate page navigation for users of assistive technologies. They also provide semantic and visual meaning and structure to the document. First level headings should contain the most important heading(s) on the page (generally the document title). Heading level element issue 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 (13) : A <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 role="navigation" 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.
• Main content (1) : A <main> element or role="main" is present. The <main> element or role="main" attribute identifies the main content for the page. This facilitate page semantics and navigation. It can be fixed by ensuring the element surrounds and defines page main content.
• Footer (1) : A <footer> element or role="contentinfo" 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 that the element surrounds and defines page or page section footer content.
• ARIA (5) : An ARIA role, state, or property is present, excluding landmark roles, aria-labelledby, oraria-describedby which are distinct WAVE items. ARIA provides enhanced semantics and accessibility for web content. It can be fixed by ensuring that 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 labels (7) : 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. It can be fixed by ensuring that 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.

[sgibson91]

Please! Mrs @sgibson91 are we to use only wave to evaluate accessibility of Jupyter pages or we can span to other ways

@Joel-Ando If you know other web accessibility evaluation tools, you are welcome to use those!

[Abolade017]

Evaluating web accessibility on https://jupyter.org/governance/trademarks.html. The issues and the fixing is the following:

Evaluation

• Empty form label (5) : 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. It can be fixed by ensuring 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 label (2) : Two or more <label>s are associated to a single <input> (except types of image, submit, reset, button, or hidden), <select>, or <textarea>'. it can be fixed by ensuring that at most onelabelelement is associated to the form control. If multiple form labels are necessary, usearia-labelledby`.
• Language missing or invalid (1) : The <html lang> attribute is missing or is empty, or a lang attribute value is not a valid language identifier. Identify the document language using the <html lang> attribute with a valid value (e.g., <html lang="en">). It can be fixed by ensuring that all lang attribute values are valid.
• Empty button (1) : 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. It can be fixed by placing text content within the <button> element or give the <input> element a value attribute.
• Redundant link (1) : Two adjacent links go to the same URL. 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=""').
• Linked image with alternative text() : 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. 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.
• Form label () : A <label> element is present and properly associated to <input> (except types of image, submit, reset, button, or hidden), <textarea>, or <select> element. it can be fixed by ensuring that the label is accurate, descriptive, succinct, and that it is associated with the correct form control element.
• Heading level (14) : Three <h1>, eight <h2> and three <h3> elements are present. Headings facilitate page navigation for users of assistive technologies. They also provide semantic and visual meaning and structure to the document. First level headings <h1> should contain the most important heading(s) on the page (generally the document title). 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.
• Ordered list (3) : An <ol> element is present. This issue can be fixed by ensuring that an ordered (numbered) list is appropriate for the context. If list items are parallel or the order of the items is not important, an unordered list (<ul>) is likely more appropriate.
• Unordered list (3) : A <ul> element is present. This issue 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 (3) : A <nav> element or role="navigation" 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.
• Main content (1) : A <main> element or role="main" is present. This issue can be fixed by ensuring the element surrounds and defines page main content.
• Footer (1) : A <footer> element or role="contentinfo" is present. This issue can be fixed by ensuring the element surrounds and defines page or page section footer content.
• ARIA (5): An ARIA role, state, or property is present, excluding landmark roles, aria-labelledby, or aria-describedby which are distinct WAVE items. This issue can be fixed by ensuring 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 (7): An aria-label or aria-labelledby attribute is present. This issue can be fixed by ensuring that 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]

I have evaluated the web accessibility on https://jupyter.org/governance/intro.html. The issues and how to fix the issue gotten from the evaluation done is the following:

Evaluation

1. 9 Errors :

   • Empty form label (5) : A form label is present, but does not contain any content. This issue can be fixed by ensuring 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 (2) : Two or more <label>s are associated to a single <input> (except types of image, submit, reset, button, or hidden), <select>, or <textarea>. This issue can be fixed by ensuring that at most one label element is associated to the form control. If multiple form labels are necessary, use `aria-labelledby'.
   • Language missing or invalid (1) : The <html lang> attribute is missing or is empty, or a lang attribute value is not a valid language identifier. This issue can be fixed by identifying 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.
   • Empty button (1) : 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. This issue can be fixed by placing text content within the <button> element or give the <input> element a value attribute.

2. 1 Alerts

   • Redundant link (1) : Two adjacent links go to the same URL. 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="").

3. 3 Features

   • Linked image with alternative text (1) : 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. This issue 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.
   • form labels (2) : A <label> element is present and properly associated to <input> (except types of image, submit, reset, button, or hidden), <textarea>, or <select> element. This issue can be fixed by ensuring that the label is accurate, descriptive, succinct, and that it is associated with the correct form control element.

4. 25 Structural elements

• Heading level (6) : There are 3 <h1> and 3 <h2> elements present. This issue 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 (13) : An unordered (bulleted) list (<ul> element) is present. This issue 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 (3) : A <nav> element or role="navigation" is present. This issue can be fixed by ensuring the element defines page navigation. Multiple navigation elements on one page can be differentiated with ARIA labels.
• Main content (1) :A
  element orrole="main"` is present. This issue can be fixed by ensuring the element surrounds and defines page main content.
• Footer (2) : A <footer> element or role="contentinfo" is present. This issue can be fixed by ensuring that the element surrounds and defines page or page section footer content.

5. 12 ARIA

• ARIA (5) : An ARIA role, state, or property is present, excluding landmark roles, aria-labelledby, or aria-describedby which are distinct WAVE items. This issue can be fixed by ensuring 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 (7) : An aria-label or aria-labelledby attribute is present. This issue can be fixed by ensuring that 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]

I evaluated the web accessibility on https://jupyter.org/governance/projectlicense.html. The result of the evaluation is as follows:

Evaluation

1. 9 Errors :

   • Form label (5) : A form label is present, but does not contain any content. This issue can be fixed by ensuring 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 label (2) : Two or more <label>s are associated to a single <input> (except types of image, submit, reset, button, or hidden), <select>, or <textarea>. This issue can be fixed by ensuring that at most one label element is associated to the form control. If multipleform labels are necessary, use aria-labelledby.
   • Language missing or invalid (1) : The <html lang> attribute is missing or is empty, or a lang attribute value is not a valid language identifier. This issue can be fixed by 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. -Empty button (1) : 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.

2. 3 Features :

   • Linked image with alternative text (1) : An image element <img src="" /> has non-empty alternative text, is within a link, and no other text (or images with alternative text) is present within the link. This issue can be fix 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.
   • Form label (1) : A <label> element is present and properly associated to (except types of image, submit, reset, button, or hidden), <textarea>, or <select> element. This issue can be fixed by ensuring that the label is accurate, descriptive, succinct, and that it is associated with the correct form control element.

3. 24 Structural elements :

   • Heading level (5) : Three <h1> and two <h2> elements are present. This issue can be fixed by ensuring that the text in question is truly a heading and that it is structured correctly in the page outline.
   • Order list (1) : An <ol> element is present. This issue can be fixed by ensuring that an ordered (numbered) list is appropriate for the context. If list items are parallel or the order of the items is not important, an unordered list (<ul>) is likely more appropriate.
   • Unordered list (12) : A <ul> element is present. This issue 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 (3) : A <nav> element or role="navigation" is present. This issue can be fixed by ensuring that the element defines page navigation. Multiple navigation elements on one page can be differentiated with ARIA labels.
   • Main content (1) : A <main> element or role="main" is present. this issue can be fixed by ensuring that the element surrounds and defines page main content.
   • Footer (2) : A <footer> element or role="contentinfo" is present. This issue can be fixed by ensuring that the element surrounds and defines page or page section footer content.

4. 12 ARIAL

• ARIA (5) : An ARIA role, state, or property is present, excluding landmark roles, aria-labelledby, or aria-describedby which are distinct WAVE items. This issue can be fixed by ensuring that 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 (7) : An aria-label or aria-labelledby attribute is present. This issue can be fixed by ensuring that 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.

[AbeerTannous]

Hi Minrk , I see same names on multiple pages , is that OK?

[james95-developer]

https://jupyter.org/governance/software_subprojects.html

1. A form label is present, but does not contain any content.label for="__navigation" class="headerbtn" data-toggle="tooltip" data-placement="right" title="" data-original-title="Toggle navigation">A 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. 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. 2.Multiple form labels A form control has more than one label associated with it. <input type="checkbox" class="sidebar-toggle" name="__navigation" id="__navigation" aria-label="Toggle navigation sidebar"> . 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. Suggestion Ensure that at most one label element is associated to the form control. If multiple form labels are necessary, use aria-labelledby.
2. 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 attribute with a valid value (e.g., ). Ensure that all lang attribute values are valid.
3. Empty button A button is empty or has no value text. <button onclick="toggleFullScreen()" class="headerbtn" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Fullscreen mode">.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 element or give the element a value attribute.

[EbubeEvan]

I worked on https://jupyter.org/governance/communitybuildingcommittee.html and I found the following issues:

Errors

• Language missing or invalid: a lang="en" should be added to the open html tag to specify the language of the webpage in order to increase its accessibilty.
• Empty form labels : the label elements should be deleted and the i elements nested within them should be nested within span elements. Aria-label attributes should then be added to the span elements to describe the function of the i elements.
• Multiple form labels: since the input tag contains an aria-label, one of the label elements should be deleted. A form control can only have one element.
• Empty button: text isn't necessary for the full screen view button because its icon is self explanatory. But for the sake of the screen reader, a value attribute should be added to the button to describe its function.

Features

• Linked image with alternative text: the alt attribute doesn't quite describe the image effectively. It uses an abbreviation which a visually impaired user might not understand. The description should be fully written out.

Structural Elements

• 3 X Heading level 1: There can only be one h1 element in a web page. The other headings that are not the main heading should be changed to h2.
• 4 X Heading level 2: 2 of them are improperly placed. They should be replaced by h3 headings.

ARIA

• 5X ARIA: the ARIA roles should be deleted and the parent elements replaced with h3.

[Abolade017]

I have evaluated the web accessibility of https://jupyter.org/governance/people.html. The issues and fixing is as follows:

Evaluation

1. 9 Errors :

• Empty form label (5) : A form label is present, but does not contain any content. This issue can be fixed by ensuring 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 label (2) : Two or more <label>s are associated to a single <input> (except types of image, submit, reset, button, or hidden), <select>, or <textarea>.
• Language missing or invalid (1) : The <html lang> attribute is missing or is empty, or a lang attribute value is not a valid language identifier. This issue can be fixed by Identify the document language using the <html lang> attribute with a valid value (e.g., <html lang="en">) and ensure that all lang attribute values are valid.
• Empty button (1) : 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. It can be fixed by Placing text content within the <button> element or give the <input> element a value attribute.

2. 3 Features :

• Linked image with alternative text (1) : 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. 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.
• form label (2) : A <label> element is present and properly associated to <input> (except types of image, submit, reset, button, or hidden), <textarea>, or <select> element. This issue can be fixed by ensuring that the label is accurate, descriptive, succinct, and that it is associated with the correct form control element.

3. 44 Structural elements :

• Heading level (14) : 3 <h1> element is present, 5 <h2> element is present and 6 <h3> element is also present. This issue 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 (24) : A <ul> element is present. This issue 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 (3) : A <nav> element or role="navigation" is present. this issue can be fixed by ensuring the element defines page navigation. Multiple navigation elements on one page can be differentiated with ARIA labels.
• Main content (1) : A <main> element or role="main" is present. This issue can be fixed by ensuring that the element surrounds and defines page main content.
• Footer (2) : A <footer> element or role="contentinfo" is present. This issue can be fixed by ensuring the element surrounds and defines page or page section footer content.

4. 12 ARAI :

• ARIA (5) : An ARIA role, state, or property is present, excluding landmark roles, aria-labelledby, or aria-describedby which are distinct WAVE items. This issue can be fixed by ensuring 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 (7) : An aria-label or aria-labelledby attribute is present. This issue can be fixed by ensuring 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.

[Heavenlie]

here

hello, I would like to work on this page on the website Jupiter. http://jupyter.org/governance/newsubprojects.html. I will like for it to be added.

[Heavenlie]

here

hello, I would like to work on this page on the website Jupiter. http://jupyter.org/governance/newsubprojects.html. I will like for it to be added.

username is heavenlie

[Abolade017]

I have evaluated the web accessibility of https://mybinder.org/. The evaluation done stated the following issues and how to fix those issues are below:

Evaluation

1. 5 Errors

   • Missing alternative text (4) : An image does not have an alt attribute. This issue can be fixed by adding an alt attribute to the image. The attribute value should accurately and succinctly present the content and function of the image. If the content of the image is conveyed in the context or surroundings of the image, or if the image does not convey content or have a function, it should be given empty/null alternative text (alt="").
   • Language missing or invalid (1) : The <html lang> attribute is missing or is empty, or a lang attribute value is not a valid language identifier. This issue can be fixed by Identify the document language using the <html lang> attribute with a valid value (e.g.,). Ensure that alllang` attribute values are valid. This issue can be fixed by

2. 9 Contrast errors

   • Very low contrast (9) : 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 withCSS transparency, gradients, or filters. 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.

3. 3 Alerts

   • No page region (1) : No header, nav, main, footer, or aside HTML regions, or banner, navigation, main, or contentinfo landmark roles were present in the page. This issue can be fixed by ensuring that the regions are defined with header, nav, main, footer, etc. elements, if the page has visual regions or significant page areas.
   • Missing first level heading (1) : A page does not have an <h1> element. This issue can be fixed by placing the main heading within an <h1> element. Add other sub-headings as necessary, if the page presents a main heading.
   • (1) : An event handler is present that may not be accessible. examples of an event handler that is present can be an onmouseover event but not an onfocus event, an onclick event on something other than a link, form control, or element with a tabindex value of 0 or ondblclick.

4. 6 Features

   • Alternative text (3) : A non-empty alt attribute is present on an image. This issue 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.
   • Form label (3) : A <label> element is present and properly associated to <input> (except types of image, submit, reset, button, or hidden), <textarea>, or <select> element. This issue can be fixed by ensuring that the label is accurate, descriptive, succinct, and that it is associated with the correct form control element.

5. 7 structural elements

   • Heading level element (5) : There are three <h3> and two <h4> elements present. This issue 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 (2) : A <ul> element is present. This issue 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.

6. 7 ARIA

   • ARIA (1) : An ARIA role, state, or property is present, excluding landmark roles, aria-labelledby, or aria-describedby which are distinct WAVE items. This issue can be fixed by ensuring that 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 hidden (1) : An element with aria-hidden="true" is present. This issue can be fixed by ensuring the content is intended to be hidden from screen reader users. The hidden content must not contain any navigable elements (such as links or form controls).
   • ARIA label (1) : An aria-label or aria-labelledby attribute is present. This issue can be fixed by ensuring that 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.
   • ARIA tabindex (2) : A tabindex attribute is present and has a value of 0 or less. This issue can be fixed by ensuring that tabindex is being used correctly by navigating and interacting with the elements using only the keyboard. Positive tabindex values specify a distinct tab order and should typically be avoided.
   • ARIA popup (1) : An aria-haspopup attribute is present. This issue can be fixed by ensuring that the element triggers an ARIA menu, dialog, listbox, tree, or grid and that the aria-haspop attribute value aligns with the type of element that is opened.

[Olaedey]

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

Errors (9) Empty form label (5): A form label is present, but does not contain any content. 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 (2): A form control has more than one label associated with it. Suggestion: Ensure that at most one label element is associated to the form control. If multiple form labels are necessary, use aria-labelledby. Language missing or invalid (1): 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. Empty button (1): A button is empty or has no value text. Suggestion: Place text content within the <button> element or give the element a value attribute.

Features (3) Linked image with alternative text (1): 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. Form label (2): A form label is present and associated with a form control. Suggestion : Ensure that the label is accurate, descriptive, succinct, and that it is associated with the correct form control element.

Navigation (3): Ensure the element defines page navigation. Multiple navigation elements on one page can be differentiated with ARIA labels. Main Content (1): Ensure the element surrounds and defines page main content. Footer (2): Ensure the element surrounds and defines page section footer content.

ARIA (8) ARIA (1): An ARIA role, state, or property is present. Suggestion: Ensure the ARIA role, state, or property is used correctly. Use standard HTML accessibility features when possible. It should be noted that support for ARIA is limited in older browsers and assistive technologies. ARIA label (7): 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 or other markup to make the association.

[Abolade017]

I have evaluated the web accessibility of https://jupyter.org/governance/conduct/faq.html. The evaluation done stated the following issues and how to fix those issues are below:

Evaluation

1. 9 Errors

• Empty form label (5) : A form label is present and associated with an existing form control (using for/id or surrounds the form control), but does not contain any text or images with alternative text. This issue can be fixed by ensuring 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 (2) : Two or more <label>s are associated to a single <input> (except types of image, submit, reset, button, or hidden), <select>, or <textarea>. This issue can be fixed by ensuring that at most one label element is associated to the form control. If multiple form labels are necessary, use aria-labelledby.
• Language missing or invalid (1) : The <html lang> attribute is missing or is empty, or a lang attribute value is not a valid language identifier. This issue can be fixed by identifying 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.
• Empty button (1) : A 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. This issue can be fixed by placing text content within the <button> element or give the <input> element a value attribute.

2. 1 Alert

   • Redundant link (1) : Two adjacent links go to the same URL. If possible, this issue can be fixed by combining 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="").

3. 3 Features

   • Linked image with alternative text (1) : 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. This issue 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.
   • Form label (2) : A <label> element is present and properly associated to <input> (except types of image, submit, reset, button, or hidden), <textarea>, or <select> element. This issue can be fixed by ensuring that the label is accurate, descriptive, succinct, and that it is associated with the correct form control element.

4. 28 Structural elements

   • Heading level (10) : There are three <h1> and seven <h2> elements present .This issue 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 (12) : The <ul> element is present. This issue 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 (3) : A <nav> element or role="navigation" is present. This issue can be fixed by ensuring the element defines page navigation. Multiple navigation elements on one page can be differentiated with ARIA labels.
   • Main content (1) : A <main> element or role="main" is present. This issue can be fixed by ensuring the element surrounds and defines page main content.
   • Footer (2) : A <footer> element or role="contentinfo" is present. This issue can be fixed by ensuring the element surrounds and defines page or page section footer content.

5. 12 ARIA

   • ARIA (5) : An ARIA role, state, or property is present, excluding landmark roles, aria-labelledby, or aria-describedby which are distinct WAVE items. This issue can be fixed by ensuring 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 (7) : An aria-label or aria-labelledby attribute is present. This issue can be fixed by ensuring 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]

I have evaluated the web accessibility of https://jupyter.org/governance/list_of_standing_committees_and_working_groups.html page. The evaluation done stated the following issues and how to fix those issues are below:

Evaluation

1. 9 Errors

• Empty form label (5) : A form label is present and associated with an existing form control (using for/id or surrounds the form control), but does not contain any text or images with alternative text. This issue can be fixed by ensuring 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 (2) : Two or more <label>s are associated to a single <input> (except types of image, submit, reset, button, or hidden), <select>, or <textarea>. This issue can be fixed by ensuring that at most one label element is associated to the form control. If multiple form labels are necessary, use aria-labelledby.
• Language missing or invalid (1) : The <html lang> attribute is missing or is empty, or a lang attribute value is not a valid language identifier. This issue can be fixed by identifying 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.
• Empty button (1) : A 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. This issue can be fixed by placing text content within the <button> element or give the <input> element a value attribute.

2. 1 Alert

   • Suspicious link alert (1) :A link (including alt text of linked images) contains the phrase "click here" or "click", or the link text is "click here", "here", "more", "more...", "details", "more details", "link", "this page", "continue", "continue reading", "read more", or "button". 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").

3. 3 Features

   • Linked image with alternative text (1) : 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. This issue 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.
   • Form label (2) : A <label> element is present and properly associated to <input> (except types of image, submit, reset, button, or hidden), <textarea>, or <select> element. This issue can be fixed by ensuring that the label is accurate, descriptive, succinct, and that it is associated with the correct form control element.

4. 34 Structural elements

   • Heading level (12) : There are three <h1> , seven <h2> and six <h3> elements present .This issue 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 (16) : The <ul> element is present. This issue 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 (3) : A <nav> element or role="navigation" is present. This issue can be fixed by ensuring the element defines page navigation. Multiple navigation elements on one page can be differentiated with ARIA labels.
   • Main content (1) : A <main> element or role="main" is present. This issue can be fixed by ensuring the element surrounds and defines page main content.
   • Footer (2) : A <footer> element or role="contentinfo" is present. This issue can be fixed by ensuring the element surrounds and defines page or page section footer content.

5. 12 ARIA

   • ARIA (5) : An ARIA role, state, or property is present, excluding landmark roles, aria-labelledby, or aria-describedby which are distinct WAVE items. This issue can be fixed by ensuring 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 (7) : An aria-label or aria-labelledby attribute is present. This issue can be fixed by ensuring 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]

I have evaluated the web accessibility of https://jupyter.org/governance/conduct/enforcement.html page. The evaluation done stated the following issues and how to fix those issues are below:

Evaluation

1. 9 Errors

   • Empty form label (5) : A form label is present and associated with an existing form control (using for/id or surrounds the form control), but does not contain any text or images with alternative text. This issue can be fixed by ensuring 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 (2) : Two or more <label>s are associated to a single <input> (except types of image, submit, reset, button, or hidden), <select>, or <textarea>. This issue can be fixed by ensuring that at most one label element is associated to the form control. If multiple form labels are necessary, use aria-labelledby.
   • Language missing or invalid (1) : The <html lang> attribute is missing or is empty, or a lang attribute value is not a valid language identifier. This issue can be fixed by identifying 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.
   • Empty button (1) : A 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. This issue can be fixed by placing text content within the <button> element or give the <input> element a value attribute.

2. 3 Features

   • Linked image with alternative text (1) : 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. This issue 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.
   • Form label (2) : A <label> element is present and properly associated to <input> (except types of image, submit, reset, button, or hidden), <textarea>, or <select> element. This issue can be fixed by ensuring that the label is accurate, descriptive, succinct, and that it is associated with the correct form control element.

3. 33 Structural elements

   • Heading level (10) : There are three <h1> , seven <h2> elements present .This issue 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 (17) : The <ul> element is present. This issue 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 (3) : A <nav> element or role="navigation" is present. This issue can be fixed by ensuring the element defines page navigation. Multiple navigation elements on one page can be differentiated with ARIA labels.
   • Main content (1) : A <main> element or role="main" is present. This issue can be fixed by ensuring the element surrounds and defines page main content.
   • Footer (2) : A <footer> element or role="contentinfo" is present. This issue can be fixed by ensuring the element surrounds and defines page or page section footer content.

4. 12 ARIA

   • ARIA (5) : An ARIA role, state, or property is present, excluding landmark roles, aria-labelledby, or aria-describedby which are distinct WAVE items. This issue can be fixed by ensuring 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 (7) : An aria-label or aria-labelledby attribute is present. This issue can be fixed by ensuring 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]

I have evaluated the web accessibility of https://jupyter.org/governance/decision_making.html page. The evaluation done stated the following issues and how to fix those issues are below:

Evaluation

1. 9 Errors

   • Empty form label (5) : A form label is present and associated with an existing form control (using for/id or surrounds the form control), but does not contain any text or images with alternative text. This issue can be fixed by ensuring 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 (2) : Two or more <label>s are associated to a single <input> (except types of image, submit, reset, button, or hidden), <select>, or <textarea>. This issue can be fixed by ensuring that at most one label element is associated to the form control. If multiple form labels are necessary, use aria-labelledby.
   • Language missing or invalid (1) : The <html lang> attribute is missing or is empty, or a lang attribute value is not a valid language identifier. This issue can be fixed by identifying 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.
   • Empty button (1) : A 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. This issue can be fixed by placing text content within the <button> element or give the <input> element a value attribute.

2. 3 Features

   • Linked image with alternative text (1) : 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. This issue 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.
   • Form label (2) : A <label> element is present and properly associated to <input> (except types of image, submit, reset, button, or hidden), <textarea>, or <select> element. This issue can be fixed by ensuring that the label is accurate, descriptive, succinct, and that it is associated with the correct form control element.

3. 27 Structural elements

   • Heading level (7) : There are three <h1> and four <h2> elements present .This issue 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 (14) : The <ul> element is present. This issue 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 (3) : A <nav> element or role="navigation" is present. This issue can be fixed by ensuring the element defines page navigation. Multiple navigation elements on one page can be differentiated with ARIA labels.
   • Main content (1) : A <main> element or role="main" is present. This issue can be fixed by ensuring the element surrounds and defines page main content.
   • Footer (2) : A <footer> element or role="contentinfo" is present. This issue can be fixed by ensuring the element surrounds and defines page or page section footer content.

4. 12 ARIA

   • ARIA (5) : An ARIA role, state, or property is present, excluding landmark roles, aria-labelledby, or aria-describedby which are distinct WAVE items. This issue can be fixed by ensuring 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 (7) : An aria-label or aria-labelledby attribute is present. This issue can be fixed by ensuring 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.

5. Contrast errors

   • Very low contrast error (7) : 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. 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.

[Abolade017]

I have evaluated the web accessibility of https://jupyter.org/governance/papers.html page. The evaluation done stated the following issues and how to fix those issues are below:

Evaluation

1. 9 Errors

   • Empty form label (5) : A form label is present and associated with an existing form control (using for/id or surrounds the form control), but does not contain any text or images with alternative text. This issue can be fixed by ensuring 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 (2) : Two or more <label>s are associated to a single <input> (except types of image, submit, reset, button, or hidden), <select>, or <textarea>. This issue can be fixed by ensuring that at most one label element is associated to the form control. If multiple form labels are necessary, use aria-labelledby.
   • Language missing or invalid (1) : The <html lang> attribute is missing or is empty, or a lang attribute value is not a valid language identifier. This issue can be fixed by identifying 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.
   • Empty button (1) : A 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. This issue can be fixed by placing text content within the <button> element or give the <input> element a value attribute.

2. 3 Features

   • Linked image with alternative text (1) : 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. This issue 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.
   • Form label (2) : A <label> element is present and properly associated to <input> (except types of image, submit, reset, button, or hidden), <textarea>, or <select> element. This issue can be fixed by ensuring that the label is accurate, descriptive, succinct, and that it is associated with the correct form control element.

3. 47 Structural elements

   • Heading level (17) : There are three <h1> , four <h2>, five <h3>,and five <h4> elements present .This issue 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 (24) : The <ul> element is present. This issue 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 (3) : A <nav> element or role="navigation" is present. This issue can be fixed by ensuring the element defines page navigation. Multiple navigation elements on one page can be differentiated with ARIA labels.
   • Main content (1) : A <main> element or role="main" is present. This issue can be fixed by ensuring the element surrounds and defines page main content.
   • Footer (2) : A <footer> element or role="contentinfo" is present. This issue can be fixed by ensuring the element surrounds and defines page or page section footer content.

4. 12 ARIA

   • ARIA (5) : An ARIA role, state, or property is present, excluding landmark roles, aria-labelledby, or aria-describedby which are distinct WAVE items. This issue can be fixed by ensuring 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 (7) : An aria-label or aria-labelledby attribute is present. This issue can be fixed by ensuring 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.

5. Contrast errors

   • Very low contrast error (11) : 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. 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.

[Abolade017]

I have evaluated the web accessibility of https://jupyter.org/governance/conduct/code_of_conduct.html page. The evaluation done stated the following issues and how to fix those issues are below:

Evaluation

1. 9 Errors

   • Empty form label (5) : A form label is present and associated with an existing form control (using for/id or surrounds the form control), but does not contain any text or images with alternative text. This issue can be fixed by ensuring 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 (2) : Two or more <label>s are associated to a single <input> (except types of image, submit, reset, button, or hidden), <select>, or <textarea>. This issue can be fixed by ensuring that at most one label element is associated to the form control. If multiple form labels are necessary, use aria-labelledby.
   • Language missing or invalid (1) : The <html lang> attribute is missing or is empty, or a lang attribute value is not a valid language identifier. This issue can be fixed by identifying 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.
   • Empty button (1) : A 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. This issue can be fixed by placing text content within the <button> element or give the <input> element a value attribute.

2. 3 Features

   • Linked image with alternative text (1) : 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. This issue 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.
   • Form label (2) : A <label> element is present and properly associated to <input> (except types of image, submit, reset, button, or hidden), <textarea>, or <select> element. This issue can be fixed by ensuring that the label is accurate, descriptive, succinct, and that it is associated with the correct form control element.

3. 28 Structural elements

   • Heading level (8) : There are three <h1> and five <h2> elements present .This issue 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 (13) : The <ul> element is present. This issue 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.
   • Ordered list (1) : There is <ol> element present. this issue can be fixed by ensuring that an ordered (numbered) list is appropriate for the context. If list items are parallel or the order of the items is not important, an unordered list (<ul>) is likely more appropriate.
   • Navigation (3) : A <nav> element or role="navigation" is present. This issue can be fixed by ensuring the element defines page navigation. Multiple navigation elements on one page can be differentiated with ARIA labels.
   • Main content (1) : A <main> element or role="main" is present. This issue can be fixed by ensuring the element surrounds and defines page main content.
   • Footer (2) : A <footer> element or role="contentinfo" is present. This issue can be fixed by ensuring the element surrounds and defines page or page section footer content.

4. 12 ARIA

   • ARIA (5) : An ARIA role, state, or property is present, excluding landmark roles, aria-labelledby, or aria-describedby which are distinct WAVE items. This issue can be fixed by ensuring 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 (7) : An aria-label or aria-labelledby attribute is present. This issue can be fixed by ensuring 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.

5. 3 Alerts

   • Broken same-page link (1) : An in-page link has an href attribute (starting with a #), but does not match either the id value of another element or the name attribute value of an anchor element within the page. This issue can be fixed by ensuring that the target for the link exists or remove the the same-page link.
   • Redundant link (2) : Two adjacent links go to the same URL. If possible, this issue can be fixed by combining 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="").

[Olaedey]

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

Errors (1) Language missing or invalid (1): 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 (30) 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 (24) Justified text (21): 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: Ensure the title attribute value presents the content and function of the image. For better accessibility, the alt attribute should be used when possible.

Features (2) Linked image with alternative text (2): 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 (19) Heading level 1(1), Heading level 2(3), Heading level 3(5), Heading level 4(1): Ensure that the texts in question are truly a heading and that they are structured correctly in the page outline. Inline frame (3): An inline frame (