Do you know that there are Internet users who visit websites using screen readers?
Typically, these are visual impaired people.
They are not able to see your website with their eyes. Instead, they rely upon software to read your website to them.
At the moment, there is no evidence from Google to suggest that making your website more accessible will boost your search engine ranking.
But, scoring high for accessibility, means a better user experience…for everybody.
Is it worth risking the loss of a sale or enquiry by not making your website accessible?
My Website Analyser test
In this analysis, I test your site for accessibility on Google PageSpeed Insights.
Google PageSpeed Insights is Google’s website audit tool.
For accessibility, it has 35 checks that it can run, and will only run if it finds they are appropriate.
Your score is a weighted average of the checks that it did run.
How to score well
As I said previously, there are 35 checks that Google PageSpeed Insights could run for accessibility.
However, they are not all appropriate for everybody.
Therefore, I recommend everybody satisfies the following 5 checks:
- Add a name to all buttons
- Add a title tag to all pages
- Add a label for all form elements
- Add an alt attribute to all images
- Don’t use tabindex
1. Add a name to all buttons
As Google says, “buttons without names are unusable for users who rely on screen readers. When a button doesn’t have a name, screen readers announce “button”.”
Imagine, if you are a screen reader user and you browse the web listening to “button” being said for every website.
Infuriating!
If they came to your website and instead of hearing “button”, they heard “submit this form”, now they have some context, and they are more likely to take action.
There are several ways that you can add names to your buttons.
2. Add a title tag to all pages
You already know that title tags are important for SEO.
But it is equally essential for screen reader users as well.
By providing a title in a title tag, you are giving the user a context for the rest of your content.
Find out Google’s requirements for writing an accessible, meaningful title.
3. Add a label for all form elements
When I say label, I mean the label HTML element.
The label HTML element is usually the small text that appears before a form input.
I say usually, because it is not always there, and it is not always the label element that is used.
But it should be used and this is how to use HTML labels correctly.
4. Add an alt attribute to all images
Have you heard of “alt tag”?
Well this is the phrase that is usually talked about, but it is not accurate.
Because alt is actually an attribute of the img tag in HTML – it is not a tag itself.
The alt attribute should be added to all informative images, and it should be a text description of the image.
Screen reader users will typically not see the image, thus your alt text need to describe what everybody else can see.
But what about other non-informative images that are decorative?
Just use an empty alt attribute.
5. Use tabindex
If you have dabbled in some HTML before, you have probably heard of tabindex.
The advice used to be, use tabindex to define the order in which you want website visitors to tab through your webpage content.
That is no longer true.
You don’t want to use tabindex anymore as it “can create as many problems as it can solve“.
It creates an unexpected tab order, resulting in the user struggling to use the page as they want or expect to.