Tuesday 13th November is Purple Tuesday, or the UK’s ‘Accessible Shopping Day’. According to the Purple Tuesday site, nearly 20% of the UK has a disability or impairment, which accounts for an estimated £249billion towards the UK economy!
But there is so much more both physical and online retailers can do in order to improve the shopping experience for disabled shoppers and the potential of the ‘Purple Pound’ isn’t fully being understood. With many retailers adapting their high street stores today and removing barriers to make it easier and safer for those with disabilities to shop, we wanted to share some top tips for optimising your online store too.
1. Make sure to use large font sizes and high colour contrasts
This is a fairly self-explanatory tip but you should make sure that your font size is large enough to be easily readable. Some text could potentially be small (such as fine print) but you shouldn’t have small font sizes as a default.
You should make sure you don’t have any font colours that are too similar or have low contrast with their background. This can cause many issues for many people and for many specific devices. The grey text on a white background might look amazing on 27” iMac Pro screen but it won’t look that way for all people.
2. Don’t remove your ‘outline’ properties
When you use your outline property, a glowing line may appear around your element – whether this is a form field, button, or link. Many online stores remove this because it could ‘look ugly’ but this can be bad for accessibility.
If you don’t have a mouse or struggle to use a mouse device, you may rely on your keyboard or keystrokes to navigate through a site. But if you remove that glowing outline, these users won’t know where they are on-site or what buttons they are navigating through.
3. Add meaningful alt properties to images
When uploading images to your site, always make sure you add an alt tag to describe what the image is. The alt tag is used by many screen readers for those with visual impairments, and so you need to make sure this is descriptive and concise.
For ecommerce sites, your products may have multiple product images and so each image needs to have an appropriate alt tag for those who rely on this to differentiate.
4. Ensure form fields have labels
It seems to be a common theme that form fields are visually described with their placeholder text – the grey text in the box that disappears once you start typing. Not only is this visually confusing (particularly once all form fields are completed), it also provides no point-of-reference for people using voice-to-text software.
If you must forego labels, ensure they are only visually hidden (for the technically-inclined, check out this resource on display:none); don’t rely on placeholder text alone!
5. Use native HTML elements where possible
Certain native elements with default styles (dropdowns being a common example) just don’t look great on a page, so people often restyle them.
Unfortunately, restyled components don’t often work too well for many users who rely on keyboards and keystrokes to navigate through a site.
Sticking with existing elements also ensures that we aren’t re-inventing the proverbial wheel!
Make your online store accessible
This barely even scratches the surface of things that online retailers can do to make their sites fully accessible; we haven’t even touched on accessing on slower networks or testing across multiple devices! However, even with a pre-existing site, these should be something that can be implemented with relative ease to immediately make your site easier to use.
Here are some further resources you might find useful for improving web accessibility:
- Purple Tuesday’s Web Accessibility Guide
- WAVE Web Accessibility Evaluation Tool
- AbilityNet.’s 7 Steps to Digital Accessibility
- The A11Y Project
- Techniques for WCAG 2.0 (for those who want to really get in depth)
Comments
Add comment