More than 500,000 websites are launched around the world daily. Unfortunately, the vast majority of them have one major problem: they’re nowhere near accessible enough.
When you consider the fact that 15% of the world’s population, or one billion people, suffer from some sort of disability, it becomes easy to understand why accessibility is so essential for web developers to take seriously.
Web developers need to factor in a number of different demographics when developing sites. For example, it’s easy to overlook the aging population, especially those who suffer from some form of sight impairment, or those who may suffer from cognitive disabilities.
It’s hugely tempting for developers to focus on ingenuity and flair in their design practices, including the use of bright colors or unique fonts. What they often don’t realize though is that this often ends up alienating a significant chunk of their audience. Not a good move!
Why Develop Accessible Websites?
Currently, less than 1% of website home pages meet WCAG (Web Content Accessibility Guidelines) standards. Apart from the simple fact that it’s ethically the right thing to do, you should know that an accessible website can improve your brand’s identity significantly.
More importantly, the United Nations’ Convention on the Rights of Persons with Disabilities also recognizes an obligation to “…promote access for persons with disabilities to new information and communications technologies and systems, including the internet.”
And, perhaps the biggest reason why you should be creating accessible websites is that it’ll help you promote your website to a wider audience. In the United States alone, 61 million people live with some form of disability, and globally you could be increasing your audience reach by over a billion!
More importantly, developing an accessible website will also have a positive impact on your search rankings. A higher bounce rate indicates that people quickly navigate away from your website, which has a negative effect. The proper use of titles, alt tags, and captions will go a long way in helping crawlers understand the content that might not be immediately visible.
If you can make your website more accessible, not only can you target that additional audience market, but if you’re selling a product, it’ll also increase your chances of making a sale, as people are more willing to buy from websites or online stores that are designed with accessibility in mind.
Many people are also quite vocal about websites that aren’t very accessible. Word of mouth plays an important role in the digital landscape, and people are quick to talk about and promote websites that are accessible for people with disabilities.
Another Way of Looking at Accessibility
It can be hard to fully appreciate what online shopping can be like for people with disabilities, and who rely on screen readers and similar tools to help navigate the web. So imagine for a moment that you are going shopping on the high street.
Imagine that you are excited about going shopping. You have ideas of what you want to buy, you have your money, and you’ve already pictured yourself wearing or using whatever item it is you’re planning on getting.
All seems well – you approach the store, it’s well past 9 a.m. so you know they’ll be open. The lights are all on, and people are milling about. You can see people who work there helping those who are enjoying shopping.
But the door is locked.
You try the door a few times. Nothing. You knock on the door and wave your arms. Nothing.
It’s as though you don’t exist.
Sadly, this is very much the same way people with disabilities feel when shopping online on websites that are not catering to their needs.
Here’s another example. Imagine going to a shop that is absolutely massive – it’s the size of several football pitches, and trying to find your way around is almost overwhelming. Not only that, but it is incredibly noisy, with music, voices, and other sounds that are so loud it’s hard to think.
You feel almost like giving up, but eventually, find somebody who works there. They seem very friendly, so you ask them for help in finding what it is you’re looking for. But rather than answering your question, or helping you, they start answering a slightly different question or give you lists of possible answers to questions that may be similar to yours.
You realize it isn’t a human at all, it’s a bot, and they really don’t seem to understand you. You carry on stumbling through the store, but then you realize that nothing is labeled. No labels anywhere – you’ve no idea what many of the products are. Not only that but there are no prices anywhere either. Eventually, you give up and go elsewhere.
These examples are certainly not far-fetched. In a very real way, they represent the exact experiences people with disabilities encounter every single day. Yet it doesn’t take a great deal to begin thinking about how to improve a website’s accessibility, and sometimes even seemingly small changes can make a big difference.
10 Tips for Developing Accessible Websites
Now, if you want to develop accessible websites, here are 10 tips to keep in mind.
1. Use Suitable Colors For Your Site
The use of colors on your site is very important. Most people generally use the same color palette as their logo. This is often a bit complicated. 1 in 12 men suffer from color vision deficiency, and 1 in 200 women suffer from this problem.
Red/green color blindness is quite common, so you will want to avoid using such colors as much as possible. Ideally, you don’t want to use colors that are overly bright either, especially shades like bright yellow or blue.
There’s a handy WebAim tool that you can use to check the contrast between the foreground and background colors on your site to make sure it’s accessible.
2. Structure Your Content Using Appropriate Headings
Many screen readers or other assistive technologies rely on the heading structure to interpret content correctly. When developing websites, make sure you use the right heading structure to present content properly.
This means starting with <h1> for the title, <h2> for subheadings, and <h3> or <h4> if needed. You might want to use CSS to separate content that you want to present in a different manner so that it attracts attention.
3. Select The Right Font
The font you use on your website plays an incredibly important role when it comes to accessibility. If you take a look at the Google Fonts shown above, you’ll see that some are much easier to read than others.
If you are determined to set your brand apart by choosing fancy or unique fonts, you might end up alienating a large chunk of your audience. It might help you create a unique brand identity, but at what cost?
For starters, while Serif fonts generally look great, people who suffer from visual impairments or disabilities like dyslexia often have a hard time reading such fonts. That’s one of the reasons why so many popular websites and apps now use Sans Serif fonts.
4. Always Add Alt Text with Images
If you add content to your website, you will probably use images in some way. However, if you simply let your cursor hover over the image for a brief moment, words might pop up.
These are known as alt tags or alternative text. For people who suffer from a visual disability and can’t view the screen, alternative text is very important. When a person uses a screen reader, the technology reads aloud the alternative text instead.
When adding alt tags to images, make sure that you describe the image as accurately as possible. Accurate and descriptive alt tags are also necessary for SEO purposes, so it’s imperative that you add descriptions to each image.
5. Use Resizable Text
One of the most low-impact techniques that you can use to make your website more accessible is to allow visitors to resize the text on your website without breaking the page layout.
To do this, many people use a third-party plugin such as Accessibility Widget. However, this is not recommended. The reason is that plugins like these often override the screen reader software used by those with visual impairments. This can actually lead to creating more difficulty, rather than making anything easier.
Making the font bigger may help for people with certain visual impairments, but it’s important to remember that it wouldn’t matter how big you make the font, for some people that still won’t help because the screen reader software they use is the only way they are able to access your website.
It’s also important to be aware that many screen reader tools and software have been around for many years, and aren’t as updated as plugins and website tools you may be familiar with. Many readers still use Internet Explorer, for example, and using plugins to override accessibility settings can result in a website that’s entirely inaccessible.
Finally, be aware that using plugins to change the visual appearance of a website for people with disabilities might seem like a kind thing to do, but many people with autism hate change and don’t appreciate it. By overriding their settings you could well be putting them off.
The main advice we would give here is to avoid fancy HTML tags, use simple fonts and structure the content using appropriate tags, such as headings and paragraphs. This will allow for the increasing of font size for those who need it, as well as allowing screen readers, including those using legacy software, to access the content and deliver it in a format that is suitable.
6. Include Keyboard Navigation via Shortcuts
One of the many questions that you need to ask when developing an accessible website is whether your website works well without the use of a mouse or not. A vast majority of modern assistive technologies rely primarily on navigation using only the keyboard.
Therefore it’s imperative that you design a website that lets users access all major features, and allows for intuitive navigation, straight from the keyboard. For instance, is your website easy to navigate with the Tab key?
Ideally, this should allow users to jump from one section to another, ranging from links to forms to content. It’s fairly easy to test this as well.
Just open your website, and see if it works fine without a mouse. What areas of the website can you not access without a mouse? You might want to pay attention to those and figure out how to make your website more keyboard-friendly.
For instance, simply press Tab once you’re on your site to see if elements are encircled. For instance, a dashed rectangle should appear around links. You can then press Tab to cycle forwards, or Shift+Tab to cycle backward.
Like common keyboard commands, Enter or Return should allow you to open the link, and Ctrl+Enter should open the link in a new tab. This will ensure that your website is truly keyboard-accessible.
You will want to pay attention to the navigation order of your website to ensure that it’s logical and follows a proper structure. For starters, avoid using tabindex values that are 1 or higher to change the default navigation order using the keyboard.
7. Make Links Descriptive
Many people don’t fully appreciate why adding link descriptions is so important. For those people using screen readers, the software scans the page and pulls out all of the links, and delivers them as a list. So rather than seeing the links within the original context, they will see links like this:
- Click here
- Click here
- Fill out this form
- Read more
- By clicking this link
- Click here
It’s easy to see how impossible it is to navigate a website with links like this. There’s no way of knowing which link does what.
When adding anchor text for links on your site, you need to make sure that you make it as descriptive as possible. Ideally, anchor text should be indicative of where the page will lead. You’ll want to make sure that you use descriptive text when adding hyperlinks, so people know exactly where it’ll lead.
This’ll help explain the context to your readers and make it easier for them to decide whether they want to switch to another link or not. For instance, if you want to give an option to viewers to check out your Contact Us page, don’t just hyperlink “Contact us.” Instead, you could write something like, “If you want to get in touch with a member of our team, you can always contact us by filling out a form.” Here’s what the code will look like for the anchor text:
If you want to get in touch with a member of our team, you can always <a href="http://linktocontactpage.com">contact us</a> by filling out a form.By using this format you will ensure that screen readers will be able to generate a list that is vastly more meaningful and allow those visitors using such software to visit the pages they need.
8. Make Media More Accessible
Firstly, let’s understand what we really mean by ‘media’, because there are several different types. Generally, we would class them as:
- Text
- Images
- Video
- Animations (GIFs)
- Audio
We’ve already covered text, as well as thinking about making images more accessible. But it’s important to consider how to ensure media formats such as video, animation, and audio are also delivered in a way that enables anyone with any disabilities to access your content.
With video, always make sure you add transcriptions and subtitles. Not only will this allow people who use screen readers to understand the content of the video, but people with ADHD have been known to respond positively to the use of subtitles in videos, as it provides them with a focal point. Adding transcriptions to your content is another excellent way to ensure inclusivity and promote your website to a wider audience.
By making media more accessible, you can also reap serious SEO benefits. Search engine bots and crawlers can’t view videos or process sound, but they can crawl through detailed descriptions and transcriptions of the media you have on your site. This can help improve your rankings in the SERPs.
9. Reduce Media Animation & Motion Where Preferred
Another aspect of making media more accessible, but which is frequently overlooked or forgotten, is providing the option to reduce motion on the website.
For a great many web visitors, having moving or flashing animations makes it very difficult or impossible to read text or focus on the content, and a large number of people experience motion sickness with some of the parallax animations popular today.
Unfortunately, most web designers ignore this need, and simply insert animations without considering the negative consequences this can have on so many millions of people.
The tag prefers-reduced-motion is a CSS media query that checks to see whether the user has opted to prefer reduced motion, movement, and animation. This allows the developer to deliver two alternative CSS styles – one with the animation or motion, and one either without it or with it very much reduced.
For example, let’s say you have a ‘Sale’ button you want to draw attention to. You could include the following HTML:
<div class="pulse-highlight-animation">Sale On!</div>You may well use the following CSS code for this object:
.pulse-highlight-animation {
pulse-highlight-animation: pulse 1s linear infinite both;
}But what you could also do is have the second part of this CSS file that checks to see if the user has opted for reduced-motion, and displays the ‘Sale’ button in a much more subtle way:
@media (prefers-reduced-motion) {
.pulse-highlight-animation {
pulse-highlight-animation-name: dissolve;
}
}By doing this you are able to accommodate the needs and preferences of a significant proportion of your market, and this can only be a good thing for both them, and for your business. And remember, websites that are sympathetic to people’s needs tend to get mentioned in a positive light much more often.
10. Avoid Autoplay Media
Almost everyone in the world hates autoplay media on websites. While autoplay media is generally hated across the internet, you should know that it turns into a bigger problem in terms of accessibility.
You don’t want visitors suffering from sensory overload, and it’s also quite difficult for a person using a screen reader to turn off automatic navigation. If you’re using automatic sliders or carousels, it might be a wise idea to turn them off.
If there are media on your website that start auto-playing, you need to toggle that off. Also, some people often take longer to absorb information from a slide, so make sure they have an option to move to another slide with a keyboard shortcut.
Frequently Asked Questions
Here are a few frequently asked questions about developing accessible websites.
What Makes a Website Accessible?
There are several elements that make a website more accessible, including the use of contrasting colors, resizable fonts, adding alt text for all images, and adding subtitles or captions with all media on the website.
What is Inclusive Web Design?
Inclusive web design means designing and building websites while considering the needs and challenges of people who suffer from temporary or permanent disabilities. Websites that follow an inclusive web design methodology are easy to use for people with disabilities.
What Is an Example of Website Accessibility?
A common example of website accessibility is the use of subtitles and closed captions. This allows screen readers to easily capture written content and allows people with visual impairments to consume content.
Conclusion
These are just some of the many things that you can do to make sure that your website is as accessible as possible. As we move towards a more inclusive future, it is incredibly important that you focus on developing accessible websites.
