Below are some of the basic important techniques a front end developer could start incorporating right from the beginning, into a project that has to conform to WCAG 2.0 standards.
Hierarchical Heading Organization
Make sure the headings on every page of the website is in an hierarchical order, beginning from h1 to h6, properly nested to facilitate navigation and understanding of overall document structure. This will allow screen readers to announce the text as a heading with its level, navigate to the heading markup, thus allowing users to quickly find the content of interest.
Appropriate tab-index
Users should be able to easily navigate the website and access all the elements using keyboard tab key. Tab through all the elements of the webpage after it is developed and check if all the elements can be tabbed through in the manner intended. Double check this functionality for form elements.
Add ‘skip to content’ functionality
This is extremely important when users are accessing the site using a screenreader or navigating the site only with a keyboard. The user need not navigate through all the navigation items before reaching the main content every time they visit the page. An easy way to implement this is, when the user visits the site and hits tab, a ‘skip to content’ link should appear and on pressing enter key, should take him to the main content. If the user wants to scroll through the navigation, he can simply press the Esc key when the link appears. A neat example of this implementation is provided here.
Add screen reader only and aria hidden class
Certain elements need not be shown on the screen reader but rendered only on desktop, and to achieve this add the ‘aria-hidden=true’ attribute for those elements that need to be hidden from the screen reader. Same way, some elements need to be displayed only on a screen reader and to do this, refer to the css framework your application is using. For bootstrap, adding ‘sr-only’ class makes the element visible only on a screen reader and in Foundation, it is the ‘hidden’ class.
Alt attribute
Add ‘alt’ attribute for all the images and visual content used in the website. This is extremely important for screenreader to identify visual content.
Add aria-labelledby and aria-describedby appropriately
Use aria-labelledby attribute to identify the element that labels the current element. This attribute can be used to associate an heading with a region, or to provide multiple labels in a form. A detailed explanation with appropriate examples is mentioned here.
Use aria-describedby to identify the element that describes the object. For e.g., if you have an anchor element on hovering which, a tooltip is displayed, use aria-describedby on the anchor element with the value being the tooltip content.
Tools and Plugins
Use JAWS for the screenreader, mac OS X voiceover feature, firefox wave toolbar and chrome’s accessibility developer tool plugin.
Adequate User Experience, proper sprint planning, level of conformance
It is also extremely important for designers to keep accessibility in mind while designing the User Experience. Finally, check with the organization on what WCAG level the website should conform to. Read through the guidelines, add them in the sprint planning, let the stakeholders know and implement accessibility measures right from the prototyping stage.
