If you are a web developer, at some point of time or the other you would have heard about ADA compliance or SEO (Search Engine Optimization). If you haven’t, then its high time that you do make your website ADA compliant.
ADA stands for American Disability Act. The Act is there to ensure that establishments are fully accessible to disabled people. While its not very clear whether websites come into its purview or not, there have been lawsuits based on this. While many big website owners are going that extra mile to make their site accessible just to prevent costly lawsuits, following standards for ADA compliance also has its own good side effects since Search Engines also crawl through your site in a similar manner. Below is a set of rules you should follow to increase the accessibility of your website and make it ADA and W3C compliant -
- Every non text element should have a text equivalent via alt.
- Every image should have a src, title and alt attribute.
- The page should be displayed in a linear fashion when CSS and JavaScript are disabled on the page. Following this can be a bit difficult but is not impossible if you are developing a new page.
- You cannot put any block level element inside an inline element. An example would be a div inside a span tag is not allowed
- A webpage cannot have more than 15% of inline styling.
- A page should be fully traversable with the help of a keyboard.
- The focus on the elements should be in logically linear fashion and should not be haphazard. This means that if a person is traversing the website using his keyboard by pressing TAB and Shift+TAB, the focus should move from element to element in a logically linear fashion. This includes to and from any popup layer elements in the page if they are open.
- When the focus is on an element, the selection caret should be clearly visible.
- All the input elements in your page should have an accompanying label. It may be hidden via CSS.
- We cannot use any button with text as part of the image. The text should be overlaid on the button and styled using CSS.
- Tables should have proper header for each column and should not be used for showing lists and for alignment of elements in a page.
- All hyperlinks which navigate to a new page should clearly state this in its alt text. This help screen reader users to understand that they are not on that same website anymore.
- All hyperlinks should have the title attribute.
- All the hyperlinks should be clearly distinguishable from the rest of the text. For example with underline on hover.
- Duplicate links pointing to the same destination should be avoided. The links on the page should be unique.
- All the pages should have a heading tag (h1). This helps users with screen readers a clear idea as to what the page is about. This tag may be hidden using CSS if you do not want to show it.
W3C provides a validator to check if your website is W3C compliant. Go to validator.w3c.org
© PiRATEPiXEL
No comments:
Post a Comment