Annual WebAIM analysis of the top 1,000,000 home pages revealed that around 90% of websites don’t comply with some of the basic web accessibility guidelines. This means that errors were discovered in regards to the text, images, videos, language, links, and other elements found on any of their home pages.
Considering that as much as 15% of the world’s population is diagnosed with some kind of disability, this lack of accessibility is a critical issue that has to be addressed ASAP.
What is web accessibility?
An accessible digital product offers content that can be easily consumed and operated by anyone. Building an accessible solution means you are creating an experience suitable for users who cannot be categorized as “typical” but those who struggle with a type of disability or impairment that prevents them from interacting with your product the way you would expect them to.
However, web accessibility doesn’t only cover permanent or temporary physical constraints. In fact, any digital product that cannot be used as intended (for whatever reason) is considered inaccessible. This could include web content that is not available in users’ area, the font that is too hard to read, elements overlapping on a smaller screen, buttons too small to interact with, and similar issues.
Web Accessibility Standards
To address these issues, efforts were made to build a set of web accessibility standards, guidelines, and rules that would make digital technology highly inclusive. As a result, several countries have established their own web accessibility laws and regulations, with the most notable ones being the UK’s Equality Act, the US ADA (Americans with Disabilities Act), and the European Accessibility Act established by the EU.
Further worth mentioning are the Web Content Accessibility Guidelines (WCAG) that primarily revolve around 4 main principles which state that accessible content should be: perceivable, operable, understandable, and robust.
Finally, one of the greatest producers of web accessibility standards is The Web Accessibility Initiative (WAI) whose mission is to aid developers in building digital products that will be adapted to the needs of all users. One of their most notable products is the ARIA standard (Accessible Rich Internet Applications) that streamlines the use of apps via assistive technologies.
Accessibility in digital health care
Accessibility is a particularly important subject in the healthcare industry. This is mainly because the telehealth movement is focused on finding new ways to further improve the opportunities provided by digital health for users who have difficulty operating digital devices due to a permanent or situational disability.
The main idea is to place patients at the heart of care by enabling them to manage all aspects of their health via a website, mobile app, wearable device, and other digital devices to get in touch with healthcare professionals. This would allow them to connect with their physicians and pharmacists easier, keep track of their prescriptions, manage doctor’s appointments, all in an effort to achieve better clinical outcomes.
Types of disabilities to consider
While most of us associate accessibility in healthcare with opportunities created for people with permanent disabilities in mind (vision, hearing, and speech impairment), the fact is - a person may experience one or multiple disabilities at once that prevent them from using a digital product as it was intended to. With that in mind, when we talk about disabilities, we may refer to ANY of the following:
- Visual impairment
Users who have poor vision or cannot see at all commonly rely on a braille display, text-to-speech technology, screen magnifier, browser zoom, or high-contrast mode (of the operating system, browser, or website). Most visually impaired combine several of these options at once.
- Physical impairment
Motor (dexterity) impairments refer to any user who cannot use a mouse or a keyboard but requires a voice-control option or an eye-tracking device. Note that any user can become temporarily physically impaired due to an injury, which is why it is imperative for a digital solution to not rely solely on a pointer-based user interface.
- Hearing impairment
To accommodate people with hearing impairments, it is necessary to include captions and transcripts for every video. This enables them to immerse themselves in the content, sound or no sound. If you think about it, captioned content is the preferred alternative for the majority of users. It is easier to engage with, boosts comprehension, and makes interaction with video content possible at any time.
- Cognitive impairment
Cognitive impairments like dyslexia, autism, or ADD may also dictate the approach to design and impose a simpler interface with as few distractions as possible since people with cognitive impairments don’t always understand what is expected of them.
- Speech impairment
People who are unable to speak are incapable of leveraging voice-controlled devices and require an alternative means of operating.
Firstly, seniors are likely to experience one or more of the previously listed disabilities, since they often come with age. Secondly, they are at a high disadvantage due to their lack of digital literacy skills that prevent them from taking full advantage of (health) technology. Because the desire to embrace telehealth advancements is present among seniors, it is necessary to focus our efforts on developing tools that will boost accessibility and their confidence when it comes to using digital health services.
- Poor financial situation
Socioeconomic hardships are also considered a type of disability as they prevent people who are in a poor financial situation from obtaining up-to-date devices that features the software necessary to run a telehealth application.
How to create accessible digital products
It’s crucial to point out that web accessibility provides ease of use for a wider range of users, not just those diagnosed with permanent disabilities. The fact is, the web has become a necessary component in healthcare, entertainment, education, employment, commerce, and many other areas. A web designer’s and developer’s job is to ensure that all users have equal access to the information, regardless of how specific their situation may be.
Most broadly speaking, inclusive websites and apps should leverage (at least) the most common assistive technologies:
- Screen readers that read the contents via braille output device or audio output. Braille, a tactile writing system, is especially beneficial for visually impaired and deafblind, as it converts the content to braille characters and enables readers to interact with all elements on the screen. Today, a variety of screen readers are available via open-source software like NVDA, Ocra, LSR, and others, built to accommodate different operating systems.
- Alternative hardware navigation like rollerballs, trackballs, vertical/upright mice, foot-operated mice, eye trackers, and other technologies designed to accommodate specific motor disabilities.
- Speech recognition software that enables voice control over a digital device. While virtual assistants are getting smarter as we speak, we are still perfecting their capabilities to make them fully able to accomplish all users’ commands.
- Screen magnifiers that help visually impaired users zoom in when the content is too small to be read and interact with.
The bottom line is, accessibility may just be the key component that converts your leads into users. So what can you do to develop and design a universally accessible product?
Top 3 pieces of advice for developers
Developers have a great responsibility to include web accessibility practices in everything they do, by default. It is of utmost importance for developers to keep in mind the features they plan to build and think how those features will be used by users in different circumstances. It goes without saying that mobile accessibility is imperative, but what else can you take into consideration?
Additionally, think about enabling multi-layer event handlers that would serve as a fail-safe to the standard ones intended for a mouse-operated interaction (eg. mouseout, mouseover, dblcklick). Because some of the users will require different event handlers for the same function, they need to be given alternative access to content via any external input device they are using.
Finally, those who are building React-native apps and want to make them operable by people who use accessibility services should use an accessibility API that works with the platform accessibility API both on iOS and Android devices. An available properties worth giving a second look at include:
- accessibilityLabel attribute
- accessibilityHint attribute
- accessibilityRole attribute
- accessibilityState object
- onAccessibilityTap attribute
2. Screen size flexibility
Responsiveness has been the buzzword for several years now, meaning that your websites should be designed to adequately resize based on the device people are using to access your pages. For this reason, our advice would be to implement a meta viewport tag that gives browsers instructions on how to scale and control the dimensions of a certain page.
<meta name="viewport" content="width=device-width, initial-scale=1">
But don’t forget that your visually impaired users will want to further zoom in on your content. To let them do so and still be able to interact with the content, set maximum-scale=1 or user-scaleable=no.
Finally, if you opt for a flexible grid, your design will recognize whether the reduced space is due to screen size or because of a greater zoom level. It will appropriately rearrange textual and visual content on the page to keep the usability at the highest level.
3. Diverse operating system access
Don’t automatically assume that all your users will attempt to access the solution that you build using the latest tech wonder. Apps and software that you build should be compatible with as many iterations of operating systems as possible. Take for instance the Android market statistics that clearly show that only around 20% of users are running their mobile devices on Android 11. More than 30% are still using Android 10, while Android 9.0 Pie is active in 16% of devices, and almost 9% are still running their phones and tablets on 8.1 Oreo.
Top 3 pieces of advice for designers
First to debunk an age-old myth: no, making an accessible website or an app doesn’t mean that it will necessarily be a visually unappealing one. Following the defined universal design standards can help you create an accessible product that is still in line with the company branding, unique, and attractive.
1. Optimal tap targets
Take into consideration a large number of people who will interact with your content on a touch screen and make the tap triggers large and easy to activate. By bringing the tap size up to 48px and keeping the elements far apart, users are less likely to hit surrounding links by accident. This will produce a more positive experience for everyone, especially users with motor impairments.
2. Smart color choices
Color contrasting refers to the use of shades from the opposing segments of the color wheel, in that way providing enough contrast between different elements. To measure the contrast level, we use the “levels of conformance” grade system and, according to the WCAG 2 standard, the minimum acceptable contrast ratio is 4.5:1. Note that this doesn’t mean that you are limited to the use of only contrasting shades through your website or application. Simply aim to achieve the highest level of contrast in crucial areas (like logos, headlines, and text).
3. Alternatives content elements
Designing with accessibility in mind requires close cooperation with the content department to ensure that all visual and audio elements come with the corresponding video transcripts and other textual descriptions. As previously mentioned, captioned video proved to be far more engaging and captivating than its non-captioned counterpart, and not just for people with permanent disabilities. Truth be told, users are quite reluctant to play videos with the sound on in the majority of life situations.
Don’t forget to test the accessibility of your digital product
Testing to determine whether the product you developed is accessible or not can be performed manually. This would include:
- Determining whether Page titles accurately describe individual web pages
- Scraping the website to see if all images have a distinct alternative text (alt tags)
- Ensuring meaningful heading hierarchy on all website pages
- Creating navigation that reflects site architecture
- Highlighting links in a contrasting color to easily discern them from the rest of the text
- Zooming that keeps the text and other elements proportional
- Checking to see if all forms are accessible via keyboard and alternative input technology
To determine more accurately whether a website or an app meets web accessibility guidelines, developers are advised to scrape the most practical evaluation tools and select the ones that best match the specific project requirements.
It is highly unlikely for you to achieve 100% web accessibility. Unfortunately, some techniques used to address people with one type of disability could make it hard for others to use the app. This means that different accommodations are needed to boost user experience, with accessibility preferences satisfying the needs of a limited number of users. Web accessibility boils down to making the most positive and optimal experience for the broadest user base possible.
Here at Inviggo, we pay close attention to our clients’ and users’ feedback to gain first-hand insight into their challenges. Our experience with building telehealth products enabled us to further recognize the need to follow web accessibility guidelines and are, therefore, ready to tackle any new telehealth challenge that comes our way.