Accessibility

3 Types of HTML Elements That Are Bad for Screen Readers (And Why)


3 Types of HTML Elements That Are Bad for Screen Readers (And Why)

Inclusivity in web design is crucial for accommodating all users. This includes optimizing sites for screen readers, which help low-vision and blind users interact with 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 a visual disability 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 inclusive, even when they’re designed with accessibility principles in mind. Accommodating screen-readers on a highly-interactive site is incredibly difficult. Certain features 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 causes a website to jam up a screen reader 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 features to prioritize in order to create a truly inclusive and accessible site.

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.

Popups

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.

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.

Don’t use popup ads, got it, bit it isn’t that easy. Popups aren’t always for ads: menus, message boxes, and alerts all use popups. Refactoring core elements of your site is no easy task.

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.

We suggest doing everything you can to limit, or remove, the use of popup alerts and messages as well. If you do keep these elements on your site, optimize the popup’s alternative text to make it very clear to visitors using a screen reader what the popip is about, succinctly and without a ton of unnecessary jargon. Here are some other best practices for accessible popups:

  • Add a label that the link will open a new window/tab.
  • Do not disable scroll bars and resizing options—readers with low vision may need to resize windows to accommodate larger text.
  • Make sure the popup works, or the relevant info is accessible, even if JavaScript is disabled.

Use Header Tags Correctly

Screen readers rely on HTML header tags (H1, H2, H3, etc.) to navigate a page. 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 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. Do not stuff header tags with unnecessary code related to styling and format. Don’t use header tags just to make ‘big, bold type.’ A screen reader can’t tell what your intention is for a sighted user.

Always test 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.