Advanced Tips For Improving Your Website’s Accessibility

Raise your hand if you've ever opened a website and had to squint. Sometimes, it's even worse - there are no typos, the font is fine and it should be easy to read, but the design of the page makes it atrociously difficult.

Because we care about solving this problem for you (and those who will visit your website too!), we have done extensive research into finding out how people like to read things online and how we can rearrange our words and lines of text in our articles so that everyone can enjoy reading them without squinting.

Pro Tip: Read the first part to learn the basics of UI design accessibility here.

Use of keyboard

Many people use their keyboards instead of a mouse when they browse the web. There are many reasons why someone would use keyboards instead of a mouse, perhaps they are using a screen-reader, or they have a motor impairment.

Keyboard trap is a common and harmful plugin for web accessibility. It happens when a user finds themselves unable to exit an element on the page that has been tabbed through because the page is not allowing them to use the "escape" key to leave the element.

Keyboard trap can happen in all sorts of places on a webpage, from modals to buttons or links. In general, it's important to avoid a keyboard trap, because it can be frustrating and difficult for users who are navigating your site without a mouse.

Design tips for keyboard use:

• All interactive elements must be focusable.
• Tab order should be logical and intuitive, from top to bottom, then left to right.
• Make sure there is a visible indication for the element that has focus and that the user knows where they are in the tab order.
• Allow users to skip navigation links and long lists of links by using skip navigation or anchor links.
• Do not rely on colour alone to convey importance or meaning.

Design tips for designing for screen readers:

• Use proper heading structure (H1 through H6) to communicate hierarchy and meaning.
• Do not use headings just to make the text bigger and bolder.
• Screen readers use headings as a way to navigate content, so make sure your headings accurately describe the content below it.

Layout

As a web designer, think about how screen readers work when designing your site. The layout of the design needs to be structured and logical so the screen reader can follow it.

For example, if there is an image on your site that is important to the content it should have an alternative text description so that people who can't see the image can still understand it.

Ways to make your site more compatible with screen readers:

• Use headers. They help break up large blocks of text into relevant pieces, making them easier to read. But headers also act as navigational tools for screen readers.
• Avoid using tables: Screen readers read tables from left to right and from top.
• Include navigation menus, links, and text sections in predictable locations and consistently identified.
• Make sure to have your form labels and instructions clearly associated with their controls.

Readability

Make sure you're using simple language.

Website content should be written in a clear, simple way so that people can easily access information and navigate the website. The writing and language used on a website should be easy to understand and accessible to as many people as possible to improve the user experience.

Tips to improve the readability of your content:

• Write in a way that uses short, specific sentences and avoids technical jargon or acronyms.
• Use words that are familiar to your audience and keep your writing clear and simple.
• Pay attention to the readability of your content by checking its readability score using tools like Readability Score.
• Make sure website navigation is clear and intuitive.

The content of your website should be organized logically, with a clear navigation system that helps people find what they need.

To make navigation easier for everyone, create a consistent navigation structure for all the pages on your site that is easy to understand and use.

Your site's navigation should be:

Concise

Limit the number of items in each drop-down menu or heading to what is essential. This makes it easier for people to understand the main areas of your site at a glance.

Consistent

Use the same headings, labels and terminology throughout your site so users know what to expect.

Logical

Arrange menus and links in an order that is easy to follow.

Final Word

In a perfect world, our sites would be completely accessible to everyone. However, the reality is that we don’t live in a perfect world. We don’t all have the same abilities, whether it’s because of technical issues, disabilities or cultural factors.

Though accessibility doesn’t fall under the category of design by itself, it is important to make your site as accessible as possible to maximize usability for a wider range of visitors.

Butter is here to help you with all your website design Hong Kong needs. If you need help in executing these web development suggestions for your website designs, get in touch with our experts to book a call!