Custom widgets and controls ✎

The contrast of icons and graphical objects is just as important as that of text. Use sufficient contrast for all elements on the screen, with a minimum contrast ratio of 3:1.

All operations must use simple gestures that need only a single touch. If the site or application does use multi-touch gestures, be sure to also provide simple interfaces. 

People with disabilities rely on interface controls that are used programmatically. These controls have a visual label, as well as a programmatic label, known as its Accessible Name.

Ensure that functions that are triggered by moving a device or by gesturing towards the device can also be operated by more conventional user interface components.

Placement of controls affects their ease of use.

Autocomplete widgets can be helpful for accessibility because they can make it easier to enter text by providing suggestions based on the characters initially typed.

A clear indication that specific form fields are required can save users time and avoid potential errors relating to missing data when a form is submitted.

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.

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

Whether you provide controls using standard HTML elements or create custom controls, ensure that controls are given appropriate names.