As your website or content platform grows, so will your audience. Your devotion of energy and resources to create a beautiful, content-rich and relevant hub for your members and potential members will draw eyes, peak interest and encourage engagement.
But remember, with great power comes great responsibility. Once you have the platform to create all that delicious engagement, a question comes up that you may not have considered.
Will everyone who finds your website actually be able to use it?
Have you or your webmaster, designer or developer created a product that’s easily navigated by someone with low vision? Are your videos consumable for deaf people, or people with partial hearing loss? Will a person with a broken arm, or limited mobility find your menus and pages a pleasure to peruse?
If you aren’t confident in answering these questions, don’t worry, we’ve got you covered. All you need is a little brush-up on web accessibility.
In some cases, designing for web accessibility is also required by law. Always be sure to follow the World Wide Web Consortium’s Web Content Accessibility Guidelines and always conform to the regulations set out in the Americans with Disabilities Act.
What is web accessibility?
According to the World Wide Web Consortium (which we can probably trust seeing as it’s run by the guy who invented the internet), “Web accessibility means that websites, tools and technologies are designed and developed so that people with disabilities can use them.”
They also list a number of great examples of the range of abilities that folks might be working with when using your website. It’s not always the case that someone will simply have all or no functionality in a given area. We all exist on a number of spectrums of things like movement, vision, hearing and mental ability, and it’s essential to our quality of life to be mindful of all.
Web accessibility is simply designing a website or platform with the intention of letting everyone have an equal chance of using, understanding and enjoying it. Who doesn’t want that?
Why design your platform for web accessibility
There’s no debating our goal should be to create environments, products and services for use by as many people as possible.
You might wonder about the potential for impact compared to the amount of money, time or effort it takes to tweak your current platform or design a new one. But according to the CDC, 1 in 4 people in the United States have some type of disability. And if your association specializes in healthcare or services for older adults, well, this is a no-brainer.
On the other side of that stat are those of us who have temporary disabilities, situational limitations and changing abilities.
If you’re navigating a digital platform with a broken arm or hand, you’ll want big buttons to easily find and hit. When you’re in a library, coffee shop or any other environment where playing audio is frowned upon, you’ll be glad you included captioning on your videos. Those of us using our phones in the bright sun to quickly find some important information like a phone number or address are always thankful to see what we need in big, bold, high-contrast type.
The bottom line is, designing for accessibility improves everyone’s experience on your platform. And if it helps even one person feel more welcome and comfortable in your space, we call that worth it.
Okay, okay, you’re convinced! But how do you start? Let’s get into it.
5 Smart Website Tweaks For Accessibility
1. Structure
Your “structure” or your page hierarchy is the layout of your website. It’s what some people see, but it’s also the map that some people will navigate using sound or braille.
People with low or no vision will often use assistive technology such as screen readers to navigate websites. Screen readers are programs that scan the code of a website, convert all the useful bits into speech, then relay that as sound to the user. Check out this post by Axess Lab for a full rundown on this tech.
That means it’s crucial to have a well-thought-out, easily digestible site structure. Having headlines in your footer, random paragraphs of text running every which way and pictures with no context is going to confuse the screen reader and be incomprehensible to anyone. Bad design is bad design, right?
Consider, say, this example of a well-designed page:
If it looks clean and easy to read from top to bottom, it should sound that way too.
Notice the concise drop-down menu titles, the headline positioned directly above its related paragraphs and large, clickable buttons. This is a great example of a linear design that, when analyzed by a screen reader, will deliver all the information in a straight, digestible line to the user.
2. Keyboard-only Access
Whether you’ve got low vision, are sporting an arm cast, or are living with a repetitive strain injury, there’s plenty of people who only use a keyboard to control their computer.
Many people rely on websites like your platform to be fully navigable using a keyboard and assisting software such as voice recognition programs. You can try experiencing this navigation yourself with the magical little button known as the Tab Key. It’s right there on your keyboard too, below the tilde and above Caps Lock.
If you tab through this page right now, you’ll probably find yourself jumping across all the different clickable buttons, links and navigation menus. Then to select or click any of these options with your keyboard, you can simply hit Enter.
Try it out on your own website, and see how easily you’re able to navigate. If you find yourself having trouble, like jumping randomly from the top of a page to the bottom or find yourself unable to access certain pages or functionalities purely by using your keyboard, then you’ll want to regroup with your web designer and figure out how to move forward to create something that is inclusive for keyboard-only users.
Pro-tip: one of the big barriers that the W3 points out is when someone is unable to Tab through to your media player controls. So if you do have a page with video content on it, always be sure to check that you can pause, play, mute and scrub through your video using a keyboard.
3. Text
Text is the foundation of your website. What can and can’t be read will determine whether people will have a good or bad experience across every page of your platform. Once you’ve designed it so that people or their assistive technology can read it, you also want to make sure that the writing’s good enough that they’d even want to in the first place.
A few quick readability factors to keep in mind are your language, text size, typeface and color.
Your primary language should be easily identifiable so that assistive technology can quickly identify and process it. That means even if your site uses only English, French or Tagalog, you still need to be sure that you’re not using too much technical jargon without explanation.
The size of your text is crucial to keep it readable. If it’s too small, even Superman would have trouble reading it. And if you’re giving a Kryptonian vision problems, it might be time to do a quick style redesign. If it’s so big that you have to scroll every five seconds just to get to the next paragraph, that might be an unnecessary bit of grief given to those who have barriers to mobility. If you want to cover your bases, try to find a balance that looks reasonable, usually a percentage ratio set up in your platform's content management system. If you use a size percentage instead of a set pixel count, chances are better that people will be able to zoom in or out of your webpage and have it resize correctly to fit their comfortability level.
The typeface you choose to present your text is just as important as the size and the content. Styles like blocky letters, handwriting and script tend to be more challenging to read, as seen below.
When you throw in things like size and color on top of a tricky font, you run the risk of convincing people to leave your site. Siteimprove, a member of the W3, recommends typefaces such as Tahoma, Helvetica and Verdana for maximum accessibility.
Finally, the color and contrast of your type — and all your elements for that matter — are essential to their visibility. Yellow text on a yellow background is going to give you a headache and make you wonder why the designer of the site dislikes you so much. Instead, opt for good-contrast color schemes. This gets pretty technical, so if you want to read a good guide on how to set up your colors to have a good contrast ratio, check out the Institute for Disability Research, Policy, and Practice’s WebAIM.
4. Media
For all your videos, picture and audio, you want to include a way to make them accessible and controllable by keyboard or voice assistant. You should be able to start, pause, mute and scrub through your video by using your keyboard to control your media player.
A lot of people surf the web with settings in their browser to turn off all pictures and videos. So, make sure that all your media is properly “tagged” with alt tags and descriptive text that will give them a good idea of what your media is without them having to see it. Adding alt tags is like digitally engraving a description into a piece of media, so if you have a picture of a cat sitting on a guy’s head, you can write that into the digital data of the picture and have someone’s virtual assistant read it aloud to them, hopefully in a cool robot voice.
Captions are a great option to include in all of your video content. Providing closed captions (captions you can turn on or off) in multiple languages allows users all over the world to enjoy your content regardless of their accessibility needs. On the flip side, you can provide an audio description of your video. This is an audio partner for your video that gives a verbal retelling of the action and information in your content so that people with low or no vision can enjoy your video too. Everybody wins.
If you’re using technology like autoplay that automatically starts your audio or video when someone lands on a specific page, be sure you’ve given your audience a way to quickly and easily mute and pause the audio and video. Ideally, you want to keep the audio muted by default and instead use captions to convey your message, but if you are going to use autoplay, these are quick ways to make it more accommodating and less overwhelming.
5. Effective Warning and Labeling
Have you ever filled out a form on a website, like a checkout that asks you for your credit card, billing address and ZIP, then hit Submit and... nothing happens? What’s up with that?
Or worse is when you enter your info and submit it only to be met by a vague “ERROR#” followed by an otherworldly long string of random numbers and letters that seems like it’s only readable by another computer. Infuriating, right?
If you want to make a site that invites your members to keep their cool, always be sure to include little bits of text (also known as "microcopy") with clear and concise info. Something like “Billing address does not match home address” is all it takes to help everyone enjoy finishing their transaction.
Then there are things like “fields in red must be completed.” If I can’t see red, that doesn’t give me a very good experience on your website. An easy fix is just including an asterisk or any other visual indicator whenever you color code anything on your site. Just have a look at our links included in this post. Sure they’re blue/green depending on who you ask, but did you notice they’re also underlined? That lets people and software assistants know to differentiate between the link and the normal text with ease.
It's usually a good idea to omit any surprise flashing, jittering or noise in your website. If you absolutely have to include these elements for any reason, always provide an ample warning with the option to decline or give consent beforehand.
Now you’re one step closer to creating an awesome and accessible platform for all your members and members-to-be.
If we had to condense all this wickedly helpful info into one line, we’d say your best bet is just to try to make sure that there’s never just one way of doing something on your website. The world wasn’t formed with only one path. If it was, we wouldn’t all be able to take it and that would be exclusionary — and make the world a pretty dull place to be.
So go forth, and make things easy, accessible and beautiful.
Feature Graphic Credit: Dana Chan for Disabled And Here.