Website Accessibility Guidelines

communication, icons, disability communication

Website accessibility

Removing barriers to accessing and interacting with the internet. Poorly designed websites, applications, technologies, or tools can create barriers that mean some people may not be able to access the information they require or interact as they wish on the internet.

Although primarily aimed at improving access for those who may struggle to access information due to limitations in their –

  • auditory
  • cognitive
  • neurological
  • physical
  • speech, or
  • visual abilities

the benefits are available for all. 

The Convention on the Rights of People with Disabilities (CRPD) which has been taken up by more than 175 countries includes a direct reference to the rights of all people to have equal access to communications technology. 

This means that there are already policies in place which can be used to enforce accessibility by law (search WCAG 2 for more details). Although limited at the moment to mainly large organisations, there is no good reason why all website designers are not incorporating accessibility into their sites now. 

In this article we will be looking at web content and website accessibility guidelines relevant to us as web designers/creators.

The Page Title

How can the page title affect accessibility? 

Let’s think about what we want our page title to achieve.

  • Contains our carefully researched keyword/s – Search Engine Optimisation
  • Is grammatically correct
  • Is relevant to the content
  • Is unique
  • Promotes our knowledge 
  • Enhances our brand/website

What we rarely consider is how the page title is displayed or interpreted by the user. The user wants to know what the content of your page is likely to be and they want this information supplied clearly and unambiguously. How many of us can honestly say that they considered this when researching their page title?

One good way to think about it is to look at the title of your page as a minimised tab at the top of your screen. From the little information visible on the tab, can you easily identify what the page is about? 

 

infographic explaining how to make a title accessible

Alt Text

Used to explain the purpose of an image. Getting this right is important, for example a blind person using a screen reader will hear the alt text read out or people who have switched off pictures in order to speed up downloading will read the alt text. 

So what should the alt text say? Good alt text does not necessarily describe the picture itself but the message the picture is conveying. Imagine you are reading your post out to somebody and describing the ‘purpose’ of each image, this is what should be in the alt text. For example you may have used icons to illustrate that you expect an action to take place such as a search button. The icon may be an image of a magnifying glass but your alt text may be ‘search’ (there is no need to include words such as button or link as screen readers will automatically add that information. 

If your image includes any text, then that text must be included in the alt text.

Should every picture have alt text? No, if a picture or image is being used just to make the post look more attractive, then alt text is not required. A way of checking if alt text is required, is to imagine the image had been removed from your post, would the user still receive all of the information?

Headings

Information on webpages is often separated by headings. Using headings correctly and marking up clearly (h1, h2, h3 etc.) allows users who use screen readers for example to navigate efficiently around the webpage content.

In almost all cases webpages will include at least one heading and where more than one is used it is important to ensure the correct heading and markup is used. For example, h1 may be used for the page title, h2 used for main headings in the content of the page and h3 used as intermediate headings etc. This helps keep things clear and straightforward for the user.

Luminance Contrast Ratio

The luminance contrast ratio refers to the difference between the text colour or luminance (the intensity of the light emitted by the text) and the background colour/luminance. Too close and the text can be difficult to read. As a guide, a minimum luminance contrast ratio of 4.5:1 is recommended for normal sized text. There are tools available to help identify the ratio of your text but basically you are aiming to make your text as clear as possible.

The most common format is black text on a white background, but certain users will struggle to clearly read text that is on different colour backgrounds such as when on images. Take time to consider how clearly the text appears.

Text Size

Some users will need to enlarge text to be able to read it clearly. Depending on what browser, computer or program the user is using the ways in which the text can be enlarged will vary. The most common ways used to enlarge text are

  • text size settings – the user changes the size of the text in their settings.
  • zoom text only – the user is able to zoom in on the text.
  • zoom whole page – the user zooms in to the whole page.

Unfortunately, if the web page content has not been designed properly, text can be overlayed, or cut off, or require scrolling horizontally to see all the text. All of these scenarios should be avoided by ensuring the content is designed properly. 

Check your content by enlarging the text yourself on the webpage and checking everything works ok. To ensure the best results it is important that when producing the content on your page, you use the correct format eg. text inserted into text boxes etc. Whilst checking the text it is also important to ensure any buttons or interactive elements are functioning correctly when zoomed in.

Keyboard Functionality

Many users are unable to use a mouse or trackpad. In this case the keyboard or other assistive technology is used. Check that your webpage functions correctly by using the keyboard only. Can you use drop down lists or activate buttons and links etc. 

One function commonly used is the mouse hover (accessing extra information by hovering the mouse over an image or text) this is not accessible through the keyboard, so that is something to be aware of. Visual border focus is the term used to describe how text is highlighted as you move around the page. 

Check that your content functions correctly when using the keyboard. Enable keyboard navigation on your browser (if supported) this is usually enabled through system preferences. Once enabled, navigate around your webpage using only keyboard controls checking you can access and activate all areas.

Animated and Audio-Visual Content

Lots of flashing images and scrolling text can be very difficult to read for many people, please use sparingly and ensure scrolling etc. can be halted if required. 

Audio visual content is a big growth area presently and can still be leveraged to reinforce your message. However it is important to ensure the option of subtitles is available and/or a transcript is available. 

Plug-ins

Usefully there are many plugins available in WordPress which can audit and update your site and content helping compliance with WCAG 2 (the current legislation and standards applicable to accessibility). I will not be recommending a plugin here but if you would like some help in choosing a plugin please take a look here, what is a wordpress plugin?

Further Information

If you would like to learn more, I recommend taking a look at https://www.w3.org/WAI/ as it contains pretty much everything you could possibly need to know about web accessibility and regulations.

Although aimed at those who have difficulty interacting with the internet any changes you are able to make to improve access will be of benefit to everyone and maybe even make your site more of an authority compared to similar sites that are not so accessible.

Thanks for reading, please feel to get in touch with any comments or questions.

Justin – founder of adcudere.

Want to make more money from your website?

Sign up to our newsletter and get the latest news direct into your inbox

Leave a Comment

Your email address will not be published. Required fields are marked *