Download In order to check a web page for accessibility

How to Make AODA Compliant Web
Pages – General Practices
Disclaimer: The procedures regarding different tools and features described within this document are
applicable to Windows computers ONLY. Procedures may be different if your computer is running a
different operating system (e.g. Mac OS, Linux).
Written By: Chance Cantwell
For: University of Guelph – Child Care and Learning Centre
Date Last Modified: July 18, 2016
Table of Contents
Introduction .................................................................................................................................................. 4
Accessibility Verification Tools and How to Obtain Them ............................................................................ 4
Using Accessibility Verification Tools ............................................................................................................ 5
Using WAVE Toolbar ................................................................................................................................. 5
Using Web Developer Toolbar .................................................................................................................. 9
Using Contrast Checkers ........................................................................................................................... 9
Verification of Elements on Web Pages ...................................................................................................... 10
Title ......................................................................................................................................................... 10
Resizing of Text ....................................................................................................................................... 11
Navigation without a Mouse............................................................................................................... 11
Images ..................................................................................................................................................... 12
Document Structure ............................................................................................................................... 14
Video ....................................................................................................................................................... 15
Links ........................................................................................................................................................ 15
Forms ...................................................................................................................................................... 16
Code (e.g. HTML code) ............................................................................................................................ 17
SiteImprove ................................................................................................................................................. 18
Training and Support Resources ............................................................................................................. 19
Common Accessibility Issues and Resolution ............................................................................................. 20
Headings.................................................................................................................................................. 20
Images ..................................................................................................................................................... 20
Links ........................................................................................................................................................ 20
Lists ......................................................................................................................................................... 20
Spelling .................................................................................................................................................... 21
Tables ...................................................................................................................................................... 21
Titles ........................................................................................................................................................ 21
Resources Used ........................................................................................................................................... 22
Appendix: Content Management System Specific Documentation ........................................................... 23
Content Creation Workshop (May 10, 2016) .......................................................................................... 23
Accessibility, The AODA, and WCAG 2.0 ............................................................................................. 23
Site Architecture: Structure – Menus – Main Menu – list links ......................................................... 23
The WYSIWYG Editor........................................................................................................................... 24
To Create an Event .............................................................................................................................. 25
To Create News ................................................................................................................................... 25
To Create a Banner Image................................................................................................................... 26
Content Management Workshop (May 12, 2016) .................................................................................. 27
Creating a Taxonomy .......................................................................................................................... 27
Customize a Page – Step by Step ........................................................................................................ 27
Best Practices ...................................................................................................................................... 29
Introduction
Creating web pages that are compliant with the guidelines set in the Accessibility for Ontarians with
Disabilities Act (AODA) is a fairly easy process to do from scratch. If you create your web pages while
adhering to necessary standards, most of the work required to make the web page accessible is
completed for you. However, trying to edit previously-created web pages to make them accessible may
require a bit more effort, especially if you do not know what accessibility issues are present. This
document will explain some general practices that can be used to check your web pages in order to
determine any accessibility issues, regardless of whether you use a Content Management System (CMS)
such as Drupal, web page creation software like Adobe Dreamweaver, or write the code for your web
pages manually using a text editor like Notepad++. This document will also describe some of the most
common accessibility issues that were found on the website for the Child Care and Learning Centre at
the University of Guelph, as well as how to resolve and ensure that these issues are not present for
future users of the website.
Accessibility Verification Tools and How to Obtain Them
Mozilla Firefox has three examples of accessibility verification tools. The following table briefly
describes what they are and where you can download them from. Downloading and installing is done
by clicking on the button that says `Add to Firefox` on the Mozilla Addons page (URL in ‘Where To
Download’ column).
Table 1: Accessibility Verification Tools for Mozilla Firefox
Name
What It Is
Where To Download
Accessibility
Evaluation
Toolbar
The Accessibility Evaluation Toolbar provides a
variety of features for web designers/developers
to check created web pages for accessibility
issues, including report creation.
https://addons.mozilla.org/enUS/firefox/addon/accessibility-evaluationtoolb/
Web
Developer
Toolbar
The Web Developer extension adds various web
developer tools to the browser, such as code
https://addons.mozilla.org/envalidation tools
us/firefox/addon/web-developer/
Checks for compliance with the contrast levels,
brightness and shine in the color combination of
WCAG
foreground and background of textual content
Contrast
based on the requirements of WCAG 1 and
https://addons.mozilla.org/enChecker
WCAG 2.
us/firefox/addon/wcag-contrast-checker/
Support web developers in testing web resources for accessibility features.
Google Chrome also has three examples of accessibility verification tools. All of these are very similar to
tools that can be found in Mozilla Firefox, with more information provided in the following table.
Downloading and installing is done by clicking on the button that says ‘Add to Chrome’ located on the
web page for that specific add-on (URL in ‘Where to Download’ column).
Table 2: Accessibility Verification Tools for Google Chrome
Name
What It Is
Where To Download
Color Contrast
Analyzer
Chrome extension that allows you to analyze
a web page or portion of a web page for
conformance with WCAG 2.0 Color Contrast
requirements.
https://chrome.google.com/webstore/detail/colorcontrast-analyzer/dagdlcijhfbmgkjokkjicnnfimlebcll
Web
Developer
Toolbar
The Web Developer extension adds various
web developer tools to the browser, such as
code validation tools
https://chrome.google.com/webstore/detail/webdeveloper/bfbameneiokkgbdmiekhjnmfkcnldhhm
WAVE
Evaluation
Tool
WAVE is a web accessibility evaluation tool
developed by WebAIM.org. It provides visual
feedback about the accessibility of your web
content by injecting icons and indicators into
your page.
https://chrome.google.com/webstore/detail/waveevaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh
If you are using a different browser, you might be able to find similar tools for it. If you are in this
predicament, do a search of the Internet using your favourite search engine (e.g. Google, Yahoo,
Ask.com) for `web developer tool <browser-name-here>’, `contrast checker <browser-name-here>’,
and/or `accessibility tool <browser-name-here>’, where <browser-name-here>is replaced with the name
of whatever browser you are using, and see if anything comes up.
Using Accessibility Verification Tools
Using WAVE Evaluation Tool
NOTE: This guide may not cover all of the features of the WAVE Evaluation Tool.
After installing the WAVE Evaluation Tool and restarting the Google Chrome browser window, there
should be a grey circle with a letter W inside of it. It would be near the top of the browser window and
to the right of the spot where you would type in a web address to navigate to, and appear similar to
what is shown in Figure 1.
Figure 1: Top of Chrome browser window showing button for WAVE Evaluation Tool
The WAVE Evaluation Tool has numerous features, including the ability to display a web page as text
only, disable the styling of the page, viewing the structure and outline of the page, and displaying any
accessibility errors. An example of what a user would see when they click on the button for the WAVE
Evaluation Tool is shown in Figure 2.
Figure 2: WAVE Evaluation Tool features
In order to check a web page for accessibility issues, all that is required is to click on the button for the
WAVE Evaluation Tool. After doing so, it is possible to view the web page without styling by clicking on
“No Styles,” see a summary of issues, as well as more details by clicking on the icon that looks like a flag
on the left hand side of the WAVE Evaluation Tool. For example, if you clicked on the button for the
WAVE Evaluation Tool while viewing the Parent Information web page of the website for the Child Care
and Learning Centre at the University of Guelph, the output would look something similar to what is
shown in Figure 3.
Figure 3: University of Guelph Child Care and Learning Centre – Parent Information Accessibility Errors
By clicking on any red squares boxes that appear, you can determine what errors are associated with
any of the items on the web page. Any boxes that are yellow or green are alerts informing you that
something is present, such as a form label or a data table. However, a yellow square box may be
informing you of a possible problem.
You can also display a web page without styling, as well as display the outline of the page. In order to
exit the WAVE Evaluation Tool and reset the web page back to its previous state, it is as simple as
clicking on the button for the WAVE Evaluation Tool a second time.
NOTE: There was a similar tool available for Mozilla Firefox users called WAVE Toolbar, but it was no
longer available for download as of (July 13, 2016).
Using Accessibility Evaluation Toolbar
After installing the Accessibility Evaluation Toolbar and restarting the Firefox browser window, there
should be a toolbar that looks something like Figure 4 near the top of the browser window, below the
spot where you would type in a web address to navigate to.
Figure 4: Accessibility Evaluation Toolbar in Firefox (under web address box)
The Accessibility Evaluation Toolbar has numerous features, including the ability to disable the styling of
the page, retrieve lists of text equivalents for objects (e.g. images) on the page, validate source code and
create an accessibility report. Unlike some other tools, the Accessibility Evaluation Toolbar gives users
the ability to generate an accessibility report quickly and with little effort. By clicking on “Reports” on
the toolbar, and then clicking on “Accessibility Issues,” a list of the accessibility issues on the web page
can be obtained. An example of a list obtained for the Parent Information web page of the website for
the Child Care and Learning Centre at the University of Guelph is shown below in Figure 5.
Figure 5: Example List of Accessibility Issues. By clicking on "Data Dump", an accessibility report can be generated and saved
if desired.
The listing of options visible when “Navigation” is clicked on the Accessibility Evaluation Toolbar can be
of assistance with gaining an understanding on how a web page is structured. These options permit the
generation of lists of the various types of objects present on a web page, including headings, links, tables
and images. All of the listings are shown below in Figure 6.
Figure 6: Options listed under Navigation on Accessibility Evaluation Toolbar
If it is desired to save a list for later use, it is possible to do so by clicking on “View Summary”, which
creates a formatted list and opens it in a new browser window for viewing and saving. This can be seen
in Figures 7 and 8.
Figure 7: Example of Navigation List (Headings). By clicking on "View Sumamry," a formatted list can be generated and
opened in a new browser window for viewing and saving if desired.
Figure 8: Example of formatted list generated by clicking on "View Summary" (Headings)
This tool has been tested using Firefox 38.0.3 ESR, but one disadvantage to using this tool is the fact that
it may not work on newer versions of Firefox, due to reports of toolbars being deprecated in the
browser. Proceed with caution if you are planning on using this tool with newer versions of Firefox.
Using Web Developer Toolbar
NOTE: the Web Developer Tool in Chrome is likely to be very similar to the version in Firefox; therefore
the Firefox usage guide provided here should work for the Chrome version. This guide does not cover all
of the features of the Web Developer Toolbar.
After installing the Web Developer Toolbar and restarting the Firefox browser, there should be a toolbar
that looks something like Figure 9 near the top of the browser window, below the spot where you would
type in a web address to navigate to.
Figure 9: Web Developer Toolbar in Firefox
Some of the features of this add-on include the ability to disable Javascript on the viewed web page,
disables styling and images, view the outline of the viewed web page, and validate HTML code. There is
also the ability to manipulate and display relevant information regarding forms on viewed web pages,
with more information provided under the subheading ‘Forms’, which is under the ‘Verification of
Elements on Web Pages’ heading in this document.
Using Contrast Checkers
The contrast of a web page refers to the “relative difference between light and dark areas of a [web
page]” (Contrast Definition from Dictionary.com). To check for the contrast on a web page in Firefox,
you would hold down the ALT key on your keyboard while pressing the C key, assuming the WCAG
Contrast Checker add-on is installed (download and installation instructions are located under the
‘Accessibility Verification Tools and How to Obtain Them’ heading). For example, if you were to do this
while on the home page for Google, you would be viewing a Firefox window that looks something like
Figure 10.
Figure 10: WCAG Contrast Checker Output for Google
By clicking on the items marked with a red X like shown above, the software highlights those elements
on the web page that either have too little or too much contrast. Also, by clicking on the Color Selector
tab on the WCAG Contrast Checker add-on on the left side of the screen, you can select a color for the
foreground (text in example) to determine which color will make the red X’s associated with that
element in the bottom box of the WCAG Contrast Checker (above the ‘Download capture’ button) turn
into green checkmarks. The guidelines for contrast on web pages are detailed below, and were taken
from the WebAim Contrast Checker web page:

WCAG 2.0 level AA requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text. Level
AAA requires a contrast ratio of 7:1 for normal text and 4.5:1 for large text.
Verification of Elements on Web Pages
Title
It is a best general practice for a web page to have a title that describes the content of the web page, as
well its purpose, or reason why the web page exists. To determine the title of a web page, you can
simply hover your mouse pointer over its tab in the internet browser; in Firefox, the tabs are located
across the top of the screen, above the spot where you would type in a web address to navigate to. For
example, the title of the Parent Information web page of the website for the Child Care and Learning
Centre at the University of Guelph is ‘Parent Information|Child Care & Learning Centre’ and is shown in
Figure 6.
Figure 11: Title of Parent Information web page of the website for the Child Care and Learning Centre at the University of
Guelph
Examples of web page titles like ‘Untitled Document’ and “Fred’s Website’ are not recommended
because they very unlikely describe the content of the web page. However, examples of web page titles
like ‘Dale Earnhardt-Wikipedia, the free encyclopedia’ and ‘Canada Computers and Electronics ||
STARTECH HDMI/HDMI MICRO TO VGA F/F ADAP CONVERTER HDMI TABLET TO MONITOR’ are
recommended because they actually describe what the web page displays, and most importantly, makes
the web page easier to find by search engines such as Google, Yahoo, and Ask.com.
Resizing of Text
In Firexox, resizing text on a web page is simple; press the ‘ALT’ key on your keyboard, click on ‘View’ on
the toolbar that appears at the very top of the browser window, then point to ‘Zoom’ with the mouse
on the menu that appears before finally clicking on ‘Zoom Text Only.’ This feature is shown below in
Figure 12.
Figure 12: Zoom Text Only Feature in Firefox
Once this is done, you can increase or decrease the size of the text on a web page simply by holding
down the ‘CTRL’ key on your keyboard and pressing the ‘+’ key or the ‘-‘ key, depending on whether or
not you want to increase or decrease text size. Knowing this, increasing the size of the text to twice its
original size will take approximately 5-6 presses of the ‘+’ key. If the web page can still function normally
with the text resized, then there is no associated accessibility concern. In order to resize the text back
normal, one quick way is to hold down the ‘CTRL’ key on your keyboard while pressing the ‘0’ (zero) key.
Navigation without a Mouse
In order to test the navigation without a mouse, simply use the ‘TAB’ key on your keyboard and go
through the web page. When you are tabbing through a web page, you should notice an outline or
some other visual distinction around the element that the keyboard is currently focused on (if not there
is an accessibility concern). If you would rather be able to see the tab order without having to
repeatedly press the ‘TAB’ key, you can use the “Display Tab Index” option, located on the list of options
visible after clicking on the ‘Information’ button on the Web Developer Toolbar. This is shown for the
Firefox version below in Figure 13.
Figure 13: Information options on Web Developer Toolbar in Firefox
Some important things to note: If the tabbing order is not logical, or you are not able to tab between
options without difficulty, there is an accessibility concern. Some people are forced to navigate a web
page using a keyboard due to injuries and/or disabilities. These people should be able access all aspects
of a web page while using the keyboard, including the features of any video players and other
interactive elements.
Images
There are three types of images that can be displayed on a web page. This section describes these types
of images and any associated accessibility concerns associated with them.
a) Decorative images
Decorative images typically don’t add any relevant information to the content of a page; they
are either there to make the page more pleasing to look at or are already described using text
on the web page. If a null alternative text value (‘alt’ tag) is not provided in the format of alt=””,
the result would be extra information that a screen reader would read aloud to the user. This
could distract someone who is trying to use the web page, especially if the image is not related
to the content of the web page.
b) Simple Images:
Also called informative images, simple images usually display a simple concept that can be
described using a short sentence or phrase. The alternative text for these types of images can
be a description of what the image contains, however a caption should also be provided near
the image describing the image’s purpose. An example is shown below in Figure 14.
Figure 14: Example of a simple image
c) Complex Images:
Complex images typically display a lot of information, such as a graph or a map. For these
images it is important to have alternative text (‘alt tag’) for the image saying what the image
represents, a short bit of text describing the image placed near the image, and a long
description placed somewhere on the website that fully describes the content of the image.
An example is shown in Figure 15:
Figure 15: Complex Image Example
Important Note: It is generally not recommended to use images in any location on web pages where the
same meaning can be conveyed using only text. Also, it is generally not recommended to use images of
text; in this situation, text should be used unless it is absolutely necessary to use an image of text.
Document Structure
To determine whether or not a document has proper headings, you can click on the “View Document
Outline” option, located on the list of options visible after clicking on the ‘Information’ button on the
Web Developer Toolbar. For example, if you were to click on the Outline button while viewing the
Parent Information web page of the website for the Child Care and Learning Centre at the University of
Guelph, you would be viewing something that looks like Figure 16.
Figure 16: Outline of Parent Information web page of the website for the Child Care and Learning Centre at the University of
Guelph
There are also various options that can be selected by clicking on the “Outline” button on the Web
Developer Toolbar, however, these do not work the same way. These options allow you to outline the
different elements of the web pages using different colored lines, which may be helpful for visual
thinkers. The Outline options provided by the Web Developer Toolbar are shown in Figure 17.
Figure 17: Outline options provided by Web Developer Toolbar in Firefox
The structure of a web page is especially important. Without structure, navigating the web page is going
to be a nightmare, and thus not very accessible for people who navigate web pages using a keyboard,
and/or use assisted devices such as screen readers for web page navigation.
Video
Video accessibility involves being able to navigate a video player, and being able to access the content.
In regards to navigation, users should be able to use the basic functions of the video player, including
the abilities to play and pause the video, as well as rewind, fast forward, mute audio and make the video
full screen, regardless of whether or not their navigation tool is a mouse. To determine this, you can
simply try to navigate the video player with the keyboard, similar to the way for navigating web pages
described in the ‘Navigation without a Mouse’ section. If a video is being embedded into a website, it is
recommended that this is done using an inline frame or iFrame; these are accessible for screen readers,
however, a title for the frame is recommended to make its focus more clear. An example of a video
player is shown below in Figure 18.
Figure 18: Video Player Example
In regards to content access, some sort of text equivalent of a video’s spoken words should be provided
through captions, transcripts or an audio description. Having captions on the video, or a text transcript
of the audio that may contain additional descriptions or comments, allows people to read the audio
content of the video and understand what is going on. This is especially beneficial for people who are
hearing impaired, however, visually impaired individuals can also access transcripts using a screen
reader or a refreshable Braille device. Described video, although not essential, is used to describe nonverbal actions being displayed in a video, and is really helpful if the content of a video cannot be
described using solely the video’s audio track, especially for visually impaired individuals.
Links
Links are something that all users should be able to navigate, whether they are navigating a web page
using a keyboard, a mouse, or any other assistive technologies. In order to test this, try to navigate a
web page using both a mouse to click on links, and using a keyboard to navigate to links by pressing the
‘TAB’ key and activate links by pressing the ‘ENTER’ key. If links cannot be used using both a mouse and
a keyboard, this is an accessibility concern.
Also, the destination that a link connects to should be clearly obvious and intuitive, both within the
context of the web page and by itself. For example, a link like the underlined text in Figure 19 makes
sense both in the context of the surrounding text and if it was pulled out and put on its own page.
Figure 19: Example of a properly formatted link
If an image is being used as a link, its alternative text (alt tag) takes the place of the descriptive text for
text links.
Note: It is strongly discouraged to used terms like ‘click here’ for links unless absolutely necessary. The
descriptive text of a link should properly describe the destination it connects to, such as what is shown
in Figure 19 above.
Forms
Forms generally should be clear, and easy for people to use, regardless of how they navigate the web
page containing the form. It is a best practice to make all required information visible and clearly
obvious on a form, so that the user does not fill out the form, submit it and lose everything. For
example, on the example IT Request Submission Form, shown in Figure 20, all required fields are labeled
in bold text to make it clearly obvious that these fields are required in order to have a legitimate form
submission.
Figure 20: Example IT Request Submission Form
Using the Web Developer Toolbar, by clicking on the ‘Forms’ button and then the ‘Display form details’
option on the menu that appears, and clicking on the ‘Information’ button and then the ‘Display ID &
Class Details’ option on the menu that appears, you are able to display the information regarding the
inner structure of the form. Also, since the example above takes the form submissions, compiles the
information from them, and sends them in individual emails, you would be able to see how the fields in
the form relate to the information that you see in the email created from it. An example of what this
looks like is shown in Figure 21.
Figure 21: Example IT Request Submission Form with ID and Class Information
There should not be a limit on the amount of time that a user may take to complete a form submission;
users should be able to complete a form at their own pace. This is especially important for people with
cognitive processing difficulties who may need longer periods of time to complete the form.
Properly structuring forms can be of benefit in the following ways:




People with cognitive disabilities can better understand the form and how to complete it, as
making forms accessible improves the layout structure, instructions, and feedback.
People using speech input can use the labels via voice commands to activate controls and move
the focus to the fields that they need to complete.
People with limited dexterity benefit from large clickable areas that include the labels, especially
for smaller controls, such as radio buttons and checkboxes.
People using screen readers can identify and understand form controls more easily because they
are associated with labels, field sets, and other structural elements.
Code (e.g. HTML code)
Validating code means checking it to make sure it meets the current specifications for its language. By
using the Web Developer Toolbar, you can easily validate code by clicking on the ‘Tools’ button on the
toolbar, then clicking on the ‘Validate HTML’ option on the menu that appears, as shown in Figure 22.
Note that the Validate HTML option uses the W3C HTML Validator to perform this action.
Figure 22: Validate HTML and CSS Options on Web Developer Toolbar in Firefox
With the W3C Validator, you can also select from options like what is shown in Figure 23 and click on the
‘Revalidate’ button to re-check the HTML code.
Figure 23: W3C HTML Validator Options Box
You also validate the code of you web page that pertains to styling, called Cascading Stylesheets (CSS) by
clicking on the ‘Validate CSS’ option on the menu shown in Figure 22. Note that the Validate CSS option
uses the W3C CSS Validator to perform this action.
Accessibility of web pages is measured using the WCAG 2.0 Success Criteria, with levels A, AA, and AAA,
located on the Web Content Accessibility Guidelines (WCAG) 2.0 page.
SiteImprove
You can also have your created websites and web pages added to the web site SiteImprove
(http://siteimprove.com/). The University of Guelph has a campus wide subscription to this web
governance tool that has a lot of the same features as the tools mentioned earlier. Its features are
broken down into six categories, which are as follows:
1. Quality Assurance: provides an overview of broken links and spelling errors on a website; also
provides an inventory of all of the pages, media, scripts, and documents being stored on the
website and what locations within the website contain links back to the listed items
2. Accessibility: provides an overview of the accessibility issues on a website. In comparison to the
other tools mentioned previously, SiteImprove stands out. This is because it not only shows
what elements on a web page have associated accessibility errors, but mentions how to resolve
them within the context of the Web Content Accessibility Guidelines created by the W3C.
3. SEO: Search Engine Optimization-helps with optimizing a web site so that it appears higher on
the results obtained from a search engine, such as Google. Internet users are more likely to
select one of the first results when searching for information, therefore companies with higher
search engine results tend to gain more visitors to their website, and possibly more business.
4. Policy: assists with making sure that a website complies with a set of user selected policies and
standards
5. Response: constantly monitors a website and reports on the amount of time it takes to respond
6. Analytics: provides information on how users access and navigate content on your website
Out of the six categories mentioned above, the two that will get the most usage are Quality Assurance
and Accessibility, although SEO may also receive some usage. The categories that will likely receive little
or no usage are Policy, Response, and Analytics, either because the user is unable to access those
categories, or because the information provided by those features is not required for the user’s needs.
In addition, SiteImprove provides its users with the capability to generate reports with information from
all features in each of the categories, with the exception of Response.
Training and Support Resources
There are various training and support resources you can use to expand your skills and knowledge
related to general web accessibility and using SiteImprove, as well as receive assistance if you have a
question or concern. Some of these are as follows:





SiteImrpove’s Product Overview video briefly describes what SiteImrpove is and what
information can be retrieved from the features in each of the various categories. This is a
beneficial resources for new users, as well as potential users trying to determine whether
SiteImprove is a tool that they would like to use for their needs.
Under each category of features contained within SiteImprove (for logged in users), accessed
through the drop down menu in the top left corner of the SiteImprove web browser window,
there is a link to ‘Support and Video Tutorials.’ This section of the SiteImprove tool permits you
to file a support ticket with SiteImprove staff, as well as access tutorial videos that vary in
length, usually in the range from one to four minutes. The tutorial videos can also be found on
the SiteImrpove Video Tutorials webpage on Wistia, with no login necessary.
SiteImprove Academy offers both technical and non-technical accessibility courses, consisting of
videos and quizzes. These courses can be accessed by anyone who already has an account for
SiteImprove.
SiteImprove has created its own digital book with accessibility information and how-to guides
for making web pages more accessible. It is called ‘THE ALL-IN-ONE DIGITAL ACCESSIBILITY EBOOK’, and you can request your free copy by filling out a form on the SiteImprove website.
You can also access the e-book on the website for the Child Care and Learning Centre.
There may be relevant webinars and other videos posted to SiteImrpove’s channel on Vimeo
and/or SiteImprove’s channel on Youtube. At the time of this writing, the selection of videos at
these two locations is limited, but more may be added in the future.
Common Accessibility Issues and Resolution
June 8, 2016
A testing strategy was conducted across the website for the Child Care and Learning Centre at the
University of Guelph, in order to determine what accessibility issues were present on the website in its
current state. These tests were performed using AChecker, a free online web accessibility verification
tool, as well as SiteImprove. The most common issues found on the website can be broken down into
different categories, which include headings, images, links, lists, spelling, tables, and titles, with
information pertaining to Content Management System (CMS) specific methods for resolution are
included in the Appendix.
Headings
The issues surrounding headings are either that there are multiple headings of the same type (e.g. two
heading 1’s), with no content in between them, or that there is a heading without any content (e.g.
blank heading). In order to resolve these issues, you can either delete a heading that contains no
content, add content between two headings of the same type, or change the second heading in the
group to a lower heading (e.g. change a second heading 1 to a heading 2).
Images
Images are used on multiple pages throughout the website for the Child Care and Learning Centre.
Accessibility issues for these images include missing alternative text, or text contained in images. In
order to resolve these issues, it is important that all images have meaningful text alternatives, which can
be used in place of the images by assistive technologies, such as screen readers. In the case of images of
text, text should be used in place of the image whenever possible; however, the text within the image
can also be used as alternative text for the image. For more information regarding image accessibility,
please refer to the section in this document entitled “Images,” located under the “Verification of
Elements on Web Pages” heading.
Links
Links are commonplace on all of the webpages throughout the website for the Child Care and Learning
Centre. Accessibility issues that have been found for links include link text that is not descriptive or
missing, and links that are broken (e.g. destination cannot be found), as well as images being used as
links without descriptive alternative text. If you are planning on using an image as link, it is required that
the image has descriptive alternative text that explains the purpose of the link, and that matches any
text presented in the image. For text links, text describing the purpose of the link is sufficient. Also, it is
important to verify that a link actually reaches its intended destination when selected, and fixed if
necessary. For more information regarding link accessibility, please refer to the section in this
document entitled “Links,” located under the “Verification of Elements on Web Pages” heading.
Lists
Lists are groups of items, such as a group of groceries that someone would write on a piece of paper to
take to the store with them. The main accessibility issue with lists found on the Child Care and Learning
Centre website is primarily caused by content editors who copy a bulleted or numbered list from a
document in a word processing program, such as Microsoft Word, and paste it into a basic text editing
program such as Notepad, before copying it again and pasting it into the editor for the webpage. Doing
so causes lists to be read improperly by assistive technologies, such as screen readers, even though it
might read fine to a user with normal vision. Using the proper functionality in the webpage editor to
create bulleted and numbered lists will solve these issues; you can create your lists in a word processing
program first, but when copying and pasting the list into the webpage editor, always ensure that any
bullets and numbering are removed and the proper bullets and numbering are applied.
Spelling
Spelling issues do not make the content any less accessible for users who use assistive technologies, but
spelling issues do make the website content hard to read, as well as make it difficult for users to
understand the meaning of the content. Examples of spelling issues include extra or missing letters in
words, as well as missing or extra spaces and punctuation marks between words. Fixing spelling, as well
as grammatical, issues on a website is the same as what would be performed when proofreading a piece
of writing, such as an essay, including making sure proper spelling and grammar are used, as well as
selecting appropriate words to convey the desired meaning.
Tables
Some of the web pages on the website for the Child Care and Learning Centre contain tables that convey
information pertaining to various subjects, such as fees and menus. The main accessibility issue
regarding tables on the website is the fact that table row and column headers are missing. Adding table
row and column headers will benefit everyone who uses the internet, as it not only makes a table easier
to read for users who can navigate using a mouse, but also for users who can navigate using only a
keyboard or other assistive technologies such as a screen reader. More information related to table
accessibility can be found on the Tables webpage on WebAim. Note: there is some code present on this
page and on the associated webpage regarding Data Tables, therefore you may want to skip these parts
if you do not have technical knowledge.
Titles
While there were no specific accessibility issues pertaining to titles on the website of the Child Care and
Learning Centre, ensuring that all web pages have a descriptive title is very important. This benefits all
internet users, as it gives them all the opportunity to quickly and easily find the information they need,
regardless of whether they use an assistive technology to access webpages. For more information
pertaining to webpage title accessibility, please refer to the section in this document entitled “Title,”
located under the “Verification of Elements on Web Pages” heading.
Resources Used
URL
https://www.uoguelph.ca/studentaffairs/childcare/parentinformation
http://dictionary.reference.com/browse/contrast
http://webaim.org/resources/contrastchecker/
http://www.w3.org/WAI/tutorials/images/decorative/
http://www.w3.org/WAI/tutorials/images/informative/
http://www.w3.org/WAI/tutorials/images/complex/
http://www.vipleague.sx/motorsports/291751/1/nascarxfinity-series-drive4clots.com-300-live-stream-online.html
http://www.queensu.ca/accessibility/how-info/videoaccessibility
http://webaim.org/techniques/hypertext/
http://webaim.org/techniques/hypertext/hypertext_links
http://www.w3.org/WAI/tutorials/forms/
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/
http://www.w3.org/TR/WCAG20/
http://webaim.org/techniques/tables/
http://webaim.org/techniques/tables/data
https://ccswbs.gitbooks.io/uog-drupaltraining/content/index.html
PURPOSE
Accessibility
Examples
Information
Information
Information
Information/Figure
Information/Figure
Figure
DATE LAST
CONSULTED
2016-06-02
2015-03-19
2015-03-20
2015-03-20
2015-03-20
2015-03-20
2015-03-21
Information
2015-03-21
Information
Figure
Information
Accessibility
Examples
Accessibility
Examples
Information
Information
Information
Information
2015-03-21
2015-03-21
2015-03-20
2015-03-21
2015-03-21
2015-03-21
2016-06-06
2016-06-06
2016-06-07
Appendix: Content Management System Specific Documentation
This section contains documentation specific to using the content management system Drupal for
creating and editing webpages for the website of the Child Care and Learning Centre website. This
documentation comes directly from handouts presented to participants of the Drupal Training 101 and
102 workshops on May 10 and 12, 2016.
Content Creation Workshop (May 10, 2016)
Accessibility, The AODA, and WCAG 2.0
Review the powerpoint presentation for details.
How to Login/Logout
1.
2.
3.
Navigate to your website: www.uoguelph.ca/sitename/user
To login use your Central Login ID and Password in the user login fields.
To logout select the logout option located on the menu bar.
Administration Menu Bar: After logging in as a Site Manager or Content Creator, the
Administration Menu Bar will be visible at the top of the page. It allows users with the correct
permissions to add/view/delete/edit content as well as other administration specific tasks.
Site Architecture: Structure – Menus – Main Menu – list links
Roles & Responsibilities
Authors: can create, edit and publish their own content
Editors: can create, edit, publish and unpublish their own content, as well as edit and
unpublish content created by others.
Site Managers: same as Editors but they can also manage basic site layout, change view
categories, titles and number of items to display, and create menus and configure site specific
taxonomies. The role of the site manager is responsible for the maintenance of AODA
compliancy and monitoring the site to maintain conformity to WCAG 2.0 Standards.
How to Find Content
Find Content: All content on your website can be viewed by selecting Content on the
Administration Menu or the Find Content shortcut located below.
Searching for Content: Search existing content on your site by using the Filter and drop-down
menus to select a particular content type and status.
Update options: Edit, delete, publish or unpublish individual or multiple items.
How to Create Content
Add Content: To create new content on your website, select the Add Content shortcut.
Content Types: Banner, Event, Feature, News, Page, Social Media.
Creating a Basic Page
The Basic Page content type is used for static content that can be linked to the main navigation
bar. This is one of the most “basic” content types and can be very flexible.
1.
2.
3.
4.
5.
6.
7.
8.
On the Administration bar, select Add Content.
Select Page.
Enter a Title.
Categories: If you have Page Categories defined, select the appropriate one.
Body: enter the information that you want displayed on your web page.
File Attachments: optional to add any file attachments
If you have authority to publish right away, select Published in Publishing options.
Select Save when you are done.
The WYSIWYG Editor
There are a few items that need to be explained with our current version of our WYSIWYG such
as adding Images, Tables and creating Links that are WCAG 2.0 AA compliant.
Adding Images
1.
2.
3.
4.
5.
6.
7.
8.
Go to the Body section of the page.
From the WYSIWYG Editor click on the Image icon.
Click on: Browse Server.
Click on: Upload
Create thumbnails (select size) - Choose file - Upload
Select the desired image, then click: Insert file
Add Alternative Text (unless the image is decorative)
–
must reflect the purpose of the image (i.e. description and function)
Click on: OK
Adding Tables
The WCAG 2.0 standard for table settings dictates that table markup must be properly
structured to differentiate and properly link between header and data cells.
1.
2.
3.
4.
5.
6.
Click on Table Icon in the WYSIWYG editor
Enter the number of columns and rows
Add a Caption (if a title is not provided elsewhere)
Add a Summary (optional but recommended if the table is complicated and information
not provided elsewhere)
Click on: OK
Begin entering your data
7.
To modify an existing table: right-click on a cell - additional options will be displayed
Adding a Link
The WCAG 2.0 standard for links dictates that the purpose of each link can be determined by
the link text alone.
Do not use: To search the internet <click here
Use this format instead: Visit <Google’s webpage>
To create a link in the body section – click on the link icon in the Editor:
1.
Insert the URL that you want to link to:
 External links - use a link copied from the browser (i.e. www.uoguelph.ca.)
 Internal links - use page name from the browser (i.e. www.uoguelph.ca/pagename
o Protocol automatically changes to <other>
 Email Address – change Link Type to <E-mail> - enter email address
To Create an Event
1.
2.
3.
4.
5.
6.
7.
8.
Select Add Content at the top of the administration bar.
Select Event.
Enter a Title. (Mandatory)
Select Category (if desired)
Enter the starting and ending Dates and Time. (Mandatory)
Enter a Location.
In the Body field enter the details and summary of the information.
Sections: optional (but recommended if defined by your site manager)
–
A Taxonomy for Event_headings needs to be created by your site manager
–
Examples of headings: Dinners, Public Speakers, Workshops, Conferences
9. Feature Image: add a feature image (optional – posters)
–
Add Alternative Text
–
Add a Caption (optional – can add additional information such as a photo credit or
information available in your body section.)
10. Add any files relevant to the Event or a related website
–
Include a descriptive Title.
11. Select Save when you are done.
To Create News
1.
2.
3.
4.
On the Administration bar, select Add Content.
Select News.
Enter a Title
If you have page categories defined, select the appropriate one.
5.
6.
7.
Enter Written by (optional)
In the body field enter what you want displayed on your web page.
Add a feature image (optional)
–
Add Alternative Text (if not decorative)
–
Add a Caption (optional – can add additional information such as a photo credit or
information available in your body section.)
8. Enter any tags or keywords that help categorize and organize your article.
9. External link: optional - can create a click-through to an external news article
–
Provide URL to the article
–
Leave other fields blank
–
Displays as a teaser item – click on it to be forwarded to the article
10. If you have the proper authority to publish right away, select Published in Publishing
options.
11. Select Save when you are done.
To Create a Banner Image
1.
2.
3.
4.
5.
Select Add Content at the top of the administration bar.
Select Banner.
Enter the required information: Title, Headline, Headline Link.
–
Title: Used for internal purpose (Mandatory).
–
Headline: Appears on the image.
–
Headline Link: can link to any website - if internal link, use the page name
Add Banner Image: Image – Choose File – Select the image, then click on: Upload
1. Enter Alt text
2. Select the Order (random order by default, 0 = first, 1 = second)
3. Enter optional information: Category, Summary, Keywords
–
Category: if applicable
–
Summary: appears below the headline
–
Keywords: like tags, a filtering mechanism
Select Save when you are done.
To Activate the Banner on the Front Page
6.
7.
8.
9.
Select Structure at the top of the administration bar.
Select Blocks.
Two options: The Static banner is RECOMMENDED.
–
Static banner: View: B1 - Image slider (Banner): Block – Manual
–
Slide show banner: View: B1 - Image slider (Banner): Block – Autoplay
•
After selecting your view, you can drag it up to the Top Bar block region or
select Top Bar from the dropdown menu.
Select Save Blocks.
Content Management Workshop (May 12, 2016)
Creating a Taxonomy
1. Determine the appropriate profile type (i.e. Profile)
2. Create a list of associated terms (i.e. Participant, Researcher, External Partner)
3. Add the terns to the appropriate taxonomy category (i.e. Profile category)
a. Go to: Structure – Taxonomy
b. Click on: add terms (…for the appropriate category – i.e. Profile category)
c. Enter a term Name: Participant
4. SAVE
Optional steps
5. Find the term # for each Term Name that you create:
a. Go to: Structure – Taxonomy
b. Click on: list terms (…for Profile category)
c. Click on: edit
d. Record the Term #: (i.e. Participant = 122)
i. Located in the URL: (e.g.) https://aodaclient.uoguelph.ca/aodaworkshop/taxonomy/term/122/edit?destination=admin
/structure/taxonomy/profile_category
e. Repeat for each term name (i.e. Participant, Researcher, External Partner)
6. Retain a list of Term Names and #
(e.g.)
a. Profile Category
i. Participant – 122
ii. Researcher – 123
iii. External Partner - 124
b. Feature Category
i. Participant – 125
ii. Researcher – 126
iii. External Partner - 127
Customize a Page – Step by Step
To customize a page
Click on: Customize this page (…button located at bottom of homepage)
Select the desired area by clicking on <+> (…located on right)
1.
2.
3.
4.
5.
Top
Left side
Middle column
Right side
Bottom
Select one:
1. View panes
2. New Custom Content (…located at bottom)
3. Menus
To configure a View pane
Select the desired area by clicking on <+> (…located at bottom)
Select: View panes
Select: View: FT3 – Featured item teaser list – then click on: Finish – then, SAVE
To change the title of a View pane:
 Open the view pane (click on Settings icon)
 Click on: Override the title – then click on: Finish
 Open the View pane again (click on Settings icon)
 Enter your new title
 Click on: Finish – then, SAVE
To filter specific features into your View pane:
 Open the view pane (click on Settings icon)
 Enter the Term # (i.e. Feature Category – External Partner = 127)
 Click on: Finish - then SAVE
Approved View panes
 View: E3 – Upcoming events teaser list
 View: F3 – Browser FAQ by Category
 View: FT3 – Featured item teaser list
To configure Custom Content
Click on: Customize this page (…button located at bottom of homepage)
Select the desired area (i.e. Top) by clicking on: <+> (…located on right)
Select one: New Custom Content (…located near bottom), then enter:




Administrative title (i.e. Welcome Message)
Title (i.e. Welcome to…)
Add content into the Body section
Click on: Finish – then, SAVE
To configure a Menu
Navigate to the Menus page: Structure – Menus
1. Click on: Add menu
2. Enter: Title
3. Save
To add links to your Menu
1. Click on: Add link (…for the desired Menu)
2. Add required information
a. Menu link title (required)
b. Path (include full URL)
3. Enter optional information
a. Description
b. Show as expanded (Recommended)
4. Save
5. Save configuration
To customize a page with your Menu
Navigate to the homepage, then:
Click on: Customize this page (…button located at bottom of homepage)
Select the desired area (i.e. Right) by clicking on: <+> (…located on right)
Select one: Menus – Select: desired menu – Click on: Finish – then, SAVE
Best Practices
1. Design & Consistency
•
Make sure all text can be highlighted and read aloud so that screen readers and reading tools can
access them.
•
Create a website that can be used by as many as possible, in as many ways as possible according to
user needs.
•
All functionality can be used without a mouse – from the keyboard alone.
•
All functionality can be used with a mouse.
•
Text, headings, buttons, fields etc. that are logically connected must also be visually connected.
•
Have a consistent design throughout the website.
•
Follow known website conventions.
•
Follow the standard for the format you are publishing in (for example HTML 5 syntax) - this will
optimize your website for many different platforms and user agents.
2. Links
•
•
•
Make sure not to give instructions based solely on a location of content, such as ‘In the box to your
right’. Supplement with a heading as well.
Make link texts that can be read out of context. Avoid ‘Click here’, ‘Read more.’
Broken links negatively affect users perception of your website, yet all too often it is the basics like
this that are overlooked. There should be no broken links on your website.
•
Website link texts can be problematic. The outcome is often that people revert to using ‘read
more’ or ‘click here’, which are not only inaccessible to a number of users but also make no sense
when taken out of context.
3. Images
•
Avoid images of text where possible. Where not, make sure that text alternatives are equivalent.
•
Provide alternative text for images. These must reflect the purpose of the image:
•
Decorative: no alternative text.
•
Having a function: Describe the functionality.
•
Linking: Describe destination
•
Users can adapt color and font according to specific needs.
•
Ensure none of your content will cause seizures - avoid rapidly flashing content.
4. Colour Contrast
•
Make sure that the color of the background and the color of the text are sufficient contrast to each
other. That way people with low vision can also read it.
•
Make sure that you do not give information by use of color alone, such as saying “In the green box
you will find”. Otherwise it can create problems for both users with low vision or no vision, or
people with color blindness.
5. Keep it small
•
As a general rule of thumb, documents and files should not be bigger than 10MB otherwise they
will cause a range of frustrating problems for the user. For example, it may slow the speed of your
site, cause problems if you have a responsive design or create a serious dent in mobile users’ data
plans.
•
Keep it short. Metadata includes things like Alt descriptions, summaries, and other descriptive text.
Ideally, Meta descriptions should be no more than 150 characters or else you risk important
information being cut or too long to be useful.