For understandable reasons, people trying to create accessible digital content who do not know much about the topic often want a checklist of exactly what they need to do. There are checklists out there to help with accessibility—any search engine will help you find many—and they cover frequent and easy-to-fix problems related to accessibility, so they are useful. However, we in the Accessibility and Usability Lab don’t find that we can distill accessibility down to a series of discreet steps. Accessibility is integral to every step along the way, as are the language, data, audience, navigation, purpose, and other considerations that shape design and development from the beginning. It is important to be aware that simply ensuring graphics are labeled, and pages use proper nested heading structure is not enough to guarantee accessible content.
This article will go through the steps a user takes to buy a container of milk and examine how fundamental design flaws in the process make the final product inaccessible. There are also some ideas about what would make it more accessible. You can watch the whole video first or click the link at the beginning of each section to go to the specific place in the video that section addresses. Please note: The website demonstrated in the video has changed significantly since the video was made, but has not necessarily been made more accessible.
1. Departments
The first time in the process that the user experienced an accessibility issue occurs around 0:33 in the video. The user is looking for milk and eggs, so she decides to start with clicking the “departments” link, assuming both products will be in the same section.
It is best if there are multiple ways to find whatever a user might be looking for, but this particular user imagines a layout for this content where she can drill down into sections of the store, and perhaps into further divisions within each department. She formed this mental map based on a combination of what she has encountered on the site, on other shopping sites, and in terms of how she would organize the content if she were going shopping in a brick and mortar store.
There is nothing intrinsically accessible or inaccessible at this point, but when you create content, it’s important to be able to imagine various ways users might approach it. This particular user best understands going to a physical grocery store, so she uses that experience as a guide as she tries to find products in the digital version. Of course, the assumption that a user is more likely to be most comfortable with walking through an actual grocery store might change, and digital assumptions need to keep up with people’s ways of organizing the world.
2. Give Up on Departments
The second important moment is at 1:11. The user has gone through the whole list of departments and didn’t find either “dairy” or any other category likely to have milk. She decides that her original mental map of how the content is organized is incorrect.
If the user had gone into the “grocery” department, she would have found subsections for “dairy.” However, there was nothing to indicate that some of the departments had subsections within them. When a user thinks of departments in the grocery store, they are probably thinking of the main sections, possibly even picturing the physical layout of their local store, or picturing their shopping list where they thought of what they needed in a logical succession. It turns out that “grocery” is on the same level of organization as “pharmacy” and “bakery. This user imagined the organization to be one where every section is under “grocery,” because that’s the type of store, and the pharmacy would be on the same level as “pets” and “natural and organic,” not equal to “grocery.”
Users will imagine the organization differently, but this is why it’s important to test your layout with users to see other ways of approaching the content. Here is a video of another site that does not provide programmatic information, or clues the software can access, about the content.
3. Explore to Better Understand Layout
The user decided to do a bit of exploring to get a better sense of the layout, so she went to the “pets” department. She wanted to figure out the organization of the items listed in this department, so she used the command to review the page by headings. She found several products highlighted with headings, but it clearly was not everything in the department, and the content was interspersed with other random headings.
At first glance, it appeared that the department only had a few singled out products, perhaps sale or promotional items. The user decided the departments actually were not going to give her what she wanted; a way to browse through all available items.
If the headings had marked categories such as “cat food,” “dog food,” and “iguana treats,” the user would have expected to dig deeper into the content each heading to find what she wanted. Such organization would have made sense to her, whereas this organization didn’t seem to provide a method for searching.
4. Search Box
The user goes back to the homepage and then tries to find a search box from the top of the page. She finds one that just says “search,” and it makes sense to her that this is what she is looking for. She types “milk” and hits “enter.” The title of the newly loading page has the word “Vitacost” in it, which is unexpected, but she continues with her search, because the steps she has taken thus far make sense to her, so she assumes the “Vitacost” is out of place, not that she is out of place.
Visibly, the search for King Soopers is the most prominent one, but for a screen reader, whatever appears first in the DOM will be most prominent.
More important content should appear before less important content in the DOM, because that is how the screen reader user will encounter it.
5. Headings
The search for “milk” came back with a large number of results, so the user wants to find refinements to narrow down her search. She uses the command to look for headings, but the beginning of the refinements section and the possible refinements are not marked with headings, so she has to try and find refinements with other techniques.
The content is like sorting through a newspaper with identical font style and size throughout its pages; it requires more time and resources to sort through everything instead of clear headings to guide the way.
Headings and ARIA regions are a way to organize content. An outline is a useful form of organization that does not require visual presentation. Furthermore, it allows a screen reader user to more quickly navigate content. Here is a video with a general demonstration of screen reader use, including some of the tools available to expedite navigation.
6. Refinements
The user goes through potential refinements such as probiotic potency, gluten free, milk free, and soy free. The user could say that she wants it to be soy free, in that she wants cow milk, not soy milk, but most of the refinements are irrelevant to what she is looking for. In the end, the only thing that helped her narrow down the results was the price range.
While the previous step involved format, this step involves the underlying structure of the data. It involves understanding both what would be important to the user, as well as meaningful ways to define and divide content.
A million or even a thousand items are impossible for a human brain to deal with, without reorganizing them into more manageable chunks. At a hundred items, a human is getting closer to being able to manage the information, though it will take too long. A list of 10 items, however, is manageable for most people to review, make comparisons, and understand the options in front of them. Giving people ways to meaningfully decrease the number of results is an important part of accessibility. One way of offering more useful refinements depends on making the refinements change based on other selections the user has made. Such an approach is more technically complicated and depends on the data available about each item. Another approach that does not require as much technical skill, but still requires thought and creativity, is to provide a set of refinements that applies to most of the items in a database. For example, in the case of this video, useful refinements might include price range, local, organic, fresh/frozen/refrigerated, and sale. There might even be a section to expand that includes dietary needs such as gluten free, vegan, and kosher. These refinements might not apply to lightbulbs or Aspirin, but most of them apply to most of the items in the grocery store.
7. Focus Control
When the user selects the price range she expects to pay, the whole page refreshes and throws the focus back up to the top of the page. As a result, the user has to navigate through all the previous content to find where she left off. Since the page lacks useful markup to help her navigate more efficiently, the fact that she was thrown back up to the top of the page is particularly cumbersome.
It’s as though you had to negotiate a large parking lot with a bunch of identical cars and no signs or points of reference every time you wanted to use your car.
The site could wait until the user gets through all the refinements before refreshing, or it could make it so the focus returns to the line it was last on before the page refreshed. In addition, proper markup with headings, lists, etc. would help the user navigate more quickly.
8. Failure
The user starts reading through all the results, but it quickly becomes clear that it is not going to be easy to find what she is looking for, and she gives up.
Conclusion
The purpose of walking through this process is to demonstrate how the whole structure of data, along with individual components such as headings and labeled graphics are all part of creating an accessible product. It would be nice to be able to conclude with a few steps or points to keep in mind when designing for accessibility. However, a few pointers would not be enough to guide the design of content for any other user, so it does not encompass everything that goes into designing for screen reader and magnifier users either. Accessibility is about the entire experience, so it is important to learn what the experience is actually like. The best way to learn this is to find out from a native screen reader and magnifier user. It is possible to capture some of the experience though, by using the free screen reader NVDA on a PC, or the already installed screen reader, Voice Over, on a Mac. There are also several videos that demonstrate screen reader and magnifier users interacting with a variety of tools on the CU Boulder OIT YouTube channel.