Web accessibility in 3 sentences (ok - 4 sentences)
In 1998 the federal government updated the Rehabilitation Act of 1973 to extend to electronic and information technology. If you have ever seen a ramp leading up to a building or seen a parking space reserved for people with a disability, you know what “accessibility” is. For websites, it’s about delivering the content on the website to people who use assistive devices or alternate browsers. (Maybe you didn’t even know that there are ways to interact with websites that are totally different from the Chrome browser you are using now?)
Some types of organization are required to be accessible. For others it’s a matter of choice, and, as I’ll show here, it not only makes good sense but might actually make your traditional website better and possibly cheaper to maintain.
Where it all began and how we screwed it up
In a way, the modern way of making websites itself has led us from what used to be very accessible sites to ones that aren’t at all.
If we made a site like back in 2000, you couldn’t use CSS like we do now and would have to just lay things out using HTML. HTML itself was designed to make semantic sense and both arrange the content to look and be hierarchical. It also cued the browser about what content meant.
Then came CSS. As soon as we stopped letting the browser decide things about layout and started using CSS to override elements and make them do things they weren’t designed to do - the more you monkey with the default behavior - the more we deviated from the thoughtful nature of HTML and the further we drifted from accessibility.
For example, showing and hiding elements, changing contrast, “I need a link to look like a button” or “I need a button to look like a link.” These things almost automatically deviated from accessibility standards.
The more we mess with where things sit on a page, the more we make things like keyboard navigation cease to make any sense or even be usable.
What can we do to be better?
You can do a lot of small things to make a site accessible and still retain all the fancy CSS you wanted
- With a new site - make sure that the colors meet contrast guidelines. As you build, consider this factor for new elements.
- For elements that are visually hidden, find ways to place it them on the page in a way that doesn’t interfere with the markup flow and hierarchy
- In drop downs, many use display:none to hide unseen elements. In assistive devices, are your users seeing the appropriate amount of links? Is there a way to skip the navigation?
- Be mindful of what a browser is trying to do and mindful of what we’re telling the browser to. Are we metaphorically building something with stairs and no ramps - a situation where using a traditional browser is the only way to understand an interaction?
- Some things are wrong and sometimes things are inaccessible on purpose. iFrames can be used to pull in code for analytics for example. Screen readers don’t care. You can tell the screen reader that’s ok.
- Icons that are redundant - tell assistive devices to ignore that.
- HTML pages that make users read the navigation from top to bottom on every page without a way to get to the content (or better yet, rearrange the code) should be changed
- When you see levels, “AAA” means harder. Most institutions are “AA.” Your videos should have captions that’s hard. Some are easy - color, for example. Push for it - because why not? Meet that benchmark now.
New sites are fine, but what about updating my site?
When you are considering looking at accessibility on a current site, it usually comes in 2 flavors. The first is you are considering a redesign or refresh and the second is that you are in an “accessibility crisis” - your funding is threatened, key users can’t use the site, etc.
First, understand that there is no such thing as 100% compliance. 100% implies that accessibility compliance all objective. It’s not. Many of the rules are subjective.
Take “Alt text.” If there’s an image in a link, and yet the link text explains it, you don’t need it. (In an assistive reader, you’d see the Alt text, and then probably the same thing in a link. Are you helping?) Take this one - Alt=””. This is like putting “page intentionally blank.” What’s the real point? If you have an image for “The dinosaur exhibit,” the copy should say what it is and why you should care. Maybe you should buy tickets? Or “see a gallery.” Each has its own user journey. Alt text should provide context, too.
You should be able to find the CTA easily. Too. Make it apparent what you want users to do. Have it make sense in the context of the page. This will jump out to you on a screen reader.
You should test using a screen reader
Try it out. It’s actually really revealing. For me it strips the site down to its essence. Sites that make sense in a screen reader really make sense on a traditional browser. Sites that are nonsense are stripped bare by one.
The Utopian Vision of the Internet
What is more utopian than the idea that people with sight disability can interact with the world and work and find information at exactly the same level as people without a disability. It’s possible to meet and work and collaborate with someone who was blind and you would never know unless they told you. Twitter is great for people with vision disabilities. You can participate on the same terms as everyone else.
Different Types of Disabilities
Is it “just?” The handicapped seat is not just for handicapped people. It could be used by someone with broken leg. Accessibility could be for people with a broken arm. People go blind slowly. There is also cognitive disability. Some people with autism have color contrast issues. A study at Harvard showed that it’s possible that people with depression might also suffer vision degradation. (I know, right??) Or it’s for people who want to sit in a different position. Or to experience the web without looking at it. It’s much more than just the wheelchair icon.
If you trust the browser to show things in a semantic way, you’ll write less to overcome the browser and the page will load faster.
Stop assuming people have really fast computers. If you design an app and see it on your new 6s on office wifi, that’s one experience, but many won’t have that equipment. And even a fancy phone on the train is going to have sketchy internet. Or if you are one of 50,000 at a sporting event, the cell tower is smoking trying get that page loaded for you and everyone else.
Usability is part of User Experience (UX) in the same way that other things are part of UX. Accessibility is a set of ideas and techniques about being mindful of other people and other types of interactions.
A page is not about 50 things. It’s about 1 thing.
Accessibility Panic Mode
“My organization failed an accessibility test and we need to get compliant now!”
There are things you can do in a week to make a good dent. Prioritize them, work through them. Start with repeated, systemic errors. Leave the subjective things I mentioned above until the end.
“I have enough time to do 2 things. Which should I do?” Don’t be overwhelmed. This is something you can do over time and maintain, too. Pick the one that benefits your users the most.
Macs can just turn accessibility on. That’s a big deal. That means many people you don’t expect are already experiencing your site that way.
Another consideration to look at is how technology is allowing companies to understand how diverse groups are interacting with their sites. Ultra Testing tests interactions for people on the autism spectrum
Utopianism again. 50 years ago some people were invisible to society or couldn’t interact with it. The internet is probably the biggest force in changing that. You can provide people more normal lives. These are the things that companies and website creators can do to change society. The people built the foundations already gave us a baseline that works. It’s built into the web standards. The fact that browsers expect it means that you can make better sites that perform better all in the same fell swoop.