We recently wrote a post explaining what it means to be 508 compliant. Now it’s time to offer up a few tips on what you can do to make sure that your site is perceivable, operable, understandable, and robust by the WCAG 2.0 standards.
What Are The Compliance Standards?
As we mentioned, there are three levels by which your site will be essentially graded on compliance: A, AA, and AAA. While AAA is a difficult level to reach without building a custom site, both A and AA are somewhat easy for website managers to reach with minor changes.
Perceivable: Information on the site must be visible to all senses of any person.
A:
- All images and buttons have alternative text.
- Frames are titled correctly.
- Any embedded multimedia has the correct text for accessibility.
- Any images that are complex have content on a separate, linked page referencing said images.
- A descriptive text (caption) or audio file is provided for any web-based video, such as YouTube videos, MP3 files, audio podcasts, etc.
- Markup is used to differentiate headings and special text.
- Tables are used for tabular data.
- Text labels are designated for form input elements.
- Navigation bar must be in a logical order.
- Instructions are in no way specific (i.e, “Click the triangle to go to the next page) or require sound (i.e, “When you hear a beep, type the answer) or rely on color (i.e, “You can only click the red button when completed”). **there are ways for color to be allowed due to contrast.
- Users are able to stop, mute, pause, or change volume on audio playing longer than 3 seconds.
AA (this is in addition to all “A” standards):
- A descriptive text (synchronized captions) is provided for all live multimedia containing audio, such as conferences, flash animations, etc.
- Audio descriptions are provided for ALL video content.
- Text in imagery has a contrast ration of 4:5:1.
- Large text is bolded with a contrast ration of 3:1.
- The page is able to be used when the text size is doubled.
- Images are not ALWAYS used to compliment text.
Operable: The interface on which you are building cannot require interaction that a specific user cannot perform.
A:
- Keyboard is usable for all page functionality (user can navigate to and from all page elements) unless it requires something outside of a keyboard (i.e, signature/drawing), and access keys do not conflict with any current shortcuts.
- Users can extend the time limit for a page if it has a time limit.
- Automatic scrolling or moving content lasting longer than 5 seconds can be stopped or paused by the user.
- Users can manually control automation of content (i.e, automatic refreshing of a page or a notification alert).
- No page content flashes more than 3 times per second (unless the flashing content is small enough and the flashes are of a low contrast).
- Users can skip navigation and other repeatable elements. **a great heading structure can be considered enough for these standards.
- All pages have informative page titles.
- A link’s purpose can be determined by the text alone.
AA (this is in addition to all “A” standards):
- Multiple choices are given to find different pages on the site, such as list, tables of content, site maps, site searches.
- No duplicate heading, unless the structure of the site calls for it.
- If you tab through the page, you can see where you are using keyboard focus.
Understandable: No content on the site can be beyond a user’s understanding.
A:
- The language can be determined using the HTML lang attribute.
- There are no disorienting factors on the page (i.e, popups, change of focus, etc.) after inputting information or clicking.
- Form validation errors are clearly identified and easily fixable, and all form requirements are specifically labeled.
- Interactive elements on the site are clearly labeled.
AA (this is in addition to all “A” standards):
- Any language that is different on a page (i.e, a secondary language) is identified using the lang attribute.
- Navigation links that are repeated do not change order when going through the site.
- Elements that have the same functionality are identically labeled throughout the site.
- Errors on client or server side for validation come with suggestions on how to resolve.
- If the user can change legal, financial, or test data, the changes can be reversed or confirmed.
Robust: No content on the site can be beyond a user’s understanding.
A:
- HTML/XHTML validation and parsing errors are avoided.
- Frame titles, form labels, and HTML specifications are used in a way that allows accessibility.
AA (this is in addition to all “A” standards):
How Do I Know if My Site Is Ready?
Even though the changes above are just the tip of the iceberg, getting through them all can be a time consuming experience. However, if your site has been built with compliance standards in mind, you may not have to start all the way at square one. After the changes are done, it’s important to run your site through some sort of 508/WCAG 2.0 checker so that you have verification.
If you’re looking to adjust your site, or just have questions about how we can help, contact Practis today!
Source: https://www.w3.org/TR/WCAG20/