welcome[bot]
commented
2 years ago Thank you for opening your first issue in this project! Engagement like this is essential for open source projects! :hugs:
If you haven't done so already, check out Jupyter's Code of Conduct. Also, please try to follow the issue template as it helps other other community members to contribute more effectively.
You can meet the other Jovyans by joining our Discourse forum. There is also an intro thread there where you can stop by and say Hi! :wave:
Welcome to the Jupyter community! :tada:
minrk
sgibson91
What page is this for?
http://mybinder.org/
WAVE accessibility report
http://mybinder.org/ 's Home Page
4 images do not have alternative text (problem). Add an alt attribute to the image. The attribute value should accurately and succinctly present the content and function of the image.(fix)
The language of the document is not identified or a lang attribute value is invalid(problem). Identify the document language using the attribute with a valid value (e.g., ). Ensure that all lang attribute values are valid.(fix)
Very low contrast between text and background colors in the page with some links. Adequate contrast of text is necessary for all users, especially users with low vision. This can be fixed by increasing the contrast between the foreground (text) color and the background color. Large text (larger than 18 point or 14 point bold) does not require as much contrast as smaller text, You can install a contrast checker on chrome to be sure it complies with WCAG contrast ratio(fix).
No page regions or ARIA landmarks were found. The whole page was not built using semantic HTML and proper sectioning(problem). If the page has visual regions or significant page areas, ensure the regions are defined with header, nav, main, footer, etc. elements.(fix)
The page does not have a first level heading(problem). The text "Turn a Git repo into a collection of interactive notebooks" should have a
tag as its the first heading on th page.On the "click to Donate" button, an event handler is present that may not be accessible.(problem) Ensure that critical functionality and content is accessible by using a device independent event handler (which responds to both keyboard and mouse) or by using both a mouse dependent and a keyboard dependent event handler.(fix)
These are the results from the WAVE web app accessibility tester. All fixes can be done with just simple HTML and CSS.
The HTML element to be changed
Your proposed HTML (or CSS), after change
More info
The main changes in contrast were made using the WAVE tool inbuilt checker to make sure it aligns with WCAG contrast ratio.
The Page layout will need to be better by using semantic HTML elements such as:
<nav>, <header>, <main>, <aside>, <footer>,<section>etc. This method organisez the page better and makes it easier to understand for everyone involved. This webpage was semingly also built with bootstrap which made inline styling necessary.The layout of the page was too packed, making it hard to read. This example below is a good one
Having Events controlled by javascript in the html file is another subtle thing we can cut out to increase accessibilty, Trying to make all javascript and styling in their respective script and styling files.