Accessibility for websites and apps (part 2): practical tips to get started

In part 1 of this article, we have explained what ‘accessibility for the web’ means and why it is important. In part 2, we list five hands-on tips to get started to make your own web content more accessible. Ready? Here we go!

Provide sufficient contrast between elements

In the design phase, your process of delivering accessible products already starts. When text and background have poor contrast, people with low vision will have trouble digesting your content. The same applies to icons and other elements such as call-to-actions or interactive elements where highlights are used based on interaction.

If you need help with discovering sufficient contrast between your text and background, check out plugins such Stark, Able or Color contrast for Figma or Sketch.

These tools will provide great help in designing sufficient contrast between elements in a very designer-friendly way. WebAIM also has a live contrast checker tool, in which you can check the contrast of text and background without any design software. 

Use Headings Correctly

Screen readers can navigate through the page using a ‘heading structure’. What does that mean? SImple, you just have to use the (<h1>, <h2>) tags correctly when uploading your copy. When you do, readers will be able to go through your content easily. When creating content for your website, make sure to stick to the correct order of headings to avoid confusing screen readers. Avoid selecting a heading just because it looks visually appealing and breaks the structure of your content piece. What you can do instead, is create a new text style in the stylesheet. 

For the best use of headings, make sure you

• use the <h1> tag for the primary title only. Avoid using the <h1> tag for anything apart from the content title or the title of individual pages. 
• stick to the correct headings order. Do not skip from the <h1> tag to the <h3> or <h4> tag. The next should be the <h2> tag. If the styling doesn’t feel right, go change your stylesheet instead of skipping to <h3> or <h4>.
• use headings to properly coordinate your content structure.

Ensure your users can navigate logically through the website with a keyboard (commands, shortcuts)

There are some users with mobility disabilities that have difficulty using a mouse or a trackpad. Having keyboard shortcuts can enable such users to access the entire website content by pressing ‘arrow’ or ‘tab’ keys on the keyboard.

Here are some other simple tips on keyboard accessibility:

• Long pages should be broken down with anchor links (jump lists) allowing keyboard-only users to  navigate through the important aspects of the page without having to scroll through the entire thing.
• Form elements should be logically structured, but we’ll dive into this later.
• Pages with multiple levels, local menus, and sub-items should be properly configured so that all these sub-menus can be accessed with a keyboard. 
• Use tables only for tabular data and nothing else.

For visualizing data, tables come in handy. They make it simple for all users to scan through a set of data easily. Try to avoid using tables apart from tabular data like layouts, lists, as this can be confusing for users with assistive devices. 

Design your forms & elements for web accessibility

When designing your website for accessibility, it is important to pay attention to detail. Especially  minor details like giving unique and descriptive names to your links, fully writing out acronyms and avoiding overly decorative typeface and icons. Also, use relative length units where you can, as content will be able to scale more easily when needed. 

You must label form fields appropriately, as screen readers do not have the same visual cues available as the sighted user, making it difficult to tell which type of content should be entered next in a form field. Each field should be named properly and should be well-positioned to make it easy for screen readers to decipher what to input in each field. For example, if the field is for a person’s name, it should either have distinct fields tagged as “First Name” and “Last Name” or have a field labeled as “Full Name”. 

A user should be able to fill out all the form fields before getting to the submit button, or they may not be aware that additional fields exist. So you have to make sure that the form order, in the code, follows the visual order. You can easily test this yourself by filling out forms with only your keyboard and using the ‘tab’ key to navigate through the elements. 

Avoid automated media and navigation

Media files playing automatically has been an issue for users for years. Music or video playing automatically as the page loads is annoying for all users, but especially for screen reader users. Why? Because when the music plays, it is hard for them to understand the computer voice reading the screen out loud to them. That’s why you should avoid elements that start without prompting users first. You should also try to avoid elements like carousels and sliders, as the viewer may need more time to absorb information before all content is digested. 

That’s it! Hopefully this practical advice can get you well on your way to putting more accessible products & services out there. If you need any additional advice, feel free to reach out to our usability and accessibility experts. We’re more than happy to help!