The Basics of Understanding Website Accessibility

Ironically, information and instruction around website accessibility can be pretty inaccessible. There is often a lot of jargon to learn, or discussions about semantic HTML and ARIA which – if you’re not a developer – could be complete gibberish to you. 

It’s important that everyone understand the basic principles of web accessibility. Developers certainly don’t make the majority of people who publish content on the internet. Web accessibility education should be perceivable, operable, understandable, and robust for everyone (You’ll understand that joke soon!). 

What is Website Accessibility – Really?

If you’re reading this, you probably have a vague or general idea of accessibility. You may know about color contrast, or that people with screen readers or disabilities need accessibility. That’s a fantastic start, but web accessibility isn’t quite so rigid.

Web accessibility is about making it as easy as possible for someone to perceive, use, and understand content. If someone can’t see your content, it’s not accessible. If someone can’t use your site or app, it’s not accessible. If someone can’t understand what your content is communicating, it’s not accessible. And if someone needs to go through a ton of hoops to get a second-rate experience in order to perceive, operate, and understand, then it’s not accessible. 

Web Accessibility Mindset

In order for this information to make sense and sink in, we need to be on the same page. We need to treat the following as true:

• No two experiences with a piece of content online are the same
• As the content creator, you have context and assumptions new viewers don’t have
• The experience of someone with a disability or impairment matters just as much as someone without – meaning they shouldn’t get the bare minimum, but as robust of an experience as anyone else
• Folks won’t always use your content the way you expect, so you have to account for this and sometimes be repetitive in order to make sense
• It is worth it to prioritize web accessibility in conceptualizing content, not as a reactionary measure
• While web accessibility also has great implications for conversions and SEO, it’s just the right thing to do

Not all of web accessibility is set in stone. The “rules” are often changing depending on how fast technology adapts and the experiences of real internet users. But, the mindsets stay the same. 

For now, here’s how you can make your website content as accessible as possible – without needing to write code! 

First, Let’s Talk About Accessible Text

Most of what we publish on the internet – on social media, websites, etc. – is text based. So it makes sense for it to be the first place to start when discussing accessibility best practices. 

Here are some good guidelines for making sure the text you write is accessible to everyone:

• The goal is easy and allows for quick comprehension
• Always spell out an acronym the first time you use it
• Minimize jargon and complex language whenever possible
• Avoid using all capital letters
• Lists items should not be more than 3 lines long

Reducing eye-strain when providing textual information is important. This applies to people with 20:20 vision just as much as people with vision issues. In order to make text easy to read, follow these best practices:

• Larger text is best, never go below 14px
• San-serif fonts are easier to read than serif fonts
• Decorative fonts- like cursive – should be used decoratively and not communicate important information
• Left-align as often as possible
• Center-aligned text should only be 1 or 2 lines 
• The ideal line length for text on screens is 45-80 characters per line 
• Lines should be spaced at least 1.5 times the font size
• Paragraphs should be spaced at least two times the font size

Use titles and subtitles, or headings and subheadings, wisely. Formatting text this way helps screen readers provide context, but it also breaks up information into a visual hierarchy. 

When all the text is the same, the eye literally gets bored and glazes over it all. But when you tell the eye where to go and when, you communicate information effectively and efficiently.

Your titles should be concise but descriptive. Be succinct and use the smallest number of words to communicate your idea. If you’re writing a title for a page or post, think about what someone may actually search on Google in order to find this topic. 

When using subheadings, it’s a good idea to decrease the text in size as you go. H2s are usually larger than H3s and so on. The same applies for the concepts. Each subheading should stack – more general or wide-reaching subheading topics first, then get more specific and niche as you go.

When laying out something like a graphic that contains text, brush up on the principles of design.  You would be amazed at how much good design and UX helps web accessibility.

The main design principles to keep in mind are rhythm (repetition), balance (alignment), unity (harmony), proportion (proximity), contrast, and dominance (emphasis). You don’t have to be a seasoned designer to understand these ideas. We are naturally familiar with them. 

We understand that when two things are balanced, they share importance. We understand that when one object is bigger than another, the bigger one is more important. We understand that when something has more intense contrast, it is meant to be noticed. Use these ideas when laying out text visually. 

Ask yourself:

• What is the most important piece of information here? 
• What is the piece of information that would grab someone’s attention best?
• What information is mostly decorative and could be ignored? 

Understanding the importance of your content’s elements helps you design for the readers focus and needs rather than pure aesthetics.

Now, Let’s Talk About Color

Color contrast takes up a large part of the web accessibility discourse. It’s one of the easiest things to get wrong, but it’s also one of the easiest things to fix.

Color contrast describes the visual difference between the brightness of two colors.

We discuss color contrast in ratios. Black and white have the highest color contrast, with a ratio of 21:1. Those two together are as high contrast as it’s possible to be. That doesn’t mean it’s necessarily the best option. High contrast is easy to see, but it can be hard on the eyes. 

The Web Accessibility Content Guidelines suggests a ratio of 4.5:1 for text and 3:1 for large text, at minimum.

