In 2022, we like to think we live in an inclusive society that’s open and accessible to everyone. In the real world, we see this in evidence all around, with many businesses and venues trying to make themselves wheelchair accessible, for example.
If you’ve been around websites for a while, you’ve probably heard the term “website accessibility.” If you are just starting out, you might not know this.
Website accessibility is the practise of making sure that there are no barriers that stop people with physical disabilities, situational disabilities, or socioeconomic restrictions on bandwidth and speed from using or getting to websites on the Web.
Online, however, we often fall short. This is usually not a deliberate form of discrimination but an oversight on the part of business owners and web developers. Intentional or not, though, it isn’t good enough, especially considering the fact that one in four adults in the United States lives with a disability. While not all of these will affect someone’s ability to access the internet, many disabilities do make it more difficult to navigate.
This is where web accessibility comes in. With millions of users finding it more difficult than it should be to browse websites and eCommerce platforms, it’s down to web developers and the companies who commission them to make it easier by designing websites, tools, and technologies that are open to everyone. In an ideal world, this means making your site accessible to people with a range of disabilities, from additional auditory and visual requirements to cognitive and physical ones. But it doesn’t necessarily just mean choosing the right chat bot or form of AI. In the article below, we look at how you can do this.
Top 5 Tips for Making Your Website Accessible
- Select a CMS that supports accessibility
- Make it simpler for screen readers
- Choose colors with care
- Use alt text to describe images
- Design your forms for accessibility
Select a CMS that supports accessibility
When it comes to building a website, there are lots of platforms to choose from, from WordPress to Wix. These will usually offer different themes for you to pick between, so you can tailor your website to suit your brand and business.
What lots of people don’t realize is that many come complete with notes on accessibility and tips for making your content and layouts better able to meet the needs of disabled users. Take advantage of this to get started on the right foot. You may also find that one provider is more compatible, for example, with text-to-speech technology or similar. It’s worth researching if you want to do the best by your customers.
Make it simpler for screen readers
IMAGE SOURCE: Pixabay.com
We also suggest using headings to properly structure content. As explained by SEO Blog Yoast, this makes it easier for screen readers to navigate what you’ve written, so use H1s and H2s to make blocks of text easier to interpret and ensure the correct order is maintained.
In line with this, you should:
- Always use H1s for the page title but never for any other headings.
- Properly organize blocks of text by using H1s, H2s, and so on to improve the flow and structure.
- Avoid skipping heading levels e.g. going from H2 to H4 because you prefer how it looks. This will confuse screen readers and imply content is missing from the page, negatively impacting the user experience.
Choose colors with care
Think carefully about the colors you use for your web pages too. For example, red-green color deficiency is something eight percent of the population suffers from, so using these shades will mean lots of visitors to your website are unable to view it properly. On the other hand, some disabled people benefit from having bright colors present, as it makes it easier for them to distinguish one section from another.
To suit as many people as possible, you should use color but do so sparingly and alongside other visual indicators. This will hopefully mean both groups find your website simple to use and navigate.
You’d be wise to separate chunks of text or different types of content using whitespace. Take a look at the casino Betway website for a good example. Here, you’ll see white and black are the primary colors for discussing game choice and promotions, with blue used to highlight calls to action. ASOS adopts a similar approach, featuring a primarily white and black palette offset by brighter pops of color, with lots of whitespace in-between.
Contrasting colors can also be useful for those suffering from visual impairments, such as limited vision or color blindness. Handily, a quick Google search will reveal several free online tools to evaluate this pre-publishing or when improving your site.
These insights should be applied to your wider branding and marketing as well. They’re essential in the digital age and can boost your business.
Use alt text to describe images
Lastly, be sure to include alt text for images published on your website. This allows screen readers to understand what’s being shown, so they can share this with the individual using them. This is especially important if images serve an informative rather than aesthetic purpose, such as infographics.
When creating your alt text, make sure it conveys the same message as the image it’s describing. While you don’t need to write paragraphs, you do want disabled website users to have the same immersive experience as anyone else. Remember, it’s just as important to get this right as it is to optimize the images on your website.
When it comes to making your website more accessible, there are so many simple ways to achieve this. It really isn’t an arduous task, which means there’s no excuse for not doing better and contributing to positive change online.
Design your forms for accessibility
When form fields aren’t named correctly, people who use screen readers don’t have the same clues as people who can see. It might not be clear what kind of information should go into a form field.
Each field on your form should have a label that is clear and in the right place. For example, if the field is for a person’s name, it should be labelled “Full Name” or have two separate fields labelled “First Name” and “Last Name.” To link the label text to the form field, use the label> tag or an ARIA property (see Tip #9).
A person should be able to tab through a form field and fill out all the fields before getting to the “Submit” button. If they can’t do this, they might not even know that there are more fields. Basically, the order of the tabs should match the way they look.
