Skip to content

Design | October 14, 2024 | By Monika Halsan

Web accessibility explained

Happy Invisible Disabilities Week! While many of us may never think about (or need) web accessibility, there are plenty of reasons to ensure your website is accessible.

In this post, we’ll explain some of the ways we make websites accessible at Healthy Pixels.

Keyboard with a wheelchair user key.

What is web accessibility?

Web accessibility refers to making the web usable for everyone, regardless of their disabilities or other barriers. In this post, we’ll primarily focus on website accessibility, though most principles apply to any user interface.

When a website is not accessible, it can become difficult or even impossible for certain visitors to consume and interact with, whether due to auditory, cognitive, neurological, physical, speech, visual, age-related, or temporary or situational limitations. And yes, even slow internet connections count.

Users that benefit from web accessibility

Everyone benefits from an accessible website. An easy-to-use experience is always more attractive than a difficult one, and accessibility measures generally do not interfere with anyone’s user experience.

The groups that benefit the most include:

  • Older people
  • Those with disabilities
  • Users on devices such as smart TVs
  • People with poor or unstable internet connections

Making your website accessible

How you make your website accessible depends on how it was built. It’s generally recommended to consider this during the initial build, but that doesn’t mean all hope is lost if it wasn’t.

Let’s explore some of the considerations we make on websites built by Healthy Pixels:

1. Descriptive button and link labels

Meaningful button and link labels help users navigate your website. “Learn more about our services” is much clearer than “Learn more.”

This is easy to implement by simply ensuring you use descriptive labels.

2. Alt text for every image

For images that add value to your content (i.e. not purely decorative), descriptive alt text can be helpful. It’s not necessary to state that it’s “an image.”

At Healthy Pixels, we often hide decorative images from screen readers so the user can focus on the content they came for.

Besides, alt text is also good practice for SEO.

While this is relatively easy to implement, it can be time-consuming if you already have a lot of images.

3. Intuitive forms

Forms can truly make or break someone’s experience on a website.

  1. Keep your form labels visible at all times. In recent years, many designs hide the label as soon as the user clicks a field and starts typing. This can become problematic, as the user must remember whether the label was asking for, say, their first or full name. When reviewing the form, they might not feel confident they’ve entered the correct information in each field.

    At Healthy Pixels, we either use static labels that don’t disappear or floating labels that simply move when the user starts typing.
  2. Error messages exist to help users, so make them descriptive. “There is an error” is much less helpful than “Please enter an 11-digit UK phone number, e.g. 0700 123 4567,” if the user has missed a digit.

4. Screenreader considerations

When you visit the Healthy Pixels website, pressing the Tab key on your keyboard will display a ‘Skip to content’ button. This allows screen reader users to skip the main navigation and go straight to the page’s body, helping them bypass repeated content on every page.

We also ensure all clickable elements have a visual focus state to indicate that they are interactive for keyboard clearer navigation.

5. Strong heading hierarchy

Every page should have one (and only one) H1—the page’s main title. This is followed by H2s, with each H2 optionally having H3s beneath it, and so on.

The different heading types should be visibly distinct (e.g. in size, colour, or boldness) and have the correct code markup. This helps users visually differentiate headings and allows screen readers to properly understand how content is structured.

6. Resizing text

If you try to resize the text on the Healthy Pixels website (Ctrl/Cmd & +/-), you’ll notice that all text remains legible, without any overlapping or interference.

This is because we build fully responsive websites, using scalable units rather than fixed pixel values (common in builders such as Framer). This ensures the content adjusts to the space, allowing users to increase or decrease font size without issues.

7. Multimedia support

When working with clients who use video or audio, we recommend adding captions, transcripts, or other alternatives for users who might not be able to hear or see the original content.

Closing thoughts

Whether you believe your users need accessibility support or not, doing what you can to improve your site’s accessibility is crucial. After all, “a more accessible web is a better web for all.” Not only will this make it easier for your users, but it will also improve their overall satisfaction. That’s what we call a win-win for everyone!

If you’re unsure how to make your website more accessible, why not email monika@healthy-pixels.com today or book a free call to discuss your needs?

book free call now

 

For more information on web accessibility, please visit the W3C Web Accessibility Initiative website.


Recent posts

Read Have you prepared your 2025 marketing strategy?
Road labelled Prepared? 2025.

November 21, 2024

Have you prepared your 2025 marketing strategy?

Read RentaSite competition: 3 months off
Three design options for the RentaSite homepage.

October 22, 2024

RentaSite competition: 3 months off

Read Preparing for Invisible Disabilities Week
Person with broken arm using a laptop.

October 9, 2024

Preparing for Invisible Disabilities Week