-
Notifications
You must be signed in to change notification settings - Fork 0
Aria Enabled TRUE
A short story about ARIA and how to design with visually impaired users.
ARIA is short for: Accessible Rich Internet Applications. This basically means that you can add several attributes to HTML elements giving them more context or add relations between elements. When properly used these can provide a more accessible web-page (for more thorough explanation on aria labels and examples check the documentation of Mozilla, MDN - ARIA).
At the final stage of the MINOR: Web-development CMD Hogeschool van Amsterdam, I had the chance of designing for one of the most underrepresented target audience you can imagine. The visually impaired. However designers seem to assume this audience is relatively small the opposite is true (2.2 billion people of the 7.6 billion people on earth) (WHO - 2018). Imagine all these people not being able to surf the web because designers act like they don't exist.
Especially at this time when COVID-19 is restraining our daily routines. A simple schedule with your hairdresser becomes an online event. But how about blind people? They need haircuts, groceries or other online shopping. And while restraints are lifted and more public occasions are being re-opened, most of them require reservations online.
Then Q42 with Rijksmuseum - Amsterdam as their client approached us with the following problem: Their ticketflow wasn't quite accessible, or actually not accessible at all. At this time it was impossible for people that can't see the screen to successfully interact with their design.
When a ticketflow is as complex as the one of the Rijksmuseum, the problem was to big for a bunch of aria labels to seal the deal. Making use of ARIA labels is one thing but making, in this case, a ticketflow user-friendly and an pleasant experience that's another cook*.
"That's another cook" - Louis van Gaal
When we started to work on this project we roughly started by making the ticketflow as Q42 designed it (linking it to a dataset etc.) and decide to refactor along the way. When we had a rough basis of the entire flow (1 week of intense labor) we started to make sketches of alternative flows. Taking in account the most difficult parts of the flow: The step to pick a date and time slot, and the ticket selection step. In their current design they had combined the date picker with extra-options such as donation possibility and additional multimedia tour. We decided that these extra options would best be served on a different step to relieve the user with one primary action per screen.
“Make your product accessible
by making some things inaccessible”
First of all you need to keep in mind that aria isn't going to make you solve your problem when you are not making use of proper HTML elements. But we found at least one exception in our design. I will tell you more about our inaccessible part in a bit. But first let me explain how we made our complicated ticketflow into a friendly conversational interface.
We started digging in ARIA and how to properly use it. We discovered the following useful ARIA labels:
aria-describedbyaria-labelledbyaria-controlsrolearia-live
Like the attributes says you can use this attribute to give more information on for example an option in a form.
<input aria-label="Entree museum.De prijs is €0.00 per groep. Dagelijks van 9 tot 17 uur"
aria-controls="ticketInfo" type="radio" name="ticketOption"
value="Entree museum,96D63FDB-6647-EA11-A2E0-D9C772E4E9DA,0,per ticket"
aria-describedby="item[0]">
<p id="item[0]">
Here you can put additional information about the option above.
</p>
So in this example we use the id of the <p> and pass it to the aria-describedby we now know that if the user has focus on the input the screen reader will add more context to this radio button by reading the inner text of the <p> element.
This attribute works the same as the describedby but major difference between the two is that a label provides essential information about an object while a description provides extended information that the user might need. MDN - labelledby. At this point when working on forms its better to use a <label> + <input> with also an id and the for attribute example: for="yourID".
When compiling an order we have the content of our shopping cart continuously changing. For people that can't rely on their sight its really hard to keep them informed about their order. This is where aria-controls come in place. There are some things you need to know before you go wild with this.
- aria-controls can only be used on HTML elements that already exist in the DOM-tree and which can be navigated to.
- it create's a relationship with certain HTML elements based on id
- its doesn't have full support among all browsers
- shifts focus to a different HTML element skipping all content in between
A very powerful tool that can improve the UX greatly for screenreaders and browsers that do support it.
So how did we use this? We wanted to inform our user that when he made a selection on lets say a ticket choice. The page would them update our user with the state of the shopping container. So he'll be hearing whats inside his shopping container. The total amount of tickets and the total price, read out to him. The html element which contains this message (you linked it with this id: aria-controls="thisID") get sets a role="status" and aria-live="polite" more on that later.
This is a code example of how to set up this kind of relation:
<input aria-controls="ticketInfo" type="radio" name="ticketOption"> // Input you want to select
<section id="ticketInfo"> // container you link the input with
<p>
// everything inside this container is now important to the screenreader
<output id="aantal-first-step" class="block-right" role="status" aria-live="polite"> Totaal aantal tickets: 4</output>
// assigning `role="status"` to this element telling the screenreader to read whats inside
</p>
<p>
// u can easily work with multiple elements to interact the same way!
<output id="total-first-step" role="status" aria-live="polite">Totale prijs: €58.00</output>
</p>
</section>