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:
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.
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:
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.
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.
People using screen readers rely on the keyboard, therefore everything must be operable using solely the keyboard.
Who uses a keyboard to navigate?
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.
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.
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.
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.
– This is a pseudo list
– Created by adding dashes
– And spaces
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.
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:
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).
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.