Web Accessibility for Content Editors

What is Web Accessibility?

In the simplest of terms, web accessibility means that a website is designed and developed so all visitors are able to use it fully, regardless of disability.

According to the Centers for Disease Control and Prevention (CDC):

A disability is any condition of the body or mind (impairment) that makes it more difficult for the person with the condition to do certain activities (activity limitation) and interact with the world around them (participation restrictions).

Web accessibility focuses on four principles to ensure websites are usable for all people: Perceivable, Operable, Understandable and Robust.

Perceivable

The content on your website must be presented in a way that visitors can process. This includes providing alt text on images for visitors who are blind or have low vision. Not relying only on color to convey meaning for visitors who may be color blind. Providing text alternatives to videos for deaf visitors or people who simply can’t have the volume turned up.

Operable

All your website visitors need to be able to operate your website but not all people are able (or want) to use a mouse.  Some people use the keyboard, others will use voice over, eye or head tracking and even a sip-and-puff, a device that is powered by air pressure.

People with cognitive disabilities may need more control over videos or animations. They may require more time to complete tasks or need more instructions and better error messages.

Understandable

For a website to be understood it should use clear language and be easy to comprehend. Navigation should be consistent, link text informative and forms clearly labeled with simple instructions.

Robust

A robust website is compatible with multiple web browsers, devices and assistive technologies. A website should not need the latest technology or even a fast internet connection to be work.

Why Does Web Accessibility Matter?

Plain and simple, having a non-accessible website can open you up to lawsuits. In 2015, there were less than 100 lawsuits filed for websites that violated the American with Disabilities of Act (ADA). Last year (2019) saw that number increase to over 2,200 cases.

If you are a government entity, you are legally obligated to meet Section 508 Compliance. However, the most important reason to have an accessible website is for the people that use your website. According to the CDC, 61 million adults in the United States live with a disability. That equates to 26% of the population.  Statistically speaking, your website has users with disabilities.

Using Headings Properly

HTML offers 6 heading levels to use when writing your content these are most commonly referred to as H1 – H6 as this correlates with the HTML code. Headings are a very important part of a web page as they are used to create a document outline. This outline is used both by search engines and assistive technologies to determine what information is on the page. It is very important that headings are used correctly.

An example of proper heading usage:

H1- Popular Pets

H2 – Dogs

H3 – Popular Dog Breeds

H4 – Corgis

H5 – Facts about Corgis

H5 – Health Concerns about Corgis

H4 – Bull Dogs

H5 – Facts about Bull Dogs

H5 – Health Concerns about Bulldogs

H2 – Cats

H3 – Popular Cat Breeds

H4 -Bengal Cat

H4 – Siamese cat

H2 – Fish

H3 – Saltwater versus freshwater

In the example above, the H1 is only used one time as the page title. If you are using a content management system (CMS) such as WordPress or Drupal, this is usually added to the page automatically. It is best practice to have one H1 per page.

Headings should never skip a level when descending, meaning you should never have an H4 unless it is a child of an H3 further up the page. Unfortunately, it is not uncommon for content editors to choose a heading because of how it looks visually instead of the semantic meaning.  If you don’t like how a heading looks talk to your web team and change that style globally, this will keep visual consistency across the website and prevent creating accessibility issues.

Accessible Images

Images are a great way to add visual impact to a website but not all users will see those images. Users with visual impairments may be using assistive technology such as screen readers or braille displays to navigate your website. Other users may have a slow internet connection or requested their browser does not load images.

The image element in HTML allows for alternative text, which is used by assistive technologies to provide the context of images. Alternative text is also displayed on your website if the image fails to load.

In this image, if the alternative text was “Dog” that would technically be correct but there is no detail.

We could say “Dog in a yard with tongue out” which is more descriptive but provides no context.

“Erin the Corgi tired and happy from playing ball in the backyard”. This alternative text not only describes the image but provides context about the image.

Best practices for alternative text

• Describe the image and provide context
• Keep the text short around 125 characters, anything longer may be cut off by assistive technology
• There is no need to say “image of” or “picture of”, assistive technologies will announce that.
• If an image is added as a design flourish and provides no additional context to the page it is ok to have blank alternative text.

Accessible Videos

It is not uncommon to have videos on your website and you want to make sure that your videos meet accessibility best practices.

Videos should not autoplay on page load as this can jarring to many users as well as eat up bandwidth causing slower page loads. If a video has to play at page load it should be muted.

All videos should have controls allowing the user to play/pause the video, control the volume and jump around to a specific time in the video. If the video is a small looping, muted background video just the ability to pause and play is fine.

Whenever possible videos should have closed captioning and if that is not an option a transcript of the video should be provided.

If a video presents a lot of visual content an audio description should be provided. This is an additional audio track that describes the non-verbal information.

The University of Washington has an incredibly informative page on Creating Accessible Videos that provides full instructions on how to add captions and audio tracks to various popular video services and also companies that can be hired for this service

Best Practice for Links

A holdover from the early days of the internet is the link text “click here” followed by the purpose of the link which is not part of the link itself. When assistive technologies such as a screen reader encounter a link it will read the link text and then let the user know it is a link, e.g., click here link.

Anyone using assistive technologies has no clue why they would want to click the link. Whenever possible use descriptive text as the purpose of the link “signup for webinar on subject X” or “apply now for job Y”.

At this point with the internet, it is probably safe to leave out “click here” all together as your users know how the internet works.

Web Accessibility Benefits Everyone

The nice thing about web accessibility is that there is no downside for users that don’t need the extra help. In fact, most accessibility improvements will increase the overall usability of your website for everyone.

For more insights, please read our article on What is Content Strategy and Why it is Important.