Need Web Startup Advice?
Get in touch today!

Twitter icon   Facebook icon   Google+ icon   LinkedIn icon   Tumblr icon   WordPress icon

How SEO And Web Accessibility Crossover

Posted May 2016. Updated March 2018 | By

With Global Accessibility Awareness Day (GAAD) imminent on 17th May 2018, we thought it would be wise to delve into the convergence and crossover of SEO and website accessibility.

Optimising both means you are effectively influencing a few factors:

  • Search engines will deem your website relevant, in-turn get ranked higher on Google.
  • Web users will understand your website pages better.
  • People with disability can cohesively navigate through your content, which means you are also on the way to addressing Corporate Social Responsibility (CSR).

Website development is a formidable wedlock between users and search engines.

So here’s how SEO and website accessibility crossover:

Page Title Tags

For SEO purposes, page title tags allow search engines to understand the relevancy of your page with the initial part of the title having the most important keywords and phrases. The keywords should be made use of in the most natural and user-friendly manner.

Page title tags display in search engines results and the browser tab area of websites but are hidden on actual web pages.

We searched for Huffington Post on Google; as you can see the title tags sets the tone and relevancy of a web page.

Title tags should ideally be up to 55 characters with spacing (max 60) to adhere to Google’s search results (differs for Bing / Yahoo!). Any more characters will truncate into dots. W3C state that it should be less than 64 characters to meet general web best practices.

Huffington Post Google Search Page Title Example
Huffington Post Browser Tab Page Title Example

On the actual Huffington Post website, you can view the same title in the browser tab, where the arrow is pointing above.

When using assistive technology such as VoiceOver or JAWS (screen readers) for people who may have visual disabilities, the title tag will read aloud whatever is specified. This is why, for both cases, your website should have different titles for each page.

Please note, this will display if website owners integrate the title and meta tags on their website. If you don’t add specific text you want your web users to see then Google will generate content from your web page automatically in the title if they deem it suitable.

Also, when you share your website page on social media, the page title will display.

In the HTML code, the title tag is shown below for Huffington Post's Homepage. If we added this as text on here, the HTML would have picked up and hidden it as mentioned earlier, therefore, we had to display this as an image.

Huffington Post HTML Page Title Example

So it's good practice to make each page title relevant, appealing and click-worthy as possible as they are rich snippet ads of your website.

Huffington Post Social Media Page Title Example

Header Tags (H1, H2, H3...)

The use of headings and sub-headings with relevant keywords flowing seamlessly improves your SEO rankings.

Headings also break down chunks of content and enables the user to easily scan your pages, which is great for all types of users. Headings and subheadings structure's the content as the user goes through the page. It's better than having one page full of just text as this immediate puts the user off reading further.

Headings are particularly great for website accessibility too, as people with visual impairment who are using assistive technology can tab through the headings and select which content they wish to be read out aloud.

H1 should be used once per page for SEO purposes, subsequently, H2, H3, H4, and so on can be used more than once depending on the hierarchy of the content.

HTML Code Heading Example

Anchor Text / Links Text

All links should be meaningful when it comes to SEO and web accessibility.

Links in your content, linking to other pages on your website are known as anchor text in SEO terms.

Do not use ‘click here’ or ‘find out more’ to describe a link as it does not assist the disabled user where the link text alone will navigate to - it has to be meaningful on its own as the screen readers will read out the link text. They can tab through just links in content too.

Generic links like ‘find out more’ will not help search engines either to understand the importance of the anchor text. So when linking to another page, specify exactly where the link will go to with 2-3 relevant keywords.

For example purposes, the anchor text link is underlined in the screenshot shown.

Do not overuse anchor texts and overstuff with keywords, as it will be counted as spam. If the links are relevant, flows well and has high usability than its fine.

Descriptive Anchor Text Link Example

Alt Tags / Image Descriptions

Alt tags describe's what the image represents. It's short for alternative tags.

This is great for people using assistive technology, as it will read what the image is about if implemented.

For SEO purposes, if you explain the image as well as put relevant keywords as closely related to the image, search engines will count this up part of their algorithm and the image will be indexed too.

Also, when the Internet is not working properly sometimes the image won’t load but the alternative text will display instead. Same applies when the image is missing or the image file name is incorrect.

In some browsers, when you hover over an image, the alt tag will pop up.

This HTML code example includes the image file name, the size of the image and the alt tag at the end:

HTML Alt Tag Example

In WordPress, alt tags can be easily updated in the media library.

