The term “accessibility” brings a few related concepts to mind. Design-related features like color contrast and legibility are prime examples. And we can’t forget about adding ALT attributes to images.
These items ensure that users can access a website. But that’s only half of the battle. Our content also has to be easy to understand. Yet the subject seems to fly under the radar of web designers. Perhaps that’s because accessible content is more subjective. How do we know what passes muster?
There is no magic formula. But there are tried-and-true practices that will help you write accessible web content. And it’s something you can share with clients. With the help of an expert, we’ve put together some dos and don’ts. Let’s get started!
Unlimited Downloads: 41,000+ Web & Mobile UI & UX Kits
Starting at just $16.50 per month, download 1,000s of Figma, Sketch, and Photoshop UI kits and templates with Envato Elements. You will also get unlimited access to millions of design assets, photos, video files, fonts, presets, web templates, and much more.
An Expert’s View of Accessible Web Content
Amber Hinds has seen all manner of accessibility mistakes. As founder and CEO of Equalize Digital, she and her team have a laser focus on the subject. That made her a natural choice for advice on the connection between content and accessibility.
We asked Amber about common accessibility issues. And she also provided some great tips for testing and talking to your clients about it.
What traits make content accessible to all users?
Content accessibility is less about things like focus states or HTML semantics and more about paying attention to the readability and structure of the content and being thoughtful about word choice. The most accessible content has a reading level below 9th grade and is clear and concise.
Adding headings throughout the content to break up long sections of text makes it more “skimmable” for all users. But it also enables people who are blind to jump to sections that interest them because screen readers allow people to use headings to navigate a page. Including HTML lists or data tables is another way to make content easier to consume.
Clarity of language and word choice also applies to link anchor text. You should be able to tell solely from the link text where the link is going. Just having meaningful links can go a long way in helping all people move quickly through your website and find the things they are looking for.
What are some common content accessibility mistakes you’ve seen?
When we audit websites, these are common mistakes that I see repeatedly:
- Headings not marked up as headings (people using bold paragraphs instead of an actual heading element) – usually, this is because they don’t like the styles their theme is applying to the headings.
- Headings were used out of order rather than in outline format (typically for the same reason as above – the H2 was too big, so they used H4s instead).
- Missing or incorrect alternative text on images.
- Meaningless links like “click here,” “visit the website,” or “read more.”
- Naked links that show the full URL without anchor text.
- Content that should be in a bulleted list, not formatted into a list.
- Videos missing transcripts and accurate captions.
- Videos that rely on sight to understand but without a written or audio description for people who are blind.
Are there any content types or formats we should avoid?
One thing I always ask people to rethink is PDFs. PDFs, whether menus for a restaurant or e-book lead magnets, are almost always in-accessible unless effort has been put in to make them accessible.
PDFs are designed for print – they’re not mobile responsive and particularly challenging for screen reader users. It is much easier for a screen reader user to access content on a web page than they can in a typical PDF. So, if you can put the content on a web page rather than in a PDF, that’s best for accessibility.
On web pages, more straightforward content layouts are better than “fancier” ways of displaying content, such as carousels, accordions, or tabs.
That’s not to say that you can’t have carousels, accordions, or tabs on an accessible website. But in WordPress, there are a lot of plugins that add this functionality where the plugin developer has failed to consider accessibility, and they are completely inoperable if you don’t have a mouse.
So if you do add these elements to your content, make sure to test them and ensure you can interact with them with only your keyboard.
Other content formats that can be troubling are video, animated GIFs, or audio that auto-plays, unless you have a pause button that allows users to stop it. Parallax and similar animations can cause nausea or dizziness, and rapid blinking can trigger seizures in people with photosensitive epilepsy.
Is there anything content writers can or should be doing to test for accessibility? For example, are there any helpful tools or guidelines?
Our plugin, Equalize Digital Accessibility Checker, scans websites for common accessibility problems and puts reports on the post-edit screen.
It functions much like an SEO plugin does – alerting about problems or areas of improvement so content writers can improve accessibility as they write before hitting publish. We have a free version of the plugin that scans unlimited posts and pages, and the pro version provides full site reports.
Outside of WordPress, there are some free browser extensions that are really handy for testing and can be used by people with any technical ability. WAVE is a popular testing tool that will show accessibility problems on any web page. This is comprehensive, like Accessibility Checker, it’s just built in the browser rather than in WordPress.
HeadingsMap is a Chrome and Firefox extension I really like that shows heading structure and alerts if headings are used in the incorrect order.
How should web designers approach this topic with clients?
We start discussing accessibility early in conversations with clients before even writing a proposal. Over the past few years, we have found that bringing it up early has helped us to stand out.
During the sales process, my partner Chris will ask prospective clients questions about where they operate and their funding. “Do you have offices in California or New York? What about Ontario? Europe? Do you get federal grants or funding?”
Then he follows up their answers with an explanation that he wants to have a well-rounded idea of what accessibility and privacy laws might apply to them.
Many clients may have started to think about privacy laws, but accessibility will be new to them, and so that opens the door for them to have conversations about accessibility laws in various areas. They will frequently follow up in a later conversation and tell Chris they were impressed that he is so thorough because no one else they spoke with even mentioned accessibility.
In many ways, this is really about positioning. It’s a way to show that you’re an expert who stays abreast of changes in the industry and is going to be on top of things so the client doesn’t have to worry about it.
From the perspective of selling clients on the investment, outside of discussing accessibility laws or lawsuits, we talk a lot about considering accessibility in how we design and build as being a major part of the overall user experience. Improving search engine optimization, performance, and conversions once people are on the site. Accessibility is a marker of quality.
Accessible Content Is a Win for Everyone
The great thing about accessible web content is that it benefits everyone. And you don’t need to sacrifice quality. When users can read and understand your content, your chances for success improve.
Keeping this in mind during the content creation process is critical. All content should go through multiple revisions. Clarity and simplicity should be the ultimate goals.
Our thanks to Amber Hinds for sharing her insights! You can connect with her on Twitter and Equalize Digital’s website.
Top
Questions and Answers
- What are some key traits that make content accessible to all users?
- What are some common content accessibility mistakes that can be seen on websites?
- Using headings not marked up correctly
- Missing or incorrect alternative text on images
- Meaningless links like “click here”
- Content that should be in a bulleted list not formatted correctly
- Videos missing transcripts and accurate captions
- Are there any content types or formats that should be avoided for accessibility?
- How can content writers test for accessibility?
- How should web designers approach the topic of accessibility with clients?
The readability and structure of the content, clear and concise language, and meaningful link anchor text are key traits that make content accessible to all users.
PDFs, animated GIFs, or audio that auto-plays should be avoided as they can be challenging for screen reader users and may not be accessible.
Content writers can use tools like the Equalize Digital Accessibility Checker plugin or browser extensions like WAVE to test for accessibility issues on their content.
Web designers should start discussing accessibility early in conversations with clients, educating them on the importance of accessibility and how it can benefit their overall user experience and website performance.
