minrk
commented
2 years ago Thanks for the suggestions! I'm curious how you came to some of these values. The link color changes appear to decrease contrast, not increase it.
Closed Abolade017 closed 2 years ago
minrk
commented
2 years ago Thanks for the suggestions! I'm curious how you came to some of these values. The link color changes appear to decrease contrast, not increase it.
Abolade017
commented
2 years ago I got the color by copying the code and use the style attribute to add color to it like this:
<div class="footer" role="contentinfo" style="color: rgb(136, 138, 133);
background-color: rgb(255, 255, 255);">© Copyright the IPython development team. Created using
<a href="http://sphinx-doc.org/">Sphinx</a>
1.8.5.
</div>
<a href="https://jupyter.readthedocs.io/en/latest/install.html" target="_blank" style="color: rgba(253, 113, 19, 0.87) ; background-color: rgb(255, 255, 255);">Install</a>then hovering on the color, the color palette appears and I used it to select the color and when I used it and tested it the very low contrast error disappear. Here is the screenshot to my testing:
sgibson91
commented
2 years ago Thank you for your contribution! Since the contribution period is now over, we will close this issue.
What page is this for?
https://github.com/jupyterhub/outreachy/issues/38#issuecomment-1275855450
WAVE accessibility report
I have evaluated the accessibility of https://ipython.org/ page. My evaluation is the following below:
Evaluation
<html lang>attribute is missing or is empty, or alangattribute 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 alllangattribute values are valid.WCAGrequires 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 inCSS) that provides adequate text contrast when the background image is disabled or unavailable. WAVE does not identify contrast issues in text withCSStransparency, 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.<p>,<div>, or<td>element has more than 500 characters and is styled withtext-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."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., acaption), null/empty alternative text (alt="") is appropriate.tooltipwhich more or may not be desired. Thistooltipwill 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.alttext 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").alt="") to avoid redundancy.<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.<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.<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 theiframemust be accessible. A title attribute value for theiframewill generally be read by a screen reader when theiframeis encountered. It can be fixed by ensuring that the content within theiframeis accessible. Optionally, a title attribute value can be added to provide a brief, advisory description of theiframe.<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 withARIAlabels.<main>element orrole="main"is present. The<main>element orrole="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>element orrole="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-labeloraria-labelledbyattribute is present.ARIAlabels define accessible names to be read by screen readers for interface elements. They may be used whenHTMLassociations (label,alternative text, etc.) are not sufficient. It can be fixed by ensuring that thearia-labelvalue or element referenced byaria-labelledbyprovides a descriptive, accurate label. When possible, use standardHTML <label>or other markup to make the association.The HTML element to be changed
Your proposed HTML (or CSS), after change
More info
No response