Doc Pop’s News Drop: 5 Ways You Are Breaking Accessibility On Your Site

Doc’s WordPress News Drop is a weekly report on the most pressing WordPress news. When the news drops, I will pick it up and deliver it right to you.

On this week’s News Drop video, we talk about 5 ways you may accidentally be breaking your site for some users.

Love WordPress news, but hate reading? My name is Doc and this is Doc Pop’s News Drop.

The web is a great resource for billions of users all around the world. It provides access to information, connects communities, and empowers people like me to feel a little more comfortable when going out for a walk in an area I don’t know that well.
It’s also become an invaluable tool for folks who otherwise might not have easy access (is there a better term for folks with disabilities?).
Many blind and visually impaired users rely, really on text-to-speech tools and other web standards to easily navigate a site for the information they need, but many web designers might not be thinking about this particular group when building a new site. Many times, even if users can read what’s on the page with accessibility tools, it is still difficult to navigate. It is important to be able to identify the structural and functional pieces of a website.

The World Wide Web Consortium has published the Web Content Accessibility Guidelines, or WCAG, with great advice on what standards to follow when designing a website.

This week we are going to talk about 5 ways your site might be breaking accessibility for visually impaired visitors.

You are embedding text in images

When starting off a web design, many of us think visually first, then work to design around those parameters. With the rise of image macros and highly stylized text over pretty images, many sites are making it impossible for text-to-speech readers to read. (show examples of famous quotes on top of images)

As an example, here’s a Kickstarter project where the entire description is written inside jpeg images. Other than the title and top blurb, visually impaired customers won’t be able to learn about the project.

It’s not just text on photos though. Anytime you post a screenshot of an email or other website, you might be inadvertently making key bits of text unreadable to visually impaired readers.

Using images with dynamic text isn’t necessarily bad, in fact it’s often a great way to spice up any post, but be sure to use text alternatives for this visual content.

In other words, be sure to provide title tags and ALT descriptions when sharing an image. WordPress’s editor makes this task so easy, there’s no excuse not to.

Using H2 Wrong

Heading tags, like the H1 and H2 tags, weren’t just designed for formatting. These HTML tags actually provide information on the structural hierarchy of a document.

Text to speech readers can identify these tags and provide a table of contents style list for visually impaired readers to use for navigating.

Using larger fonts, or different formatting, makes this task more difficult. Blind users are not able to see the visual changes regardless of how obvious they may seem to you.

This is something I know I’ve been guilty of in the past. I often felt limited by the look of H2 headings, so I’d use a larger or bolded font instead. Or I might have written really long posts without any formatting at all to break up the different sections.

I’ve since learned that using the proper heading tags, in particular using the H2 to break up sections, not only makes your site more accessible, but it also improves the layout in general.

You are picking style over functionality

As a visual artist, I totally get the appeal of picking a strong color palette and sticking to it, but it’s important to pick high contrast fonts that are easy to read. Many of us have ended up on one page or another and really needed to zoom in close in order to read the text.

If your font color is too similar to your background or you are posting dynamic text over images, you might be making some readers with low vision or color blindness struggle to read your content.

Even black text on white backgrounds can be difficult if you are using thin or extra light fonts. Especially at small sizes.

Try to stick to easy to read fonts, with high contrast backgrounds, and large sizes. I’m not saying everything needs to be 14pt bold extra-wide text, but be selective when using thinner fonts.

Sidenote, don’t specify the font-size in pt, or other absolute length units for screen stylesheets. They render inconsistently across platforms and can’t be resized by the User Agent (e.g browser). The WCAG says: if a base font-size is set for the document, use absolute size ([ xx-small | x-small | small | medium | large | x-large | xx-large ]) or relative size ([ larger | smaller ]) when defining the font size for a particular element within the document.

Your website is too hard to navigate

There are some really cool CSS tricks and styles to make navigating a page on your website a really unique web experience. I’ve seen some beautiful articles on Wired and _____ that really push the boundaries of how a story can be told, but if your page requires a mouse or trackpad to navigate, you might be breaking it’s accessibility.

Many users may be physically unable to use a mouse, so they’ll only be able to navigate your site via keyboard. If they can’t use a tab button to access various links on your site, or have keyboard traps, they will be unable to use your site. When I say keyboard traps, I’m referring to plugins, widgets, or Javascript tricks that won’t allow you to leave a section of your site without using a mouse. Certain applications like Flash are particularly known for trapping users into a section.

Luckily, testing your site for keyboard compatibility is easy. No tools required, just try navigating your site solely with the keyboard and see what sections may be impossible to navigate without a mouse.

You aren’t using ARIA landmarks

ARIA landmarks are attributes you can add to elements in your page to define areas like the main content or a navigation region. Some examples are Navigation, Form, Main, & Search.

When screen readers encounter these labels, like “Navigation”, the user will know they can use that section to navigate the main pages of a site. If they find the “Search” label, they’ll know they can use it to search your site.

By supporting ARIA landmarks, you are making your site more accessible to visually impaired readers. But even without these particular HTML labels, readers are still able to navigate your site as long as the text links are intuitive enough.

So you don’t necessarily have to use the ARIA “search” label for users if you simply have a text link that says “search” on it, but if your search bar doesn’t have any text and is just a form or some stupid magnifying glass symbol, visually impaired readers might not be able to use it.

So be sure to use clear descriptive text for your links or, even better, support ARIA landmark labels for a more consistent experience.

That’s it for this week’s News Drop, thanks for watching. For more information about web accessibility check out our articles on Torque Magazine by Josh Pollock and Nick something about accessibility. I’ll provide links to those, plus the WCAG standards for best practices. I’ve also posted a short interview video with Josh about accessibility on our Youtube channel (show a clip of him talking about stairs and ramps)

We are all trying to get more users to our sites. More users means more ecommerce sales, or more comments, or more whatever it is you are looking for. Keeping your site accessible isn’t just a good practice, it makes sure you are getting the most out of your online content.

What are your biggest challenges when navigating websites? Let us know in the comments below.