How to Make Website WCAG Compliant?

What Is WCAG?

WCAG is an acronym which stands for “Web Content Accessibility Guidelines.” These internationally-recognized guidelines, created by the World Wide Web Consortium (W3C), were designed to ensure that website users with physical disabilities, such as those who are visually or hearing impaired, can access web content in the same way as those who don’t have these physical challenges.

What Are Some of the Top Issues Which Make Sites Inaccessible?

When visually-impaired persons try to access non-text items on your site (like images and photos), they won’t know what those images are unless your site provides a text alternative which can be read by a narrator. Not having the alternative text will make a site inaccessible to these users. In addition to providing so-called “alt text,” compliant sites provide captions for multimedia and make all functionality available from a keyboard.
WCAG prescribes three levels for compliance: beginner, intermediate and advanced. Following are some of the primary WCAG compliance issues at each of these levels.

To be compliant at the beginner level, your website must:

• Provide text alternatives for non-text content
• Provide an alternative to video-only and audio-only content
• Provide captions for all videos which include audio
• Use more than one sense for all instructions
• Not use presentation that relies solely on color
• Make all functionality accessible by keyboard only
• Ensure users have control over time limits
• Provide user controls for moving content
• Provide a “skip to content” link
• Use clear and helpful page titles
• Present items in a logical order
• Make the purpose of every link clear from its context
• Ensure page elements do not change when they receive focus on input
• Clearly identify input errors

To be compliant at the intermediate level, your site must, in addition to the above:

• Ensure the contrast ratio between text and background is at least 4.5:1
• Ensure text can be resized to 200% without loss of content or function
• Not use images of text
• Offer several ways to find pages
• User clear headings and labels
• Ensure the keyboard focus is clear and visible
• Inform users when the language on a page changes
• Use all menus consistently
• Use all icons and buttons consistently
• Suggest fixes when users make errors
• Reduce the risk of input errors for sensitive data

To be compliant at the advanced level, your site must, in addition to the above:

• Provide sign language translations for videos
• Provide extended audio description for videos
• Provide a text alternative for videos
• Provide alternatives for live audio
• Ensure the contrast ratio between text and background is at least 7:1
• Ensure all audio is clear for listeners to hear
• Offer users a range of presentation options
• Make content accessible by keyboard only, without exception
• Remove all time limits
• Not interrupt users
• Save all user data when re-authenticating
• Always let users know where they are (within site navigation)
• Break up all content with appropriate headings
• Explain any strange or unusual words
• Explain all abbreviations
• Ensure all content can be read by a user with no more than nine years of education
• Explain all words which are difficult to pronounce