What should you do in reality?
Your website probably looks amazing. You’ve hired designers to do their magic, had professional photographs taken, and crafted the copy to perfection. What is the experience like for someone who uses it differently? Consider users who use a screen reader to navigate, adaptive input tools or browser plugins which alter the way content is displayed.
Run Web Accessibility Evaluation Tool (WAVE) Your site. This free tool scans your website for accessibility problems. WAVE visually highlights the problem areas, pinpoints the code underneath, and gives recommendations to help fix them.
Figure 1. WAVE tool analysis of the citizenM site
Some of the results you get may be a little too technical (this is a real word!). but worry not – we’ve listed some of the key areas to focus on. We’ve found these to be some of the more common accessibility problems when auditing digital services. Addressing these issues can have a big impact on how accessible and usable your site is, whether you are still in the design stage or if you go back to fix a live website.
Let’s get started!
1. Alt Text
Images add life and vibrancy to a site. They can also help you support your content. Some images are just decorative, such as a photo of a dining table in your hotel. Other images provide more information, such as a photo or an icon showing the interior of your hotel’s deluxe suite.
But what about those people who are blind? Imagine blind screen reader users or neurodivergents, who may choose to disable the images in order to have a more focused and individualized experience. How do you accommodate their needs?
This is where alternative text (alttext) comes into play. It is a text description of an image, which explains its purpose or content for users who are unable to see it. Ask yourself the following questions: Is this image adding value to the text? What if you say yes? What is the exact description required?
Use empty alt text to indicate that an image is only decorative (alt =””). So screen readers can skip the image and not add any unnecessary audio clutter.
✅ Good alttext: “Deluxe Suite with Ocean View and King-sized Bed”
❌ Alt text incorrect: “IMG_2837 or photo”
2. Colour Contrast
Your brand probably has a colour scheme that suits it. This is great. What you should really be looking out for is if the contrast ratio It is important to keep the distance between text and background at a reasonable level. You don’t need to use black on white unless you want the look of a classy, clean website. You can also read about how to get started. This means that your content should be readable.
People with low vision and colour blindness will find it difficult to read content when there is a lack of contrast. This can be a problem if you are using your device in bright sunlight.
The following are examples of tools that you can use WAVE automatically flag contrast issues – anything below a ratio of 4.5:1 For normal text, this is a failure. Check your colour combinations. You want to ensure that the contrast between your hex code meets that 4.5 to 1 minimum so your content is readable by all users.
Figure 1 – Comparison of high and low text contrast ratios
3. Headings, Page Structure and Format
Like headings and layout, they help visually impaired users scan a web page quickly (because, let’s face it, who can read? We are able to help you with your purchase. Does everything get read?They are also vital for screen reader users and other assistive technologies.
The headings of the screen reader are used to guide users. It means using HTML headings like
Also, headings need to be arranged in a hierarchy. The title of your main page should be an acronym.
The right headings will not only make your content more accessible, but also easier to read. Everyone can benefit from this Navigation is a must.
4. Keyboard Navigation
It’s not just screen readers that need accessibility; it also includes people using other input methods. Users who use alternative input methods, such as joysticks, switches or voice commands on mobile, are also included.
How can I check this easily? Test your website with only a keyboard. Tab shifts the focus from interactive elements to another. Enter or space is what they use to activate things.
Here are some things to be on the lookout for:
- Tab order should include all interactive elements, such as links, buttons, menus, forms and forms.
- It is important to have a focus indicator that can be seen by the user (like highlighting or an outline) so they know where they are.
- All elements must be operated by keyboard only. No mouse needed.
Try it out on your site. Press Tab to advance and Shift + Tab for a backward move. If you find yourself stuck or unsure where the focus is… that’s a problem worth fixing.
5. Clear Labels with Link Text
The forms are the most frequent interactions on hotel sites, so they must be easily accessible. Each input should be labeled clearly, regardless of whether it is for room types or check-in date. Not only should error messages shout “ERROR!” but they should also explain what went wrong, and how it can be fixed. Red. Just like the rest your website, forms should work with keyboards and screen readers. There are no excuses.
Take a moment to review your link text. The screen reader user will often jump around from one link to another, so using vague phrases such as “Click here” and “More” is not enough. Use descriptive, meaningful text such as “View our accessible room” or “Book an upscale suite.”
The goal is simple: reduce ambiguity and make sure labels, links, and instructions are clear to everyone – not just those using assistive tech.
