If you’re trying to create an innovative car that will expand for extra passengers or cargo and shrink when you want to park it between a couple of enormous SUVs, you don’t need to reinvent the wheel. You might decide to modify the frame or axles in some way, but it’s already generally established that a round, rubber wheel is the best way to get around on American roads. The same principle applies to designing digital content: be deliberate about when you use well-established tools and when you design in a new way.
An example of the balance between new and old comes from a Where’s-Waldo-type activity in the Pathway to Space course at the University of Colorado Boulder. In most cases, people would assume that a searching activity could not be made accessible to blind screen reader users. However, Courtney Fell, from the Academic Technology Design Team, wanted to make sure that all students would be able to participate in the class. The basic purpose of the activity was for students to learn about various aspects of the course and people involved through a fun activity. Since reviewing a variety of objects and people and learning about relationships was the basic purpose, Fell and her team decided to use a tree view menu to hide the targets among other related items. For a blind user who only focuses on one part of a tree view menu at a time, navigating through one is a similar experience to that of searching visually through a picture. Most screen reader users are familiar with a tree view menu, so even if they have never interacted with a visual search, they know how to operate the tree view and thus will hopefully be able to figure out the whole activity more easily. It is the first time Fell or her colleagues have seen an activity such as the one they are developing, so no one really knows how it will work out for actual blind students, but since they are building off familiar tools, blind students will have a better chance at participating.
Familiarity relates to designing digital content because they both have to do with the cognitive load on a user. Cognitive load has to do with how much of a person’s brain is used to complete a task. Taking a calculus test would generally demand a heavy cognitive load, whereas counting to three does not. Depending on the content of your design, it may or may not require much thought of the user, but navigating to and around it should involve as little thought as possible. If it is challenging to use or find content, users are more likely to leave it and try to find something else similar. In addition, if the navigation experience requires more brain power, that means a user has less left over to engage with your content–the very reason you are designing in the first place (AU - Gwizdka). Familiarity is helpful to most people, but it is even more helpful to people who are blind and low vision. While a sighted user can gather information simply looking at content, a blind or low vision person deduces from other sources; if content is familiar, they do not have to spend as much time figuring it out.
Design Conventions
There are many spoken and unspoken design conventions, and it is important to recognize and use them. The following is not an exhaustive list, but it does include frequent problems encountered in the Accessibility and Usability Lab:
Forms
- Make sure that the order of the form fields themselves make sense. For example, the field for zip code should come after city and state, not after the phone number.
- Make sure the tab order—the sequence of places your cursor lands as you press the tab button—is the same as how someone would navigate the form fields visually.
- The “submit,” “save” or “next” button should come at the end of all the form fields, not at the top of the page or before any necessary fields.
- When entering dates, users should have the option to type in a date or pick from a calendar. If users do not have the option to type a date, the month, day, and year fields should be separate and easily selectable from a drop-down menu or combo box.
- Fields should have familiar labels such as “first name,” “gender” and “add me to an email list,” not “stompin’ grounds line 1,” “How many little sprouts you got?,” or an icon of an old fashioned cash register with alt text.
Search Field and Results
- The first search field in the tab order should be for whatever a user is most likely looking for. On a library site, it should search for library content, not events or hours. On a public transportation site, it should search for routes or schedules. On a shopping site it should search items for sale.
- The search field should be labeled properly as “search” or “search for fill in the blank,” not “?” or “Find fill in the blank here.”
- The results should appear in a prominent location near the top of the DOM – the flow of the document a screen reader accesses. There should be a heading as well as an ARIA landmark to make the content easy to find.
- Each search result should be easy to navigate to, which can be done by using appropriate semantics such as heading levels or lists.
- Generally, enough information to differentiate the results and to summarize info should appear on the page with results, but a user shouldn’t have to maneuver through excessive information about each search result on the first page. It should be easy to access additional information about the results with links, accordion menus or other design elements.
- Here is an example of search results that are problematic because the user has difficulty finding the start of the search results, navigating from one search result to the next, and identifying relevant information within each search result.
Notifications
- Make sure notifications appear in a logical location so users don’t miss them. This is particularly important for screen magnifier users who only see part of the screen at one time. If screen reader users have to navigate around the page to find a message, they are likely to miss it, or spend too much time searching through all the content.
- When possible, users should become aware of notifications in a timely manner. If someone left an ampersand out of an email field, they should know right away so they can fix it while they are still in that part of the page.
- If you use pop ups or modal windows, make sure a screen reader user has the same access as all other users. Here is an example of a notification that a screen reader can’t access.
Appropriate Structure and Semantics
- Organize your content in a way that is meaningful with just words. Temporarily remove images and navigate your content to ensure the order would lead someone toward the reason they are using your content. Use headings to create an outline and then fill in the details such as text, menu items, and navigation controls. Don’t get distracted with how cool an image or link may look to you – think about its function.
- If you have a list of related items, make them a list.
- If you use tabs, make sure a screen reader user knows they are tabs, not just links or clickable elements.
- If you use menus of any kind, ensure they are labeled clearly and that a screen reader user can navigate them. In addition, screen magnifier users have to move the mouse in order to change what part of the screen has focus, so they can have difficulty navigating menus that expand or collapse based on mouse hovering.
- For more details on organizing a page, read the article Basic Structure.
Conclusion
There is a delicate balance between being innovative or creative in order to improve a user’s experience, and keeping the experience familiar so a user knows what to do with a minimal amount of exploration and learning. Creativity and innovation have the potential to give us a better way to complete a task, a more efficient way to do something, or a new way to approach problems, however, it is imperative to make sure the new way is worth the cognitive load the user will have to expend to adjust to the new way. Here is an example of a screen reader user trying to use a problematic search and eventually not purchasing anything from the company.
When you introduce a novel way of presenting digital information, use familiar tools as much as possible to help people figure out new elements. Remember, the more users can figure out for themselves, the less you have to do to support them. If they only have to make a little leap across a stream, they are much more likely to do it, versus if they have to jump a motorcycle over the Grand Canyon.
Everyone has experienced difficulty navigating a website and wondered why on earth someone designed it that particular way. When designing, collect a list of examples of poor design and what made the user experience difficult. Conversely, make note when content is easy to navigate and try to identify exactly what makes it easy to use. Often the qualities that make digital content easier for a sighted person also improve the experience for a low vision or blind user but can impact the latter significantly more. Even if a general review of well-liked sites doesn’t provide an indisputable guide to the best way to follow design conventions, it’s a good start. In the end, following design conventions might not lead to an entirely accessible final product, but it will be better than if not taken into consideration at all.
(n.d.).
AU - Gwizdka, J. (n.d.). TI - Distribution of cognitive load in Web search. JO - Journal of the American Society for Information Science and Technology, 61(11). doi:org/10.1002/asi.21385