The CMO’s Guide to Website Accessibility: How to Create a Positive UX for All Your Users

What Is Website Accessibility?

Web accessibility is about removing the barriers that prevent people with disabilities and other impairments from using your website. It can take on many forms. For instance, it can mean that:

• Your website makes use of text-to-speech or text-to-Braille software.
• Text and images are large and/or enlargeable.
• Your website is easily navigable without a keyboard or mouse.

But in truth, accessibility is about more than basic functionality. It means all users have equal access to the information they need and are able to complete their user journey with as little frustration and friction as possible.  

Of course, one reason to ensure your website is accessible is to stay on the right side of the law. Adhering to accessibility requirements such as WGAC AA 2.1 is vitally important to avoid potential lawsuits, fines, and other negative consequences. 

But in order for your site to be genuinely universally accessible, you’ll need to broaden your perspective. Why? Minimum standards tend to focus on ensuring your website accommodates a narrow range of disabilities — namely, visual and motor impairments. However, the Americans with Disabilities Act and Section 508 of the Rehabilitation Act offer a holistic view of what it means to be accessible.

 A bigger view of accessibility means considering things like: 

• Your users’ access to and quality of hardware, software, and internet connectivity
• Computer literacy and skills
• Economic situations
• Education level
• Geographic location
• Culture
• Age
• Language

You may not be able to address all of these issues for your users. But by going beyond a “check-the-box” approach to accessibility, you can do a better job of reaching your audience where they are — and helping them get where they need to go.

Empathy Is Key When Creating an Accessible Website 

Creating an accessible website may sound daunting, especially if you focus primarily on the technical details and considerations of compliance. But by thinking about accessibility in terms of usability, you can create an inclusive environment where everyone’s needs are considered.

It all starts with empathy. So before you begin any kind of website project — whether you’re redesigning your entire site or updating your content — put yourself in your users’ shoes and ask:

• Who are our users and what do they need from our website?
• What do typical user journeys and calls to action look like? Can they be completed by people with varied needs?
• How will someone who is differently-abled experience this? 
• What can I do to remove frustration and improve their overall experience?
• What will it take to create a truly human-centered design that encompasses the full range of human experience? 

Designing your web environment with a broader pool of users in mind (beyond the standard narrow view) paves the way for deeper engagement with your entire audience.

How to Identify Your Website’s Accessibility Gaps 

So, how can you uncover the accessibility shortcomings that are holding your users back? First, make use of the plethora of tools and software available. Then, test new solutions with the people you’re trying to reach in the first place. 

Site Checkers and Accessibility Tools 

There are a number of helpful tools and compliance-oriented checklists to help you identify and close your website’s accessibility gaps. Although some are intended to help you meet minimum legal standards, others take a more holistic approach to help you serve all your users more effectively.

We recommend:

• Siteimprove, which provides a free accessibility checker as well as a more advanced paid service.
• CKEditor Accessibility checker. This tool is specifically helpful for content editors. It scans all your content and identifies areas to fix, all within your WYSIWYG editor.
• Lighthouse. This is a free, open-source tool that generates a report on how well each of your pages performs.
• axe by Deque. Featuring a free Chrome accessibility plugin as well as a more comprehensive paid toolkit, this option is a great choice for mobile developers.

Knowing where your problems lie is key to fixing them and offering your users a better overall experience.

The Vital Role of Usability Testing 

Although accessibility tools are undoubtedly helpful, the best way to make sure your website is truly accessible for all of your audience personas is to test, test, test. After all, you don’t know what you don’t know. For example, it’s nearly impossible for a sighted person to anticipate every pitfall that a person with visual impairments might encounter. Likewise, it can be hard for someone without cognitive impairments to understand the need for short, concise content. 

That’s why it’s crucial to conduct thorough testing to identify problems you’re prone to miss. 

You can conduct some testing internally by having your team use screen readers, keyboards, and switches to see what the experience is like. This is a valuable way to find problems while simultaneously increasing your empathy for your audience.

But remember: The people who are best equipped to give you the insight you need are those who use assistive technologies every day. Invite them into the process and ask them to help you find the gaps and glitches you aren’t able to discern on your own. 

How to Create Accessible Content

Once you know where your website is falling short in terms of accessibility, what steps should you take to make meaningful improvements? And what are the key elements you need to watch out for?

