Expedia Accessibility Guidelines (ExAG)

In order to make the use of color accessible for our color blind and low vision users it's important that the colors have high contrast with the colors around them. We also need to be careful with the way we are using color so that no information is lost in situations where color can't be perceived.

• 1.1 Use high color contrast for text
• 1.2 Use high color contrast for interactive elements
• 1.3 Use high color contrast for icons and diagrams
• 1.4 Designs must be meaningful without color

When we think about the controls on our /pages we need to make sure they make sense to users who rely on assistive technologies for their output. Users who use a screen reader, zoom, or other tool should understand what all controls are and what will happen when they use them.

• 2.1 Button and link labels are meaningful and concise
• 2.2 Screen reader users are aware of visual states
• 2.3 Controls read the proper role
• 2.4 Users are aware of links that open in a new window
• 2.5 Content that appears on hover or focus is accessible

Because of various needs, our users may rely on a tool other than a mouse. We want our /pages and components to be as functional for these users as they are for mouse users. A general rule of thumb is that if a component is accessible with the keyboard, it will also be accessible with similar tools.

• 3.1 Keyboard focus must have a clear visual highlight for all actionable items
• 3.2 All functionality must be accessible to keyboard users without traps
• 3.3 Keyboard focus moves logically
• 3.4 Every page has a skip navigation link
• 3.5 Focusing on an element does not cause a change of context
• 3.6 All functionality should be possible with a single pointer without a gesture

Forms can be very time consuming and confusing for many of our users. In order to assist these users it's important that we make our forms as clear as we can. This includes giving instructions that are easy for all of our users to discover.

• 4.1 Provide labels for every form element
• 4.2 Any instructions or placeholder text is accessible
• 4.3 Provide legends for all fieldsets
• 4.4 Prevent errors and assist recovery from errors
• 4.5 Provide autocomplete attribute whenever possible
• 4.6 All form inputs read their value

While images and icons greatly increase the usability of our /pages, they are not accessible to all users by default. We need to think about what we are trying to tell the user with our images and make sure all users can benefit from this. We also need to be careful with any other information that we are providing using visual characteristics as not all users will be able to understand it.

• 5.1 Provide descriptive alt text for all meaningful images
• 5.2 Decorative images should be hidden from screen readers
• 5.3 If text is placed over an image, ensure the text has high color contrast (See 1.1)
• 5.4 Images of text should be avoided
• 5.5 Information and instructions do not rely on visual characteristics

When we design a page and it's content we need to remember that not everyone will be using the same tools. If done correctly the structure of the content will be maintained no matter how our users interact with our /pages. Whether it be with a screen reader, with zoom, or with any other tool.

• 6.1 Text must resize to 200% without overlap or cropping
• 6.2 All text and essential formatting should be read by a screen reader
• 6.3 Provide meaningful page titles
• 6.4 Each section should have a heading
• 6.5 Heading levels should be properly nested
• 6.6 Mark up data tables correctly
• 6.7 Mark up lists correctly
• 6.8 iFrames are accessible
• 6.9 Landmarks are used correctly

When /pages are designed, the content is meant to be discovered in a specific order. This order should be maintained no matter what tool(s) our users are using. In order to do that we need to make sure that without stylesheets all of the content still falls in a logical order.

• 7.1 Screen reader reading order is logical
• Keyboard focus moves logically (See 3.3)
• 7.2 Focus is sent with jump links
• 7.3 Modal focus order is logical

Changes that occur dynamically while on a page can be disorienting for all users but even more so for users such as screen reader users or users with cognitive disabilities. To lessen these effects we should make these changes as obvious as possible for all users.

• 8.1 Screen reader users must be informed of any dynamic changes
• 8.2 Time limits can be adjusted
• 8.3 Screen reader users must be warned if focus or context changes on user input

In order to better assist our users with disabilities, it's important that we keep our /pages and paths as consistent as possible. Consistency helps our return users know what to expect so that they can more quickly navigate the components and /pages. It also keeps users from having to relearn the interface on every page.

• 9.1 Consistent UI components should be used
• 9.2 Links in the header remain in the same relative order
• 9.3 Labeling should be consistent
• 9.4 Visually hidden text is not overly verbose
• 9.5 Heading structure should be consistent

Motion can both make it difficult for users to read content, as well as distract from other content on the same page. Motion, auto-updating, and flashing should be avoided when possible.

• 10.1 Provide a means for the user to switch off motion, auto moving, or blinking content
• 10.2 Avoid flickering and flashing content

Media generally relies on specific senses, whether it be sight or hearing. All of the content needs to be provided in ways that users who do not have these senses can still understand.

• 11.1 All audio, including within a video, has captions
• 11.2 All videos have audio descriptions
• 11.3 Audio can be paused

There are many different assistive technologies out there that our users may be using and we can't test with them all. The best thing that we can do to make sure our /pages will work with them all is to write clean code. We need to make sure that the way we are writing our HTML and CSS follows the code guidelines that these assistive technologies will also be following.

• 12.1 Every page has a lang attribute
• 12.2 All id attributes are unique
• 12.3 All ARIA roles and attributes are valid
• 12.4 Semantic mark-up is used (See 2.3)
• 12.5 All HTML is valid