Accessibility Principles

Web accessibility standards

Web accessibility relies on several components that work together. Some of these include:

• Web content - refers to any part of a website, including text, images, forms, and multimedia, as well as any markup code, scripts, applications, and such.
• User agents - software that people use to access web content, including desktop graphical browsers, voice browsers, mobile phone browsers, multimedia players, plug-ins, and some assistive technologies.
• Authoring tools - software or services that people use to produce web content, including code editors, document conversion tools, content management systems, blogs, database scripts, and other tools.

Perceivable information and user interface

Text alternatives for non-text content

Text alternatives are equivalents for non-text content. Examples include:

• Short equivalents for images, including icons, buttons, and graphics
• Description of data represented on charts, diagrams, and illustrations
• Brief descriptions of non-text content such as audio and video files
• Labels for form controls, input, and other user interface components

Text alternatives convey the purpose of an image or function to provide an equivalent user experience. For instance, an appropriate text alternative for a search button would be “search” rather than “magnifying lens”.

Text alternatives can be presented in a variety of ways. For instance, they can be read aloud for people who cannot see the screen and for people with reading difficulties, enlarged to custom text sizes, or displayed on braille devices. Text alternatives serve as labels for controls and functionality to aid keyboard navigation and navigation by voice recognition (speech input). They also act as labels to identify audio, video, and files in other formats, as well as applications that are embedded as part of a website.

Captions and other alternatives for multimedia

People who cannot hear audio or see video need alternatives. Examples include:

• Text transcripts and captions for audio content, such as recordings of a radio interview
• Audio descriptions, which are narrations to describe important visual details in a video
• Sign language interpretation of audio content, including relevant auditory experiences

Well-written text transcripts containing the correct sequence of any auditory or visual information provide a basic level of accessibility and facilitate the production of captions and audio descriptions.

Content can be presented in different ways

For users to be able to change the presentation of content, it is necessary that:

• Headings, lists, tables, input fields, and content structures are marked-up properly
• Sequences of information or instructions are independent of any presentation
• Browsers and assistive technologies provide settings to customize the presentation

Meeting this requirement allows content to be correctly read aloud, enlarged, or adapted to meet the needs and preferences of different people. For instance, it can be presented using custom color combinations, text size, or other styling to facilitate reading. This requirement also facilitates other forms of adaptation, including automatic generation of page outlines and summaries to help people get an overview and to focus on particular parts more easily.

Content is easier to see and hear

Distinguishable content is easier to see and hear. Such content includes:

• Color is not used as the only way of conveying information or identifying content
• Default foreground and background color combinations provide sufficient contrast
• When users resize text up to 400% or change text spacing, no information is lost
• Text reflows in small windows (“viewports”) and when users make the text larger
• Images of text are resizable, replaced with actual text, or avoided where possible
• Users can pause, stop, or adjust the volume of audio that is played on a website
• Background audio is low or can be turned off, to avoid interference or distraction

Meeting this requirement helps separate foreground from background, to make important information more distinguishable. This includes considerations for people who do not use assistive technologies and for people using assistive technologies who may observe interference from prominent audio or visual content in the background. For instance, many people with color blindness do not use any particular tools and rely on a proper design that provides sufficient color contrast between text and its surrounding background. For others, audio that is automatically played could interfere with text-to-speech or with assistive listening devices (ALDs).

Operable user interface and navigation

Functionality is available from a keyboard

Many people do not use the mouse and rely on the keyboard to interact with the Web. This requires keyboard access to all functionality, including form controls, input, and other user interface components.

Keyboard accessibility includes:

• All functionality that is available by mouse is also available by keyboard
• Keyboard focus does not get trapped in any part of the content
• Web browsers, authoring tools, and other tools provide keyboard support

Meeting this requirement helps keyboard users, including people using alternative keyboards such as keyboards with ergonomic layouts, on-screen keyboards, or switch devices. It also helps people using voice recognition (speech input) to operate websites and to dictate text through the keyboard interface.

Users have enough time to read and use the content

Some people need more time than others to read and use the content. For instance, some people require more time to type text, understand instructions, operate controls, or to otherwise complete tasks on a website.

Examples of providing enough time include providing mechanisms to:

• Stop, extend, or adjust time limits, except where necessary
• Pause, stop, or hide moving, blinking, or scrolling content
• Postpone or suppress interruptions, except where necessary
• Re-authenticate when a session expires without losing data

Content does not cause seizures and physical reactions

Content that flashes at certain rates or patterns can cause photosensitive reactions, including seizures. Flashing content is ideally avoided entirely or only used in a way that does not cause known risks. Also animations and moving content can cause discomfort and physical reactions.

Examples of avoiding causing seizures and physical reactions:

• Do not include content that flashes at particular rates and patterns
• Warn users before flashing content is presented, and provide alternatives
• Provide mechanisms to switch off animations, unless they are essential

Users can easily navigate, find content, and determine where they are

Well organized content helps users to orient themselves and to navigate effectively. Such content includes:

• Pages have clear titles and are organized using descriptive section headings
• There is more than one way to find relevant pages within a set of web pages
• Users are informed about their current location within a set of related pages
• There are ways to bypass blocks of content that are repeated on multiple pages
• The keyboard focus is visible, and the focus order follows a meaningful sequence
• The purpose of a link is evident, ideally even when the link is viewed on its own

Meeting this requirement helps people to navigate through web pages in different ways, depending on their particular needs and preferences. For instance, while some people rely on hierarchical navigation structures such as menu bars to find specific web pages, others rely on search functions on websites instead. Some people may be seeing the content while others may be hearing it or seeing and hearing it at the same time. Some people may be using the content with only a mouse or a keyboard, while others may be using both.

Users can use different input modalities beyond keyboard

Input modalities beyond keyboard, such as touch activation, voice recognition (speech input), and gestures make content easier to use for many people. Yet not everyone can use each of these input modalities, and to the same degree. Particular design considerations maximize the benefit of these input modalities. This includes:

• Gestures that require dexterity or fine movement have alternatives that do not require high dexterity
• Components are designed to avoid accidental activation, for example by providing undo functionality
• Labels presented to users match corresponding object names in the code, to support activation by voice
• Functionality that is activated by movement can also be activated through user interface components
• Buttons, links, and other active components are large enough to make them easier to activate by touch

Meeting this requirement makes the content easier to use for many people with a wide range of abilities using a wide range of devices. This includes content used on mobile phones, tablet computers, and self-service terminals such as ticketing machines.