First, consider your content. Your content exists to help you reach your audience with your organization’s message. To do that effectively, it’s imperative to create content that everyone in your audience can absorb. 

Write Using Clear, Straightforward Language

One of the best ways to make content accessible is to make it readable. And for users who rely on assistive technologies, the equivalent of readability is listenability.

Consider how challenging it is to read a run-on sentence or to find the salient point in a long, rambling paragraph. Now, imagine listening to a run-on sentence or an unwieldy paragraph. How much longer might it take for an impaired user to not only comprehend what’s being communicated but also determine whether it’s pertinent to them?

To write effectively for readers and listeners alike, follow these guidelines:

• Keep sentences to 25 words or fewer whenever possible.
• Use the active voice rather than the passive voice.
• Don’t use a fancy word when a simple word will do.
• Avoid jargon and spell out uncommon acronyms. 
• Edit, edit, edit. Eliminate grammatical errors, run-on sentences, and typos.

Your website content shouldn’t read like a Ph.D. dissertation. Try using a free tool like the Hemingway app to identify areas you can simplify.

Use Frequent Headings and Subheadings to Make Content Scannable

Reading long blocks of text is arduous for many people. But it’s particularly difficult for people with cognitive impairments and for those using screen readers.

Headings and subheadings break up long blocks of content and tell your readers what to expect from that section. To use them effectively, consider creating an outline before you begin writing. This helps your content flow in a logical, organized manner.

Be sure to populate headings with keywords and clear descriptions so users can skim, scan, and scroll to find what is useful for them. 

Employ a Rich Content Structure

Your site visitors may not want to consume all the content on a particular page. But you can help them discover the most important elements by employing a rich content structure using a variety of design elements.

In addition to using headings and subheadings, section off pieces of the page to point users toward other relevant information on their journey. This is helpful for users with cognitive impairments who may have difficulty discerning which pieces of information are more critical than others. It also provides valuable wayfinding insight for users who rely on assistive technologies to explore your site.

Convert PDFs and Other Documents to HTML 

Many organizations use PDFs liberally as a way to reuse and repurpose materials that are already designed.

Unfortunately, PDFs and other document types (e.g., spreadsheets, PowerPoint presentations) are notoriously inaccessible, especially when they’re scanned. In addition, they’re difficult to read on a mobile device, which is a problem since many users access websites on their phone far more frequently than on a desktop.

Perhaps even worse, PDFs and other documents are difficult to access without the use of a mouse. Keyboard navigation via tabbing and up/down arrows isn’t consistently possible within a PDF. And if a user relies on switches or other controls due to limited mobility, navigating a static PDF can be quite challenging.

To create a consistently accessible experience for everyone, convert PDFs and other documents to accessible HTML pages.

Use Alt Tags to Contextualize Your Images

If a picture is worth a thousand words, what happens when you can’t see it? Alt tags — an attribute of the HTML <img> tag — provide descriptions of images and other non-text content. They offer useful, contextual information to ensure users with visual impairments don’t miss out on the relevant details you want to convey. Your WYSIWYG content editor or image manager may offer a field to edit the alt tag value.

It’s ok not to add an alt tag for decorative, filler photos that don’t provide any added information. But on the whole, if an image adds value to your content, including a descriptive alt tag is a must.

Provide Captions and Transcripts for Audio/Video Content

Most content editors add closed captions to video content as a matter of course. In fact, in our modern, video-centric digital world, many video editing tools add captions automatically. Captions can help users with hearing impairments, but they are also useful for people who have difficulty absorbing information auditorily.

However, for users who are visually impaired, captions are meaningless. That’s why it’s important to add transcripts as well. As a bonus, transcripts can help with search indexing, making content findable.

Transcripts can be read by screen readers, ensuring all users can access the information covered in your multimedia content types. Transcripts are also helpful for readers who may not have time to watch an entire video or listen to a podcast but want to quickly skim the transcript to glean important takeaways. 

The Elements of Accessible Design

Creating accessible content is one important piece of the puzzle — but it’s not the only piece. It’s also essential to design your site using visual and structural elements that are accessible and inclusive for all. 

There are a number of principles designers should bear in mind. For example, it’s important to:

• Choose color schemes that have adequate contrast to improve visibility
• Select fonts and point sizes carefully
• Avoid using color alone to indicate meaning
• Order content logically to support keyboard and screen reader navigation
• Consider how menus and navigation look and function on a wide variety of devices

 (including accessibility devices such as keyboards and switches)

