= table cell
Date
February 5
//more dates
Time
1pm
//more times
// more rows with data
Just to give you an idea of how it works in HTML, tables have four main elements. The table tag tells the browser this is a table. TR says this is a table row, TH that it is a table cell that is also a table header, and finally, TD which says it is a table cell. You may see the use of other tags within a table, which are necessary for more complex tables, but we'll stick with a basic example here.
So a basic table might look something like this. We start with an opening table tag, then the first row. Inside the first row, we have a row header followed by the data. Similarly, in the second row, we specify our row header and data, and then we would have more rows similar to this to list all the headers and data. Finally, we close the table at the end.
Please note that this is the structure when the table headers are all in the leftmost column. If you have column headers all in the top row, then the headers would all be listed in the first row instead.
Links
Click here vs. Justice Institute of British Columbia
Links, such a common thing, so it's simple, but important. The text for every link should be descriptive and generally, unique within a single page. Imagine there was no other text around it except the title of the page, would you understand what that link is for? If you can’t do it yourself, don’t expect others to.
Math
Simple Arithmetic: 2 + 3 = 5
Complex: MathML
Just a quick note here. If you ever deal with equations, especially in mathematics, simple arithmetic can be done by typing it out and making sure there are spaces between the numbers and symbols. Otherwise, for anything more complex, you will want to use MathML.
Images
Alternative Text: alt=""
When you include images, you also need to include alternate or alt text, which allows you to include descriptive information about the image. While the text is not visible to most users, assistive technologies will read the alternate text as a description of the image, so write concisely, while still providing an accurate description of the image.
griangrafanna. (2006). Red Panda Pensive. https://www.flickr.com/photos/rh_photographic_art/12831639683/ CC BY-NC 2.0
The important point is that your description should be what the image is trying to convey. A picture of a red panda in an English class might describe facial expression and possible emotion, but that same picture in a Biology class might focus on size and coat colour to determine age, gender, or health.
Inserting Images in Word
WebAIM. (2014). Microsoft Word. http://webaim.org/techniques/word/ © WebAIM. Used under full credit, at no cost allowance as per the WebAIM Copyright & Terms of Use .
In Word, you would right click on the image, then choose to “Format picture”. Then, in the alt text section, you would fill in the description. You can include a very brief description in the title field, but WebAIM suggests it as being optional.
Inserting Images in WordPress
Many online systems will have a field box for you to enter the alt text when you are inserting the image rather than having to do it afterwards.
Alternatively, you can give your image a descriptive caption, which everyone will see, in which case, you can leave the alt text blank.
Alexander, Dey. (2014). Text alternatives for images: a decision tree .
Similarly, if your image has been included for purely decorative purposes or is itself an alternate to a textual explanation, you should leave the alternate text empty.
If you need to use colours for figures, such as graphs, consider very different, high contrast colours. You can also use a mix of colour and patterns. Just imagine if you printed your document using a black and white printer. Would you still be able to properly understand your coloured figures? Try to also have the data in table format if possible.
Also, avoid creating images of text if possible.
Audio
Woman: You should give an example.
Man: Very well. (clears throat) This is the best example I can think of.
All non-text content, including audio and visual materials should have an alternate, usually, text version. The suggested method for audio is a text transcript.
Video with Captions Example
LabofOrnithology. (2012). Birds-of-Paradise Project Introduction. https://www.youtube.com/watch?v=YTR21os8gTA
For video, captions are recommended.
Let's take a look at this example. I'll just turn on the closed captions, and hopefully you can see what I'm seeing.
In general, text transcripts and captions are also very useful for non-auditory learners and for those whose English is not their first language. Using these two methods should cover your whole audience.
Descriptive Video Example
Electrox3d. (2011). Star Wars for Blind People (Blu-ray audio track): description of a Jawa shooting R2!. http://www.youtube.com/watch?v=PCZqKxQME6o
There is also the option of descriptive audio. For those who are not familiar with descriptive audio, it is an additional audio track that is added to a video to describe what is happening. Here is an example: ...
Transcript: Suddenly, a hooded figure springs out and zaps R2 with a gun. R2 stops dead in his tracks, his metal body crawling with electrical current. His lights go out and he keels forward.
While descriptive audio is ideal for visually impaired people watching videos, it is generally very costly to make, so it is not usually offered unless it has already been produced.
Alternatively, sometime you will find the description included in the transcript or an alternate version of the captions. You would then simply have two options for captions for people to choose from: one with and one without descriptions.
More on Audio/Video
Text Alternate not needed if already explained in text.
No autoplay
Have controls
Avoid flashing
Much like images, if the audio/video is actually an alternate to text, such as in a tutorial where an explanation is already fully explained in text form, then no alternative is required.
Also make sure that your audio and video do not autoplay.
Anything longer than 3 seconds should also have controls to pause and play. However, these should be built into the system you are using for the most part.
Avoid flashing, or very fast animations and changes. Anything that flashes 3 times in any one second period can cause epileptic reactions.
If you would like to learn more about captions and transcripts, Penn State’s Video Captions and Audio Transcripts Guide is a good place to start.
Media Summarized
Images: alt text
Audio: transcript
Video: transcript, captions, descriptive audio
So, to summarize, alt text for images, transcripts for audio, and transcripts or captions for video or video with a descriptive audio track if it happens to be available.
Creating Documents
One of the most common difficulties with documents is how accessible they are.
When in an online environment, if you can put the information online in text format, that is a lot better than having people open a separate document. This allows people to avoid having another program open.
Many systems even have a “Paste from Word” option, which will keep much of the formatting when copying from Word, but remove all the extra invisible code that is specific to Word that may cause problems viewing or editing content. In some editors, such as WordPress, there is no special paste from Word button but will do the same process automatically.
If you have to post documents, consider following the same guidelines we have covered before posting.
For lecture notes, it’s a good idea to post the PowerPoint with notes in the notes sections.
Assessing Accessibility of Content
After creating your content, you will want to check whether it's accessible. Luckily, many of the authoring tools we use come with accessibility checkers built-in.
Checking Accessibility in Microsoft Office
WebAIM. (2014). Microsoft Word. http://webaim.org/techniques/word/ © WebAIM. Used under full credit, at no cost allowance as per the WebAIM Copyright & Terms of Use .
WebAIM. (2014). PowerPoint Accessibility. http://webaim.org/techniques/powerpoint/ © WebAIM. Used under full credit, at no cost allowance as per the WebAIM Copyright & Terms of Use .
In Word, under the File tab, there is an option to "Check Accessibility". The program will check the accessibility of your document, such as whether you have filled in alt text for images, and walk you through correcting possible issues.
PowerPoint has the same functionality built in as well.
PDF Accessibility
WebAIM. (2014). PDF Accessibility: Converting Documents to PDF. http://webaim.org/techniques/acrobat/converting © WebAIM. Used under full credit, at no cost allowance as per the WebAIM Copyright & Terms of Use .
California State University, Long Beach. (2014). Making Existing PDFs Accessible. http://www.csulb.edu/divisions/aa/academic_technology/itss/fits/accessibility/existingpdfs.html
The best way to ensure the accessibility of a PDF you create is to follow the guidelines for creating documents and exporting to PDF. If you have the Adobe plugin, it is best to use that option, otherwise, the built-in “Save as” or “Export” to PDF will work. For more details on what settings to use when exporting, check out the WebAIM Converting Documents to PDF article.
Adobe Acrobat also has an accessibility checker, and a "Make Accessible" wizard, which will help automate part of the process and guide you through fixing any issue.
Basic PDF Text-Readability
What about the cases where you didn’t make the PDF? You might be posting someone else’s document, such as a copy of a journal article. While you can use the “Accessibility Checker” in Adobe Acrobat if you have it, it can be a lot of work to correct all the possible issues. You may also be in a situation where you do not have Acrobat handy.
At the most basic, check that the PDF is text-readable. The easiest way to check is to try selecting text and copy/pasting it elsewhere. Did you get text? Is the text understandable? If the answer is no, the PDF should be run through OCR. Acrobat has this feature built-in, but there are many other options.
You will still want to have the DRS improve the accessibility of the PDF beyond basic text readability, but if someone needs the document right away and it’s short, it might be enough.
Online Assessment Tools
There are numerous tools to help you check online content. Just a couple of examples, include:
WAVE - online web accessibility evaluation tool, of which there is a Firefox plugin version. The online tool allows you to give it a webpage address, but the advantage of the browser plugin is that it can give you different views of the webpage you're looking at, including pages where you need a login. The views include seeing text-only, or outline view, showing only headers.
Color Filter - will simulate what a webpage looks like to people with different types of colourblindness.
Similarly, Vischeck will allow you to upload images or allow you to enter a web address to simulate colour blindness.
There are also a number of colour contrast checkers as well, which will check the contrast ratio between your text and the background colour on a webpage.
These are only a few examples. You can take a look at the w3c tools list for more, including screen emulators, and more code-based accessibility checkers.
Need Help? Just Ask
Resources
If you’re not sure or stuck on making your content accessible, contact student services.
Nevertheless, here are also a few more resources that might help...
Accessibility Statement
If you have a disability for which you are or may be requesting an accommodation, you are encouraged to contact both your instructor and the Disability Counsellor, (604) 528-5884, disability@jibc.ca, as early as possible in the term. Student services will verify your disability and determine reasonable accommodations for this course.
Modified version of: Center for Instructional Development & Distance Education, University of Pittsburgh. (2015). Accessibility Resources For Faculty. http://www.cidde.pitt.edu/accessibility/
You’ve made the effort to create accessible content, but what if you forgot something?
One of the great ways to be transparent and show your efforts in supporting equitable access is to have an accessibility statement.
It doesn’t need to be long, but simply a statement to say you’ve made the effort and who to contact if someone has any concerns
An example statement you can put on course introductions or syllibi is...
If you want to include something on a department or individual website, you can always post a modified version of this. You can, of course, also include more details about what people can expect or not.
Examples
It’s really up to you what you include in the statement and how detailed it is. For ideas and examples, check out: ...
Take Away
Alright, I know that was a lot of information, so if you missed any of that, don’t worry, my slides will be posted.
Hopefully you have enough resources now to make your online content accessible. If you’re stuck, remember, just ask those around you, or ask questions of student services. You’re not alone in dealing with these issues or in supporting students and others in the university.
The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. - Tim Berners-Lee @timbernerslee
World Wide Web Consortium. (1997). World Wide Web Consortium Launches International Program Office for Web Accessibility Initiative. http://www.w3.org/Press/IPO-announce
If you only take away one thing from today, remember that your efforts in making your content accessible can help many others, not just those that are disabled.
So, let’s create content that everyone can use.