Search

Making it possible for people to access and operate a web interface or application using the keyboard benefits people who can’t use a mouse due to a visual impairment or mobility impairment.

Links ( elements) are focusable by default, so it should normally be possible to activate them using the keyboard. However, under certain circumstances, they are not focusable.

Sometimes, design requirements mean that you need to create a custom interactive element rather than using a native HTML element.

Your element will not be accessible by keyboard unless it is included in focus order and it can be activated using keys.

If keyboard shortcuts are implemented using only a letter (including upper- and lower-case letters), punctuation, number, or symbol characters, provide a way to turn off or remap character key shortcuts.

Modal dialogs can enhance usability by focusing attention on a specific message that requires a user action to continue.

An accessible modal dialog is one where keyboard focus is managed properly, and the correct information is exposed to screen readers.

To check the accessibility of your content, it's important to use both automated tools and non-technical tests. To manually test your site, review the content, test with a keyboard, and use a screen reader to make sure your website is accessible to all...

When positioning elements using CSS, it's possible to place them in a position that does not reflect their location in the source order. This can have unexpected side effects for keyboard-navigation users.

Media player accessibility is essential for video content. Evaluate the accessibility and cross-device compatibility of the media player that comes with your video-distribution platform.

Interactive elements should, under most circumstances, be focusable in the order that they appear in the source code. This helps people who are using the keyboard or alternative input devices to follow focus in a logical order.

If an active element is intended to be unavailable in a particular state and it’s hidden from view, it should not be able to receive focus.

Expandables (sometimes called “collapsible” or “disclosure widgets”) are simple interface patterns that allow you to expand and collapse content.

Images can improve usability by making orientation and interaction elements easy to recognize and use.