• Make the user interface as simple to navigate as possible
• Design forms simply and clearly to avoid navigation traps and reduce errors
• Include adequate touch area and space for controls
• Add audio and video elements to supplement the written word

Designers should also stay on top of emerging design trends that can make websites more accessible. For example: 

• Try designing buttons and icons that appear multi-dimensional rather than flat. This makes it easier for users to navigate the site whether they’re using a mouse or assistive technologies like keyboards and switches.
• Consider creating product renderings (or other resources like maps or charts) that show the many facets and views of the item. This appeals to visual learners who want to see every possible detail of a product before making a buying decision.
• Choose pleasing, 3D labels and descriptions for users who prefer to read detailed information or who can’t see the images. These labels and descriptions can also be read by assistive technology devices to ensure users with visual impairments don’t miss important details.

Again, creating a fully inclusive and accessible website starts by completing extensive user and persona research to understand who your audience is and what is important to them. Only then can you make sure your design choices serve your users’ needs. 

Avoid Navigation Traps that Trip Users Up

Web designers rarely have the impairments that members of your audience might live with. That means they’re often blind to the usability traps their design choices create. 

Traps are anything that hinders a user from completing the desired task or navigating your site with ease. Common traps include:

• Pop-up windows or interactive features that essentially lock down a user’s ability to navigate past it without closing it out. If a user can’t see the pop-up, they might try to refresh the page, go back, or go forward to get past the issue — but they may never discover what’s holding them back. Others might be able to see the pop-up but might not be able to tab to it using keyboard navigation. 
• Forms with required fields that aren’t labeled correctly or coded in the right order. A problematic structure can hinder the user’s ability to find and use the “submit” button. If they miss the required fields and can’t figure out where they are, they’ll continually receive an error message without knowing how to correct the issue.
• Long navigation menus and submenus that take forever to tab through. Without a “skip to main navigation” link that is enabled for keyboard navigation, users could get stuck tabbing through an entire submenu before finding their way back to the main navigation areas.

All of these traps can be prevented with thoughtful consideration for the needs of differently-abled users. Here are a few ways to do just that.

Ensure Controls Within Media Content Are Accessible

If an impaired user accesses your video or audio file, what happens next? Can they easily control their experience without using a mouse? Can they push play, adjust the volume, pause, rewind/fast forward, push stop, and otherwise experience the media similarly to any other user?

If your audience can’t navigate your media experience using alternative controls (keyboards, switches, etc.), the resource is inaccessible. Take time to review your multimedia content and ensure the controls within each one can be used by users with varied abilities.

Make it Clear Where Your Links Lead

Many of us are guilty of using vague language like “Read More” and “Learn More” when linking to internal and external resources. This can be a nuisance for everyone in your audience, but it could keep differently-abled users from finding the destination they’re searching for. For instance, without context, users relying on a screen reader may skip over ambiguous links and miss out on important content.

To remedy this, replace fuzzy language with specific descriptions that make it clear where the link will lead the user. Consider using keywords from the destination page’s title in the link — or simply use the title in its entirety.

Double Check the Accessibility of Embedded Resources

The vendor who built your website likely provided you with tools for creating and editing your content. They may have built custom plugins for you to do things like add a carousel of photos to your homepage or include an interactive map of your location.

But if you decide to incorporate a third-party resource into your site, be careful. Those external plugins may not be built with accessibility in mind. 

Take a close look to make sure screen readers can interact with any embedded features you obtain from third-party sites. Evaluate whether users who can’t use a mouse will be able to access these elements as well. And if you find these features exclude portions of your audience? It may be worth rethinking whether it’s a good idea to include them at all.

Adopt a Continuous Improvement Mindset to Keep Your Website Accessible and Inclusive 

When it comes to making your website accessible and inclusive, you can’t “set it and forget it.” After all, your website is always changing. And every time you (or another site contributor) update it, you run the risk of undoing the progress you’ve made. 

Therefore, evaluate your website from the lens of accessibility on a regular basis. Use tools to check your site frequently. Conduct ongoing testing whenever possible. And make it a priority to keep your content, design, and navigation user-friendly for your entire audience. 

Need some help? The ImageX team cares deeply about accessibility and inclusivity. We love to help clients simplify their content strategy, make smarter design choices, and fix the navigation traps that hold users back.

We would love to help you, too — so let’s talk.