• Created by Unknown User (katrien.vangucht@imec.be), last modified on Apr 03, 2018

The application should be usable with a variety of devices. Next to pointing devices (Mouse, trackpad, finger on a touch screen) it should also be useable with a keyboard, a switch, a screenreader or speech recognition. 

Make sure the whole application is operable with the keyboard.

Use the TAB-key (for navigation) to reach all interactive elements of the page (links, form fields, buttons.

  • Use  ENTER to activate a link or a button. Use the spacebar to check a radio button or checkbox. Used the arrow keys to navigate through the options of a combo box.
  • The focus outline must be visible when tabbing: it can be the default browser outline (dotted line or blue border) or another style, as long as the user can see on which link the focus lands after each tab.
  • The TAB-order should be logical. It should follow the visual order of the page: start at the top and generally go from left to right. Don’t use positive TABindex attributes. Focus management: When you have modal windows/ screen overlays, it is important that the focus of the application goes immediately to this part of the screen.

The natural language of the page (French, Dutch, English, etc.) needs to be specified in the code. This makes it possible for assistive technology like screen-readers or voice recognition to function properly. In that case, your application can be used with screen readers and/or other assistive technologies.

In order to be usable with a wide range of assistive Technologies, it is important that the content is structured well and that the structure is not only visual but also available to assistive technology.

When building the application, use the appropriate elements to make sure that software also understands the nature of the content.

  • Headings: If something is a heading, don’t just use a bigger text, but use the appropriate heading element (h1 to h6 in HTML). This allows assistive technology to build a table of content and makes it possible to navigate straight to the next heading.
  • Lists: Use the proper code to build lists and not only visual cues (like ‘-‘).
  • Tables: when tabular data needs to be presented, use the proper elements (heading cell, data cell, caption,…) to build the table. Avoid complex tables.

The order of the content in the code should correspond to the logical reading order.

  • No labels