Alt tags should be integrated for all your images to describe their meaning unless it’s a decorative image, which is no use to the user so you can leave the text area empty i.e. alt="".

Web Page Naming Convention

Ensure your web page URLs are SEO-friendly by using the most important and meaningful keywords that are relevant to the page itself.

Also, use hyphens to separate words in file names and not underscores because search engines do not recognise underscores as word separators.

E.g. our marketing services page, we‘ve named it:

Here’s a bad practice page file name that will hinder Google ranking your pages. The URL alone does not tell web users or search engines what the page is about: page_seven_564

Information Architecture (IA)

Organising information and implementing content in a structure that's comprehensible, and searchable is critical to SEO. Without good user experience, no amount of optimisation will help your website’s rankings.

In addition, making use of breadcrumb trail is another way to show the users where they are located in relation to your website, particularly if your website has deep routed pages. This is sufficient to aid the user in navigating your website and improves the User Experience (UX).

You can also add a breadcrumb trail, which is usually displayed just below the main menu, for instance:
iAdControl BlogThe Importance of Information Architecture

On most websites, the menu tab is highlighted, this is a quick visual aid to indicate the user's location as well.

Information Architecture Planning

Sitemap Page

If you have quite a large website, then it is always handy to have a dedicated sitemap page to list all the content links of your website in a hierarchical manner. The sitemap makes it easy for users to access information effectively as a flat structure and makes every page reachable.

People using assistive technology are likely to use the sitemap page as the main source for navigating through websites quickly to find what they are searching for.

Website Code Quality

Having the latest and compliant HTML 5 code means that your website can be read by the widest possible range of browsers, devices and are less likely to break your website page. This helps all types users and won’t disrupt screen readers as they go through the pages.

On WordPress or pre-set template websites, it is rather challenging to keep the code complaint within the semantic HTML formatting so try to keep it clean where you can for each page. Do not use any styling elements hard-coded within the HTML - have this in the actual CSS file.

Complying with W3C Markup Validator is said to be potentially about 4% of the SEO algorithm. It maybe a small percentage but every little helps to climb up the search listings and aid website accessibility.

That's all for now...

Web Accessibility Resources

Website Accessibility Matters

Read our March 2016 blog: Inspirational Quotes To Spring Clean Your Mind

Read our February 2016 blog: What is SEO?

Read January 2016 blog: iAdControl SEO Tool - Improve your website's search performance today!

Read December 2015 blog: Choose Easy To Use Websites. Choose WordPress.

Read October and November 2015 blog: Free Webmaster Tools To Optimise Your Website

Read September 2015 blog: Screaming Frog, Hidden Panda!

Read August 2015 blog: Rank up the SEO algorithm with quality backlinks to your website

Read July 2015 blog: CAPTCHA - Human or Robot De Facto Standard Defective

Read June 2015 blog: How Meta Tags Do and Don't Impact SEO

Read May 2015 blog: What is Affiliate Marketing?

Read April 2015 blog: 7 Digital Marketing Mistakes to Avoid in 2015

Read March 2015 blog: The Importance of Information Architecture

Read February 2015 blog: The Future is Intentional: Semantic Search

Read January 2015 blog: Planning Your SEO Strategy for 2015

Read December 2014 blog: Let us help you integrate Google Analytics on your website

Read November 2014 blog: Top Ten Tips For Improving Search Engine Optimisation (SEO)

Read October 2014 blog: How we can improve the web and make it a better experience?

Read September 2014 blog: Why quality web content marketing is important?

Read August 2014 blog: Why businesses without a web presence are missing out?

Read July 2014 blog: Make your website work for your business

Read June 2014 blog: Why accessibility and usability matters with web design?

↑ Back to the top

Let's Get Connected:

Twitter icon   Facebook icon   Google+ icon   LinkedIn icon   Tumblr icon   WordPress icon

PDF icon Top 10 Tips For Improving SEO
(Please download Adobe Reader to view the content).

This website conforms to W3C HTML5, CSS3 Web Standards,
WAI level A & Web Content Accessibility Guidelines 1.0.

HTML 5 validation logo   CSS 3 validation logo   Level A WCAG 1.0 logo

Grow your online business with organic search...

Organic Search Marketing is where you naturally position your website so that it will appear higher in the listings for certain keywords that your potential customers are searching for.

Digital Events  |  Sitemap  |  Accessibility  |  Cookies & Privacy Policy

iAdControl © 2018  |  All Rights Reserved.
iAdControl Limited is registered in England & Wales.