Now that you know why it is important to care about web accessibility, you might be wondering how to handle a project with accessibility requirements. It starts with the understanding that web accessibility is the groundwork for the goal of making a product for everyone, and 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, a series of articles about what to use and how to do it correctly is coming soon. But everything starts with an inclusive design. So, let’s talk a bit about it.

Making Your Team Care About Web Accessibility

It’s possible that you’re required to do this. 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 there’s always the possibility that you’re doing it because you know accessibility is great for your business.

No matter the scenario, if you need or decide to be compliant with Level AA of the WCAG, that’s something you communicate to the team from day one, because conforming to that or to any other standard will affect their deliverables. Each WCAG level has a list of rules to guide the designers’ and the developers’ work, and they can count on a number of plugins to design tools and automated validators to keep checking if they’re making decisions that comply to 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 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

So, 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 is 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?

Thomas sitting with his laptop in his couch

The standard tells you the foreground and the background colors must have sufficient contrast ratio. So, you must have at least a contrast ratio of 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 define the color scheme.

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 able to distinguish the colors red and green. How can you help him?

Color can be a useful way to convey information, but not the only way. Color perception can be different from user to user, just like their own abilities, and the designer needs to provide guidance and assistance so that users can identify the desired information. 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?

Elderly Edward checking his smartphone

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 hear about 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 on the left side of the field, and the designer must avoid using excessive space between the label and the field to guarantee the relation between the two pieces. The exceptions are 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 the field validation, 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 and seamless. 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 the 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 you can make this transition a little easier?

I bet you checked the alternate text in this image, right? Well done! In this image you can see Thomas sitting in his comfy couch, with a screen reading icon in a speech bubble coming from his laptop.

Screen readers make use of alt text for helping 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 starts 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. 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 web 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.

To learn more about the barriers to web accessibility and the guidelines and standards you’ll need to follow, check out our post on that topic.