CSS Test for accessibility issues

A set of rules for test accessibility issues from the book Apps For All: Coding Accessible Web Applicatios(link is external).

If the test fails, show a message.

List of messages

  • Warning: this button doesn’t have a type attribute. Is it a submit, reset or just button?
  • Warning: You are making an element look like a button here. Is it really a button?
  • Warning: It looks like you are styling an element to be disabled here. Make sure it is disabled properly.
  • You are not providing enough information about what this button does. Please include some text within the button.
  • Warning: it looks like you are using sections like divs. Sections should each have a heading
  • Warning: You appear to be linking to a principal navigation block. Make sure it has the navigation ARIA role
  • Warning: When JavaScript is turned off, this should be a link and should go to the navigation landmark
  • Warning: All links inside a tablist should be defined as tabs, using the tab ARIA role
  • Warning: Each tabpanel should be identified with an id attribute
  • Warning: Each tab should explicitly control a tabpanel using the aria-controls attribute
  • Warning: For better support, you should include a politeness setting for your live region role using the aria-live attribute
  • Warning: For better support, you should include a corresponding role for your aria-live politeness setting

Usage

Load the css file in your project and check the messages.

Rating

0 out of 5 Stars 0 Review

5 Stars
 
0.00%
4 Stars
 
0.00%
3 Stars
 
0.00%
2 Stars
 
0.00%
1 Star
 
0.00%

About

  • There are no comments yet

Thank you! Review submitted.

Ok