The four personas web accessibility guide

A study from VIVE shows that the proportion of people between the age of 16-64 who claim to have some form of disability has increased from 17% in 2014 to 24% in 2021. It evidently underlines how important it is for website creators to consider how they can make their website more accessible and enhance the user experience for this audience. It’s a joint effort. And it’s needed now more than ever.

We've made a four personas guide to how you can improve the accessibility of your website.

Should you make the decision to invest time and resources in web accessibility? The short answer is: yes! Allocating resources into optimizing your site will demonstrate your willingness to help those who are digitally challenged. It’s a genuine brand morale booster that will increase the amount of satisfied users you have. It benefits your business in the long run.

This is what you set to gain if you invest in having an accessible website:

► Better rankings on search engines, thus increasing your traffic (Google punishes website with bad accessibility.

► Improve conversion rates, as more users can actually use your website

► Optimize overall performance of the site.

► Improve the overall user experience for all users, not just people with a disability

► Increase user satisfaction and create more loyal users

► Improve your overall business, brand and market share

► WCAG 2.1 guide is a good place to start

When you work with the content and maintenance of a website, there are several things to keep in mind if you want to maintain a high web accessibility score. As an editor you have a responsibility to write and update content in a way that prioritizes accessibility and enhances the experience across the site.

What you can do as an editor:

► Structure your page: organize content using semantic structure so assistive technologies, search engines, and website visitors understand the page hierarchy. Use only one H1 on each page and correct use of subheadings and paragraphs.

► Think readability: adapt language to your audience, be concise and short, use headings to split content, avoid reverse wording and check for spelling mistakes.

► Fill in texts, title tags, and heading tags

► Links: use descriptive link texts and make sure all links work. Explore great link examples (smashingmagazine.com)

► Images & Video: Provide captioning and audio descriptions for video and alternative (alt) text on images to accurately reflect the purpose of the image. Never insert text into images as it can’t be read by the computer

► Check your sitemap and make sure it is constantly updated, in case you change the page structure or add new pages

► Write a web accessibility statement to let your users know that you're serious about web accessibility.

► Tools: SiteImprove Accessibility Checker (Chrome Plugin)

The ease of use is the foundation for creating accessible designs. A designer should strive to create inclusive websites that are easy to navigate and easy to understand for everyone.

Here is a selection of elements that you should be aware of and tools you can benefit from:

► Any content that is not text should have a text option

► Make sure you have a logical typography hierarchy

► Be mindful of the visual presentation of text: colors must not be the only indicator, and the contrast should accommodate color blindness and weaknesses. Font size and line length matters!

► Don’t convey content using only color

► Link text should be make sense on its own

► The user should be able to enlarge the design up to 200%

► A simple read-up source: 5 Visual Treatments that improve Accessibility

► Tools: Contrast checker, ChromeLens, ColorBlinding (Plugin for Chrome): Simulated color blindness extension

Web accessibility poses certain demands to your code. It not only enhances user experience but also helps search engine ranking. 

To develop an accessible website, you should meet the following demands:

► Pay attention to Semantic HTML: <div> does not tell the user anything about what kind of content it is

► Include keyboard navigation: the user should be able to navigate easily within the content by using the keyboard. Make sure there are no traps (your page becomes useless if a user can not close a pop-up using the ESC on the keyboard)!

► The purpose of each link should be able to be determined from the link text or link context

► Labels and instructions: it should be easy to understand how to correct errors

► Error Identification: it should be easy for the user to find their mistakes

► Allow the editor to fill in alt text, title tags, and heading tags

► Cmd F5 - Activate Screen Reader (Mac)

► Accessibility Developer Tools

If you’re interested in learning more about web accessibility in Denmark you can explore this website (digitaliseringsstyrelsen).

How can we help?

If you would like to learn more about web accessibility and how we can help you become WCAG-compliant don't hesitate to reach out.