User Experience at IU

Accessibility is everyone’s job. It isn’t just something developers add in at the end. Content, visual and interaction design, and other aspects of user experience can affect a product’s accessibility. In fact, decisions made during the design process directly affect over 80% of the Web Content Accessibility Guidelines (WCAG) 2.1 success criteria.

Let’s look at a few questions designers, information architects, and others should consider during the design phase of a project. In the first part of this three-part series, we’ll look at some basics: structure and labeling.

Structure

Clear and concise headings, menus, and even layout are essentials in design, and they are critical for accessibility. In general, structure acts as a guide: It helps people navigate and understand your website or application.

Consistent navigation

Is the navigation consistent across pages? And is anything that appears in more than one place identified consistently? This helps people learn how your website or application works.

• Do use the same label and style each time the same item appears.
• Don’t change the location or order of navigation items.

Hierarchical headings

What will the heading structure be? Headings are critically important because they form an outline. Assistive technology users refer to this outline to get an overview of the page.

• Do use a hierarchical heading structure, starting with a level 1 heading.
• Do give distinct content areas descriptive headings.
• Don’t skip heading levels.

Content order

What content will appear first in your page and in your code? Your designs, and the final product, are often two-dimensional, but the code to implement them is not. Screen readers read the content in the order it is presented in the code. This is also the same order in which someone using a keyboard will reach the interactive elements like buttons and links.

• Do consider the order in which content will appear on both large and small screens.

Repetitive content

Is there content, such as navigation, repeated across multiple pages? People who use a keyboard move through interactive items like buttons and links in sequential order. “Skip links” provides a way to, for example, skip past the navigation to the main content. At minimum, “Skip to content” is needed. Many content management systems will supply this, and perhaps “Skip to navigation.”

• Do consider adding links to skip past areas like embedded social media widgets.
• Don’t overdo skip links. Including too many skip links just adds more keystrokes.

Responsive design

Have you considered how the website or application will look on different screen sizes? A responsive design also resizes more elegantly for people who use screen magnification.

• Do design for different screen sizes.

Labels

Labels identify and describe a component’s purpose. They help people understand what actions they can take, and they’re announced by assistive technology. A lot of things need labels, and someone has to come up with them.

Interactive elements

Do all links, buttons, and form fields (text fields, radio buttons, checkboxes, etc.) have unique, descriptive labels? If someone can click on it, it needs a name that can be shared by assistive technology.

• Do provide labels for all buttons, links, form fields and groups of form fields, and all interactive items.
• Do use unique and descriptive labels.
• Do match or start the label text with the visible text.
• Don’t use the same label on different items on the same page.

Icons

Are there any icons used without text? These need labels that can be announced by assistive technology. If you would add a tooltip to identify the icon, that information is not available to someone using a keyboard and might need to be included as a visible label.

• Do label every icon without text that is interactive. Examples include arrow buttons, plus and minus buttons, and edit pencil buttons.
• Do consider adding visible text, especially if you would include a tooltip to identify the icon’s meaning in your design. For example, a star icon can mean several things: favorite, rate, or even bookmark.
• Don’t label icons used with text, like a checkmark next to the text “Success!”

Landmarks

Screen readers can navigate by regions of a page called landmarks. What are the major landmarks of your design? For simple pages (in sites or applications), the landmarks are often a banner (the header), a single navigation area, main content, and content info (the footer). You may also have complementary landmarks, which are related to the main content. The most common situation where you will need to consider landmarks is if there are multiple navigation areas. Each navigation area will need a name.

• Do name navigation areas (for example, main, section, utility, or actions) to distinguish each navigation section for assistive technology users.
• Do name complementary landmarks.

Titles

Does each page within the website or application have a unique title? The title should inform people of where they are, with the most specific information first. The title is the first piece of information announced by a screen reader when navigating to a new page.

• Do give each page a unique title.
• Do format the title with the most specific information first. An example format is page title - section name - site name.

Conclusion

Both structure and labels play significant roles in a site or app’s accessibility—and they help all users navigate and learn about a product more efficiently. In part two, we’ll look at more visual components: images and color.