• Skip to content
  • Skip to footer
A Bright Clear Web

A Bright Clear Web

A Bright Clear Web - Simple, effective, accessible websites

  • Home
  • About
  • Websites
  • Writing
  • Learn
  • Blog
  • Contact
You are here: Home / Accessibility / GAAD 2017: Translating good design into great accessibility

GAAD 2017: Translating good design into great accessibility

Posted: May 19, 2017 by Claire Brotherton
Leave a Comment

10up's accessible modal window

GAAD 2017 – what is it?

Accessibility symbolsYesterday was Global Accessibility Awareness Day or GAAD for short.

This was the 6th GAAD. Its mission is to raise the awareness of usability and accessibility for everyone in the tech industry and beyond.

Here is Joe Devon’s accessibility post which inspired the first GAAD.

To mark GAAD 2017 I attended a free breakfast briefing run by User Vision, Translating good design into great accessibility.

Sadly I didn’t get a bacon roll for my breakfast but I did get coffee and a croissant! 🙂

Out early for @UserVision #GAAD breakfast briefing on #a11y. Learning about accessible modals, tab panels & accordions. pic.twitter.com/XzNDsICiD7

— Claire Brotherton (@abrightclearweb) May 18, 2017

Web accessibility basics

We should all have at least the following on websites:

  1. Sufficient colour contrast
  2. Visual focus indicator – something that shows the user where he/she is on a web page
  3. Natural order for elements on the page
  4. Alt text for images conveying information

Common design patterns – what makes them (in)accessible?

The briefing focused on three common interactive elements on websites:

  • Modal windows
  • Tab panels
  • Accordions

Gayle, Natalie and Marie of User Vision took us through some common tasks with these elements. They wanted to show us how they should work and why they were difficult to use when implemented poorly.

Tests were conducted of user journeys through websites using the NVDA screen reader. (Software a visually impaired person might use to browse a website.) The Speech Output Viewer was used to see what was read out.

Screen reader accessibility and keyboard accessibility tend to go hand in hand. Improve one and you improve the other.

For each interactive element, we saw an inaccessible version followed by a more accessible version. Accessible versions were marked up using ARIA.

Modal window

Modal windows are pretty common on websites. What should happen is that the original window the modal is launched from is “greyed out”. Only the modal itself should be interactive until it is closed.

A simple modal window with a Close button
A simple modal window with a Close button

The modal window task involved adding an item to a basket on a shopping website. Activating the Add to Basket button generated a pop-up window with further options.

Accessibility problems and solutions for modal windows

The main problem was that the focus remained on the page that the modal was opened from. The screen reader kept reading content on that page (e.g. delivery times) instead of content in the modal.

As a result, options to View Basket or Checkout were completely inaccessible. Not a good thing for an online store!

The solutions included:

  • Adding a title to the modal window.
  • Setting focus to the modal window when it was opened
  • Permitting tabbing through all the interactive elements of the modal (including a Close button)
  • Returning focus when the modal was closed to the part of the original page the user came from. (To move them back to the top of the page, for example, would be confusing.)

Tab panel

Tab panels are a way of saving space on the page by cramming information into a panel. The user navigates to each panel item via the heading tabs at the top of the panel.

A tab panel with three tabs and a scroll bar for content
A tab panel with three tabs and a scroll bar for content

The task with the tab panel was to access each tab and its content on a holiday booking site.

Accessibility problems and solutions for tab panels

One issue was a missing focus indicator, so the user didn’t know where he/she was when using the Tab key to navigate.

The tab titles were links and it wasn’t clear that they were tabs.

The content in the panels was not accessible.

The solutions included:

  • Indicating how many tabs there were in total.
  • Letting the user know which one they were on (e.g. “Tab 2 of 5”).
  • Making sure the user could tab to the tab panel content, not just the headings.
  • Including a visible focus so it was obvious which tab was selected. This could be done by colour as long as that was not the only indicator.

Accordion

Accordions are similar to tab panels but run vertically. Each item should be expandable on click and reveal more information.

Only one is normally open at a time.

Accordions are sometimes used on FAQ pages.

Accordion with 5 items; the second one is open
Accordion with 5 items; the second one is open

The task was to view special offers on a retail website, shown in an accordion.

Accessibility problems and solutions for accordions

The accordion was not openable so the user failed to get the special offer information. 🙁

The solutions included:

  • Telling the user how many accordion items there were in total and which one they were on.
  • Indicating to the user whether an accordion item was expanded or collapsed.
  • Allowing the user to tab between closed accordion elements and use the Enter key to open them.

Briefing slides

Thanks to User Vision for making their slides available. Check out the last slide for some handy resources.

[slideshare id=76093777&doc=uservisionbreakfastbriefinggaad-may2017-170518133252]

Accessible code examples

10up have a WordPress Component Library with demos and code for accessible components. It’s a brilliant resource.

Have a look at their accessible examples:

  • Accordion
  • Modal
  • Tabs
10up's accessible modal window
10up’s accessible modal window

I’m hoping someone might make these into WordPress plugins one day. 🙂

Where and how to learn more about accessibility

Attend local events such as:

Edinburgh Accessibility and Inclusive Design Meetup

Accessibility Scotland

Study the WCAG guidelines. WCAG version 2.1 is now out.

Try unplugging your mouse for the day. Use the keyboard to navigate instead. How far can you get through a site?

Use browser extensions such as Chrome’s No Coffee vision simulator to simulate low vision conditions. Thanks to the audience member who mentioned this.

Simulation of the BBC News website as seen by a person with age-related macular degeneration
Simulation of the BBC News website as seen by a person with age-related macular degeneration using NoCoffee

You can also read some of my accessibility posts:

  • What is web accessibility, and why does it matter?
  • Web Accessibility in the UK – True Facts [infographic]
  • How to make the web better: WordPress accessibility experts panel

Did you go to a GAAD 2017 event? Will you be marking GAAD in 2018?

Leave a comment and let me know!

Related

Category: Accessibility Tags: accordion, GAAD, modal window, tab panel

About Claire Brotherton

Freelance web designer and front end developer based in Edinburgh, Scotland. I love WordPress, code, learning and blogging.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email. Read my privacy policy.

potted cactus and laptop with code

Footer

Categories

  • Accessibility
  • Blogging & Content Marketing
  • Business
  • Personal
  • Software & Tech
  • Websites
  • WordPress

Top Posts

  • How To Create WordPress Excerpts And Include Links In Them
  • How To Solve WordPress Image Alignment And Text-Wrap Problems
  • Improve Your Divi Website's Reach With Divi Accessibility
  • How To Set Up And Customize Twenty Nineteen Theme
  • Registering a Domain Name with GoDaddy - Step by Step

Let’s Be Social

  • E-mail
  • Facebook
  • LinkedIn
  • Twitter
Copyright © 2014 -2025 A Bright Clear Web
  • Privacy and cookies policy
  • Site map