UI + UX + Design

Focus states help all users track where they are within the content. Sighted keyboard and switch device users track progress as they navigate focusable elements, similar to using a remote control with a TV interface.

In some cases, the visual design of the page may mean it is difficult or potentially confusing to display a separate, visible, and programmatically associated label. Examples include form controls inside data tables (whereby non-associated table headers represent visible labels) and search fields...

To prevent the user from missing required fields in the first place, apply the aria-required attribute to required field(s), and set this attribute to true. Move focus to the affected field, or the first affected field if more than one error has been made, immediately after the user activates the...

Consistency is important for all users to navigate confidently, whatever the device or product. It helps content and interactions quickly become familiar and recognisably BBC. Consistent labelling particularly helps screen reader users who do not have visual reinforcement to aid understanding.

Colours can be difficult to distinguish in bright sunlight and cannot be perceived by users who are colour blind, or vision impaired. Screen readers do not detect colour and some users will change colour settings for device or platforms.

No. 4 of the top 10 UX design heuristics is to stick to UI conventions and follow existing standards, so that users know what to expect and how to operate the interface.

The BBC Accessibility Team supports those who make digital products for the BBC. This website provides resources and documents to help the development of rich accessible products and services.

Jakob Nielsen's 10 general principles for interaction design. They are called "heuristics" because they are broad rules of thumb and not specific usability guidelines.

Identify any font with our font finder tool. Upload an image, and we’ll search our collection of over 133,000 fonts for the best match.

A user must still be able to complete the core purpose of a page or screen, whether reading or taking action, when background colours, images, layout or features are missing. For example, read a news article, play a radio station or navigate elsewhere.

When developing custom components that may have custom gestures, make sure that gestures are clearly indicated, either by way of a hint (through the accessibilityHint property) or, preferably, through the accessibilityLabel property to ensure that all VoiceOver users (even those who have hints...

Use the contentDescription attribute to distinguish between links or buttons a page that have the same visible text. For example, if a page contains two “Edit” buttons, one for editing an email address and one for editing a telephone number, take the following approach to providing a unique label...

Good colour contrast is also essential when using colour as a differentiator, for example, when colour is used to indicate the presence of a link or a selected tab with text. The colour difference between the link text and non-link text must have sufficient contrast.

Standards ensure a consistent
vocabulary, but don't limit designers'
freedom (and responsibility) in deeper design issues.
Also: Guidelines for writing design standards.

This document is for people who make web content (web pages) and web applications. It gives advice on how to make content usable for people with cognitive and learning disabilities. This includes, but is not limited to: cognitive disabilities, learning disabilities (LD), neurodiversity, intellectual disabilities, and specific learning disabilities.