An Internet for Everyone

Web accessibility is crucial for an open user-friendly internet. I attended a local meetup last Wednesday about Web Accessibility and it made me think deeply about how we can improve the internet and make it available to everyone. The speaker, Karen Bachmann, provided resources we can use to make the internet better and questions we can ask ourselves when designing websites. This is the full slide deck used in her presentation. Here are some of the bigger points I got from it.

The Heart of Accessibility is Perspective

It seems like a significant portion of designers and developers ignore parts of their audience that are inconvenient. I have been in meetings where 30 minutes came and went discussing if people really use Internet Explorer 8 still... and well, they most certainly do. The motivation of the designer who rejects IE8 might be to make the designs prettier. The motivation of the developer who rejects IE8 could be that it is an incredible hassle. But the truth of the matter is that not everyone has a 4K monitor and Chrome running on their machines. A large segment of corporations still run Windows XP and are stuck on IE8 until they begrudgingly update. But I digress...

The idea I am trying to express is that that we, the masters of the web, are probably excluding anyone who doesn't fit neatly into our vision of the world. Before today when I thought about accessibility, my thoughts went squarely to the visually impaired. That didn't stop me from ignoring labels on form controls and phoning it in on alt text. To change our sites for the better, we need to change how we perceive web pages so we can widen that view at least a little bit.

How This Affects Me

It is selfish, but I find the best way to get motivated to do something is to think about how it affects my family and friends. My son has autism, my dad is hearing impaired, and my brother is color-blind (I believe red-green). Despite the fact that my family members have their own special needs for the web, I have never bothered to think about how the internet is different for them.

My son needs a high level of predictability to function. To make a website more accessible and more understandable, I would need to make sure that there are as few surprised as possible. Following the guidelines in Don't Make Me Think is a good start, but there are more things we can do to help people who perceive the world differently. In some ways, we have obscured the web with scroll-jacking and inappropriate parallax effects. I'm a typical person, and I find both of those things to be rather frustrating. I think that in order to help people with neurological, behavior, and learning disorders keeping to simple, solid design is a good foot forward.

My dad has been hearing impaired his whole life, and I have never bothered to consider what using the internet is like to him. One of the best things I can do for the hearing impaired and deaf is to always provide transcripts and captions for all video/audio clips.

My brother is color-blind, so he doesn't see the world the same way I do. I recall that when he was around four or five, my step-mom noticed that he thought the sky wasn't blue. He had inherited it from his grandfather and no one at his school ever noticed because he looked at the labels on the crayons. Color blindness, contrary to popular belief, is not usually a total lock of color, but an inability to physically differential between the same colors a typical person can. If you have every wondered what that is like, check out colortest.it.

That site got me to start taking a look at my own site under a microscope, and I realized that my site probably needs a lot of work to be fully accessible.

This Blog Needs a Lot of Work

Colors

I thought that I had a nice, serene website with light blues and off-whites, but to a person with any kind of color blindness, this website is rather dull. There isn't nearly enough contrast to be even close to interesting, and I should really pick different colors for some of my icons. The sections doen't' standout from one another, and I have icons next to each other that look like the same color to certain people. Here is what I am talking about:

Normal Colors

Monochromacy

Enhanced Green

I can do better than that. I have been threatening to redo the layout, so this gives me motivation to do so sooner than later.

Compliance / Standards

I really missed the boat on this one. One of the better tools that was provided is Wave. It lets you enter any URL and it tests if the site is accessible. Here is what mine looks like:

Auditing Notoriousb1t.com in Wave

The first thing I need to fix are the structural issues. At present, I am missing an H1 tag and kind of just skipping over heading levels all willy-nilly. This is not only bad for SEO, but it is bad for the integrity of the html as a document.

The next thing that stands out is that I am missing almost every... single... alt text for images. You can see that they are missing by clicking on those red things that look like fezzes. I wonder if visually impaired people get frustrated with stuff like that? Imagine hearing "Logo", "Image", .etc while you try to navigate around a site.

