Designing for Accessibility From Day One
As we covered in the first part of this series, digital accessibility is about bringing down barriers and delivering universal access to your products and services. But you might be wondering how to manage an accessibility project with all the additional requirements that accessibility guidelines entail. Long story short: accessible design isn’t hard if you start from the very beginning.
One of the most common challenges when designing for accessibility has to do with the universality of the concept. Accessible design means being inclusive and creating products for all kinds of people. But with such a wide array of people and all their idiosyncrasies, how do you ensure you’re not excluding any of your users?
Whenever a website isn’t accessible by, let’s say, a person with a visual impairment, I’m sure the designers and developers behind it didn’t do it intentionally. They probably just didn’t know better. So, where do you start to make sure your digital products don’t make the same mistake?
You need to start with the understanding that digital accessibility is the groundwork for the goal of making a product for everyone. So everyone on the team should feel accountable for it. It is not one feature or one user story, and therefore any application you’ll be building must not cut corners.
The only way to have a genuinely accessible product is to make sure that everyone has this understanding from the moment you sit with the stakeholders and the project team. More importantly, it must stay with everyone throughout development. Whether it was a conscious decision on the part of your team or a mandate handed down from somewhere else is of no consequence.
If you are developing accessible applications with OutSystems, we have a series of articles about what to use and how to do it correctly. But everything starts with inclusive and accessible design.
Making Your Team Care About Digital Accessibility
It may be the case that you’re required to go accessible. Maybe government or industry requirements force you to comply with the standards of Section 508 of the Rehabilitation Act (in the U.S.) or a specific level of the WCAG 2.0/2.1 standard. But you may also be doing it because you know accessibility can have very real benefits for your business.
No matter the scenario, if you need or decide to be compliant with Level AA of the WCAG, you should communicate it to the team from day one, because conforming to that or any other standard will affect their deliverables from the start. Each WCAG level has a list of rules to guide the designers’ and the developers’ work, and they can count on several plugins to design tools and automated validators to continuously check if they’re making decisions that comply with those rules.
Don’t expect the team to know all the rules in the book by heart; however, you should make it clear that everyone must include these testing tools (and activities like usability testing) in their process and that they deliver work that conforms to the guidelines in every sprint. Get your “definition of ready” to include these tests. And get your inclusive experience and user interface from the start.
8 Basic Design Accessibility Rules
Your UX/UI designers need to create an experience that supports the target accessibility standards and your business goals plus user-base needs. Also, the designers will define a process that validates those ambitions through research activities, usability tests, and validation flows. All this design work should be conditioned by the following rules:
1. Pay Attention to Color Contrast
Thomas is getting old and is rapidly losing his vision, but he needs to access your application to retrieve information about one of your services. What can you do to make his life easier?
The standard tells you the foreground and the background colors must have a sufficient contrast ratio. That ratio should be at least 4.5:1 for standard text and 3:1 for large text (18px or more) to comply with the AA conformance level. To get to AAA, you’d need a 7:1 contrast ratio for standard text and 4.5:1 for large text. If your designers know that they need to cater to AA, this helps them define the best color scheme right from the start.
2. Don’t Rely on Color Alone
Harry is color blind, and he wants to buy some clothes. When visiting your online shop, he needs to be able to distinguish the colors red and green. How can you help him?
Color can be a useful way to convey information, but it should not be the only way. Color perception can be different from user to user, and the designer should provide guidance and assistance so that users can identify the information they need. Describing colors with labels can do the trick here.
3. Have Clear Interactive Elements
Think of Edward, who has hand tremors and short-term memory loss, and needs to access your online communication app to be in contact with his family and friends. Can you prepare your app for such a condition?
The designer should prepare the content and the interactive elements for styles and naming, consistently using them so that the user clearly identifies where to click to perform a specific action. Orientation cues, like breadcrumbs, headings, and content separators, can also help with navigation. However, this story doesn’t end in the design phase. You must make sure the front-end developer includes keyboard shortcuts and caters to the ability to jump content as the user starts tabbing through the application. (Imagine Edward is using a screen-reader, and when he goes to a different page inside the app, he has to listen to the menu items all over again.)
4. Clarify Form Field Labels and Provide Error Feedback
Get to know Alaina, who works at a supermarket and has Down Syndrome. Her daily tasks include collecting orders and packaging products accordingly, so she needs to retrieve information from your app so she can dispatch each order correctly. What can you do to make her life easier?
Every form field must have an adjacent label, so the user can clearly identify what it means and how to respond. In left-to-right languages, you must position the labels on top or the left side of the field, and the designer must avoid using excessive space between the label and the field to guarantee the relationship between the two pieces is evident. The exceptions are labels for checkboxes and radio buttons, usually positioned to the right side of the element. Error handling is a big deal and should alert the user when there is incorrect data entry, or something is missing, right there in context. Avoid waiting for the form submission moment to make field validations, or Alaina will get frustrated.
5. Group Related Sections With Space and Headings
Lara works as a senior accountant in an insurance company and has to circle through many product information pages in your app to give her clients the right responses even during quick phone calls. How can you display information in a way that helps her?
You must display the information, so it’s structured in a way that facilitates understanding. Using two design principles like white space and proximity can relate pieces of content. Styling headings to group content help reduce clutter and make your application easy to scan and understand. On the other side, users benefit from having a clearer identified screen where sections are self-explanatory.
6. Design With Different Viewports in Mind
Meet Angela. She’s walking down the street and booking a weekend getaway with her boyfriend on your travel website. Can you deal with the fact that your users are mostly on mobile?
Design for different types of screens, aligned with your users’ requirements and needs. Think how page information should be displayed in viewports that are different sizes; how position and presentation of elements like headers and navigation can be adapted to better fit on different-sized screens; and how the available space, text size, line height, and line width must be set to guarantee the best readability and legibility. These are all relevant to designing for a multitude of available devices in the market.
7. Provide Alternative Text for Images And Media
Remember Thomas, our first example? It is getting harder and harder for him to see, so he will need to start using a screen reader to access your app. How can you make this transition a little easier?
Screen-readers make use of alt text to help users understand what the screen is trying to convey. So, this is probably one of the most important rules you need to take care of. You’re helping users get context for specific content, visualizing with words the idea beyond an image (no need to do this for decorative figures). Alongside the images, video screen readers use captions to translate images into words.
8. Have Controls for Content That Starts Playing Automatically
Back to Angela and her romantic getaway. She’s on 4G, and her data plan is off the charts this month. Can you keep her from spending more money on autoplay videos of Santorini?
Your designer knows that user control is everything so visible controls for content that start automatically, like carousels, image sliders, videos, animations, or sounds, will enable users to make their own decisions on playing or stopping a specific element. This can be an example of the autoplay video or a more chaotic scenario with background audio conflicting with a screen reader.
What User Experience Designers Learn From Diversity
UX/UI designers go deep into understanding your users; that’s what they do. They try to understand their different roles and their main goals. Then they dig into the broad scenario of skills, knowledge, and abilities they need to conform to their daily motivations, tasks, and executions, all at the AA level that you’ve defined for the project.
Their approach is tackling users with differing abilities during their research, so they try to include them in the process as soon as possible. Don’t be afraid of this. If you enlarge your research spectrum, you find more and more specific needs. The goal is to ensure the designers can capture the differences and the similarities between the groups of users and get to an interface that serves them all.
Consider that different types of disabilities or situational limitations require a set of digital ingredients that enable users to complete their tasks. This may range from an age-related impairment that demands things like a larger font or higher contrast to a blind user who hears the content from a screen reader. Designing for accessibility and meeting the accessibility standards means that you have to design the application to make sure that:
- You write the content (headings, text, images, links...) in plain and straightforward language, structure it, and label it accurately.
- The user experience serves the target user base and is validated through usability tests.
- The resulting user interface is bulletproofed against the intended accessibility level, using automated tools and manual tests (with keyboard navigation and assistive technology like screen readers).
And remember that digital accessibility is not really a feature; it is not one user story, nor is it merely the designer’s responsibility. With all of this in mind, you and your team will be the right path to web accessibility that benefits everyone, not just the disabled.
If you want to learn more about how you can use low-code to deliver new, accessible applications that comply with the highest accessibility standards and guidelines, I invite you to check out the webinar How to Build Accessible Apps Fast using Low-Code.
Additional Resources
