The a11y Monthly: 5 easy things you can do now to improve accessibility

One of the concerns I often hear about accessibility is that it’s hard to implement and expensive. It’s true that retrofitting accessibility requirements on an existing website can be expensive. But that’s because it’s too late. Plan accessibility from the start and ensure that it’s embedded in the culture of your organization. This will make a big difference in the long-term. Here, I’ll try to list a few easy things developers and content producers can do to improve accessibility.

Training is the key. To improve your knowledge of a programming language, development technique, or publishing workflow, you need to study. Once you get the necessary skills, implementation becomes part of the process. With practice, it becomes routine and it doesn’t add much cost to your workload. The same goes for accessibility.

More advanced accessibility requirements will still have some cost. For example, for captioning video’s or live captioning you’ll need a specialized external service. If you want to implement advanced ARIA widgets you need a good knowledge of specific techniques. That doesn’t mean you shouldn’t start introducing some of the most basic accessibility features that are easy to put in place. Start today.

Not a developer? You can find a less technical post with accessibility tips in our Yoast SEO blog, if you’d prefer to read that!

Five easy things for developers

Color contrast

Plan a good color contrast ratio for any user interface component in your pages. You should do this even before starting any development when you’re still designing your website or application. Low vision users need a good luminance contrast between the background and text. The Web Content Accessibility Guidelines (WCAG) at level AA need a contrast ratio of at least 4.5:1.

There are some subtleties to consider, for example for “large-scale text” the contrast ratio can be 3:1. To keep it simple, all you need to do is pick your colors and check the contrast ratio using one of the several color contrast checkers freely available. If you do this while you’re designing your color palette, it will take a few minutes.

Focus style

Design a focus style as part of your design process. Lots of users need or prefer, to use their keyboard to navigate web content. Some assistive technologies work in a sort of keyboard emulation, that means they don’t use a pointing device such as a mouse. The first thing users need to navigate content and operate a web interface is to actually see where keyboard focus is.

Your best option is to don’t reset the browsers native focus style. In other words, don’t do outline: 0; in your stylesheet. Time required: 0! Or, if you don’t like the native focus style, you can reset it but then you must implement a custom one. Use a styled outline, or a box shadow, or anything that suits your taste. Ensure focus is always visible for any focused element.

Semantic HTML

When development starts, the first thing you need is a meaningful HTML structure. Make your markup shine and convey rich information to your users. Until machines can understand language as a human, we need HTML to help machines understand what we mean. All the high-level development and modern, object-oriented programming that we as developers do, is to communicate something to our users. HTML is the last layer of our communication, before it gets processed by machines and software and, through them, to users who use those machines.

There’s a lot of debate about what HTML semantics is and not everyone agrees on the same thing. To start, I’d recommend to keep it simple. Assistive technologies take advantage from a well-structured markup to provide additional information to users. It’s paramount to understand that poor HTML translates to poor communication.

For example, when there’s a list of things, use a list in your markup. Screen readers will announce the number of items in the list, so users understand how long the list is so they can decide to skip it or not. Once this becomes a routine in your development, how much time it will take to make your code output a list? Very likely, the same amount of time it took without a list.

One more example: don’t use links for user interface controls that “do something”, use buttons instead. Not only is this semantically more appropriate, it will also save you some development time. There are tons of possible examples, strive to use proper HTML elements. Your code will also be more maintainable, reducing costs in the long-term.

Use headings and landmarks

According to the WebAim Screen Reader User Survey #5 from January 2014, relying on headings is the predominant mechanism for finding page information. Screen readers provide users with shortcuts to “jump” through headings, allowing them to quickly navigate the page sections to get an idea of the page content. Make your code output a well-thought headings hierarchy. Headings should identify the main sections of your pages. Don’t skip heading levels, so use h1 first to give feedback about the main topic of the page, then h2, h3 etc.

Knowledge of and use of landmark regions has increased too. Implementing landmarks in a WordPress theme takes about 20 minutes (or less). Ensure all content resides in a landmark region and make sure that you don’t orphan content. Assistive technologies users will enjoy the ability to jump to the main content sections in your web pages.

Use meaningful alt-text for images

Always use an alt attribute for your images. The actual alt text can be omitted or have a meaningful value, depending on a case by case basis. But any image should always have an attribute, at least an empty one: alt=””. If you omit the alt attribute, assistive technologies will try to read out something from the image markup. It will fallback to the image file name, even for images that don’t convey relevant information. Avoid this at all costs: for screen reader users, hearing something like “d897aJkw3kUstf.jpg” wouldn’t help.

The World Wide Web Consortium published a useful alt Decision Tree that can help you making an informed decision. Simplifying a bit, the most frequent cases will likely be:

• Purely decorative images need an empty alt attribute
• Images that convey relevant information need a meaningful alt attribute value
• Linked images should describe the link purpose and destination, not the image content

Again, when this practice becomes part of your routine, the time and cost required for implementation are likely to be negligible. Don’t forget that the alt attribute is very important for SEO purposes too.

Five easy things for content producers

Some of the recommendations for developers apply to content producers too.

Pick an accessible theme

The first thing you can do to improve your content accessibility is picking a theme or template with a good accessibility level. Many modern content publishing platforms have a good built-in accessibility. But a theme with poor accessibility can ruin everything. WordPress has a vast, public, repository of available themes. All themes in the repository go through a review process for best development practices and optionally through an accessibility review process for the ones that want the “accessibility-ready” label. Pick one of them and you’re on the right track. Best of all, they’re free.

Use headings to organize your content

While authoring content, you need to take care of your headings. Ensure you have identified your content sections by headings. Don’t skip levels. Producing an accessible document may seem hard at first sight. Few people know that popular tools like Word have a built-in accessibility checker. This will actually inform on what the accessibility issues are and how to fix them.

Make your text easy to read

Reading from a screen can be hard. Accessibility is also about cognitive impairments. So your content should be simple understandable by everyone. Also, posts that are easy to read will result in more returning visitors and a higher conversion rate. You may need a few quick tips to write readable blog posts. Our Yoast SEO plugin has a built-in readability analysis tool to help you improve the readability of your posts.

Make your links descriptive

Assistive technologies allow users to “jump” through links in a page to explore content. They also offer tools to list all the links in a page in one go. The best service you can do to your users is to make your links meaningful even when they’re read out of context. Don’t, ever, use “click here” or similar link text. Use good common sense to make your links accessible. Google and your SEO will be happy too.

Always use meaningful alt-text for images

When authoring your content and inserting images, follow the best practices mentioned in the first part of this post. Remember to check the alt attribute value for any image in your content. Include the check for alt text in your publishing routine, it will take you a few seconds for each image.

Spread out accessibility culture

Whether you’re a web developer, a content producer, or something else entirely, you can help spread the word and accessibility culture. We need to increase awareness and debunk some myths among development staff and decision makers. Some of the initial steps for improved accessibility on your websites have a cost that’s very close to zero. Especially when you incorporate accessibility into your workflow from the beginning. You may also want to help people consider some of the additional benefits accessibility brings.

Want to help?

At Yoast, accessibility matters. We’re aware it’s a process based on continuous improvements, testing, iteration, and development. We’re always open to feedback and contributions. Please do not hesitate to let us hear your voice and please do report any issues or potential improvements you notice in our products.

Read more: Contributing to WordPress to spread accessiblity culture »