CSS Accessibility Validator (for your HTML)

Accessibility CSS Validator, is a tool for finding HTML accessibility errors and warnings on web pages via advanced capabilities of CSS selectors.

How To Install CSS Accessibility Validator?

Very easy, just add the following line of code to your head element, and your good to go!
Refresh your page, and now you can see all the issues that the CSS Accessibility Validator finds.

<link rel="stylesheet" type="text/css" href="https://raw.github.com/elad2412/css-accessibility-validator/master/css/accessibility.css" media="screen" />

Project Page

http://elad2412.github.io/css-accessibility-validator/

Github Link

https://github.com/elad2412/css-accessibility-validator

What Validation the CSS Accessibility Validator Returns?

The tool checks three levels of Validation: Errors, Warnings and Recommended.
When There are issues you see them immediately on the screen with outline colored in red, orange or blue.
see screenshot:

Notice: the tool check only stuff we can catch via CSS only.

Validation Levels

Error Level - This is the most critical level of accessibility.

At this level we can find:
1. Alternative texts for images.
2. Empty Tags Links, without ID or a title attribute.
3. Empty Headers, or empty headers without a title attribute.
The Error will be marked with red outline.

Warning Level - At this level are things which may have accessibility errors.

At this level we can find:
1. Input text fields without placeholder or without sibling label tag(before) with the attribute "for" on it.
The Warning will be marked with orange outline.

Recommended Level - This is the less critical level of accessibility.

At this level we can find un-recommended HTML tags as: iframe , flash tags(embed or object)
1. Flash HTML isn't accessibility.
2. Iframes are half accessibility, if there is a form inside them, for example you can go in but you can't get out of them using keyboard only.
3. Inline Styles - can make issues to screen readers.
The Recommended will color in blue outline.

EXAMPLES:

Live Examples

That’s all, I hope you enjoy it.

If you like this, I will be happy to get your UPVOTE and star at github You are welcome to follow me or my team @Walla! R&D and endorse my skills.

Elad Shechter.