7 Accessibility Issues You Probably Have on Your Site Right Now
Accessibility and inclusive design is the certainly a buzzword in web design, but the actual matter encompasses a subject that is much more serious than a passing trend. According to the Center for Disease Control (CDC), one in every four Americans have some type of disability which makes web accessibility a necessity rather than a nice-to-have element. The internet is practically a basic need for people today and having an inaccessible web presence doesn’t just create a bad user experience on your site for these users, it also creates barriers that discriminate against a significant amount of visitors.
There are many elements of your current website design that could be stymying access on your site. These features may seem harmless, and may even be useful in terms of digital marketing or visual appeal — but as we said before, these unassuming elements could put a black mark on your site for discrimination.
Here are some accessibility barriers that you might already have on your site, as well as some tips on how to fix them.
1. Insufficient color contrast
There's a lot of research out there that discuss the relationship between colors to things like first impressions, readability, attention, and emotion. But color also helps in providing visibility to elements of design. For people with low vision, reading disabilities, or color blindness, the right color contrast of site elements like text against a background is crucial for comprehension. The minimum accessible color contrast level that is required in accordance with the Web Content Accessibility Guidelines (WCAG) 2.0 level AA is a ratio of 4.5:1 for normal text and 3:1 for texts of 19 pixels or larger.
So before you think about the trendiness of placing light grey text against pale pastels, consider the large group of users who would be missing out on that content entirely and run your color palette through an online color contrast checker to test the contrast ratio between colors.
2. CAPTCHA
CAPTCHAs. Nobody likes them and most people have likely had their fair share of messing them up. But besides being an annoying security step to overcome, CAPTCHAs are far from a perfect system. Image captchas make no sense for people experiencing blindness or low vision, problem-solving captchas are difficult for those with learning disabilities, and those good old text captchas — well, they're pretty darn impossible to read even for those with 20/20 vision (was that a capital “i” or a lower case “L”?), which makes them just plain illegible for those with reading impairments and low vision.
Nevertheless, online security is an issue and we do need ways to verify that visitors to our page aren’t robots. So opt for alternatives instead. W3 lists a whole range of alternatives to CAPTCHAs, alongside their advantages and disadvantages so you can select the ones most appropriate for your site audience.
3. Modals
It’s always a bit disconcerting when a modal dialog box suddenly appears when exploring a site. Modals were once the ‘in’ thing for websites and a surprising amount of sites still have them to this day. They work much like old-school pop-ups in the sense that they are used to grab attention on a website and make information stand out.
While modals are quite effective at gaining engagement and conversions for sites, in terms of accessibility, they may not have the same effect. For one, modals are extremely visual elements so their purpose may be lost to those with visual impairments. The assistive technology and keyboard users used may not even detect the modal on the page. For example, a screen reader may not be able to read a modal box, and keyboard users will find that their keyboard functionality stays on the page in the background.
One way to resolve this is to assign the appropriate accessible rich internet application (ARIA) role to the modal that will be readable by assistive technology. For reference, the site BitsofCode has an extremely detailed breakdown of how to create accessible modals.
4. Placeholder text
Placeholder text labels are a popular design option for forms. They are texts that provide examples or instructions within form fields and disappears when users fill the field. It removes the structural clutter in forms and still provides information in a clean way within the text fields. However, in terms of accessibility, placeholder text isn’t all that it’s cracked up to be. They are usually done in a lower contrast to distinguish between them from filled-in information, which is a big visual barrier to some people with low vision or vision impairments. The disappearing nature of placeholder text can also frustrate users with cognitive disabilities and run the risk of being missed by assistive technology like screen readers.
If you really must use placeholders, pair them with labels outside the form field for consistent information. Implementing floating labels that shift position in the field is also another option. There are more ways that placeholder text can negatively affect your end-users than not, so it’s better to just stick to other ways of labeling forms to avoid a loss in functionality.
5. Parallax scrolling
In terms of modern web design, parallax scrolling has to be one of the more popular techniques out there. It is a scrolling feature on sites where the background images move slower than foreground images throughout the webpage, giving the page the illusion of depth, whilst creating a richer and more dynamic appearance.
As aesthetically pleasing as parallax scrolling can be, the feature does have some drawbacks. For people suffering from vestibular sensitivities (motion sensitivities or visual vertigo), parallax scrolling can be as debilitating as being spun on a playground merry-go-round; the effect causes nausea and dizziness. Vestibular sensitivities are more common in people above the age of 35, but those under the age group aren’t excluded as the disorder can manifest in people of all ages through injury or illnesses.
The idea of your site could be nausea-inducing isn’t great, but if you are absolutely in love with parallax scrolling, you needn’t despair. Like most elements of design, someone somewhere has discovered the solution to this problem. You can easily save your users the risk of dizziness by adding a warning in a clear and visible location for all users and provide them with the option to disable the function as the page loads.
6. Autoplay
We all know at least one site that does this; that one site that we go on unassumingly to read some article for intellectual fulfilment only to be blasted with an offending video ad or content. Autoplay videos and even audio, is just plain terrible. They startle you, break your concentration, and ruin your experience.
While autoplayed videos and audio can be annoying in general, they can be debilitating to the user experience of a person with a disability, especially those with disabilities related to attention and sensory processing, like ADHD. But having a mute button isn’t enough. When a video autoplays on a page, it pulls attention away from the main content of the page because there is this external element that is moving and distracting. Even gif images have been reported as debilitating. So if you plan on putting up a video ad or preview a video content on your site, just ... just don’t. If visitors want to watch a video, they will; no one needs it to be forced upon them.
7. Meaningful text on hyperlinks
It’s pretty commonplace to find hyperlinks buried in walls of texts, shown in their raw URL form or ones that have a passive call to action (CTA) like “read more,”“click here,” or something of a similar vein. While we all know exactly what these buttons mean based on the content that precedes it, people who use assistive technology like screen readers, may not. Screen reader users often skim web content by navigating between links or skipping the text entirely. The problem then is that if the links are vague and do not provide much context to where they lead, it won’t be much help. Links must have a clear description of where they are directing the user to provide context to a screen reader user. For example, a generic CTA like “click here” gives zero indication to where the link may be heading, but a CTA that mentions a specific action like “read the full blogpost” is more helpful.
There are some special exceptions to this rule where the addition of meaningful link text can affect the user experience of people without disabilities. For example, blocks of text that have been cut short to avoid clutter on a page. Much like a teaser section on the front pages of blogs and newsletters, there is oftentimes a “read more” CTA that invites the visitor to either expand the section or be redirected to another page. In cases like these, you can use the aria-label or aria-labelledby attributes to make these links accessible to screen readers. What these attributes do is allow you to add descriptive link text that can only be read by screen readers, making the text meaningful.
Curious about the accessibility of your website? Request a free web accessibility site scan today.
Digital Marketing Manager
