Jane is an outgoing college student who happens to be vision impaired. She uses screen reader technology to access online content. She and her friends want to go to the movies, so Jane visits her local movie theater’s website to find out which shows are playing. The site doesn’t use proper headings, the images don’t have alternative text, and the links are very generic. Jane is not able to determine what movies are playing and must rely on a sighted peer to read her the movie show times.
Jane is a fictional character, but her story is all too real. Individuals who are vision impaired or have other challenges such as cognitive or mobility issues rely on adaptive technology like screen readers in order to effectively interact with online content. In order for this technology to interact with online content effectively, that content must be accessible.
What does having accessible content mean? The World Wide Web Consortium (W3C) defines web accessibility as the ability for people with disabilities to “perceive, understand, navigate, and interact with the Web.” Web developers and content contributors can help ensure that online content is available to everyone.
Content contributors help to turn online content into magic. They spin ordinary words into captivating content that keeps visitors engaged and helps to bring new visitors to a site. Since many content contributors typically have backgrounds in journalism, communication, or other similar fields rather than backgrounds in web development or design, how can they help to ensure the content they provide is accessible to individuals who need access technology to interact with online content?
Content contributors can make their content more accessible through consistent use of a logical heading structure, providing meaningful alt text, properly labeling links, and adapting their writing style to reach the widest audience possible.
1. Heading Structure
Why are headings so important for accessibility? Headings help access technology users to navigate content more efficiently. Headings help structure the content so nonvisual readers can “skim” through the content quickly in order to find the information they need and learn the overall layout of the page much like their sighted peers skim content visually. If proper headings are not used, screen reader users lose a vital shortcut search method and it becomes more challenging or time consuming to sift through content.
Heading Best Practices
Screen reading software can’t relay changes in the weight or size of text; making heading text larger or bold will not create a true heading for nonvisual readers. In order for a screen reader to discern heading text from other text, proper heading tags must be applied to the content.
Each page should have one heading level 1 which clearly describes the purpose of the page content. The content should then be organized using additional heading levels (six heading levels are available) and should be used in chronological order with the appropriate styles applied through CSS. For example, a heading level 3 should not be used before a heading level 2.
In order for screen reader users to understand what to expect under each heading level, the heading should provide context for the information it precedes.
2. Meaningful Alt Text
Images represent an important part of online content. Images are used to convey information, as decoration, and to enhance the message of written content. Images should have meaningful alternative text to ensure nonvisual readers are able to benefit from the information images provide.
Screen readers are not able to analyze or interpret images and are unable to provide non-visual readers information about what message an image is trying to convey.
According to WEBAIM, “The key principle is that computers and screen readers cannot analyze an image and determine what the image presents. As developers, text must be provided to the user which presents the CONTENT and FUNCTION of the images within your web content.”
The alt attribute allows content contributors the ability to provide information about the images used to nonvisual readers.
Alternative Text Best Practices
Alt text should be meaningful. Providing generic alternative text like “photo1” or “dog” doesn’t provide a vision-impaired reader with enough information. Content contributors should provide a concise description of what is featured in the image and perhaps more importantly, why the image is being used on the page. The ultimate goal of providing good alternative text is to allow an individual who is blind to have same user experience as a sighted individual.
Occasionally images are used for purely decorative reasons. It is important to still use the alt attribute, just leave it empty (called the null alt attribute). If an image is missing an alt attribute, screen readers will often read the image source code which provides a negative user experience. With the null attribute, screen readers ignore the image entirely.
Alternative text can be too limiting for complicated images such as infographics, charts, or graphs. If it’s a complex image, provide a clear description of the information the image conveys in the written content that precedes or follows the image.
3. Properly Labeled Links
Links are a great way for content contributors to provide additional information, site research sources, and provide an alternative way for readers to reach additional content areas of the site. Links are only as good as how they are labelled, however.
A common practice when linking to additional information is to use generic or uninformative link text such as “Learn More” or “Click Here.” For screen reader users this practice poses a real problem. When the links are accessed in a screen reader shortcut list, the links are no longer associated with surrounding content. As a result, hearing “Learn More” (often times more than once!) provides no information about where the link takes the end user. To ensure all links make sense out of context, content contributors should use descriptive link text. For example, instead of “Learn More,” use “Learn more about our tuition assistance program.”
Link Labelling Best Practices
Aside from making sure link text is descriptive, content contributors should indicate if the link will take the end user off the site they are currently visiting. It can create confusion if the user isn’t aware the site has changed.
Also, let the user know if the link is a document as opposed to web content. Adding (Word Doc) or (PDF) to the link text will effectively alert the end user they are opening a document.
4. Adaptive writing style
This style and complexity of writing online content can potentially have a negative impact on accessibility. Content should be geared toward a grade 9 reading level, written clearly and concisely and logically organized into sections in order to ensure the content is appropriate for the widest audience possible.
According to the W3C, “Reading disabilities such as dyslexia make it difficult to recognize written or printed words and associate them with the correct sounds. This is called “decoding” the text. Decoding must be automatic in order for people to read fluently. The act of decoding text word by word consumes much of the mental energy that most people are able to use for understanding what they read. Text that uses short, common words and short sentences is easier to decode and usually requires less advanced reading ability than text that uses long sentences and long or unfamiliar words.”
But what does a grade 9 reading level look like? Grade 9 reading level content is written in common simple words with paragraphs limited to 2 or 3 sentences. While it isn’t always possible to meet these requirements, keeping the content’s audience in mind should be the primary goal.
To make sure content meets this standard, Microsoft offers the Flesch-Kincaid reading level review option within MS Word. And for non-Microsoft users, the Online Utility Readability Calculator comes in handy.
Accessible Writing Best Practices
If the nature of the site requires the use of difficult or highly technical words, offer a link or accessible pop-up that provides a definition.
Break up lengthy sections into smaller paragraphs or numbered or bulleted lists. The information is easier to read and understand when it’s spaced out effectively.
Next Steps for Improving Content Accessibility
First, make accessibility a priority when developing new content – Create a checklist of web accessibility best practices and refer to it whenever new content is added to the site. These best practices should also be assessed during the editing or QC process to ensure proper implementation prior to going live.
Second, develop a plan to tackle updating existing content – This can be the most time consuming aspect of improving web accessibility. Develop a plan to tackle accessibility improvements during content audits or anytime a page needs to be updated. Content contributors can also tackle web accessibility in chewable chunks. For instance they can evaluate and update all images then move on to headings, links, etc.
Third, add an accessibility statement to the site – Adding an accessibility statement to a website lets users know that accessibility inclusion is a priority. If possible, an accessibility point of contact, along with a method for contacting that person (phone or email address) should also be added should users find an issue on the site.
Universal design considerations increasingly comprise a prudent approach to design and development for the web. Interaction designer Andrew Maier details some of the broader implications this has for user-centered designers.