Accessibility: Guidelines for Information Architecture, UX Design, and Visual Design
Deep dive into web-accessibility!
I have been really passionate about accessible design since I was in school because I used to be an exam writer for students diagnosed with cognitive disabilities. This gave me a first-hand experience of the difficulties and hurdles they may come across.
It is my goal to create awareness about how we, as individuals who constantly contribute to the content on the internet can be more sensitive towards improving the experiences we design for the differently-abled. In addition to writing about accessibility, I have also conducted a session that enabled people to experience simulations regarding how the differently-abled consume content on the internet.
Below are a few guidelines that I have gathered from my learnings. You will find these most helpful if you are involved in the user experience and visual design processes for your team’s digital product or service.
This article covers —
10 Visual Design Guidelines
14 User Experience Design Guidelines
12 Information Architecture Design Guidelines
Visual Design Guidelines
Colors and Contrast Ratios
1. Always try to see how the designed visuals look in a high contrast mode. It is a setting on Windows computers that gives the user much higher contrasts on the screen automatically.
2. When the high-contrast mode in Windows is used, the CSS is automatically turned off which makes all icons and background images disappear. Colors that are used to particularly denote a meaning are gone. All of them change to a very high contrast and are usually limited to 3 colors for the text that is there in the entire interface. This illustrates the importance to see how the designed content looks when this mode is used on a regular basis.
3. The contrast ratio checkpoint measures the ratio between the text colors and the background colors.
4. A text to background colors must have a contrast ratio of at least 3:1 when using a bold font of around 18px.
This is a tool I often use to check if my color combinations are accessible or not, it also gives some suggestions! Please feel free to check it out!
https://accessible-colors.com/
5. It is not a good practice to alert the user when there is an error by just changing the labels of a form to red color. Color should not be used as the only means to indicate an action in an interface.
6. Blue has become a universally recognized color to represent links, to ensure that a user does not miss out on a link is to underline it. Even though some shades of blue might be termed as accessible there can be times when the user is not able to differentiate if they are suffering from a condition called “Achromatopsia.”
Read this article written by Brandeis University.
It is very helpful if you want to study accessibility for color more in depth
Typography and Layouts
7. While working with making typography and layout accessible, text should be separated with appropriate kerning and leading. Using capital letters throughout the sentence or word is not recommended and should be avoided as much as possible. Typography that is simple and clean with a good amount of spacing is preferred. Light serif fonts should not be used.
8. The focus indicator should always stand out so that that the user can easily locate it if they just glance around the screen. This proves helpful for keyboard users as they need to locate where the cursor is at all times. When a user is navigating a web page, a focus indicator with a different style and a selection indicator is required so that they can easily distinguish between the two.
Icons and Images
9. When icons are provided with labels that are visible throughout, it is okay if they do not abide by the required color contrast.
10. All icons and meaningful images should follow all color contrast rules.
User Experience Guidelines
General
1. To provide a better design for users who wish to view content at a larger scale, it is not a good idea to use multiple vertical and horizontal scroll bars.
2. A user may find it difficult to remember which format the date needs to be typed in if it is presented as placeholder text. This happens because when the user starts to type in the text field the placeholder, text disappears. The date format should be explained or made clear for the user in another way.
3. Landmark regions are never visible to any kind of users except those who use assistive technology like screen readers.
4. In order to make a form accessible and easy to use, all the fields that are mandatory must be denoted by a symbol like an asterix. These required fields or warning messages should have a visual indicator that is not entirely color-dependent. The flow and design of the form should be such that the user can avoid any irreversible consequences, if any.
Visual Content and Images
5. If images are used for decorative purposes and do not carry any meaning, alternative text is not required for them.
6. If content is represented in the form of graphs, audio alerts, animations, or images, it may require an additional explanation or a summary. This is important because this type of content always carries meaning which screen readers cannot catch.
7. When we upload images, we may realize that they have text embedded in it. This should be avoided as the screen readers will not read this text and its quality is often degraded when the content is enlarged. This text cannot be altered by the user in any form.
Animations and Timed-tasks
8. Epileptic seizures can be triggered if images or media used appears to be bright and flashing.
9. If the design involves the user experiencing an animation that automatically starts and/or is more than 5 seconds, a method to stop it must always be provided.
10. The user should be given control to stop, pause, or hide any content or information that appears on the interface that moves, blinks, or scrolls.
11. While designing the experience around timed tasks or deciding the amount of time needed for a user to interact with certain content, all factors must be considered. The users could include people diagnosed with low vision, or may have cognitive limitations which do not enable them to perform the expected action within the given time.
Design Specs and Titles
12. When the content of titles is designed or decided, it should be unique if it is part of a collection, and enable the user to identify the subject of the content that is thereby going to be displayed. Every title should also make sense when it is read out of context, as this plays an important role if it appears in a site map or list of search results. It will also be helpful for the users depending on screen readers.
13. A keyboard-restricted user’s experience is influenced by the way the Graphical User Interface (GUI) is coded by the back-end and front-end developers. This makes it necessary to provide design specs that include details like the order of the tabs, mapping of the keyboard interaction, alternative text for images that are to be used, as well as colour codes for accessible colours.
14. Every interactive element in the interface should be operable by the keyboard. This ensures that all functionality is accessible to users who are not able to use the mouse to perform actions like hover as well as drag-and-drop.
Information Architecture Guidelines
General
1. While design teams conduct user research to ensure that their product or service is accessible, it is always recommended to do direct research with people with disabilities. It will not be possible to address all disabilities that are present while doing empathy mapping exercises, but the team will be able to gain empathy even if they add just one disability to their empathy maps. This will lead to gaining a better understanding of how to design for the differently-abled.
2. Designs often include common elements like forms, tables, lists, and headings. In case these are used, they need to be supported programmatically through markup.
3. In order to enable users with disabilities to have a meaningful experience, the content on the web site or product interface is read out by assistive technologies. Content will be read aloud by these technologies the same way it is presented visually on the screen.
Navigation
4. Progressive disclosure principles can be used to create a simple and navigable experience. Following these principles ensures the user does not have to do complex reasoning or reading to understand how to continue.
5. While the information architecture of the product is being designed, elderly users and users with cognitive disabilities should be considered. The menu should be visible at all times.
6. The user should be presented with multiple ways of navigation so that they can go ahead with what is best for them. Navigation methods include the option to search, link pages sequentially, a table of contents, and a site map. We should provide the users with an easy way to navigate back to the previous location at all times.
Tasks
7. Tasks should be kept to a minimum on each page to reduce the cognitive load. When the flow of a particular task is being designed, the degree of context shifts should be kept as low as possible. For example, if a user closes a popup window or overlay, they should be directed to the same position that they were at before the popup or overlay opened.
8. In a task flow, when a user needs to be prompted with an instruction to proceed, they should be required to press a button saying “next”. This is a much better experience than expecting them to click on something like a green square in order to continue.
Titles and Headings
9. Screen readers announce titles to users before all the other content present on a page. Hence, while deciding what goes in the content for each heading, we should keep in mind that it makes sense when the titles are read without the rest of the content. This will help users depending on screen readers while they navigate through the content.
10. The structure of the headings must be documented well in the design specs. Skipping heading levels is not recommended, as this destroys the structure. Having well-structured and informative page titles/headings help all kinds of users including those with visual or mobility impairments as well as those with cognitive disabilities.
Images and Links
11. The alternative text that is provided for each image must contain the meaning the image is trying to convey. It should not be describing what the image looks like.
12. When a text link is used in the interface, the purpose of the link should be described. It should also name the document or web page it leads to. No two links on the page should have the same name.
Closing thoughts..
These guidelines should be integrated into the design right from when the product is in its embryonic stages. Accessibility should always be considered from the beginning.
When we design content that is accessible and inclusive, we are also designing for our future selves. Some of us might face a hearing disability at a later point in life, or get high-power reading glasses that make it difficult to go through small-sized content. I hope these guidelines are considered and kept in mind when you design your next digital product or service.
- IBMers can take this course and get certified as an Accessibility Advocate
- Others can continue learning at The Accessibility Project — www.a11yproject.com
- Another great certified course is “An Introduction to Accessibility and Inclusive Design” by University of Illinois at Urbana-Champaign
I started my journey in Accessible Design after I got hold of a couple of badges that IBM had offered. This immensely broadened the knowledge I had within this field and got me interested in wanting to learn more and write about it!
You may also be interested in..
Part I — Accessibility: 4 easy-to-follow methods for everyone!
Part II — Practicing it!
Manasi Vaidya is a user experience researcher and designer at IBM iX. She is currently working with IBM’s Cognitive Power Systems Design Team.
The above story is personal and does not necessarily represent IBM’s positions, strategies, or opinions.
Attending the ACM CHI 2023 Conference in Hamburg, Germany?
We are going to simulate the physical effects of aging to truly step in the shoes of the elderly!
Register for this course designed by researchers at the MIT AgeLab! More details:
