Code4Lib Presentation: We Are All Disabled! Universal Web Design Making Web Services Accessible for Everyone

This is the write-up for the Code4Lib 2014 version of the presentation. The write-up of the  hour long version from last week is also available. The Code4lib version however was made with the Code4lib community in mind. There are slight differences from the actual presentation, primarily having removed the questions I asked the audience and in a couple of cases, adding further notes or source information.

Have some slides:

Introduction

Insert the usual personal introduction.

We’re here this morning to talk about making the web accessible, so…

What is web accessibility?

Most commonly, web accessibility is defined as meaning

Web accessibility means that people with disabilities can use the Web. – W3C Web Accessibility Initiative (WAI)

Why Should You Care?

People with a disability are a minority, and not all of them need special consideration for web accessibility, right?

A Lot of People

While that may be true, you might be surprised that the number of people with a disability is larger than any one group of ethnic or visible minority in their respective countries.

<aside> The Proof

According to the last US Census in 2010, 16.6% (29.5 mill) of adults (21-64) had a disability.

For the Canadians, Statistics Canada

Based on 2012 data from The World Bank, that’s approximately 2.4 million people.

USA (2010): Although comparing the total population (instead of an age group), 18.7% of the total population had a disability, and the largest ethnic minority was Black or African American at 12.6% of the total population.

Canada (2006): Using the data from the last census, 11.5% of total population ages 15-64 had a disability, and the largest visible minority was Chinese at 4% of total population ages 15-64.

</aside>

Guidelines & Legislation

If that’s not enough, how about avoiding any legal issues?

United States

In the US, The Rehabilitation Act has a couple of particularly relevant sections stating that no one with a disability can be excluded from a federally funded program and detailing what web accessibility guidelines need to be followed.

Many states also have their own legislation that either simply establish the same regulation for anything state funding, or might extend the regulations further.

Canada

In other countries, the situation may differ.

In Canada for example, Canadian legislation specifies that we need to follow the Web Content Accessibility Guidelines (WCAG), which has many more guidelines to adhere to.

See my blog post, Alignment of WCAG with Section 508 & Canadian Legislation, for more details.

Organization & Personal Level

Your institution might also have a related mandate or policy.

Perhaps, you just want to help.

How Do We Develop for People with Disabilities?

Okay, so we’ve decided that people with disabilities need to be taken into consideration. Now what?

The most commonly thought of assistive technology that people think about when making website accessible is a screen reader, but it is not the only one.

If you wanted to make a list of all the assistive technology that you need to consider, you first need to define the term.

What is Assistive Technology?

an umbrella term that includes […] devices for people with disabilities […] by enabling people to perform tasks that they were formerly unable to accomplish, or had great difficulty accomplishing, by providing enhancements to, or changing methods of interacting with, the technology needed to accomplish such tasks. – Wikipedia

To summarize, it’s a device that helps a person accomplish a task.

There are many different types of assistive technology, such as (each example with relevant image)

  • magnifier,
  • the browser’s zoom feature, and
  • a pointing device that is not a mouse.

But wait, if assistive technology is simply technology that helps a user complete a task, then you also need to take into consideration:

  • keyboard only users,
  • or people not using either a mouse or keyboard.

So here’s a quick question: how many of you regularly use a touch screen? That includes touch screen anything: phone, tablet, monitor, SmartBoard.

If a keyboard, mouse, or touch screen helps you to accomplish tasks, then we might say

All Technology is Assistive Technology – Sara Hendren @ablerism (source article)

Please stop and think about this for a moment, about how it applies to your work and your organization. How might this one statement change the development process for websites, technology projects, and other services.

Hendren goes on to make another point, while not new, is an important one:

There is no average or normal user.

We are not developing for a specific person or piece of technology, we can’t. There are too many potential devices (image: mobile devices) and ways people are using devices to do that. We aren’t even necessarily developing for people, but for potential situations.

The Solution?

“Move away from the approach of building separately for disabled users, and concern yourself with creating clean, beautiful, usable, and accessible websites.“ – Debra Riley-Huff @rileyhuff (source article)

Universal Design

“universal design is the design of products and environments to be usable by all people, to the greatest extent possible, without the need for adaptation or specialized design.” -Ron Mace

On a side note, you will see similar terms, such as design for all. While a separate term referring to the design philosophy, it covers the same idea.

The term was originally coined by the architect, Ron Mace.

One of the most well-known examples is the wheelchair ramp (image). I’m certain everyone can think of at least one other group of people that use ramps besides wheelchair users.

Many places now call it an “access ramp” or just “ramp” to reflect its greater, universal application.

Many parts of the website can be thought of the same way. Looking closely at the Web Content Accessibility Guidelines for example, we can see many guidelines that would apply not only for users with disabilities, but all users.

Some examples include:

  • having consistent navigation,
  • having a meaningful order to content, and
  • providing multiple ways to discover content e.g. links, search box.

