What and Why Accessibility?
Simply put, accessibility is the ability of a website to deliver its content to everyone viewing the site. The web content accessibility standards were set by W3C, with all the technical documentation for accessibility standards to be found at https://www.w3.org/TR/. When considering accessibility, best practise is to incorporate as much as possible before the website has been built. As we have website and newsletter templates, the website accessibility practises around navigation have been implemented where possible. As this is the case, a lot of the accessibility standards are already being met by the template and therefore, not extremely relevant to those who are just adding content to the site. The following documentation is a snippet of what should be considered when creating content.
Meaningful Sequence
Meaningful sequence refers to how the content is being laid on the page. In order to comply with this, ensure that your Header tags are appearing in order of their value.
| Correct | Incorrect |
H1> H2> H3> H2> |
H2> H1> H4> H2> |
In the examples above, the correct sequence for the content is displayed on the left. The order for the heading element follows a natural flow. Starts with a H1, likely to be the page title, followed by a H2, which is followed by a H3. This shows a hierarchy of content. The incorrect sequence here shows a sequence of H2, H1, H4, H4. There is no order to the contents sequence or hierarchy. Both screen readers and search engines will look at this page and be confused by its structure. In the correct example why can I have the last header as a H2, is that not an incorrect sequence? Two H2’s on the page indicates a new section of content on that page. Any headers appearing beneath those H2’s are sub sections of their parent H2.Input Field Identification
While the system does this for you, it is important to know why it’s required. When creating a webform for a website, ensure that each field has a label for each input field. This label when clicked should focus your browser onto its input field allowing you to begin typing in it straight away.
Why?
This allows a user who is visually impaired to have their screen reader read the input field’s label and allow the user to navigate, using their keyboard, to the correct input field easily.
Colour Contrast
Colour contrast refers to the contrast between text colour and the background behind it. For the most part, this will be in reference to the colour of button text and the button background. As the websites are reliant on the colour of the account holder’s branding, it may be that buttons don’t have enough contrast between the background and text.
How to test the button contrast
Google Chrome’s developer console now includes contrast testing. To inspect the button or area you wish to test right click on the element and click ‘Inspect’.
You will now be able to hover over the element and see some of the information surrounding the element, including the contrast. If the contrast is okay, a green tick will appear in the Contrast line. If the contrast isn’t valid an orange warning symbol will appear instead.
How do I fix this?
It’s important that if the account holder is adding buttons themselves that they also maintain a consistent and valid colour scheme. As the button background colour is tied to the primary colour set out within the design tab of the account settings, changing that primary colour will correct all future buttons. This however may mean that the branding of the account will change, which the account holder may not agree with. Check with the account holder first before making this change. If this is accepted, this will also change the backgrounds for colour boxes if they have been used, or if they will be used in the future.
If changing the primary colour is not a viable option for the account, custom CSS can be created for the website which will overwrite the primary background colour for all buttons on the site.
Button Links
Under accessibility standards Buttons and links are required to display relevant information to the link. What does this mean? As a person who is using a screen reader is relying on the reader to tell them that the section they are currently on is a button. The text for the button should indicate where the person is going to or what they will download.
Examples:
| Correct | Incorrect |
| ‘Download the Cafe Menu PDF’ | ‘Cafe Menu’ |
| ‘Visit Mount Cotton School website’ | ‘Mount Cotton School’ |
Image Alternative Text
The alternative text (alt text) for images is used by screen readers to read to the viewer. For the visually impaired this allows them to know what is on the image. When setting up images ensure to add the alternative text as well.
When adding an image throughout the schoolzine platform, the name of the image file will be displayed initially. You will need to change this to a description that is relevant to the image inserted.
Examples:
| Correct | Incorrect |
| ‘Donald duck explores the Schoolzine Office’ | duck_day_out_4.jpg |
Tabbing Traps
The visually impaired user will use the Tab key to navigate around the website. Because of this we must be aware of tabbing traps. A tabbing trap is when the user tabs into a section of the site and can no longer tab backwards or forwards, rather being caught in some kind of loop or continual stream of content.
An example of a common tabbing trap is the Facebook plugin found on websites. This plugin supplies the site with a stream of the target Facebook feed. This stream can potentially continue with posts all the way back to the creation of the Facebook account, meaning the user would be pressing tab for an extremely long time before getting to the bottom of the site. To overcome a tabbing trap a skip trap anchor is required. This is a button that will allow the user to focus on an element after the tab trap so they can continue moving down the site.
Example:
| Skip Facebook Feed
|
Video – Captions
In order to maintain accessibility standards, all videos on a website must also include closed captions or a transcript of the video for the viewer to be able to read. The quickest method of having a video include closed captions is to upload and host it from YouTube. With the correct settings for a video, YouTube will automatically generate the captions for a video.
Another option is to have a PDF download of a transcript of the video to be linked right under the video. Apart from finding another video embed that allows the upload a transcription, another option would be to have the captions hardcoded into the video.
Resize Text
The ability to resize text is valuable for those with vision impairments. All of the Schoolzine sites and newsletters are equipped with the accessibility bar. On the accessibility bar is the ability to increase and decrease the site of the website font. If the website is not displaying the website accessibility bar. It is at the discretion of the account holder as to whether this bar is active or not and can be turned on within the settings of the account.
Text within images
As vision impared viewers rely on screen readers, it’s vital that all text is editable text entered via the CMS. If text is embedded into an image screen readers are unable to process the text, leaving a portion of the site inaccessible. The most common form for this is PDF Flyers. Quite often a graphic designed flyer will have it’s text flattened for the purposes of compression. If this is the case, the original file needs to be updated.
Moreover, currently over 50% of website views are now on mobile devices. Text that has been embedded into an image will shrink with the overall size of the screen, meaning the website has very little control over the size of the text. This could lead to the text being illegible.
But I see text in the website slider. Is that not the same?
The website sliders have been set up to allow text to sit over the top of a background image. This text is still editable and responds to the screen size. This text is therefore still able to be read by screen readers which is fine. As long as the contrast between the background image and the text is strong, there is no issue with having text over the top of an image.
Font Size and Line Height
As discussed earlier, the font size for a website needs to be changeable by the user in order to maintain accessibility standards. Furthermore, line height plays a large role in the readability of bodies of text. A viewer will find it difficult to distinguish between the rows of text if each line is too close to each other. In order to be accessibility compliant the line-height of the site must be a minimum of 1.5 times the font size.
Other rules around font size and accessibility are as follows:
- Spacing following paragraphs to at least 2 times the font size;
- Letter spacing (tracking) to at least 0.12 times the font size;
- Word spacing to at least 0.16 times the font size.
Seizure and Physical Reaction (Three Flashes or below)
When adding content to a website or newsletter, ensure that if there are any video or other moving media that it doesn’t flash more than three times within a second. For the obvious reason that this could induce seizures.
While this may be an extremely rare item that may come up, it is important to understand when working with content not produced by yourself.