Accessibility for

Design

Designers must understand and empathize with all kinds of people, including those with disabilities and the aging population.

This understanding can help you make a more personalized experience that makes everyone’s life easier.

Keyboard use

Some users rely on the keyboard and cannot use a mouse.

This means all UI elements need a way for users to access and interact with them using only the keyboard. Keyboard use should rely on common interaction patterns so the elements work in predictable ways – no hunting through help for the right keystroke.

For keyboard navigation, define the order of items logically by the user’s content path. In left-to-right reading languages, tabbing usually starts from top left and travels down to bottom right. Move focus into popups and overlays when they open; when dismissed, return focus to a logical place.

Take away tips

Accessing main content

Provide a way for users to easily skip top level navigation to access the main content.

Common interaction patterns

Standard HTML and operating system elements have the correct keyboard behaviors built-in, with no additional work.

Menus, modals, trees, and other patterns have expected keyboard behaviors. Avoid mixing interaction patterns within components. On the web, sometimes standard elements don’t fit the intended interaction. WAI-ARIA components that can help you design a desktop-like experience with predictable keyboard use.

Hover usage

Actions and information should not be hidden until hovered. Hover information has to be made visible using the keyboard or it will not be readable by the keyboard-only user and will not be accessible on mobile devices.

Ilustration of a hand using a keyboard in front of a computer Ilustration of a hand using a keyboard in front of a computer

Focus

When an action modifies the page, keyboard focus should move to a meaningful location.

Focus styles help users navigate and identify where they are. As a designer, you should never actively hide these styles. The Tab key is used to navigate to each interactive element on a page. A default visual focus indicator is provided by the web browser. The display is an outlined border around the focused element. When an element is in focus, it can be activated using the keyboard.

Take away tips

Focus styles

If you remove default focus styles, be sure to replace them with something that works better for users than what your browser provides.

Page actions

Define and show where focus moves to as a result of actions.

Create consistency

If you remove default focus styles, replace the native browser focus style for all elements with the custom style so focus indicators are consistent across browsers.

Color

Color should be of sufficient contrast, to meet accessibility standards.
  • Use combinations of shape, color and text to convey meaning, (not just one by itself) and be consistent in your application. Provide multiple indicators so that people who cannot easily distinguish colors can still understand and use your content.
  • Ensure there is enough contrast between text and its background color or image.
  • Let users customize the contrast between the background and text.
  • For autistic users, use colors like blue, teal, or purple to minimize eye strain.
Illustration of an eye dropper with the letter A Illustration of an eye dropper with the letter A

The contrast ratio between text and background should be at least 4.5 to 1.

Using large text, classified as 18 px bold or greater, will increase your color combinations because a more relaxed contrast ratio of 3:1 is acceptable for larger text styles Avoid using readable text over images.

Font sizes and weights vary across typefaces. WCAG guidance is written in pixels and is based on a 96 dpi display resolution. As you design for different displays, type scales, and size conversions, keep in mind that numbered sizes are not all reflective of the optical size of the type.

Check color contrast

Instructions

  • Check out your favorite sites or browse through your live product or Sketch files.
  • Download a color contrast analyzer from the Paciello Group

Take away tips

Install the Tota11y plugin to quickly see the color contrast values on your page.

An example chart of color contrast, half with black text on lighter backgrounds and half with white text on darker backgrounds An example chart of color contrast, half with black text on lighter backgrounds and half with white text on darker backgrounds

IBM Design Language grade system

Download the IBM Design colors to use our accessible grading system. As long as there is a difference of 50 in the background and foreground colors you choose, you will meet the WCAG 2.0 Level AA contrast ratio requirement. White = 0 and Black = 100 in the color system.

Structure

An organized design clearly distinguishes relationships between different elements.

Any structural elements must be communicated to assistive technology (for example, screen readers). It is important for designers to define semantic page structure so developers can translate it from design to code.

Start with the basics

Group and cluster elements with white space or background colors. Next, emphasize content with bold text. Be sure to include required fields and labels on forms. Then, provide a tables of information with column headings. Where appropriate, offer a meaningful sequential order of information, such as a step-by-step instruction.

Navigating information

When a product anticipates people’s needs and provides clear direction, it frees them up to focus on their own objectives.

Exploration

Design for direct manipulation. Tell a story. Consider the value of progressive disclosure.

Conversation

Layer information. Give rewards. Provide instruction at the right time and place.

