With the continuously growing dependency on technology in both professional and personal capacities, it is more important than ever to design digital user experiences in an intentionally accessible way.
Accessibility in design is the overarching collection of factors and guidelines that ensure a product or experience can be used by anyone, regardless of their personal capabilities. This concept is most commonly applied when discussing design requirements for users that experience some form of disability, especially those affecting vision, hearing, or cognitive function.
Not only does accessible design improve the overall user experience, but it also supports other important metrics including ADA compliance, SEO optimization, enhanced usability, and mobile compatibility.
Color is a great asset when designing digital experiences to help direct the user’s eye and provide visual interest on the screen. It is important to consider, however, that a large number of potential users may not experience these benefits due to vision impairments or colorblindness. In these cases, your users may not be able to distinguish between similar color tones, so it is important to utilize high contrast color palettes in your work. The easiest way to ensure that the colors you choose are accessible to most visually impaired users is to check your design through a grayscale lens or setting. By checking your work with this added step you will be able to experience what your design looks like tonally, allowing you to identify any areas that may need adjustments.
Beyond implementing stronger color contrast in your work, a few other techniques may be used to support visual comprehension. For instance, anywhere that you may use color highlights, consider including a symbol or other visual indicator to direct the user to take an action or correct an error. Another example may be that if a user hasn’t filled in a text field, instead of solely highlighting it in red you can place a “Please enter text” note to express the error.
While contrast is very important in the general design of any digital experience, a special emphasis needs to be placed on the contrast of any included text against the background of the page. One simple way to do this is to utilize the Contrast Checker tool from WebAIM, which allows you to test out any text and background color for contrast compatibility and WCAG (The Web Content Accessibility Guidelines) compliance.
Other important factors affecting the readability and comprehension of text include the type size and the hierarchy of the type structure. It is critical that you ensure your text is large enough to read for the widest range of users. Even though smaller text may look good in your design it may not be practical to get your point across. On the other hand, text that is too large may be distracting to the eye or dilute any content that you specifically want to emphasize.
Emphasizing content and directing the user’s eye is where the concept of hierarchy comes into play. Text hierarchy is the structure of text on the page created by utilizing a variety of text sizes and weights to indicate different types of information. For example, the sub-header of this small section, “Text Contrast, Size, and Hierarchy,” is larger than the body text but it is not bolded like the overarching section header of “5 Key Accessibility Factors.”
One key point of frustration for users resides in the usability of form fields, specifically when users are unable to tell where they need to click to start filling in a form field or cannot see which field they are currently typing into. All input boxes should be obvious at first glance, not simply blank spaces that cannot be differentiated from the background of the page. This can easily be accomplished in a few different ways. The first and possibly the simplest solution would be to create distinct outlined boxes. Other options that can be used include adding field labels to indicate what information is required in each field and/or adding text like “click here” when a field is empty.
While adding these additional assets into your design will help solve the issues of not knowing where text fields are located, it is also important to indicate to the user which form field they are actively focused on. Some potential ways to accomplish this would be to embolden the active field when it is in use or lowering the opacity of those not currently being filled out. You can also use a text line indicator, such as the one seen when typing a text document, to show the user exactly where they are typing.
There is a tendency to focus on visual impairments when addressing accessibility factors for digital experiences, however, physical difficulties are also important to keep in mind for end users. One example of where these considerations come into play is when trying to access additional information on a digital page. Many digital experiences provide users additional information when hovering over specific locations on a page, requiring the use of a mouse or trackpad. This feature can have a negative effect on those who have difficulty managing a mouse with a high level of control due to physical limitations, resulting in a lot of frustration for users.
There are a few ways to remedy this in a more accessible way. The first solution would be to implement drop-down menus where additional information is needed. This could either be information that pops up when the related text is clicked or a full drop-down menu if multiple points need to be included. In the latter option, it is also important to make the drop-down navigable with the keyboard to prevent the need for additional mouse usage. Another solution is to arrange the information on multiple pages that can be navigated effectively through tabs on a navigation bar. This allows you to keep relevant information all on one page without additional information needing to be included.
Navigation links are something that have been a major staple of any digital experience for many years. They are extremely helpful in directing users to other locations and help you streamline information so users can find exactly what they want. However, the experience of those who rely on screen readers and other assistive devices may be negatively impacted if the links are too abundant or poorly organized.
The issue with too many navigation links is that any assistive tool will have to process or read aloud every single link before getting to the actual content on the page. This makes it hard for users to easily access the information they are looking for. Some ways to avoid this include leveraging sub-navigations (links nested together in groups), open search bars, or the ability to skip directly to the main content of the page, allowing users to find what they are looking for faster and improving their overall experience.
By considering these 5 factors when designing a digital experience, you can ensure that your work will be more accessible to a wide range of users. Not only will the improved and accessible design better align with compliance requirements, but it will also allow for a greater level of engagement, resulting in a more successful design overall.
Jason Taft is a Design Researcher with Sylver. Jason is responsible for building out screeners, developing discussion guides, or diving into a topic through online research. He also spends a lot of time connecting with clients and/or international partners to ensure they feel supported as we work to achieve the goals of their projects with us. Jason has a BFA in Industrial Design with a minor in Graphic Design from the Cleveland Institute of Art.
Three often overlooked considerations when designing the sample plan for an online survey
Strategic Market Research Recruitment
Reach out to set up a free discovery call. On this call, we’ll get clear on your scope of work to be tackled, how your initiative ladders to a broader business goal of your organization, and assess — without attachment — if Sylver Consulting is a “best fit partner” to support you in your scope of work.