CSS Accessibility Validator

by Elad Shechter

View project onGitHub

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 accessibility.css to your css folder project, + 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="css/accessibility.css" media="screen" />

What Validation the CSS Accessibility Validator Returns?

The tool checks three levels of Validation: Errors, Warnings and Recommended.

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:

Error Validator

Error Accessibility Validation, are the most importent issues, that you need to put attention.

Image Validator

Check if there are image tag with missing Alt or an empty Alt.

  • missing alt (Bad!)
  • empty alt or title (Bad!)
  • Paint Shop
    Good!

Links Validator

Check for links with no text, no ID(anchors) or title attribute.

  • Empty link tag - with no anchor(ID) or no title attribute or no inner text (Bad!)
  • Empty link tag - but as a title (Good!)

Headers Validator

Check for empty header tag with no attribute title.

  • h3 header with no text or title attribute (Bad!)

  • H2 header (test)

    h3 header with text or title attribute (Good!)

Warning Validator

Form Validator

Check Validation of input with no-placeholder.


  • input without placeholder (Bad!)
  • input with placeholder (Good!)
  • label before the input with for attribute (Good!)

Recommended Validator

Iframe or Flash embedding HTML tags

Check existing of flash or iframe HTML tags.

  • flash tag (Bad!)
  • iframe tag (Bad!)

Inline Styles

Check Existing of Inline Styles on HTML tags.

  • this element has Inline Styles
    Isn't recommended inline styles (Bad!)