Making your website accessible allows people with disabilities to comprehensively navigate and interact with your website. Individuals with temporary disabilities (i.e. people using slow Internet connection, people with temporary disabilities like a broken arm, and people with changing abilities as a result of aging) also benefit from web accessibility practises.
Learn more about web accessibility from the World Wide Web Consortium'sWeb Accessibiility Initiative
To begin, separate your website's style and function. Images, colours, and scripts create the whole of your website but each element should make sense out of context. You should strive to meet one of the following standards:
All images on your website must feature alternative text to describe to users with visual impairments what is being displayed on the image. In the case of photos, Western’s policy is to write alternate text like the following sample:
alt=”Photo: Western students in front of the UCC”
All Western websites must conform to this standard over time. If these standards have been met, your website will be accessible to most users.
Provided Metadata about downloadable files
Metadata is also known as “data about data”. Western includes as much metadata as possible when providing users the chance to download files (regardless of type: images, text, PDFs, etc.). Western’s policy is to provide metadata in a similar fashion as:
President’s Speech (PDF - 36 KB)orGrant Announcement (MOV - 1.3 MB)
This shows that the President’s Speech is a PDF file, and is 36kb in size. This not only provides a user the chance to know what is going to come next in order to view the file (they’ll need PDF reader, etc.), but also approximately how long they’ll have to wait to download it, or how much space it will take up on their hard drive.
To ensure standard look and feel, file types must be displayed in capital letters, followed by the file size, contained within parenthesis.
Provided alternative content for multimedia
Providing video and audio tracks is great, but Western wants all users to be able to glean all content from published content. To this end, Western requires that video either be closed‐captioned, a transcript be provided for users to read, or that the video or audio file have a brief summary associated with it.
Used appropriate HTML markup
When building your site, ensure that you are using the XHTML 1.0 Transitional standard and that you are using CSS to control how your content looks onscreen. By default, the Western template uses this standard. By basing your pages off of the Western template, you ensure current and future compliance of your site with browsers, devices, and whatever else the future throws at us.
To make sure that your site follows this standard, look at your source code and make sure that the following is at the top of your page
By meeting these standards, you have gone over and above what is required for a Western website to ensure that the content of your website is accessible by all users, regardless of ability.
Form fields have labels associated with them
Form labels associate a label with a form control. This provides hints to users with speech browsers on how to use the form. They also allow users to click the label text to select form
fields instead of requiring them to click on a small radio button. This can provide users with mobility issues better access to information.
Each label is associated with one control. Labels are used by providing an id inside the form element itself, then linking to that element with the for attribute. It sounds confusing, but it’s not, as the following illustrates:
<label for=”username”></label>
<input id=”username” />
You can see that the input field is associated with the label above it via the id.
Associated Search fields with Access Keys
Western’s search Access Key standard is S, meaning users can hit Shift+Alt+S on their keyboard to immediately jump to the search box to find information. To implement this standard on your search form, use the following code before the form itself:
<label for="searchfield" ACCESSKEY="s"></label>
Validated all of the pages of your website (and continue to do so as new pages are created)
While there are many similar tools that allow you to do accessibility testing online, we prefer A‐Track, developed by the University of Toronto. Having run some of Western’s websites through other tools, A‐Track has picked up a few more items the others have missed.
These tools are very simple to use. Simply go to the site and enter either a file by uploading it, or a URL into the available fields and click Go. After a couple of seconds, your page will appear, torn into small chunks with errors or issues outlined in different colours. Mousing over each item will reveal what the issue is. When validating, Western’s websites must not have any red errors on them.
The link to A‐Track is:http://checker.atrc.utoronto.ca/
Sometimes, A‐Track isn’t available if U of T is doing work on it. In that case, the second Accessiblity Checker Western trusts is called WAVE. WAVE is the creation of Temple University in Philadelphia, PA, USA and was launched in 2001. WAVE has a great Firefox toolbar plugin that you can use to validate your sites (or any sites you visit!).
The link to WAVE is:http://wave.webaim.org/
Stopped asking users to “Click here”
Taken out of context, links that read “Click here” don’t make much sense or explain what the link offers to the user. An example of this is,
“Click here to read more”,or“ Click here to for more information”
Read out of context, this doesn’t make much sense. Using terminology other than “Click here” or “read more” ensures that all users can make sense of content on a page. Consider using natural copy that has links built into it. Explain what the link offers, or doesn’t talk about how the link works. For example,
“Tell me more about Western’s Grad Studies program, including how to apply”,or“Get the latest episode of the Grad Studies Podcast from iTunes U”
Tested your site with CSS turned off
This simple procedure can help make sure that your site works well without any CSS to control how your content is structured. Even though turning off CSS makes your site look basic and doesn’t keep it as attractive as you might like, what is important is providing clear and consistent access to content.
Ensured pages still work if you turn off applets and scripts
Turn off your scripts and check to see if the page still functions properly. If it does not, consider alternative methods to make sure there are no barriers to content for users with accessibility issues.
Not relied on colour alone
Ensure information presented with colour functions without it. Also ensure that foreground and background colours provide sufficient contrast when viewed by someone having colour defeicts or when viewed on a black and white screen.
Western’s policy regarding text on webpage colours is black text on a white background. Western’s policy on hyperlinks is that all hyperlinks are purple, but are also underlined. With colours turned off, users can still discern what text is linked and which is not by using hyperlinks.
© 1878 - 2013 Western University
