Accessibility Guidelines

If you have implemented keyboard shortcuts with only one letter, punctuation, number or symbol character. You should support at least one of the following:

• Shortcuts can be turned off
• You can remap the shortcut to other keys
• The shortcut is only active when the component has focus

The focus order used to navigate the page is in the right order to keep the right meaning and functionality.

If you can move focus to an element, you should also be able to remove focus by only using your keyboard. If you need another way than arrow keys, a tab key or another standard method, you should explain how to remove focus.

All functionality that works with a single click or tap needs to have at least 1 of the following:

• The down-event is not used to perform an action
• The action is performed on the up-event and there is a way to undo or cancel the action
• The up-event cancels or undos the action
• Performing the action on the down-event is essential

You can skip blocks of repetitive content that’s available on multiple pages.

All functionality can be used with a keyboard.

All functionality that uses multipoint or a path-based gesture can be done with a single pointer without a path base gesture.

Functionality that can be controlled with device or user motion can also be controlled by an interface element. The motion interaction can be turned off to avoid accidental usage.

You can pause, stop or hide information that is moving, blinking or scrolling that starts automatically, lasts longer than 5 seconds and is presented at the same time as other content.

You can stop, pause, hide or update the frequency of auto-updating information that starts automatically and is presented at the same time as other content.

Content can flash no more than 3x per second. Especially look out when using red colors, these can result in dangerous seizures.

All content that is not text, needs to have a text alternative that can provides the same information.

You can pause or stop audio that automatically starts playing for more than 3 seconds. Or there is a way to change the volume independently from the device volume.

All content that is not text, needs to have a text alternative that can provides the same information.

You can pause or stop audio that automatically starts playing for more than 3 seconds. Or there is a way to change the volume independently from the device volume.

All content that is not text, needs to have a text alternative that can provides the same information.

When something goes wrong, clearly explain the error to the user and explain how to fix it.

If you have a time limit for an action, you should support at least on of the following:

• You can turn the time limit before encountering it
• You can adjust the time limit before encountering it and you have at least 10x of the default time limit to do so
• You are warned before the time expires and you have at least 20 seconds to extend the limit with a simple action (example: “Press space bar”) and you can extend the limit at least 10x

You know where every link will navigate to thanks to the text of the link or the combination of a sentence and the link.

Every input element has a label or instruction for the request input.

All pages have titles that describe the purpose or content.

Information and structure should be the same when the styling changes, use the right programatic elements. A screen reader should still be able to determine what element is displayed without styling.

Content should be in the right reading order when styling changes.

If you have a multi-column layout, a screen reader should be able to read the content in the right order. When you scale elements, they should also be displayed in the right order to give the same context.

Color is not used as the only way to give information, indicate an action, show a response or differentiates visual elements.

Elements do not change when receiving input.

Don’t use shapes, color, size, orientation, position, visual location or sound to provide instructions for a user.

Your website or app does not have any major code errors like no uncompleted tags, html elements are correctly nested, no duplicate IDs, …

The default language of a page is determined in code.

All labels (text or images of text) on screens should match the accessibility label in code.

All interface elements have the correct role, name and accessibility labels. You should notify the user when the state, properties or values of interface elements change.

If you have implemented keyboard shortcuts with only one letter, punctuation, number or symbol character. You should support at least one of the following:

• Shortcuts can be turned off
• You can remap the shortcut to other keys
• The shortcut is only active when the component has focus

The focus order used to navigate the page is in the right order to keep the right meaning and functionality.

If you can move focus to an element, you should also be able to remove focus by only using your keyboard. If you need another way than arrow keys, a tab key or another standard method, you should explain how to remove focus.

All functionality that works with a single click or tap needs to have at least 1 of the following:

• The down-event is not used to perform an action
• The action is performed on the up-event and there is a way to undo or cancel the action
• The up-event cancels or undos the action
• Performing the action on the down-event is essential

You can skip blocks of repetitive content that’s available on multiple pages.

All functionality can be used with a keyboard.

All functionality that uses multipoint or a path-based gesture can be done with a single pointer without a path base gesture.

Functionality that can be controlled with device or user motion can also be controlled by an interface element. The motion interaction can be turned off to avoid accidental usage.

You can pause, stop or hide information that is moving, blinking or scrolling that starts automatically, lasts longer than 5 seconds and is presented at the same time as other content.

You can stop, pause, hide or update the frequency of auto-updating information that starts automatically and is presented at the same time as other content.

Content can flash no more than 3x per second. Especially look out when using red colors, these can result in dangerous seizures.

