6 minutes reading time (1182 words)

An Introduction To Website Accessibility


We all know, or at least have heard or read somewhere, that websites need to be accessible for everyone. But what does that mean, and what can you do to make your website fully accessible? Julian White, who experiences accessibility issues on a daily basis, explains the basics for the Joomla Community Magazine

What Is Website Accessibility?

Quite simply, website accessibility ensures that anyone who is differently-abled (previously known as being disabled) can fully interact with every section of a website. This is not restricted just to those with a visual impairment, it includes those with dyslexia, mobility issues, learning difficulties and other debilitating conditions.

The majority of people will have no problems accessing a website. That is different for those who suffer from restrictions in their abilities. They can encounter frustration when attempting to read an article, complete a form or prove they are a genuine person rather than a malicious bot.

Don’t let your website be a hindrance, ensure it is open and accessible to all.

The internet becomes ever more important in everyday life from work, eCommerce and social activities. That is why it is vitally important to ensure a site is fully accessible to every visitor. It is something developers must take seriously.

About Me

As a severely sight impaired person, I rely totally on a screen reader to access and operate my computer, tablet and smartphone due to having no useful sight remaining. Without this assistive technology, the incredible world of the internet would be totally off limits and remove my independence.

From early 2016, I became interested in developing websites and following detailed research decided that Joomla was the way forward.

Over the years, I studied HTML, CSS, phpMyAdmin and SQL using a range of useful websites along with forums to help resolve issues when they cropped up.

At times it was incredibly tedious, especially when trying to understand blocks of code and this would leave me feeling more like Neo from The Matrix with code scrolling in front of my mind’s eye. I persevered and although certain aspects will always elude me such as images and colours, I can visualise a web page, decide where objects should be placed and most importantly, ensure my websites are accessible to those using a screen reader.

Therefore, I wish to impart some of the techniques I implement when developing a Joomla website to you. I hope that this will help developers understand how their websites can be improved. You can do this usually through simple solutions such as where to place a cookie notice or the best practice for alternative text on images.

Does Website Accessibility Apply To My Websites?

Have you ever spotted the Accessibility option buried within the lower navigation of a website? Perhaps you have even taken the time to investigate what lies behind that link and wondered, does this apply to me?

Well, the answer is most definitely yes, you should be taking this into account when developing a website and not just leaving it to chance. 

The Consequences Of An Inaccessible Website

In late 2019, the Supreme Court in Washington, USA opened the floodgates for sight impaired (partially sighted) and severely sight impaired (blind) people. They now can sue companies and individuals if their website is inaccessible and this could happen to you even outside the USA.

Dominos Pizza was the first such organisation to fall foul of this sometimes under-resourced area of website development and with just a few simple additions, their site could have avoided this expense and bad publicity.

Learn How To Improve Your Websites

In this series of articles on Website Accessibility, I shall be investigating a number of issues that affect myself on a daily basis, from the amusing and funny through to the downright terrible that ultimately forces me to give up and try somewhere else instead.

Let's Get Started

Skip Links

Navigating a web page using a screen reader can be a slow process especially for those that are new to assistive technology and this is why skip links are so important. Screen reader users cannot skim text or images as a fully sighted person would and instead rely on hearing every object announced one after another. 

The Scenario

Upon the web page loading, most often the screen reader will focus on the first object on the page. This might be a cookie notice or the website logo. But imagine that you must proceed through a jungle of search fields, navigation links (menus) and adverts before reaching the main content. This soon becomes a laborious task if the user wants to view a number of different pages on the site.

This is where the skip links come in as they allow the site visitor to quickly select an area on the page to jump straight to without having to move through a clutter of information first. A simple skip link might offer the user the opportunity to jump immediately to the main content. This is acceptable however, with Joomla 4, we all have the option of enabling the interactive skip links menu.

Previously with most Joomla 3 templates, I have worked with, skip links were not included. I had to embed them into the template myself using custom modules and internal page links. This is no longer necessary due to the great work of the Joomla developers.

Once enabled for the frontend of your site, anyone using a screen reader will be presented with an option called "Keyboard Navigation" and this will be located towards the initial landing point of a web page. When the user opts to use this keyboard navigation they will be presented with a range of options that might include:.

  • Main Content
  • Navigation (Main Menu)
  • Navigation (Lower menu)
  • Footer
  • Header
  • Form

Of course, these options will differ depending upon the layout of your page but it clearly defines where the screen reader user can jump straight to with a single press of their chosen key combination.

How To Enable Skip Links within Joomla 4

By default, skip links are enabled on the administration area of Joomla 4 but you can easily enable them on the frontend also by following these steps.

  1. Log into the administration area of your site.
  2. Select Plugins.
  3. Search for System - Skip-To Navigation and open its dashboard.
  4. Using the drop-down select next to Site Section, choose the Both option or Site only if you don't require it within the administration area.
  5. Save and Close.

That's it. You have just made the first step towards making your Joomla 4 website far more accessible than millions of other websites on the internet. Believe me, every screen reader user that visits your site will genuinely thank you for taking the time to make their lives that little bit easier.

Want More Accessibility Tips And Tricks?

Of course you do! In the rest of this series of articles on Website Accessibility, I will be covering a range of them to help you get your site noticed for all the right reasons.

The next article will be looking at GDPR and Cookie Notices

Joomla’s New HTTP Headers Plugin For J4
Winning times for Joomla!

Comments 2

Already Registered? Login Here
Adrian Versey on Saturday, 28 May 2022 03:58
Great article.

Great article. I look forward to the rest of the series.

Great article. I look forward to the rest of the series.
ANDI on Saturday, 28 May 2022 12:58
Good article

Good article thank you !!

Good article thank you !!

By accepting you will be accessing a service provided by a third-party external to https://magazine.joomla.org/