I don't believe a whole lot of people build websites and use screen readers, but I should fix these issues nonetheless.

How Can I Make It Better?

A Practical Example

If I have heard it once, I have heard it a thousand times... maybe I shouldn't just put "Image" or "Logo" in the alt text fields. That is following the letter of the guidelines (WCAG 1.0 / WCAG 2.0), but missing the spirit of the practice. One suggestion that the speaker had was to describe actually what you are seeing on the screen as if you had to describe it to someone who was visually impaired. My first reaction to that was to take it to each extreme:

Too Small

<img src="/content/images/2016/04/a-newfoundland-puppy.jpg"  
              alt="Image of dog" />

Too Large

<img src="/content/images/2016/04/a-newfoundland-puppy.jpg"  
             alt="This picture features a black newfoundland puppy staring into
                 and peering into our souls.  We really want our puppies to get 
                 adopted, so this picture should convince you to, in fact adopt 
                 our puppies. To give you more detail of the picture, the dog is 
                 laying in a bed of clovers and wild flowers" />

Unhelpful and Kind of Inappropriate

<img src="/content/images/2016/04/a-newfoundland-puppy.jpg"  
             alt="I don't like dogs and neither should you'" />

Just Right

<img src="/content/images/2016/04/a-newfoundland-puppy.jpg"  
             alt="A picture of a black newfoundland dog waiting to be adopted.'" />

I think there is a balance to be had there without getting hyperbolic: a goldilocks zone of alt text if you prefer. I should describe it enough that a person who can't see it would understand the intent of it being there.

Follow the POUR Principle

I'm a huge fan of this mnemonic. POUR stands for Perceivable, Operable, Understandable, and Robust. Here is a break down of what they mean and what questions I should ask myself:

Perceivable

The question I should ask myself is whether or not each person with special needs can perceive all of the information on the page. For someone with good eyesight, they should be able to see an image on the page. For someone using a screen reader, there should be alt text to tell them what the image is supposed to be and labels to tell them what the form fields are for. For a hearing person, they should be able to play an audio clip and hear it. For someone who is hearing impaired or deaf, there should be an adequate description on the page, transcripts, and captions to parallel the audio content.

Operable

The point here is whether or not it works and works in an expected fashion. When you tab through a form, does the order make sense. If you don't have a mouse, can you still navigate the page through the keyboard? Some people type using mouth sticks, so a mouse is totally out of the question. These are the types of questions I should be asking myself for the Operable part.

Understandable

Is there clear and understandable content? Is the content in plain language that most people can understand. This is a more difficult one for me. I often find that I am saying "exactly"" what I mean, but no one can understand me because the majority of people don't say "exactly" what they mean. The curse of the programmer, I suppose.

Is the content predictable? Am I helping the user avoid mistakes and providing a clear and obvious path? These are all questions that related to the Understandable part of POUR.

Robust

The meaning of Robust in this context is a little fuzzy to me, but I think a good way to think of it is this: being robust is "timeless". If you have ever had to shop for jewelry or have heard an ad on TV for jewelry, you have no doubt heard that certain styles of jewelry are referred to as "timeless". Exaggeration aside, the implication is that the piece of jewelry was, is, and always will be considered fashionable.

The goal is to make sure that my websites were, are, and always would be usable regardless of whatever transient trend in web design happens to be popular. The concept of future proofing can be difficult, but I think as long as the design is simple and I keep up with current technology/standards, this will be quite manageable.

Final Thoughts

The best way to make this perspective stick is to acknowledge that this is a natural part of the design process. For some they may need to update their style guide with tips; for others, they may need to add audits as part of continuous integration. The best thing to do is to remember that all people have their own limitations and constraints. It is not additional work to make a site accessible; it is simply part of completeness.

DreamHack winter 2004 by Toffelginkgo, used under CC BY-SA 3.0 Newfoundland puppy by Geremea, used under CC BY-SA 3.0