Use more than one sense for instructions

Sensory characteristics is an important but ridiculous-sounding phrase in web accessibility. It’s actually far less complicated than it sounds. The sensory characteristics of your website are things like shape, sound, position and size.

You’ll often come across sensory characteristics in instructions to your users. Saying things like ‘Use the search bar on the right’ isn’t helpful to a user who doesn’t understand what right is. The main solution is to use more than one indicator for instructions.

What to do

Getting sensory characteristics right is mainly a case of using your common sense. There are no technical requirements, just good and sensible copy writing:

  • Use more than one sense for instructions.
  • Avoid instructions that rely on sound.

Tips

Creating accessible instructions is great for everyone. The clearer your instructions are, the more likely users will follow them – this is especially useful for things like buying instructions. Getting this guideline right might just make you more money or get you more users by reducing dropouts.

A good instruction will use several sensory characteristics. Consider the accessibility of these four examples:

  • ‘Use the search box’
  • ‘Use the search box on the right’
  • ‘Search by using the green rectangle box labelled ‘Search’ on the right’
  • ‘Search by using the rectangle box at the very top right of this page’

Web designers often have an aversion to adding words, feeling that it adds to confusion. In this case, the opposite can be true. Of course, ideally you want a website that feels instinctive with clear actions. When you need instructions, get them right.

It’s best to avoid sound on a website, other than in media. No one likes unexpected sounds. It’s always hard to tell what the sound means and what you did do make it happen. A prime example is if you use sounds to alert users to errors on a form. The user can’t tell exactly what made the error, they won’t even be sure the sound indicated an error. Your users with hearing impairments have no chance.

For forms, use a clear visual clue for errors and avoid sounds altogether.

By making sure you don’t rely only on colour in your instructions, you can work towards Guideline 1.4.1.

See also

Present your website content in a meaningful order

The meaning of content on your website relies on the order you present it. For example, in English we read from left to right and read a left-hand column before a right-hand column. Present the content on your website in an order that your users can understand.

Some of your users rely on assistive technology (like a screen reader) to interpret content. By sequencing content correctly, you can make sure that your users with disabilities can understand your website and improve your overall web accessibility.

What to do

Ensuring you present your content in a meaningful sequence is a wide-ranging part of web accessibility. It applies to all elements of all pages, so is as big or as small a task as your website.

Make sure you:

  • Present content in a meaningful order.
  • Separate navigation menus from content.

Always present your content so that it preserves your meaning. That way, it’s great for anyone reading it. The main things to look out for are:

  • Use paragraphs in order.
  • Use headings to show importance.
  • Choose whether a list needs numbering or not.
  • Use valid HTML and check it with the W3C’s markup validator.15

Tips

Invest in some assistive technology and use it to browse your website. NVDA is a free screen reader you can try to get started.

Turn off the site’s Cascading Style Sheet (CSS) and check that your web page displays in the correct order. You can use an extension like Pendule for Chrome to easily toggle CSS on and off.

Using headings to show importance isn’t always straightforward. Headings on a web page are a great way to break up content and show your users the relative importance of each section. Headings in HTML range from 1 (the most important) to 6 (the least important). It’s best to have just one Heading1 (H1) on a web page, to show the title of that page.

However, headings don’t need to descend from 1 to 6 each time you use one. As well as headings that share levels, you can skip levels altogether if that fits your content.

See also

Structure your website logically

All users benefit when your web page structure is logical. Many of us take things like headings, bullet points, bolding and italics for granted. For your users with disabilities, those elements can make the difference between understanding a website and leaving it. Many forms of assistive technology rely on correct formatting to work correctly, meaning a heading can go a long way for your users.

Because we use formatting elements so often, we can forget how to use them properly. Going back to basics is a great way to improve your content with relatively little effort.

What to do

Complying with the need for good web page structure and formatting is a wide-ranging target. Half-measures don’t work, so you can’t use subheadings properly and then throw random bullet points all over the place.

Amongst other things, you must:

  • Break up content with subheadings for new sections.
  • Mark those headings with HTML header tags.
  • Use the correct HTML for all structural elements.
  • Use valid HTML everywhere else.
  • Use clear labels on forms.

Tips

Ensuring that your web pages have an accessible structure is at once a simple and complex task. The level of difficulty depends on the complexity of your website; a page with several levels of headings will take more work than a single-topic blog post.

An efficient way to check your markup is to use a HTML validator. This will tell you if the web page structure has any HTML errors – these errors won’t always equate to accessibility flaws but the cleaner your code the better. Errors like improperly closed paragraph tags are easily remedied.

After using the validator, check pages manually for correctly nested headings and other more visible page elements. Manually check that any forms you use are labelled clearly too, simple things like required field asterisks that lack explanation can cause big problems.

See also