How do you provide visual feedback and cues for keyboard and touch interactions?

1 Focus indicators

The focus indicator is an essential visual feedback feature which highlights the element with keyboard focus, such as a link, button, or form field. This helps users navigate web pages using Tab and Shift+Tab keys, and activate the focused element using Enter or Space keys. To provide an effective focus indicator, you should follow WCAG guidelines such as using the default browser focus indicator or enhancing it with CSS properties like outline, border, or box-shadow. Additionally, it is important to avoid hiding the focus indicator with display:none or visibility:hidden as this makes it invisible to all users. Moreover, color alone should not be used to indicate focus as this may not be noticeable for users with low vision or color blindness. Contrast, shape, or size should be used to create a distinct visual difference and it should be tested with different browsers, zoom levels, and color schemes to ensure its visibility and usability.

3 Progress indicators

Progress indicators provide users with visual cues to show the status of an ongoing process, such as loading, uploading, downloading, or submitting. To ensure informative and accessible progress indicators, WCAG guidelines should be followed. This includes using HTML <progress> element or the ARIA role="progressbar" attribute to mark up progress indicators semantically, and using CSS or JavaScript to update the progress value and display it visually. Additionally, color, shape, or animation can be used to indicate the progress direction and completion. Furthermore, text alternatives or labels should be provided for the progress indicators using the aria-label or aria-labelledby attributes, or the <label> element. Finally, the aria-busy attribute should be used to indicate when a region of the page is being updated by the progress indicator.

4 Error indicators

Error indicators are visual cues that indicate when something has gone wrong, such as a broken link, a missing image, a validation error, or a server error. These cues help users quickly identify and correct the problem, and prevent frustration and confusion. To ensure helpful and accessible error indicators, WCAG guidelines should be followed. This includes the use of HTML <img> elements with the alt attribute or the ARIA role="img" attribute to mark up error icons or images semantically. Additionally, CSS or JavaScript should be used to display error messages or instructions visually as text, icons, or images. Color, shape, or size should be used to create a distinct visual difference between the error and normal states of the element. Text alternatives or labels should also be provided for the error indicators using the aria-label or aria-labelledby attributes, or the <label> element. The aria-invalid attribute should be used to indicate when a form field has an error, and the aria-live attribute should be used to announce error messages or instructions to screen readers.