Helpful wayfinding

  • Create consistent cues for orientation and navigation.
  • Present the same content type in the same way.
  • Differentiate different content types.
  • Give clear landmarks within the page.
  • Offer alternative ways to navigate.
Illustration of a crane

Clarity

Communicate clearly for better comprehension.

Make information digestible to benefit users with cognitive disabilities like autism, dyslexia, and attention deficit disorder.

Take away tips

Write plainly

Avoid figures of speech, jargon, and idioms to boost comprehension.

Be concise

Use short sentences and symbols, like bullets, to separate information.

Get specific

Use descriptive words for buttons instead of vague terminology, so the outcome is predictable.

Offer many formats

Use images with well-written alt text and diagrams to support copy. Alt text is a word or phrase inserted into an attribute in an HTML document to tell website viewers the nature or contents of an image.

Typography

Use clean, simple typography with good spacing. Apply comfortable kerning and leading to ensure text is easily read.

Illustration of a crane Illustration of a crane

Further considerations

Underline icon

Reduce underlines, italics, and capitals

These letterforms are more difficult to recognize and read.

Underline icon

Reduce the number of downloads

Publish information on the web page itself when possible.

Underline icon

Align text to the left

Make consistent layouts with linear paths for the eye to follow.

Underline icon

Choose words with detail

Write descriptive link text and headings.

Underline icon

Produce materials in multiple formats

Consider audio or video to help people remember information in multiple ways, but make sure closed captions are available.

Underline icon

Reduce complexity and clutter

Keep content short, direct, and simple.

Inclusive design is good business.

Everyone who designs and develops IBM solutions must bring accessibility into their understanding of the people they serve. Capture specific user needs, the tasks people want to accomplish, and their motivations and abilities.

Activities

Design activity 1

Enlarge your fonts

When you might use this

Ensure your pages are accessible and usable for low vision and visually impaired users. Many people need to enlarge web content in order to read it, and some may need to adjust other aspects of text display like the typeface or spacing between lines.

Instructions
  • Use your browser and resize the page to 200 percent. Click Zoom In (Ctrl ++) or Zoom Out (Ctrl +-) to increase or decrease the page size (on the View or Zoom menu depending on the browser; use Cmd + or Cmd - on Mac).
  • Look at the screen and make sure there is no loss of content or functionality.
  • Resize all elements back to 100 percent, including widgets. The shortcut is Ctrl + 0 (Cmd 0 on Mac).
Man looking at keyboard to enlarge

Take away tips

Explore different kinds of content: Ensure all text meets the Web Content Accessibility Guidelines 2.0 Level AA contrast.

Keep going: Continue using your computer zoomed in at 200% and see what difficulties arise in your day to day work.

Design activity 2

Tab through your interface

When you might use this

Complete this activity when you want to develop empathy for a keyboard-only user. Check exemplar websites, applications or your own creation to see if keyboard navigation is straightforward and intuitive.

Instructions
  • Using only your keyboard (tab/shift tab, arrow keys, enter and spacebar), navigate and interact with your favorite websites and applications.
  • Optionally, you can unplug your mouse or disable your Mac Track Pad System.
UI illustration representing tabbing UI illustration representing tabbing

Take away tips

Focus states: Is there a visible focus indicator (i.e., do you know where you are) at all times as you navigate each screen?

Interaction: Are you able to interact with every element that receives focus using the keyboard alone?

Hover usage: If any element provides functionality when you hover over it with your mouse—such as revealing a tooltip or a set of actions—can you display it using the keyboard alone?

Design activity 3

Browse the Web with a screen reader

When you might use this

Use this activity to ensure that your designs can be read comprehensibly by a screen reader.

Illustration of a screenreader software reading through the content on a screen Illustration of a screenreader software reading through the content on a screen
Instructions
  • If you don’t already have access to JAWS, there are a number of free/open source screen readers available for Windows users. One of the more popular ones is NonVisual Desktop Access, NVDA. Mac users, you have a built-in screen reader called VoiceOver on your systems.
  • Unplug your mouse (blind users do not use the mouse), launch your screen reader, and browse through some of your favorite websites using the keyboard alone (tab/shift tab, arrow keys, enter and spacebar). Better yet, turn off your screen and depend strictly on the information conveyed by the screen reader.

Everyone who designs and develops IBM solutions must bring accessibility into their understanding of the people who use their product. Capture specific user needs, the tasks people want to accomplish, and their motivations and abilities.

Back to top