fbpx

Website accessibility: designing your website with everyone in mind

Website accessibility Designing your website with everyone in mind

Written by Grey

Have you thought about website accessibility?

Website accessibility is a crucial part of your online marketing strategy. Websites should always be designed with a user first mentality. Providing an excellent user experience, as well as providing value to your user, should be top of your web design list of priorities. You may have already factored in excellent UX to your website. But have you considered that not everyone will be accessing your website in the same way? 

There are over 1 billion people alive on earth who experience some kind of disability. That’s 15% of the world’s population. To design a website that is truly accessible for all your visitors, you need to consider the access needs of everyone, not just the 85%. 

In the offline world, we have wheelchair ramps for individuals who suffer from mobility issues, easy-read fonts for people with impaired vision and BSL interpreters at live performances for those with impaired hearing. But what about the online world? The gov.uk website tells us that ‘making a website or mobile app accessible means making sure it can be used by as many people as possible’. This includes those with impaired vision, motor difficulties, cognitive impairments or learning disabilities, deafness or impaired hearing. 

As a tradesperson, thinking about how accessible your website is, is important for your business. Tradespeople perform vital services for everyone. It’s critical that every individual is able to book in with a plumber, to ensure continued access to hot water, or an electrician, to ensure continued access to online services. Furthermore, website accessibility – or digital inclusion – is now one of Google’s core web vitals. By carefully considering and designing your website’s accessibility, you can boost your web rankings.

Common issues in accessible web design include: hard to read fonts (where either the design, or font size impacts their legibility), videos with sound and no subtitles (which impacts both those who are hard of hearing, as well as those who may be viewing your content in a public place and have no access to headphones, poor choices of colour (for instance, a red and green colour scheme cannot be interpreted by those with red-green colorblindness) and flashing elements (an epilepsy trigger). 

How might individuals with different access needs be visiting your website? The range of technology available is diverse – screen readers, braille displays, screen magnifiers, special mice and speech recognition software amongst them. When designing your website, you need to keep in mind that not everyone is simply visiting it using either a basic computer set-up, or smartphone.

So, we’ve considered the importance of thinking about website accessibility. But how can you make sure that you’ve incorporated digital inclusion practices into your website design?

1. Use header tags to introduce a logical, hierarchical structure to your copy

Meandering, unstructured copy is confusing for everyone. By using header tags, you introduce a natural flow to the text, sign-posting the different sections. Start with your <h1> tag, which announces the main topic of the text (ie: Website accessibility: designing your website with everyone in mind). Then move on to your subheadings (<h2> and <h3> tags), announcing what each paragraph is going to detail. Writing your copy like this not only helps people process the content whilst simply reading off their screen, it also makes the text more accessible for people with screen readers.

Website Accessibility: using header tags to direct attention
Labelling images with alt text example

2. Label your images with Alt Text

People with impaired vision may have difficulties viewing images you upload onto your website. This is particularly an issue where you’ve used pictures to support points you’ve made in the text.

To ensure images can be ‘seen’ by anyone viewing your site, you can tag them with Alt Text. When a user with a screen reader visits your site, the reader will then read your alt text out loud.

3. Ask yourself whether auto playing content is necessary

Auto playing video might be considered a good marketing tactic by advertisers, as they immediately grab the attention of the website visitor. They have the advantage of circumventing people’s predisposal to automatically tune out advertising. However, this is where the advantages of auto playing content begin and end. Frankly, auto playing content is just a bit annoying, but beyond that, the surprise can be confusing for people with a cognitive impairment. Auto play also causes issues for anyone accessing your website using a screen reader.

If you really must have auto playing content on your site, put some best practice into action: have videos play in silence and code them to stop when a visitor hits their ‘esc’ key.

4. Include the option to enlarge font sizes

The reasoning behind this one is pretty self explanatory. Font sizes can be used to direct the attention of your reader to important points (remember your header tags?). By enabling the visitor to enlarge the font size, you ensure readability on all screen sizes. Avoid having your minimum font size any smaller than 12pt. WCAG Guidelines recommend ensuring that text can be zoomed to 200%. They recommend employing liquid layouts, which can accommodate 200% text.

5. Try to check off each point on these website accessibility guidelines:

  1. Are there alternatives for your non-text content?
  2. Is your content easy to see and hear?
  3. Can your content be navigated using a keyboard only?
  4. Have you minimised or removed content that flashes, blinks or autoplays?
  5. Have you ensured that information, like your terms and conditions, come in a variety of accessible formats?
  6. Does your colour palette employ sufficient colour contrast between text and background?
  7. Have you labelled the fields on any forms you want visitors to fill out descriptively and appropriately?
Accessibility checklist

Website Accessibility: In conclusion

Hopefully, this article exists as a good starting point for you to consider how to make your website accessible to those of us with alternative needs. It’s by no means an exhaustive list. Learning to be inclusive and to think about those who are experiencing life differently to us is a life-long lesson. If you’re struggling to implement any of the suggested changes above, why not get in contact with us? If you’re looking to revamp your tradesperson website, we’re the company for the job!

You may also like…

Contact Us

Contact Form

01174 418 681

enquiries@shakeandspeare.com

Avon Street, Bristol, BS2 0PT

×

Hello!

Click one of our representatives below to chat on WhatsApp or send us an email to enquiries@shakeandspeare.com

× How can I help you?