Often the first things that come to mind when we hear about accessibility are accommodations for those with physical disabilities. Elevators and ramps for people in wheelchairs, for example, or audio headsets for those with visual impairments. But when it comes to using a computer and navigating online, it’s not so obvious what makes a website accessible, especially if you don’t need accommodations yourself. As the world moves more and more online, making sure your website is accessible for all isn’t just a courtesy. In many places, including the United States, website accessibility is the law.
At this point you may be wondering what website accessibility even encompasses. Well, as explained in the World Wide Web Consortium’s [WC3] Introduction to Web Accessibility, for a website to be accessible, users must be able to “perceive, understand, navigate, and interact with the Web…[and be able to] contribute to the Web.” This applies to and includes “all disabilities that affect access to the web…auditory, cognitive, neurological, physical, speech, [and] visual”. WC3 also points out that website accessibility also improves the experience of navigating online for people without disabilities. This especially includes aging people, people with temporary disabilities like arm or hand injuries, and people with situational constraints such as bright light environments. Additionally it covers factors such as no audio access, slow internet or users who are on their phones or tablets. Crucially, being compliant ensures that everybody involved benefits.
As a leading website design and maintenance company for tour operators, ensuring our client’s sites are accessible according to ADA guidelines is an essential part of what we do. In fact, it was way back in 2019 that Tourism Tiger’s lead designer, Andie Lopez, outlined the 8 steps to building an accessible website for PeekPro’s Growvember online event(opens in a new tab). Now we are bringing this important subject back as we break these 8 key steps down into a blog post.
Keyboard Navigation
There are many users that rely on their keyboard to navigate websites. Having limited or no use of your hands, tremors, other motor issues, and blindness are a few common reasons people might use their keyboard for navigation via screen reader software. This is most often done by using the tab key on the keyboard to move through the navigational items on a website such as buttons, clickable texts, and hyperlinks.
Much of website accessibility is making sure your website is easy to understand and navigate for people that rely on tab navigation. Over 7 million Americans require screen readers to access websites. Without awareness of how this assistive technology functions, you may leave out an element on your website that is essential for those users to navigate properly.
Check out our 8 steps below that make your website more accessible:
Step 1: Focus Indicators
A focus indicator is a border or dotted line that appears around a clickable element when it’s selected on a website. The web browser usually provides the focus indicator, but some websites remove it for style reasons. Unfortunately, this can make keyboard navigation more difficult. Using dev tools or CSS to make the focus indicator stand out more and more aesthetically pleasing or in line with your branding can help make a website easier to navigate without compromising style.
Step 2: Call To Action
Another easy way to make your website more accessible for people using keyboard navigation is to be specific with your calls to action (CTA). A CTA is a phrase on your website that invites the user to take action by clicking on the element, usually a button or hyperlink. A “sign up” button on a newsletter section or “read more” on a blog article, for example.
When you’re writing your CTAs, keep in mind that for users that rely on a screen reader, it might not be as clear what the clickable action is on your CTA. For this reason, it’s best to make your CTAs specific so that the context and action are clear for people who aren’t able to see all the visual elements of the web page. Instead of “sign up”, use “sign up for our newsletter”. Rather than “read more”, choose “read more about wildlife in Tennessee.” The more descriptive you are with your CTAs, the easier it will be for people using a screen reader to know what they are clicking on.
Step 3: Color Contrast
Color contrast is an essential part of accessibility for a website. To navigate a site, users have to be able to distinguish the elements and content on a web page. Color contrast is the difference between foreground and background color hues and it is indispensable for people with visual impairments such as color blindness – a fairly common condition that causes people to mix up colors or not be able to distinguish shades. Did you know around 12 million people in the US suffer from some form of colorblindness? That’s a lot of potential customers you don’t want to miss out on!
Color contrast is measured using a ratio ranging from 1:1 to 21:1. A white text on a white background, or no contrast, is noted as a ratio of 1:1. Black text on a white background is considered a ratio 21:1. For a website to be accessible according to W3C’s Web Content Accessibility Guidelines, the contrast needs to be at least 4.5:1. Any ratio less than 4.5:1 is not considered accessible for all users.
If you’re not sure if your website abides by the required ratio of contrast, don’t worry! There’s plenty of resources online that help you measure the contrast between two colors.
Step 4: Cursor Interaction
Another feature to keep in mind when it comes to website accessibility is cursor interactiveness. Adding interactive elements can make your website feel more modern and fun, while also indicating that an element is clickable. For example, a button changing colors or size when you hover your mouse over it. However, it’s important to ensure that you aren’t using the hover effect for essential information, like having the button, price, or description of a tour appear on a flexi card upon hovering. This is because screen readers will simply skip over those hoverable elements, making them inaccessible for keyboard navigators.
Step 5: Simple Language
It’s important to remember when you’re creating your website content that there are many people with cognitive differences and conditions that can affect their ability to understand text. Additionally, keep in mind that 75% of Americans read at an 8th grade level or lower. When writing your content on your website make sure it is clear and comprehensible for people of all reading levels. If you’re not sure if the content on your website is accessible, you can use tools like the Hemingway App to check the difficulty level of your text and have a friend or coworker read through your content before putting it on the site.
Step 6: Alternative Text
Screen readers and computers do not have the capacity to analyze an image and determine what it is or what it represents. For this, we rely on alternative text. Alternative text (alt text) is a description for an image that screen readers are able to read. Making sure you add alt text to all the images on your website is a great step towards making your website more accessible for blind or visually impaired folks. It also has the added benefit of contributing to your website’s SEO. If you’re not sure how to write alt text, we suggest closing your eyes and describing clearly and specifically the image at hand. That’s your alt text!
Step 7: Correct Markup
Screen readers and other assistive technology rely on heading structure to navigate web pages. There are headings labeled from H1 to H6 and you want to make sure that the structure follows the intended navigation of the webpage. Only use one H1 tag, this is your main title heading of the page, and make sure the rest of your headings are structured in the correct order. Using heading tags correctly is also quite important for SEO, as search engines rely on screen readers to scan and index pages. Remember that screen readers, whether they are used for a search engine or for a user with a disability, mostly ignore visual styling and rely on the heading structure to interpret a web page.
Step 8: Form Labels And Instructions
When it comes to online forms, there’s a trend to remove the labels or instructions and replace those with placeholder text. Similarly to why we advise not to have essential elements hidden to only appear when hovered and also why we advise making CTA’s specific, users that rely on screen readers need those descriptive texts to navigate through the page. Placeholder text in a form usually does not get read by screen readers, meaning a user will simply not be able to fill out the form on your website if instructions or descriptive text are not included. Make sure to make the labels and buttons on your form clear and descriptive so they are accessible to all.
Still not sure if your website is accessible or how to get started on improving accessibility for all users? Contact Tourism Tiger today to get started on building a tour operator website that everyone can enjoy!
Find this article useful? Enter your details below to receive your FREE copy of 95 Epic Places To List Your Tours and receive regular updates from Tourism Tiger and leading industry experts.
By submitting this form, you agree to Tourism Tiger contacting you via email.