Apply These Four Principles to Achieve Accessible Web Development

Summary: Learn more about these four principles to make your product more accessible: according to the web content accessibility guidelines (WCAG), experiences must be perceivable, operable, understandable and robust. WebViewer is a great way to make documents more accessible in your product.

According to the CDC, one in four adults in the US have a disability. While not all disabilities inhibit web access, the digital landscape is rapidly evolving to recognize and accommodate the diverse needs of users. Governments around the world are further spurring these changes by introducing new regulations such as the upcoming European Accessibility Act (EAA). The EAA will require most digital products and services to meet accessibility requirements or face steep penalties.

So, how can web-based products operating in global markets ensure compliance to so many global standards? The answer is surprisingly simple: the vast majority of governmental regulations are based on the Web Content Accessibility Guidelines (WCAG), which are developed by the world wide web consortium (W3C) and set out specific guidelines following the four principles of accessible design. In this article, we’ll go over the principles to give you an idea of how to achieve WCAG compliance.

For parts of your application that are difficult to build in-house, it’s often advantageous to go with a SDK like Apryse’s WebViewer which already passes these tests, ensuring you reach accessible audiences and remain compliant.

WCAG’s four principles of accessible design state that web experiences must be Perceivable, Operable, Understandable, and Robust (POUR). Each principle ensures a broad coverage of accessible users are able to use your application, and the principles work together to accommodate the widest possible range of user needs.

Many web experiences, such as this blog article, serve the purpose of presenting information to users. This can include text, images, and videos, but information is also encoded in ways you might not think about, such as colors, layout, and icons.

Perceivability ensures users can access your information. For example, users with visual or auditory sensory issues require considerations such as closed captioning, appropriate contrast levels, or related items depending on the type of application.

Using WebViewer as an example, version 11 improved contrast ratios between text, icons, and their backgrounds so that it was appropriate for users with low vision or color blindness.

In addition to presenting information, web experiences which take user input can also present accessibility issues. Operability ensures users can navigate your application without problems. User interfaces shouldn’t rely on just point-and-click navigation, but also support keyboard or touch.

Using WebViewer as an example again, users can rely on enhanced keyboard support to not only tab and arrow key through the UI, but also follow a logical navigation structure. Also known as a breadcrumb trail, when a user opens a modal, such as a print menu, closing the menu with the escape key should return them to the position they were in before, much like following a breadcrumb trail would take you in a linear path back to your point of origin. 

Making navigation behave how a user would expect it to promote inclusivity for users with mobility impairments that rely on alternative input devices.

Clear design empowers users who might have cognitive impairments or strain from heightened cognitive loads. Understandability ensures more users can interpret your web application clearly. The ability to perceive and operate an experience isn’t enough if the user isn’t able to understand tools, labels, or content, for example. 

Webviewer includes improved screen reader support to support understandability. Screen reader support by itself would make an application more perceivable, but we’ve improved it to be more descriptive and add contextual cues to expand its understandability. For example:

These cues are important for users to know the context of which information appears, and add to its understandability.

By following the previous three principles, developers and designers can ensure their product is accessible for users with a wide range of needs. However, without the final principle, it could still fall flat.

Robustness ensures that your web application is functional over a variety of devices and technologies. Unfortunately, accessible audiences aren’t all using the same browser on the same device. To provide an accessible experience, the accessibility features you’ve added need to support many browsers and technologies. This doesn’t just support diverse groups of users, it also future-proofs it against common accessibility needs in the future.

For example, people who used Netscape didn’t know Internet Explorer would take over, and people who used Internet Explorer didn’t know Google Chrome would then take its place.

WebViewer addresses this by ensuring compatibility with all modern browsers and continuously developing support for an array of technologies and integrations.

Committing to accessibility doesn’t just make your application more inclusive or compliant to growing regulations, it puts you at the frontier of modern web development. Apryse’s commitment to accessibility allows us to help shape the future of web interactions, and we encourage developers and organizations to create web applications that work for all audiences, to not only expand the reach of your products to a larger user base, but also to help create a more inclusive web for all.

Interested in learning more about Apryse? Learn more about WebViewer and explore its extensive documentation.