moroshko / accessible-colors Goto Github PK

Create a more visual design for the pass/fail result, with less text

The preview shows up to 42px font size.
Above 18px, font size does not affect accessibility.

On iPad, the input fields are getting an undesired red underline.

• Ideally, we'll ask someone external (that doesn't have access to our Slack channel) to try and click the Slack link, and see if they can enter the channel and post there.

• Text & background combination is not accessible.
• Your text & background combination is not accessible.
• Your text & background combination is accessible.
• Icon
• Show only one preview box

Remove count
Make them smaller

Some reading

http://www.w3.org/TR/WCAG20-GENERAL/H42.html

http://www.456bereastreet.com/archive/200901/headings_heading_hierarchy_and_document_outlines/

http://www.w3.org/WAI/WCAG20/quickref/20150226/#content-structure-separation-programmatic

See how it's done here: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/contrast-ratio.js#L186

• Please enter a valid six digit hexadecimal color
• Please enter a font size between 10px and 42px

Reduce the weight of icons
Add social icons to the font

When input fields are getting focus, the text should stay selected. Tested on iPad.

Make sure that the URL in the tweet is: http://accessible-colors.com

• on focus, field text is not selected
• not tabbing to buttons
• turn off spell check

Now, subheader is h2, which is important for SEO I think.
Can we include the words "color contrast" in the subheader somehow?

When moving between input fields using the arrows on iPad, the Font Weight and Accessibility Level buttons are skipped.

This will be displayed by Google in the search results page.
Note: This won't be used by the search engine. It should be designed to users to read, and should improve the click through rate.

http://a11yproject.com/checklist.html

Feedback from Jason:

Document outline
He gave me advice on how to structure it, so I will do that and add it to the ZenHub task. He said if we don't want to have a heading for the input section, it's OK to have an invisible heading which is part of the document outline.

Links
We need to tag all the links, including social links, properly. Currently, not even the links in the 'coming soon' section are read out as links.

For example, the social links should read out something like "Twitter share button. Shared 3 time" and "Github star button. Starred 18 times"

Input fields
The input fields labels which get read out are the same as the text before them. When someone uses a reader to read the whole page, they hear the text twice. First they hear the text, then they hear the field label. This is pretty annoying. For example, they hear "My text color is" twice.

Input button
The weight and compliance level buttons should be tagged as follows
"font weight toggle button. two options. enter to change option"
"compliance level toggle button. two options. enter to change option"

Results
The three results sections should be grouped as sections and should have their headings tagged up as headings

Preview text
We should prevent the Lorem Ipsum text from being read out

Error validation
He said that error validation is the trickiest thing to get right. Give our page structure, it would be best if we could read our the error after the user blurs.