All content that is not text, needs to have a text alternative that can provides the same information.

You can pause or stop audio that automatically starts playing for more than 3 seconds. Or there is a way to change the volume independently from the device volume.

All content that is not text, needs to have a text alternative that can provides the same information.

You can pause or stop audio that automatically starts playing for more than 3 seconds. Or there is a way to change the volume independently from the device volume.

All content that is not text, needs to have a text alternative that can provides the same information.

When something goes wrong, clearly explain the error to the user and explain how to fix it.

If you have a time limit for an action, you should support at least on of the following:

• You can turn the time limit before encountering it
• You can adjust the time limit before encountering it and you have at least 10x of the default time limit to do so
• You are warned before the time expires and you have at least 20 seconds to extend the limit with a simple action (example: “Press space bar”) and you can extend the limit at least 10x

You know where every link will navigate to thanks to the text of the link or the combination of a sentence and the link.

Every input element has a label or instruction for the request input.

All pages have titles that describe the purpose or content.

Information and structure should be the same when the styling changes, use the right programatic elements. A screen reader should still be able to determine what element is displayed without styling.

Content should be in the right reading order when styling changes.

If you have a multi-column layout, a screen reader should be able to read the content in the right order. When you scale elements, they should also be displayed in the right order to give the same context.

Color is not used as the only way to give information, indicate an action, show a response or differentiates visual elements.

Elements do not change when receiving input.

Don’t use shapes, color, size, orientation, position, visual location or sound to provide instructions for a user.

Your website or app does not have any major code errors like no uncompleted tags, html elements are correctly nested, no duplicate IDs, …

The default language of a page is determined in code.

All labels (text or images of text) on screens should match the accessibility label in code.

All interface elements have the correct role, name and accessibility labels. You should notify the user when the state, properties or values of interface elements change.

You can use multiple input types at once (mouse, touch, keyboard, voice, assistive device, …).

Changes should only be performed after an interaction by the user.

All functionality can be used with a keyboard without exceptions.

You are able to disable animations that are triggered by an interaction, unless the animation is essential for the functionality or information.

Don’t let content flash or blink for more than 3x per second.

Sign language interpretation is available for all prerecorded audio in time-based media.

An alternative audio or video version is available where extended audio descriptions are provided. This will temporarily pause the audio (and video) to allow essential information to be delivered between pauses in dialog.

An alternative is available for all prerecorded time-based media. This is in text form and is different from captions or a transcript.

An alternative is available for live audio content that provides the same information.

Images of text are only used for decoration or when a style of the text is essential to deliver the information. Text as part of a logo are considered essential.

Audio content that is primarily speech, is not an audio captcha or music should have at least one of the following:

• Has no background audio
• Background audio can be turned off
• Background audio is at least 20 decibels lower than the spoken audio (exception: occasional sounds that last only 1-2 seconds)

You know where every link will navigate to thanks to the text of the link.

You can postpone or stop any interruptions, except for emergencies.

There is a way to view the definition of words or phrases that are used in an unusual way, this includes idioms or jargon.

There is a way to view the meaning of abbreviations.

Provide a way to learn the pronunciation of words where the meaning is unclear without the pronunciation.

You are warned about how long you have before your data will be lost if you don’t show any interaction.

You provide help to the user to get more context or information.

Timing is not essential to interact with the content except for audio or video content and real-time events.

All text should be written in way so that someone with 9 years of school can understand your content. Write in simple, clear and plain language.

If not you should provide a version of the content that is easier to understand or provide an alternative in the form of audio, illustrations or a short summary.

For all parts of your website or application that let the user submit data. At least one of the following is true:

• You can undo your submitting your action
• Data entered by the user is checked for input errors and can be corrected by the user
• A user can review, confirm and correct information before submitting

When your session expires, you can continue the activity without losing data after authenticating again.

Add a an identification in code for icons, components, links and regions of a page. This way users can replace icons with their own, add icons to navigation links or hide/highlight specific regions of a page.

All text or images of text need to have a contrast ratio of at least 7:1.

The target size of interface elements clicking or tapping is at least 44x44 pixels.

Section headers are used to organize content. This can be titles or other ways to add a heading.

Note: this is for pages like articles, written content or documents, not for interface components.

The following can be achieved for blocks of text:

• Foreground and background colors can be selected by the user
• Width is no more than 80 characters or glyphs
• Text is not justified (aligned both left and right)
• Line spacing is at least 150% within paragraphs, paragraph spacing is at least 150% larger than the line spacing.
• Text can be resized up to 200% without assistive technology without having to scroll horizontally

You always know where you are on a website or application.