Get Closer to WCAG Compliance with These 5 UX Design Tips

The decade between 2010-2020 witnessed the rise of the app-based economy and eCommerce. Consumers these days use the internet for everything from hailing a cab to ordering groceries from the local supermarket. Accessibility has therefore become a central issue when it comes to UX design.

In the United States, a slew of businesses have been increasingly slapped with lawsuits for their non-compliance with the Americans with Disabilities Act (ADA). In 2020, 10,982 ADA lawsuits were filed in court.

From a business’ perspective, the ADA is a confusing law since it doesn’t provide a structured outline for how to make websites accessible. This explains why courts have directed non-compliant businesses to adhere to Web Content Accessibility Guidelines or WCAG 2.1. They were published by the Web Accessibility Initiative of the World Wide Web Consortium, the main international standards organization for the Internet

Ensuring WCAG compliance can be a daunting task, but here are a few simple steps to get you started on your journey to full compliance.

Pay attention to content structure

Designing content structure is an involved task, but WCAG guidelines offer designers straightforward solutions. For starters, all link texts should identify the purpose of the link. Using anchor text such as “click here” or “more details here” is inadvisable as it doesn’t reveal the link’s purpose. Designers need to be careful when using color as well and should avoid specifying important information via color alone.

A combination of text, colors, and other graphic design elements should be used to convey information to users. Navigation elements often repeat on multiple pages on a website and UX designers should ensure that the order in which they occur remains consistent. The components you use should also be consistent, whether in terms of design, color, or branding attributes.

Your content should not rely on sensory characteristics such as shape, color, size, or sound to convey information or instructions. A combination of them is ideal. This helps people who are blind or have low vision process information equally.

Developing a style guide or pattern library will help you achieve this easily. Consistency in design helps people with reading impairments identify functionality easily. This applies to text and non-textual content. Page headings and titles must be informative and descriptive. They should convey relevant information about content to a user immediately within a few words.

Pages should also be accessible from more than one place. For example, a product information page should be accessible via the homepage and a search of the product on the website. The only exceptions to this rule are pages that are a one-off part of a process, such as shopping cart checkout pages.

Lastly, all of your content’s orientation should not be fixed in either portrait or landscape mode unless the context demands it as such.

Ensure keyboard compatibility

One of the most important features UX designers have to take into account is that all functionality must be usable with the keyboard. The focus state of input elements must be clearly defined and easily identifiable. This makes it easy for users with visual and motor impairments who don’t use a mouse, only a keyboard, to navigate the website.

Define single key keyboard shortcuts and avoid conflict with browser and screen reader shortcuts. While defining these shortcuts helps, you must also make sure there’s an option to disable them since they create conflict with speech input systems. Offering a way to disable or remap them is essential.

Keyboard-only users typically navigate a website using the tab key. The design focus should move in a logical and predictable order so that users with technology that reads content aloud are catered to.

Another important design element is to offer a link to skip to the main content before the header. This means keyboard users can navigate to the content they need with fewer clicks. Lastly, users must be warned before your website opens new windows to display content. Cascading windows can be disorienting for users with screen readers.

Present content in a logical and predictable order from one page to another so that keyboard-only users can navigate through them easily. When testing your website, make sure you can navigate through it using just your keyboard.

Layout and visual design

Your website’s layout must be simple and linear as much as possible. You should not have to hide or screen content based on the website’s layout orientation. Your content and language must be free of idioms and must clearly explain what the objective of every design element is. This will assist people with dyslexia and visual impairments.

WCAG 2.1 also offers UX designers with typography advice. Line spacing should be 1.5 times the font size and paragraph spacing should be twice the font size. The space between letters should be at least 0.12 times and word spacing should be 0.16 times the font size. The smallest size that the font can be is 10.

UX designers should also adhere to strict color contrast settings of 4:5:1 against the website’s background. Graphical objects and large scale text should be within a 3:1 ratio to the background. The only exception to these requirements is the logo or brand name. In these cases, there is no minimum requirement.

When testing the website, you must include use cases that account for disabilities and other impairments. It’s helpful to conduct user testing with a sample that includes people with disabilities. You must also use assistive technology such as screen readers, native app screen readers, and so on.

One of the most controversial design elements in the accessibility world is the use of Captchas. You must offer alternative login features or text alternatives. Make sure the text alternative clearly describes the actions that users must take and that it conveys information as clearly as possible. Uses must always have the ability to review, confirm, and rectify information before submitting it.

Touch target design and animations

Touchscreen navigation is the norm now, and designers have to make sure there aren’t any overlapping elements in their designs. As a best practice it is recommended that larger sizes are used to reduce the possibility of unintentional activations.

Users with hand tremors or low vision will find it easier to use websites with these features. These design cues also allow people to use their devices with one hand and in a variety of situations, such as when traveling on crowded public transport.

Users susceptible to epileptic seizures or other photosensitive disorders have to be catered to. Photosensitive seizures are often triggered by flashing/ flickering lights. WCAG 2.1 specifies a three flashes per second or below threshold when defining animation guidelines.

Aside from flashing content on screen, other elements that might cause seizures, such as design elements changing color constantly or content that has fast-changing stripes in it, must be avoided.

Ensure responsive design

The layout of your website must be consistent and device-independent. For starters, the language you use must be as clear as possible and steer clear of complex idioms or phrases. These guidelines are in place to assist users on the autism spectrum and those with low vision.

Alternate text in images must convey the content within the image and its context. Screen readers use alt text to convey information to visually impaired users. Content that scrolls, blinks, or updates must have the ability to be paused to assist users with limited cognition.

Device-dependent interactions such as hover functionality should not be used to convey information or to complete tasks in any way. Often, this goal isn’t achievable. In these cases, the hover functionality should be obvious enough for users to perceive it and dismiss it without experiencing any disruptions in their browsing experience.

Many websites these days have motion dependent features. Your website must offer users the option to access this content via an alternative user interface or the option to disable this feature. Some users might be unable to perform certain motions such as shaking or gesturing while others might be accessing the internet via devices that don’t allow for such motions.

For example, they might be unable to gesture because their hands are occupied with the accessibility assistant device of their choice. Providing motion-relevant alternatives helps these users have an enjoyable browsing experience. The same guidelines apply to complex pointer gestures such as pinching the screen to zoom in and widening fingers to zoom out.

These functions should be accessible via the keyboard’s “+” and “-” keys as well.

Better UX for a better Internet

Accessibility is one of the most important characteristics of a website these days, and WCAG guidelines provide businesses with an easy path to follow when designing web assets. UX designers are at the center of this change and act as a glue between the various design-related aspects of their organizations. The above tips will help you begin your journey to ensuring your business caters to users of all abilities equally.