News

1_JCxvynyoqfCCwDF86mf1Qw.jpeg

Big & small steps to improve your website accessibility

Website accessibility is a huge topic these days, and the sheer amount of information out there can be overwhelming.

Here, I’ve assembled some steps, big and small, to make your site more accessible incrementally.

Alt tags and title tags

This is low-hanging fruit though it’s time-consuming! Your image’s alt tags should be filled in with a relevant description of that image’s contents, and your page and post title tags should also be descriptive of their contents.

Keyboard navigability

This is a tougher one that’s not available out of the box (there is a plugin but it hasn’t been updated in three years, and that puts it out of the running for me). Automattic has a long list of accessibility additions to make to your code, but it may not be for the faint of heart.

Tabindex

When someone is tabbing through your site, you certainly want them to go through in the order you prefer; this is what tabindex is all about. This is particularly true of links, navigation and form fields. Gravity Forms allows you to set this, but otherwise it’s a code addition for each piece.

Skip to content link

This is an early fix, allowing users to bypass your navigation and skip to the main content of the page. Think about a user having to tab through every link in your menu before they can get to content—not a fun task.

H1-H6

Google certainly loves header tags, but not everyone uses them—or uses them correctly. Yoast has an excellent header guide with video.

Document structure

Now we’re starting to dive deeper into your site’s actual makeup. pages should be built in semantic HTML 5 (your web developer or theme author should be able to tell you this!). Indicate the site’s primary language as well.

Color and typography

Though your organization’s branding may call for muted colors, or ones that are of a similar tone, this makes reading for the color blind particularly difficult. WebAIM has an excellent color contrast checker to see how you fare.

Consider seeing a link that isn’t underlined, yet you can’t see a difference between the link color and the type color: You wouldn’t even know that you should click! Try to use other ways to also denote your links so they’re obvious.

An easy fix is using larger font sizes and variability so it’s easier to read. Use emphasis and describe graphics, videos and audio in their captions, rather than just displaying them. And don’t use images to replace text.

And remember how everyone linked to the text “Click here!” ? Well, many still do. But you shouldn’t. Link to text that is descriptive of the link.

While you’re at it, stop referring to things like “the sidebar at right,” as mobile devices will likely push it down.

Videos: An easy fix here? No autoplay!

WP Accessibility

Another option you may want to check out is WP Accessibility: it’s a plugin that covers some of these options, but as with any plugin, make sure that you check that it’s compatible with your setup and that you’ve backed up before installing. I haven’t tried this personally, but it may be a good solution.

Let me know if you’ve found solutions and other accessibility tips for your site.

Image via Medium.

Summary
Article Name
Big & small steps to improve your website accessibility
Description
Website accessibility is a huge topic these days, and the sheer amount of information out there can be overwhelming.Here, I've assembled some steps, big and small, to make your site more accessible incrementally.
Lisa GhisolfBig & small steps to improve your website accessibility
Share this post

3 comments

Join the conversation
  • Michael Bretherton - July 16, 2018 reply

    Great list, thanks. Great point about referring to “the sidebar at right”.

    Lisa Ghisolf - July 17, 2018 reply

    Thanks Michael! I’m sure there are more things we don’t think through like that…

Join the conversation

This site uses Akismet to reduce spam. Learn how your comment data is processed.