According to the United States Census Bureau 1 in every 5 people in the United States has a disability, that is approximately 20% of the population. Electronic documents and the web both provide opportunities to engage in education, commerce, communication, and civil society. The Web Content Accessibility Guidelines (WCAG) are a set of guidelines to make web content more accessible to people with disabilities. Just about everyone can benefit from web pages that contain helpful illustrations, properly organized content, and a clear navigation structure. Simplifying your page into an organized and clear format can increase the effect of the information for people with visual disabilities, auditory disabilities, motor disabilities, and cognitive and learning disabilities. Here we will break down piece by piece the anatomy of an accessible page.
Headings
Headings are one of the most important elements of your accessible page. Properly formatted headings provide structure and an overall outline for a page. Headings are a primary way for people using an assistive technology to navigate the page. Headings should clearly describe the section of content. The main heading for the page should be defined as a Heading 1. There should only be one Heading 1 for the entire page. Looking under the Heading 1 you should second level heading, this is called Heading 2. For a sub section underneath your Heading 2 this should be labeled as a Heading 3, Heading 4, Heading 5, etc. For consistency it is important to define the styles for these Headings ahead of time. Because the headings define the document structure, you should not skip heading levels. For example, having a Heading 5 before a Heading 2 in a section.
Lists
A properly formatted list allows complex information to be presented in pieces that are more understandable and accessible to users viewing your page. The visual space that is created when using smaller blocks of text can significantly increase the benefit of the information to people with cognitive or learning disabilities. There are two main types of lists that should be used as proper list styles. Bullets are used for items that do not have a specific order or hierarchy. Numbering lists are used for items that have a specific order to them.
Tables
A well-structured table can make it much easier to understand complex information. It is important to structure tables in a way that makes them usable for everyone, including screen reader users. Tables present content in a grid that can be scanned by column and by row. Tables usually include headers that label information in a specific row or column. Using column and row headers is important to convey tabular data accurately.
Links
A screen reader reads all links on your page therefore it is important for the link to have a meaningful description that describes its destination. Links embedded in text and describe the link’s destination helps all users to navigate the page more efficiently.
Color
When it comes to color on your page there are two important guidelines to follow. The first guideline is using enough color contrast. Large text should have at least a 3:1 contrast. If your page does not have sufficient color contrast between font and background, people who are color blind and low vision will not benefit from the information. The second is not to use color to convey meaning. For example, using green text for things that are good and red text for things that are bad.
Images
Providing a descriptive and equivalent alternative text is important for users that cannot see images. Alternative text read by a screen reader is important for people who are blind or low vision to understand the importance of an image. Alt text should adequately describe what is being displayed and why it is important.
This list addresses only the major elements that make up an accessible page. When determining the effect and accessibility of your page it is important to reference the WCAG 2.1 standards. The overall goal of these guidelines is to make your page perceivable, operable, understandable, and robust. Together these establish a solid framework for accessibility.