High-level UX and accessibility tips and considerations for building or maintaining a website.

User experience, user-friendly, accessibility are all buzz words we commonly hear about with anything digital these days. But what do UX and accessibility really mean when it comes to your website? What do you consider a typical user? Is your website inclusive and accommodating to everyone? We’ll walk you through some tips and important things to consider — whether you are updating content, refreshing your old website, or building a brand new one. Giving your users an equally enjoyable experience.

Accessibility Tips & Considerations

Accessibility guidelines and checklists can be overwhelming, but there are some simple considerations to review when being inclusive to your users.

Typography & Contrast

Font legibility can easily be improved by picking fonts that are clean, not too lightweight, and have good colour contrast. Keeping your content visually easy to read. It is important to understand the language and reading level of your user and in turn content on your site. Depending on your target audience, the general rule of thumb is to keep content to a grade 6 reading level. Use direct, clear messaging with ‘everyday’ language where possible. This will ensure that you are accommodating users of all reading levels or if English is not the user's first language.

Colour is one thing that is often overlooked when it comes to accessibility. Often companies will already have existing brand colours that don't adhere to accessibility. Something to keep in mind is that not everyone sees colour in the same way — from poorly calibrated screens to mild or full-colour blindness that affects many people. With this in mind, use colours that have high contrast values keeping your content more accessible. We often end up expanding brand colours to add higher contrast options or tweaking original colours for websites. Another consideration would be using the colour for non-important elements. Such as accents, colours, icons, etc.

There are many tools out there to check contrast, one we like to use in our design phase is Webaim.org. This tool, and many others like it, can check two colour values to give a ratio with a pass or fail on text or User Interface components such as buttons. A simple example of this would be a yellow button (example #FFCC00) on a white background with a white label. Yellow is a very low contrasting colour on white and does not pass the contrast test. Meaning it is not accessible at even the bare minimum ratio. A solution to fix this would be to make the label on the button black. This passes, but would only make the label accessible, which is acceptable. The best option is to have the label black and have the button on a black or dark high contrast colour to make the full button experience accessible.

Text links & labels

Links and labels throughout your website have one job to do — direct users.

This may be to internal pages or external websites. What you need to ask yourself is, are they descriptive? Are they clear and intuitive? This is where accessibility meets UX best practices. This does not mean a full sentence, just simple and descriptive. For example simple ‘Read more’ vs. descriptive ‘Read more about accessibility’.

This also applies to navigation or menu links. Being clear and direct is not only an accessibility consideration but also helps better direct your users.

UX Tips & Considerations

What is the goal of your website? To gain subscribers? Build awareness? Book reservations? Sell products? Who are your users? These are key things to keep in mind when building out the content and the structure of your website.

Hierarchy & Structure

Two high-level considerations are hierarchy and page structure. First, let’s talk about navigation hierarchy and order. Consider not what is important to you, but what is important to your users. Generally in North America, the population reads left to right. When ordering your navigation this is something you want to consider. This does not mean that the last item is least important, In fact, the first and last title within the navigation should be the most relevant with the least important items in the middle. As a restaurant ‘Our Menu’ should be first. Or a retail store ‘Sale’ would be before an ‘About Us’.

Another tip is to avoid hidden pages, especially if they have important information on them. An example of a hidden page would be an internal page only accessible from another internal page. This can make for a frustrating experience for the user and can make it more difficult to find the information they are seeking. The key to a successful navigation is to focus on your user’s needs and not your own.

Lastly, let’s talk about page structure. From the homepage to contact us, you want your pages to be laid out in a way that directs users to the information on your site. More important information towards the top of the page, and less important towards the bottom. Don’t bury or jam together content. This is where white space becomes important, jamming more things in the top of the page does not mean it will be more important, think of whitespace as taking a breath in-between thoughts. Today, users expect to scroll on websites. You want to consider structuring your content as steps or like a story. Having content easy to find is the goal you want to achieve.

In Conclusion

There is so much more that can be said about both accessibility and user experience. But hopefully, this article has helped you understand how to be more inclusive and accessible to your users. Keep your user’s needs and goals into consideration. And, remember that not all users see and view your website the way you do. Helping you curate a website that has an enjoyable experience for your users.