So, while the principles are created with physical space in mind, they can and have been adapted for web development

Putting Universal Design into Practice

At this point, let’s make the assumption that we think universal design is a good idea, and continue with the idea that you are redesigning or designing a new website.

You still want to go through all the usual development methods:

and whatever else you deem necessary.

The idea here is that you want to keep your users the main focus and that you ask your users again and again, at all stages of development. Later on, doing usability testing with mockups and prototypes.

Creating the Website

Once you have an idea of what will go into your website and how it might be used, you of course want to create your website.

Considering that you want your website to work across devices and browsers, the key strategies you should be applying are:

I won’t go into detail on any of these practices, because each of these are sessions in themselves. Instead, I want to turn to some details that are more specific to web accessibility.

Accessibility Considerations

Media

I think most people by now are familiar with alt text. Alt text is specific to images, but all media should have a text alternative.

Related to media, nothing on your website should ever autoplay.

Autoplay can lead to issues for those with specific medical conditions. Needless to say, you also want to avoid anything blinking or flashing.

You might be thinking that nothing on your organization’s website autoplays, it doesn’t mean that you don’t have anything that autoplays, but what about that carousel?

I recently wrote a blog post titled, Death to the website carousel, inspired by the ‘Should I Use a Carousel?’ website because library and other websites are rife with carousels or image sliders.

Keyboard Accessibility

Just one example of the problems with carousels, they are frequently not keyboard accessible. Try changing the image using the left and right arrow keys and see if you get the previous or next image in the carousel.

A website should be fully keyboard accessible, meaning that a user should be able to properly navigate and interact with your website using only a keyboard

Generally, that means you should be able to hit the tab key and go from one link to the next, through form fields in order, and never be trapped anywhere on your site.

Ideally, your users will be able to easily see which field (example screenshot) or link (example screenshot) they’re focused on.

Skip Links

It’s a small thing, but skip links allow screen readers and keyboard only users to skip blocks of content that are repeated on every page, such as the header and menu areas.

Add a link with a CSS class, add the CSS to hide it from the visual user, but then make it visible for keyboard users when they tab through.

ARIA

Finally, we get to WAI-ARIA, the Accessible Rich Internet Applications Suite, or simply called ARIA by most. Basically, it’s a way to add attributes to your code to make your site more accessible by telling a screen reader what ‘role’ your elements play.

Many of the basic roles would normally be taken care of by the new HTML5 elements, such as <nav> for navigation, but the combination of browsers and screen readers have not caught up in properly implementing the relationships, so for now, many of the ARIA roles need to be added for simple things (code example shown) as well as whenever you have more complex interactions that happen (and you’re not using an accessible toolkit or framework).

Reference Material

Most developers will readily admit that they look things up all the time, and with web accessibility, that’s no exception. There are lots of resources out there, but here are a few that are particularly useful:

Accessible Frameworks

I talk about having to add all this stuff, but it might already be done for you if you’re using an accessible framework, plugin, template or theme.

Just a couple examples:

Many WordPress themes are also fairly accessible, because the accessibility team has been doing a lot of work on their default themes. As the most recent website I built is in WordPress, I built an Accessible TwentyTwelve Child Theme (which uses the TwentyTwelve theme as its parent and just changes a few things to make it more accessible).

Testing Your Website

With some time and magic, at least a prototype website is created and you want to put it through some tests.

There are lots of tools to check your code and many people have their preferences. These are the ones I use:

Once you’ve fixed any errors caught by these tools, then you can go do your usability tests with real world users.

For Your Content Creators

Finally, your website is complete and the only thing left is to add some content. At this point, you need to rely on other people to be the content creators. And we know that humans are the problem, because you can control code, but you can’t control humans. Nevertheless, you can mitigate problems by keep it simple.

When I train staff on adding content, I give them just a few, simple guidelines.

  • Use headers properly
  • Use descriptive links
  • Describe images
  • If you embed audio/video, add a link to it too
  • Be clear and concise

That’s it. Five simple guidelines.

Putting It All Together

What you can or cannot do will really depend on your role, your CMS, and your organization, but maybe this can help guide you:

“I’ve learned that what matters […] is an actionable process — possible to use, adapted to the company’s culture and financially effective.” – Marcin Treder @marcintreder (source)

So if all you can do is provide your content creators with guidelines similar to the ones above to follow, you’re already making your website content more accessible. You’ve taken one step forward.

Take Aways

I hope you weren’t disappointed. Today’s session wasn’t explicitly to tell you how to develop or code your website, but to help you think about web accessibility.

“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” -Tim Berners-Lee @timbernerslee (source)

Of course, it’s not about how to include users with disabilities, because if we all need assistive technology, then

“We’re all disabled” – Lennard Davis @lendavis (source book)

While there are a few considerations we might not normally think about, if you only take one thing away today, it’s this:

“Universal usability is simply good design.” – Jonathan Lazar (source book)

And I would say the same about universal design.