Your audience includes users who have a disability of some kind, whether permanent, temporary or situational, and your website accordingly should be accessible regardless of ability. This means things like using headings, image alt tags, closed captions and transcripts, and legible text with correct color contrast so that users with assistive technology can understand your content and perform actions like clicking a button or submitting a form. The Web Content Accessibility Guidelines (WCAG) 2.0 is a set of guidelines to methodically address what accessibility means online. POUR are the four principles laid out by the WCAG for making your content accessible to anyone. All content must be:
Perceivable - Information and user interface components must be presentable to users in ways they can perceive.
This means that users must be able to perceive the information being presented (it can't be invisible to all of their senses)
Operable - User interface components and navigation must be operable.
This means that users must be able to operate the interface (the interface cannot require interaction that a user cannot perform)
Understandable - Information and the operation of user interface must be understandable.
This means that users must be able to understand the information as well as the operation of the user interface (the content or operation cannot be beyond their understanding)
Robust - Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.
This means that users must be able to access the content as technologies advance (as technologies and user agents evolve, the content should remain accessible)
If any of these are not true, users with disabilities may not be able to use your website.
To dive into each area further:
1. Perceivable information and user interface
- Text alternatives for non-text content
Convey the purpose of image, video, audio or user interface components. Examples include providing an alt tag for an image that describes the image, closed captions for videos, transcripts for audio or description of how to use a button or form field. This helps people who need your web content read to them.
- Content can be presented in different ways
Users must be able to change the presentation of your content to fit their needs. Examples would be using properly structured content like headings, paragraphs and lists so that the presentation layer of your site, CSS, does not interfere with the sequence of content. This helps people to embiggen your content to be more legible.
- Content is easier to see and hear
Color is not the primary way of conveying information. If using color, sufficient contrast is used between the foreground and background. Text can be resized without losing any information off screen. Users can control audio or video. Helping people separate important content from the rest allows users who use screen readers to hear the speech and not listen to audio or video on the site at the same time.
2. Operable user interface and navigation
- Functionality is available from a keyboard
Make sure any functionality within your content can be used by a keyboard user. This includes using styling that indicates keyboard focus on an element.
- Users have enough time to read and use the content
Completing tasks or reading content may take longer for some users. Allow users to adjust any time limits where necessary. This allows users to take all the time necessary to complete any actions.
- Content does not cause seizures and physical reactions
Content that flashes/animates at a certain rate can cause photosensitive reactions, like seizures. Use animations sparingly as they can cause physical reactions. Provide alternatives or warnings to such content or controls to switch them off.
- Users can easily navigate, find content, and determine where they are
Organize and structure your content so that a user can quickly orient themselves to navigate effectively. For example, have clear page titles that are properly organized into sections, have methods to bypass blocks of content that are repeated, purpose of links are evident. This allows users to navigate your content in different ways.
- Users can use different input modalities beyond keyboard
Some users use assistive technology such as voice recognition, touch or gesture recognition. Make sure any clickable items do not require a high degree of dexterity or cannot be accidentally invoked.This helps users who use a broad range of devices.
3. Understandable information and user interface
- Text is readable and understandable
Ensure the text content is understandable to users who read, have it read to them or use a braille device. This helps people with different types of cognitive disabilities.
- Content appears and operates in predictable ways
Avoid disorientating your users by using predictable user interfaces. Content navigation should be in the same place if it is repeated on multiple pages. This helps users who use assistive technologies, who are already skilled in their operation, to navigate and perform actions predictably.
- Users are helped to avoid and correct mistakes
Forms and any other types of interactions should not be confusing in order to keep mistakes minimal. Use descriptive instructions, error messages and opportunities to review and correct.
4. Robust content and reliable interpretation
- Content is compatible with current and future user tools
- Robust content is compatible with different browsers, assistive technologies and other user agents. Ensure your markup is valid, use headings correctly for example.
WordPress-specific tips for accessible content
- When uploading media, set the media’s alt and title fields. Bonus tip, rename the file before uploading to something descriptive.
- Use the proper blocks in the editor when writing content.
- Be thoughtful of any colors you are using.
- If using clickable items in your content, be sure they have proper styling for keyboard users.
- If using columns within your content, be sure your content still makes sense of the column layout changes for a mobile device or for larger text.
- If using video or audio within your content, provide a transcript. Better yet, put a link to the transcript next to the video or audio.
- Be mindful of animations.