The Importance of Designing for Web Accessibility

We recently wrote an article titled “The Virtual Imperative: How No-Code Can Help Make Services Accessible to All,” which explored why businesses have a responsibility to make sure they are able to meet the needs of as many people as possible. The coronavirus pandemic has highlighted the accessibility enabled by digital tools, from acquiring marriage licenses to food delivery apps to addressing the challenges of a large complex problem like the Paycheck Protection Program. However, as interactions with businesses increasingly move into the virtual space, app creators must constantly consider whether they may be unintentionally excluding anyone with their designs. 

As Tim Berners-Lee, W3C director and inventor of the world wide web, once said: “The power of the web is in its universality. Access by everyone regardless of disability is an essential aspect.” Digital applications and web-based tools break down barriers to communication, interaction, and participation that many people face in the physical world—but when apps or websites are poorly designed, those barriers go back up. 

Not only do businesses have a virtual and ethical imperative to develop accessible applications, but it also simply makes good business sense. Studies have shown that companies with accessible websites and applications are more agile, have higher customer satisfaction ratings, and spend less on maintenance. The advantages of digital accessibility are clear, but what does designing an accessible application look like in practice? Here’s a short guide to help ensure that your enterprise applications are accessible to a wide range of users. 

“The power of the web is in its universality. Access by everyone regardless of disability is an essential aspect.” — Tim Berners-Lee

Designing With Accessibility in Mind

Broadly, disabilities with regard to vision, hearing, mobility, and literacy are the most relevant to web and mobile applications. According to the World Health Organization, at least 2.2 billion people have vision impairment or blindness, which makes it very difficult to see and use applications that are compressed onto small screens. A user with physical motor limitations might also have trouble navigating an application if using it requires precision tapping or clicking. At a very high level, app designers and creators should keep these broad categories in mind to catch any glaring issues of accessibility as they build their applications. 

Now, let’s get into some specifics of designing accessible applications.

1. Pay Attention to Color and Contrast

People with low vision, color blindness, and autism often have trouble differentiating between the text color and the background color on web applications. The W3C recommends a contrast ratio between text and its background of at least 4.5 to 1, but the ratio becomes more forgiving as you increase font size or make the text bolder. Designers should also avoid relying solely on color to showcase an action or to signify a response is needed (i.e., using green to signify “yes, this action is good” and red to signify “no, this action is not good”). Instead, supplement visual cues with clear titles and labels to get your point across.

To check your app’s color contrast, you can use online tools like WebAIM Color Contrast Checker or Color Oracle.

2. Use Instructions with Form Fields/Inputs

Placeholder text, which often appears in web applications as gray or low-contrast text placed inside a form (i.e., “first name here”), is one of the biggest accessibility design mistakes. It’s difficult to read placeholder text, and screen readers will usually skip over any non-label text. Instead, place instructional cues above the field.

3. Provide Alternative Text for Images

People who use screen readers rely on alternative text to hear elements on an app or website, and that includes images. Alternative text describes an image so that a screen reader can verbally explain what the web application is attempting to illustrate. When writing alternative text, describe what’s happening in the image and how it relates to the content of your app—context is important here. If the image is purely decorative, you can add an empty <alt> attribute that will instruct the screen readers to skip it. 

4. Use Straightforward Language

Literacy is often overlooked when it comes to accessibility. Functional illiteracy can affect a user’s ability to read the content on your site, and users on the autism spectrum might have trouble understanding idioms and figures of speech. Users with dyslexia might have trouble parsing large blocks of text. To make your app as user-friendly and reader-friendly as possible, use short, simple sentences supported by culturally recognizable iconography. You can also offer voice feedback as an option. 

5. Don’t Forget to Design for Different Screen Sizes

From a technical standpoint, your users will be accessing your services from different devices configured to their individual needs. Think about how page information will be displayed on screens of different sizes and how elements can be adapted to better fit a range of screen sizes. Think about how you can use the available space, text size, and line height to enhance readability and legibility wherever possible. Also, avoid spreading content all over the page or lumping too much information in one place.

6. Let Users Control Your Content

Videos and ads that play automatically can wreak havoc on screen readers. If you have video or audio content in your application that starts playing automatically, have readily accessible controls nearby that allow the user to start and stop it as needed.

7. Support Keyboard Navigation for Web Apps

People with motor disabilities, people who lack those precise motor control, and people who use screen readers often rely on keyboard navigation to easily explore content online. All interactive elements on your page should be organized in a logical and intuitive order, and tab order should follow the visual flow of the page for user-friendly navigation. However, make sure to also be mindful of the size of your navigation, the number of links, and the length of text. Wherever possible, aim to be concise. Tabbing through long menus can be taxing on people with motor disabilities, and lengthy links can be cumbersome for people using screen readers. 

Unqork Apps for All

These 7 easy-to-implement guidelines prove that designing for accessibility can become second nature for organizations that choose to prioritize it. The Unqork platform makes application development accessible to everyone by removing code skill sets as a prerequisite—so it’s only natural that we’d also want the applications you create to be accessible too. Visual interfaces, intuitive workflows, and drag-and-drop functionality democratize software development so everyone can participate. Modular components mean you can spend less time focusing on tedious code and more on how your applications will actually be used. 

For more information on accessibility and web design, check out these helpful resources. 

• W3C’s Web Accessibility Initiative

• WebAIM — Articles, resources, training for web accessibility  

• Accessibility dos and don’ts poster from Home Office Digital 

Want to learn more about how no-code can be used at your organization? Schedule a personalized demonstration with one of our in-house experts. Also, sign-up for the Unqork newsletter to keep up-to-date on the latest in the world of no-code.