Operation
The operability of a website is important for good interaction.
Many visitors use a mouse and a keyboard to navigate the web. Unfortunately, this is not suitable for everyone. Make sure that the functionality of the content does not rely only on a mouse or a keyboard.
-
All functions on a website must be accessible and usable with only the keyboard. Some visitors cannot use a mouse, for example due to a visual or motor impairment. If all functionality can be operated with the keyboard, then it also works with a large number of assistive technologies. Therefore, make sure that components such as links, buttons, navigation, input fields, check boxes, radio buttons, list boxes, and all other interactive features can receive keyboard focus and be used.
Standard HTML elements for links, buttons and form elements on the website are easily accessible with the keyboard.
The default keyboard navigation is as follows:
- The TAB navigates the keyboard focus forward.
- The SHIFT + TAB navigates keyboard focus backwards.
- Use the arrow keys to navigate in grouped menus or radio buttons.
Visitors using the keyboard use the TAB key to navigate through a website. The TAB key moves the keyboard focus to the next focusable item.
-
If visitors can navigate to an item on the page with their keyboard, but cannot navigate away from it, it is called a keyboard trap. To get out of a keyboard trap, it is often needed to use the mouse (or other pointing device) or to completely reload the page. This is not an option for visitors who cannot use the mouse. A keyboard trap can be caused by plugins.
Make sure it is possible to use the keyboard to navigate all around the page.
-
Some websites allow visitors to use keyboard shortcuts. Keyboard shortcuts make it easier for visitors to perform functions or navigate to a page. This works well for many visitors who use the keyboard but may conflict with some assistive technologies. This can cause shortcuts to be activated unintentionally. This applies, for example, to visitors who use speech recognition software.
Therefore, make sure that single-character keyboard shortcuts can be customized, disabled, or enabled only when the item has keyboard focus.
-
Some functionality on a website can only be performed with a complex gesture. For example, gestures that require the visitor to use multiple fingers (multi-point gestures) or gestures that require the visitor to move a finger (or the pointer) in a particular path (path-based gestures). Visitors may sometimes, for various reasons, be unable to make difficult gestures with their fingers or with a pointer. For example, due to a motor disability.
Make sure that gesture-activated functionality can also be activated with a click, double-click, or click-and-hold of the mouse. This can be done by adding simplified controls.
-
Actions triggered by tilting or shaking a device are not easily accessible to some visitors. For example, visitors with a motor impairment can perform these actions unintentionally. There are also visitors who cannot operate it, or cannot operate it properly, because the device is attached to a wheelchair in a fixed position. Gestures to a camera that can interpret the movements also fall under motion activation.
For this reason, let the visitors disable the motion activation, or ensure that actions that can be activated with motion activation can also be activated with an alternative control.
Heb je nog vragen?
Wil je weten hoe jouw website ervoor staat met betrekking tot digitale toegankelijkheid? Of heb je vragen over onze dienstverlening?
Vergroot je bereik
Digitale toegankelijkheid vergroot de gebruiksvriendelijkheid, vindbaarheid en compatibiliteit.
Succescriteria
- Principle 2. Operable
- Guideline 2.1 Keyboard Accessible
- 2.1.1 Keyboard
- 2.1.2 No Keyboard Trap
- 2.1.4 Character Key Shortcuts
- Guideline 2.5 Input Modalities
- 2.5.1 Pointer Gestures
- 2.5.4 Motion Actuation
- Guideline 2.1 Keyboard Accessible
Theme
Design
The design of a webpage is essential for accessibility. A lot of information is conveyed with colour, shape and location, but not all visitors can properly perceive the design. So make sure there is enough contrast, but also that there are other ways available to convey the same information. By paying attention to these important points, you make sure that the design of your website is accessible as well.
Forms
Forms can be made accessible using a combination of technology, design and text. A form which is properly built in the code, can be operated with the keyboard. An accessible form provides the visitors with a suggestion on how to solve an input error. It also allows the visitors who use assistive technology to complete the form correctly. A form can consist of various form fields:
- input fields
- checkboxes
- comboboxes
- radiobuttons
- etc.
Images
The content of a website which does not consist of text, such as photos, icons and other images, can be made accessible by making them available as text as well. This is because text can be presented in various ways by assistive technologies. Reading software can convert a text to speech (auditory) and a braille display can translate it to braille (tactile). This way images are also accessible to visitors who cannot see the image. The content of a text alternative depends on the context of the image. The same image in a different situation can need a different text alternative.
Media
Media files make it possible for the information to be transferred quickly and easily. To make them accessible to everyone, it must be ensured that visitors can experience films and sound fragments with the senses available to them. Visitors who are deaf or hard of hearing cannot hear (clearly) what is being said in a sound fragment. Visitors who are blind or visually impaired cannot see what is shown in a video. Therefore, add an alternative way of communication, such as subtitles, a transcript or an audio description. The guidelines distinguish between different forms of audio and video:
- Sound fragments (sound without image)
- Moving pictures (picture without sound)
- Movies (image with sound)
Navigation
Navigation is an important part of a website. By making sure that all visitors can navigate a website properly, they are given access to all available information. A well built and consistent page structure and skip links help visitors to navigate the page without much effort.
Operation
The operability of a website is important for good interaction. Many visitors use a mouse and a keyboard to navigate the web. Unfortunately, this is not suitable for everyone. Make sure that the functionality of the content does not rely only on a mouse or a keyboard.
Text
Text is the most accessible form of digital information. Text can be presented in different ways by assistive technologies. For example, reading software can convert a text into speech (auditory) and a braille display can translate it into braille (tactile). A clear structure is important for the accessibility of a text. Elements such as headings, subheadings, and lists are used for structure. The structure also needs to be properly coded. In addition, the content must be understandable and presented to visitors in a logical order. All of this must be indicated correctly in the code.