Did you know that just by following a few simple guidelines while creating your applications, you could provide people with learning disabilities and cognitive differences a better web experience.

The WCAG has 7 design patterns that can be easily followed to assist users in understanding what things are on a page and how to use them. The goal is to better meet these cognitive accessibility needs.

Design Patterns:

1. Make the Purpose of Your Page Clear

Every user will need to know the context and the purpose of the page. You can help your users by using a clear title. Use headings that sum up the purpose of the content. This help show people who are easily distracted, have ADD/ADHD, or impaired attention and memory what the page is about, as well as, what they are doing.

2. Use a Familiar Hierarchy and Design

This can be achieved by simply sticking to a standard layout, placing elements where users would normally expect them to be located, and abiding by visual hierarchy. Users expect the same patterns used in popular sites. There is no need to re-invent the wheel. By sticking to familiar practices, like a button that looks and functions as a button and standard styled underline links, users will be able to better locate and recognize the desired items to interact with. This also helps to lessen the feeling of being overwhelmed or lost that some users may experience by unexpected layouts and rearranged content hierarchy.

3. Use a Consistent Visual Design

Consistency is key! Be consistent in your design themes, from the appearance of links and buttons to icons and font styles. It takes users time to learn new designs and to recognize various elements, so it is to everyone's benefit to continue the same theme throughout a sites pages. Plan out the design before adding any content. What colors will you use? Where will text blocks appear? The cognitive load for certain user can become too much and impede their ability to complete tasks due to not sticking to a predetermined design course.

4. Make Each Step Clear

There are users who can easily forget what they were doing, get distracting from their current activity, or simply lose focus. This is why it is important to provide indicators to users about their progress. This information helps users to orientate themselves inside a task or the site. When you are able to give the information about the steps needed to complete a task, users can decide if they can successfully finish. Use headings to inform a user where they are inside the content or breadcrumbs to indicate the past, current, and future steps in a process.

5. Clearly Identify Controls and Their Use

Controls are the parts of a site that do an action. A checkbox, link, and a button are all controls. You want users to recognize and understand how to use these controls. Some users have trouble when controls have a different shape, look, or color than they have used before. This may cause a user to struggle while trying to interact and leave the site. This can be avoided by using typical and easy to find controls on the page. Make sure the controls are easy to identify, understand, and use regardless of how a user uses the page.

6. Make the Relationship Clear Between Controls and the Content They Affect

Imagine being on an e-commerce site and finding an item you'd like to purchase. You use a button that is labeled "add to cart" located below the item you want. Suddenly, you are navigated to an unrelated external page...whoa! that's not what you expected. The relationship between controls and affected content should be clear and unambiguous. If a control on a page operates in an unexpected manner, it can be hard to tell what it will affect and what it will not. Some users with cognitive or learning disabilities may not be able to work out what to do, become overwhelmed, or stop interacting all together. Good practice would be to associate controls with the section they control, place the control inside the section, and have clear borders around the section.

7. Use Icons that Help the User

Some user may rely on symbols to understand content and navigate to content they need, due to different cognitive abilities. Symbols also help people who struggle with language and attention to navigate content. Help assist these users by utilizing common icons, images, or symbols with important content ,like a button or section heading.

When we build with accessibility first, everyone benefits.

Resources :

Intro to Web Accessibility

Mozilla - MDN Web Docs