• Digital Inclusion

Written by Andrew Doyle, Accessibility Product Manager, Invotra

Accessibility is about creating something with everyone in mind so that everyone is included (which is coined inclusive design). So, who exactly is everyone? This could be people with:

• Permanent disabilities: sight, hearing, cognitive or physical
• Temporary impairment: broken hand or an ear infection
• Situational impairments: sun glare or holding some coffee
• Older browsers, either by choice, due to business restraints or other
• Poor (or good) levels of technical expertise
• English as a second language

When accessibility is mentioned, permanent disabilities are often the first thought, however, this can be difficult to relate to and to fully understand issues involved. Here are some examples which should be more relatable but also demonstrate how we can develop solutions which provide an essential service to some but a usefulness to everyone.

• You’re outside and it’s a sunny day. You look at your phone, you can’t read the site well because of the glare
• You’ve just set up a computer but don’t have a mouse handy, or you have a cup of coffee in your hand
• You’re tired and auto-piloting the site
• You are navigating through a website on your phone and the website options are too small for your fingers
• You’re visiting a website that displays a language that you are not fluent in
• You have a slow internet connection and some images aren’t able to load

One of the first things to do when developing with accessibility in mind is to read the Web Content Accessibility Guidelines.

The Web Content Accessibility Guidelines (WCAG) website explains guidelines that must be met. There are three levels of conformance:

1. Level A
2. Level AA
3. Level AAA

Each level adds further requirements, where level A is the most basic and level AAA is the most advanced. Level AA is the happy median which provides a good experience without requiring drastic changes to your site which occur from some of the criteria from AAA.

Editors

This section is for anyone who is involved with creating, editing or publishing content on the intranet. This will provide some information on how to help create an accessible intranet.

Keyboards

People using screen readers rely on the keyboard, therefore everything must be operable using solely the keyboard.

Who uses a keyboard to navigate?

• People who are blind, who cannot see the pointer
• People with poor vision, who may have trouble finding or tracking the pointer
• People with hand tremors and therefore cannot use the mouse with accuracy
• Power users who want to quickly navigate or complete a form

Headings

Headings are used to structure a page, it makes it more readable and understandable. One way users can navigate is by heading levels, screen readers provide a list of all the headings on the page which can be skipped to.

Heading 1 tags cannot be added to documents because the page title widget already provides a title with a heading one and it is generally recommended to not have more than one heading 1 on a page.

Headings should not be skipped. Ensure blank headings (e.g <h2></h2>) are not within your documents.

Italics, bolds and underline

Bold is used to bring attention or emphasis to a particular word or sentence. It should not be used too liberally as it loses meaning and too much text which is bold makes it more difficult to read.

Italics should never be used for paragraphs, a large amount of text all slightly distorted makes it difficult to read and can cause reading issues. Italics can be used, like just here, but avoid big chunks of italic text.

Underline is peculiar because it can be associated with links, which are typically underlined.

Justifying text

Text should not be justified to both the left and right. This produces a “river of white” which makes it difficult to read. If justifying text, only justify to one side.

Lists

The WYSIWYG (what you see is what you get) editor options provide both unordered and ordered lists. If a list is being produced always use the WYSIWYG list option as it will create a semantic list. When a list is added via the WYSIWYG, screen readers will announce the number of items in total there are in the list and which item they are currently on. This means avoid using hyphens, asterisks and manually adding numbers.

Do

• This is an unordered list
• This is list item 2 of 3
• And this is the final list item

Don’t

– This is a pseudo list

– Created by adding dashes

– And spaces

Links

Don’t put the full URL, it doesn’t look good. It’s a pain to read and it’s a pain for screen readers. The link tool provided in the WYSIWYG allows the user to highlight a piece of text and then add a URL. When a full URL is added it will do exactly how you would expect – announcing the text that is there. Whereas displaying the shortened word looks neater and reads a lot easier.

You would ask someone to Google it, not to https://www.google.co.uk it.

Do

Invotra

Don’t

https://www.invotra.com/

Images

The add media tool within the WYSIWYG programme allows the attachment of files, including images. When attaching a file there are two key attributes to take into account:

1. Alternative text
2. Title text

Alternative text

Alternative text is the most important. It’s displayed when an image cannot be loaded, either because it can’t find the image source or the connection is too slow and it can’t load in time. It is also what is announced to screen readers. People don’t typically need to describe an image, if there’s a sunny beach with palm trees, to a sighted user it’s obvious what the image is. However, for the someone who is visually impaired, they rely on an accurate description.

A good example of alt text can be found on the inclusive designs website (link is external).

Some tips:

• Just describe it, with my description of a “sunny beach with palm trees” you should already be able to picture the image
• Avoid a single word like “beach”, it’s supposed to be a description
• Do not put the file name in, if I just took the file name and placed it in the alt text field, it could look like “beach-20193(1).jpg”; this is not helpful and does not provide a good user experience.

Title text

Title text should generally be avoided. It’s supposed to add a descriptive text and shows a tooltip, however, it is poorly supported within browsers and should not be used to contain important information.  This is because it is not reliable for screen readers and requires mouse interaction to appear.

This article was originally published here.

Comments are closed.