Do you have a role in web accessibility? (Spoiler alert: yes)

Maybe you’ve heard about web accessibility on a podcast or heard a developer friend talking about it. Maybe you’ve thought to yourself you should learn more and start implementing web accessibility standards on your site. Maybe you were gung-ho to get started, but were stopped dead in your tracks when you hit the mass volume of difficult-to-read guidelines.

Let’s be honest, web standards for accessibility are overwhelming.

The WCAG 2.0 guidelines are lengthy and legal sounding. Add to that the varying levels of accessibility (A, AA, AAA), along with some gray areas in-between. Finally, the site design looks like a throw back to early web: an intimidating wall of text that goes on and on (which is technically accessible, but not a great user experience).

What’s a web developer to do? You want to help make the web more accessible, but you don’t know how to actually do it.

We have an accessibility problem when it comes to understanding accessibility. #a11y Click To Tweet

Web Accessibility Defined

Let’s start by getting on the same page about what web accessibility is. It’s more than just making your website look good on mobile or being screen-reader friendly. It’s about creating a website in such a way that anyone can access that content regardless of the device used to consume the content.

When sites are correctly designed, developed and edited, all users have equal access to information and functionality. – Wikipedia

Web accessibility in a nutshell: Make your website work for everyone. #a11y Click To Tweet

Understanding Your Role in Web Accessibility

In the rest of this post, I’ll break down the roles involved when it comes to making a site more accessible. Then, hopefully, you’ll get an idea of where you fit into the picture. Sound good?

Making a website accessible involves three basic roles:

1. Developers (people writing the code)
2. Designers (people making decisions around layouts, fonts, and colors, etc)
3. Content Creators (people writing and editing content for a website)

In the rest of this post, I’ll highlight some of the main accessibility concerns as they relate to each role.

1. Web Accessibility for Developers

Some accessibility features must be implemented at a code level. And let me tell you – it’s so much easier to start a project with this in mind rather than trying to tack on accessible features at the end.

These things include (but aren’t limited to):

• Skip Links – A feature enabling users to more easily navigate a page. Most helpful for keyboard-only users (imagine having to tab through the entire header and menu on every page just to get to the content). If you want to know more, here’s a tutorial on adding skip link navigation to a site.
• Keyboard Navigation – This means making sure that tabbing through a page goes sequentially from one link (or input) to the next, allowing someone to go through a page top to bottom without a mouse. Want to test it out? This article has some quick instruction (along with other helpful info).
• ARIA roles (Accessible Rich Internet Applications) – This has its roots in semantic HTML markup – explicitly telling a browser what something is, does, or the state it’s in (i.e. pressed, hidden, expanded, etc.). Here’s a great human-readable article if you want to learn more.

By the way, if you’re working with WordPress, there are plugins like WP Accessibility and Genesis Accessible (for the Genesis Framework) that can help you do some of the developer stuff without code. While they don’t get you 100% there, they’re a fantastic starting point.

2. Web Accessibility for Designers

Even though a developer will ultimately code out a design, it’s the designer’s job to provide a flexible user experience that translates across multiple environments and screen sizes.

So, what are the most critical design factors for accessibility? In a nutshell, they revolve around reading comfort and element context.

• Color contrast – Light gray text on a white background may look sexy, but oh it is hard to read. And then consider those folks with some form of color blindness – how it looks to you is not how it looks to them.  If it’s uncomfortable for people to read the text on your site, they’ll leave. And I’m pretty sure getting people to leave your site isn’t anyone’s goal. Here’s a quick tool for checking color contrast. A Google search will turn up plenty of other tools, too.
• Avoid tiny-ass fonts – Thankfully, web design is trending toward larger font sizes, so this one is an easy win. But to the previous point, don’t make it hard to read your content. The WP Accessibility has an option to add a little tool-bar to the front-end of your site that can let readers adjust the font size on the fly.
• Clear and consistent navigation – People are used to horizontal navigation menus across the top of websites. As a designer, you may think that’s boring (it kinda is) and passé (you’re right). Your points are valid, but here’s the deal: don’t get overly clever with the navigation or people won’t find it. There’s a reason why so many sites use a similar navigation structure. It’s great for usability.

3. Web Accessibility for Content Creators

Guess what? Developers and designers can hand off THE PERFECT site that meets all the right accessibility requirements. But what about the last link in the chain – the person writing the content? That person has the power to screw things up.

Encouraging, right?

Actually, don’t be discouraged. Writers have the opportunity to make huge accessibility improvements with just a few simple habits:

Content creators have the opportunity to (easily) make huge accessibility improvements. Click To Tweet

• Alt Text for images – If you’re using WordPress, adding Alt Text is super easy. Every time you add media to a post, you have the opportunity to enter Alt Text (short for Alternate Text).
• Proper heading structure – You know those H1, H2, and H3 tags? Their purpose is to communicate the hierarchy of your content. Don’t use an H1 where it doesn’t belong just because you need a bigger font size. Using headings the right way enables users to quickly skim your content and hone in on the most important parts (or the parts that interest them).
• Contextual link text – “CLICK HERE!” must die. Use link text (a.k.a. anchor text) to help the user know exactly what to expect when a link is clicked.
  

I wrote about these three tips in another post if you’d like more juicy details.

Which one are you?

Did you identify as a developer, designer, or content creator? It’s possible you overlap into all of those categories. Did you learn something here that you can apply in your situation?

If not, I did a crap job writing this post (feel free to say so in the comments and I’ll try to dig a little deeper). If so, my challenge to you is to go do ONE thing mentioned in this post today. That’s it.

You don’t have to be an accessibility guru or memorize WCAG 2.0 to start making your site(s) more accessible. Take baby steps and know that with each one you’re making the web a better place.

Get started by learning how to check your site for accessibility.