Remember that just because you can see well enough when two colors are together, it doesn’t mean that that combination is accessible. Those with poor vision or color-blindness could find that content impossible to see. 

If you’re not sure how two colors will work together, use The Web Aim Color Contrast Checker. Pop in the two colors and you’ll get scores based on how good the ratio is.

Now that we know a bit about accessible text and color, let’s look at a real world example of these concepts at work.

Take this part of a website homepage. The two white squares are balanced and have rhythm – they repeat in the same ways to show their relationship. Both services are individual but related options. Technical SEO is not a facet underneath Search Engine Optimization.

Because the buttons are a unique color, they are most dominant. Blue and yellow are complementary, so they look good on screen together and make each other pop! The yellow icons are the least important parts. As a result they have low contrast and are the same color as the background so they give the illusion of blending in.

The title at the top is larger to show the other two subheadings exist underneath it. But its contrast is lower (black on yellow has less contrast than black on white). As a result, your eyes are drawn to the higher contrast areas first because they’re more important. The text is actually a deep brown, so the color contrast remains high without being so high that it will hurt your eyes. 

The way this screen is laid out has reasons, all focused on making sure someone can easily read it, understand it, and interact with it.

These are two graphics our team made for a webinar. After some review, we found the following:

• The use of color and size is almost perfect. 
• Much of the text is too small, especially since these would be posted on social media and folks would mostly be looking at them on small screens.
• The date and time are the most important aspects of the graphics, so they needed to be very easy to see.
• The paragraph text takes up a lot of space at the sacrifice of more important content.

Here are the final designs! They are easier on the eyes, easier to skim, and contain only the most important information. We were able to move the paragraph text to the caption of the post. That way it doesn’t get entirely lost, but the image is used as the eye-catching hook.

This is a great example of a link in text. The text is bolded and has a colored underline, making it stand out. And it goes to another website, so there is an icon to indicate so.

Buttons should follow similar best practices to links:

• All buttons should be consistent. 
• Use colors that stand out from the surrounding sections and text.
• Make buttons large with plenty of padding so they are easy to tap.
• If possible, place buttons on their own line
• Provide descriptive unique language for a button so the user knows exactly what will happen when they click. Avoid “click here” in place of something like “Go to Homepage” or “Download the PDF” 
• If a button opens in a new window, there should be an indication of that.

Ask yourself this: If someone blocked out all the content on the page and all that was visible were links and buttons, would it be obvious to someone what those links and buttons go to and why they should be clicked? 

Since buttons and links lead your users to new pages and important conversions, those things need to be as easy to find and interact with as possible.

Forms Need to be Accessible, Too

Speaking of interaction, consider forms closely when optimizing for accessibility. Primarily, consider how users may interact with a form without a mouse. Here are  some best practices to keep in mind when making forms accessible:

• Make sure that the fields can be accessed using the tab key
• Make sure that the submit button can be selected using Enter
• Label the form inputs above the fields 
• Provide descriptive labels
• Consider using a progress bar for long forms 
• Have clear and helpful error messages that appear if someone uses the form incorrectly

Building accessible forms using code can get a bit complicated. But if you’re just popping in a form using a WordPress plugin, you can use these best practices to ensure accessibility. 

Emojis – Yes or No?

There has been a lot of discussion about the degree to which emoji and emoticons are accessible. The short answer is that they are not the strongest choice when creating an accessible piece of content. However, that doesn’t mean you shouldn’t or can’t use them. 

My personal recommendation is to limit them to social media and only use them for what they are: decoration. 

Avoid using emoji in website content. Use them sparingly if they really fit with your brand. Emoji have been known to cause errors on site pages if the emoji aren’t supported by code on the page. 

In social media descriptions, however, emoji can be a fun way to communicate new ideas and organize text. Don’t use emoji to substitute words or phrases. When screen readers encounter emoji it’s not always certain how they’ll be read out. Using tons of emoji can hinder the ability to actually read the information you’re providing. Some people find emoji frustrating, especially if they have a cognitive impairment that makes symbols difficult to comprehend. 

How do you feel about using emoji in accessible web content? 

Accessible Video is Enjoyable Video

Finally, I want to touch on making video content accessible. Video has arguably become the most popular medium on the internet. You can’t use most social media platforms without being met with viral video content. And for years video has been key to compelling visual storytelling on websites. 

But it’s very easy to publish inaccessible video content. Here are three simple ways to avoid that! 

• Always use captions. If you use auto-generated captions, proofread them and edit to make sure they’re correct. 
• Publish transcripts to videos whenever possible. 
• Make sure that your webpage video content is not set to auto-play and has the ability to play, pause, and scrub using keyboard navigation

Visit the ADA Site Compliance website to learn detailed information about making videos compliant.

To Sum Up…

Think about how often you use the internet. Think about how important it is – not only for your entertainment, but for things like booking doctors appointments or getting important news updates. The internet is the hub for socialization and knowledge in our society. As a result, we have a responsibility to make sure that no one is blocked from this information. And you don’t have to be an expert or a developer in order to do so. 
Visit our YouTube channel to learn more about website accessibility. And if you need a helping hand, contact us over at a11yprogeeks.io