Inclusivity in web design is crucial for accommodating all users. This includes optimizing sites for screen readers, which assist low-vision and blind users use websites. Screen readers work by scanning the page for text and then reading — i.e. speaking aloud — the content to the user.
How many people need accessible websites? It’s estimated that 8 million Americans will have blindness or some other for of visual impairment by 2050. With so many people in the U.S. experiencing a disability, and a visual disability in particular, businesses have a direct need for website optimization that prioritizes accessibility — both for their users and for their workforce.
But not all websites are created equal, even when they’re designed with accessibility principles in mind. Screen readers can be challenging to accommodate on a highly-interactive site. As such, certain features can interfere with the many processes a screen reader has to perform, in turn negating its utility and preventing users with visual disabilities from fully experiencing a site.
Knowing what types of websites are not ideal for screen readers — and why that’s the case — is one of the first steps in building websites that do in fact meet the needs of visually disabled users. To that end, here are three types of websites that you should avoid if you want to create a truly inclusive and accessible site.
Websites That Lack Alternative Text
Alternative text refers to words and phrases that are entered into the HTML code of an image to describe what it is. For example, a stock photo of a bee on a purple flower will have alternative text that says “bee on purple flower.” And an image with text, such as “50% off!” layered over an image of sunglasses, will have alternative text that says “Sunglasses are 50% off. Click to shop.”
Screen readers rely on this alternative text to know what to speak aloud to the user. Think of it as a script that’s sole purpose is to convey the context of the image and its most salient features. Putting it into that perspective, it’s easy to see why websites that lack alternative text in one or more areas are problematic to screen reader technology. Without a script, screen readers have no way of knowing what an image is and thus no way of relaying that image to a visually impaired user.
How to avoid this mistake: Make sure that all non-text content on the page has alternative text accurately describing what it depicts. As for the alternative text itself, find the sweet spot between providing enough information and not providing too much information. You want the user to understand what the image is, but you don’t want to overwhelm them with information that’s not relevant to that understanding.
Websites That Use Popup Ads
In a 2016 article titled “Popup Ads are Terrible, and They’re Even Worse for the Blind,” Vice writer Rose Eveleth took a deep dive into the many ways that popup ads complicate — and in some cases, make unusable — websites that are being navigated by visually disabled users.
Here’s the problem: popups ads create noise on a page. For seeing users they’re just a nuisance, but for users utilizing screen readers they’re immensely disruptive. Sometimes they put forth a barrage of unnecessary words. Other times they haven’t been coded for screen readers at all and so the screen goes silent and the user can’t figure out why.
For some users, popup ads prevent them from being able to use a site at all, such as the interviewee in the Vice piece who noted that due to these types of ads she can no longer book flights through a certain airline.
How to avoid this mistake: Ditch the popup ads entirely. There are plenty of other ways to advertise to users on a page, seeing or otherwise, that don’t require a complete disruption in the format and user experience of the page. If you do use them, optimize your alternative text to make it very clear to visitors using a screen reader what the ad is about, succinctly and without a ton of unnecessary jargon.
Websites That Improperly Use Header Tags
A header tag, like alternative text, is HTML phrasing that screen readers can read aloud. They contain important contextual information about the title of page and the page content, making them as indispensable as image alt text for gaining a full understanding of what’s on the screen.
Screen readers also use header tags to determine the structure of the content — i.e. what each individual section is and where they fall in relation to each other. If header tags are missing, or if they don’t convey enough information, they make the page confusing for screen readers to follow, thus making them difficult for those who are using those screen readers to follow as well.
How to avoid this mistake: Always include header tags, not just for the title of a page but for each subhead that helps divide up the content and provides structure to the text. Be sure that they are in the proper order, and that they provide accurate context for the copy that follows. Putting care into your header tags is an easy accommodation, and can make all of the difference for a screen reading user.
As a general rule of thumb, always have a third party user investigate your site for full accessibility. It’s normal to overlook the consequences of things like popup ads and insufficient alt text when you yourself do not require them to interact with the page. Screen readers are not the only type of assistive device that blind individuals use to navigate the web, but taking care of the issues above will get you one step further to a site that is functional for all.