Color Bars

A Recipe for Creating Accessible Web Content

You’ve written an informative, compelling, and all-around awesome piece of digital content. You featured stunning photos and followed all the best practices for SEO to get users to visit your website. A good story, a dash of great visuals, and just the right amount of SEO … it’s a recipe for success! Well, almost. It’s missing a key ingredient to ensure everyone who wants to read it can enjoy it – accessibility.

Yes – to truly connect with your audience in the increasingly noisy digital space you must create great content. But great content must be accessible and inclusive to all.

Inclusivity by Design

Inclusive design, also known as universal design, considers the full range of human diversity with respect to ability, language, culture, gender, age, and other forms of human difference. From page layouts to captioning, inclusive design in the digital space considers many things, and these considerations must be addressed throughout the entire content and design creation process, from start to finish. In short, inclusive design is about the process, and an accessible website is the result.

Web accessibility applies to all disabilities that affect access to the web, including auditory, cognitive, neurological, physical, speech and visual, or any combination thereof. With 1 in 4 U.S. adults living with a disability, making your website accessible to all is not only the right thing to do, it’s important for your brand’s continued success.

Basic Ingredients

Web Content Accessibility Guidelines, (WCAG 2.0 and 2.1) published by the World Wide Web Consortium’s Web Accessibility Initiative, offer in-depth recommendations on how to make the web more accessible. While web accessibility can seem rather complex and daunting, a few basic ingredients can produce amazing results. Below are some simple tips that will make your website more accessible.

Descriptors: Alt Text, Captions and URLs

Assistive technologies like screen readers convert digital text into synthesized speech, allowing people with visual impairments and certain cognitive or learning disabilities to easily consume the website’s information. Since screen readers can’t read text on images, they rely instead on alt text (alternative text), which describes the appearance and details of the image.

Tip: There’s no need to include “image of” in your image alt text, as screen readers automatically make that assumption.

Screen readers serve as the eyes for many people, so it’s important to include appropriate alt text and accurately caption all images on your site, or users will miss potentially significant information. Both alt text and captions should be descriptive and easy to understand.

The same applies to the webpage URL – it should be concise, but representative of the page content. A user should be able to get a sense of the page’s content through the URL alone without any additional context.

Tip: When linking a URL within body copy or creating a call-to-action hyperlink, avoid using instructional text like “click here,” “more,” and “read more,” as they don’t provide any context when using screen readers. Instead, link keywords or phrases as we’ve done throughout this blog post.

A flattened image with text added over the top of the image
An Orange Meringue Pie with overlay text represents a poor image choice for accessibility-compliance.
An example image without text laid on top of it
An Orange Meringue Pie without any overlay text is a more accessibility-friendly image.

PDFs

Inclusive design starts before you even build out a webpage. If you’re adding any PDF files to the site, you should create these files to meet common accessibility standards. Adobe has a helpful article on how to make your PDFs accessible.

Header Hierarchy

Headings and subheadings provide a layer of organization to your page. This is even more true for those using screen readers. Use proper header hierarchy (H1 > H2 > H3, and so forth) and do not bounce around different header levels, or the user won’t be able to follow along.

Pass the Test

Now that you have designed an accessibility-friendly webpage, it’s helpful to test that accessibility before going live. WAVE is a suite of evaluation tools that helps creators make their web content more accessible to individuals with disabilities. WAVE can automatically identify many accessibility and WCAG errors, but it also relies on a manual evaluation of content to incorporate the human perspective.

SortSite is another useful tool which scans your entire site and gives an actionable report on what to fix.

To go a step further, try an easy keyboard test. Use the tab key on your keyboard to navigate through the webpage without touching the mouse. If you can’t travel throughout the page as intended, your page needs additional attention.

Prioritize Accessibility

When creating content for your website, it’s important to build pages with an inclusive design approach, which prioritizes accessibility. The extra consideration up front saves you time, money and most importantly, your relationships with stakeholders. By ensuring web content is accessible, everyone will have a seat at the table, and be able to easily consume and enjoy your content.

Through inclusive design, Nuffer Smith Tucker Public Relations creates websites with accessibility at the forefront. NST abides by and accounts for Section-508 guidelines. NST also partners with a third-party ADA compliance and inclusivity accessibility consultant to provide specialized oversight and manual user testing for websites and other electronic content projects. If you need help creating or updating a website or other electronic content for your organization, we’d love to hear from you.

Author

« | »