* * * On the Internet * * *
February 2018 — Volume 21, Number 4
Maggie Sokolik
University of California, Berkeley, USA
<sokolik
berkeley.edu>
Introduction
As a longtime instructional designer of online materials, I have been concerned with issues of accessibility for many years. I dutifully tagged every image, wrote out every URL, avoiding “click here” links, and formatted material on the screen considering its layout and elegance. This article will address the reasons why most of these practices were counterproductive, what the current state of the art in online accessibility is, and most of all, why making our online materials accessible should be the concern of every designer and instructor.
My lack of full understanding of best practices was underscored a little over a year ago, when the U.S. Department of Justice filed a complaint against my university over our publicly-available online materials. Named specifically in the complaint was the inaccessibility of free audio and video content through YouTube, iTunes University courses, and MOOCs. Even more specifically, three of the MOOCs I developed and taught through edx.org (Principles of Written English, Academic and Business Writing, and English Grammar and Essay Writing) were named in the complaint. As a result, all inaccessible material was taken offline. Some of these materials, such as legacy webcasts that have no captions, have been taken offline permanently, due to lack of funds for captioning the hundreds of hours of lectures and other videos. However, the MOOCs offered by the university were only taken offline temporarily. An accessibility specialist team was hired, and all our MOOCs, including mine, underwent remediation. It was during this process that I learned much more about the practices that make our online work accessible. I continue to learn these practices as they evolve and the tools for detection and remediation improve.
Accessibility Issues Found in Some Traditional Activity Types
Before looking at the details of some of the technical requirements of accessible content, it’s important to look at the types of assignments we are using. There are certain activities that no amount of technical revision will fix–they need to be rethought from the ground up. When working with students in a face-to-face class, instructors know the abilities of their students, so the following activities can be engaging and productive in these environments. However, in an online context, they are not accessible to all learners.
Image Description
Image description has long been a popular learning activity. There are several articles that explain how to use these tasks in face-to-face classes (cf. e.g., Ferlazzo, 2012). However, in the open online environment, they do not adequately address the needs of students with low vision.
An example of this type of activity is found on the British Council’s “Learn English Teens” website (Figure 1). It presents a series of amusing or interesting images and asks visitors to the site to write captions for the images.
Figure 1 – Image Captioning Activity
First, clearly this caption-writing activity relies on a learner’s being fully sighted. In addition, the photo does not contain a description in the code of the web page (typically contained in an ‘alt’ tag), so that a visitor using a screen reader does not have any indication of what the image is. (More about image accessibility later in this article.) This type of activity fails all accessibility tests.
Dictation
While dictation may not be seen as the most current of activities, it still enjoys a certain popularity and does have pedagogical value (cf. e.g., Alkire, 2002). It is also suited to modern web-delivery, where audio files are easily delivered, even in low-bandwidth situations. The English Club provides online dictation exercises, as shown in Figure 2.
Figure 2 – Dictation Exercise from The English Club
It is probably obvious that this is not an activity that Deaf or other students with hearing disabilities can participate in.
Possible Solutions
The point is not that these types of activities shouldn’t be used, but instructional designers should include alternative activities for students who may not be able to do a particular type of exercise because of a disability. For example, the image-captioning activity could include a written description of the photo that was too long to serve as a caption, requiring the student to rephrase or summarize a longer passage into a shorter caption. A dictation activity could be accompanied by a transcript of the dictation, but with grammar or spelling errors that Deaf or other students with a hearing disability could correct as a learning activity. Creating activities with disabilities in mind requires thinking of multiple modalities in which activities can be delivered.
Image Accessibility
Most educational websites make use of images in some form or another, whether it is part of the instruction, or just part of the design. In whatever ways you use images, there are a few guidelines to ensure they are accessible to learners with color blindness or low to no vision.
- Do not use color to show meaning. In other words, it is not helpful to have an image in which things colored red have a special meaning if a user cannot distinguish red.
- Using high contrast colors–black against white for figures–is always easier to read for all.
- On web pages, use an ‘alt tag’ to describe an image that carries information. Be sure the description is meaningful. In other words, if you are including an image because it conveys certain information, include that information in the tag.
- Leave alt tags empty (“”) if an image is purely decorative. Someone using a screen reader doesn’t need to know there is a blue flower decorating the page if your page has nothing to do with blue flowers.
Video Accessibility
With improving bandwidth, wider availability, and increased popularity of MOOCs (Massive Open Online Courses), and blended or flipped classroom, online video content is an important part of language instruction.
There are several tools available to help make video accessible (described next), but video accessibility really starts with its scripting and creation, rather than technical add-ons. Here are a few guidelines to help you create accessible videos from the start.
- If shooting live video, shoot with the best possible lighting. Keep sets as simple as possible so that important figures, such as speakers or other elements that are key to the main points of the video, are not obscured by poor lighting or too many objects on the stage.
- If creating a video with voiceover and slides (such as a narrated PowerPoint presentation), be sure that any text on the screen is also read out. That is, don’t put up a chart and then say “as you see in the chart…”. If it’s too awkward to read everything out, provide a downloadable, accessible document with your video that gives information about what is seen on the screen but not heard.
- Just as you do with images, consider learners who may have color blindness. Avoid making meaning distinctions using color alone. Saying “the red bar on the graph indicates learning by pre-K students” means nothing if a user cannot distinguish red from green.
Once you have created a good, well-produced video, you can make it maximally accessible through the use of captions and audio descriptions.
Captions
Timed captions on videos are absolutely necessary for those with hearing impairments; however, they are also helpful for language learners, or even those who just want visual support for what they are hearing. Captions can be useful, as many of us know, for clarifying unfamiliar accents as well.
One option for timed caption files is the .SRT format (SubRip subTitle format). For longer videos, it is best to use a captioning service, such as 3PlayMedia, or the like. These types of services charge by the minute of video.
For shorter videos, you can create your own SRT caption file, which consists of four parts: 1) the number of the caption frame in sequence; 2) beginning and end timecodes for when the caption frame should appear; 3) the caption itself; and, 4) a blank line to signal the beginning of a new caption sequence. An example is shown in Figure 3. The file must be in unformatted, text only, and saved with the suffix .srt.
Figure 3 – The parts of an SRT file (Source: 3Playmedia.com)
As a last step, in your HTML, you need to include this line in the code where you call up your video:
<track src="TITLE.srt" kind="subtitle" srclang="en-US" label="English" />
where TITLE would be replaced by your filename, and the file would be uploaded into the same directory as your video.
Audio Descriptions
A newer player on the block is that of audio description of videos. You may have seen people in the movie theater with headsets, not unlike museum headsets that describe paintings on the walls. In this case, a voiceover describes what is on the screen in a video, so that a person with low or no vision can understand what is happening. 3PlayMedia has an example of a video with audio description on their website.
Document Accessibility
Web Display
A number of issues can render web display less than accessible for people with low vision. Most of these display issues have to do with how those with low vision are able to see contrast or color, or how those who use screen readers experience the page.
There are many screen readers, from free to higher priced. JAWS is the most popular one, but is available for Windows only. Apple has VoiceOver, which is very highly rated as well. For Google Chrome OS, there is ChromeVox. You can read reviews of these screen readers as well as several others in a recent article on the website MakeTechEasier.com.
There are several free tools and plug-ins for checking the accessibility of web pages. One that I use is called tota11y, a creation of the Khan Academy (the name tota11y has an eleven in the middle, rather than two l’s). This browser plug-in makes it easy to check issues like color choices, contrast, and header hierarchy in a web page. When activating tota11y, a pair of glasses pops up in the lower corner of your browser (See Figure 4).
Figure 4 – The tota11y icon
Then, clicking it activates the plug-in and allows you to choose which elements you want to check (Figure 5).
Figure 5 – tota11y menu.
The plug-in will check the page you are on–whether it’s one you are designing, or someone else’s. A check of this page (as I am writing it in Google Docs) shows the following report (Figure 6). [2] This report shows insufficient contrast in some of the font colors on the screen. Interestingly, those contrast problems refer to the browser toolbar, and not the document itself.
Figure 6 – tota11y error report
Link Accessibility
For students using screen readers, proper link formatting can be the key to a pleasant online experience. In general, links should be self describing–that is, the text in a document that describes what the link will show should be the text that is linked. Because screen readers read out everything on the screen, including full URLs requires the user to listen to those URLs being read letter by letter. Even if a URL is a convenient name, like Youtube.com, the listener will hear “y-o-u-t-u-b-e”.
If there is a reason that one wants to include a URL in its full form in a document, using a “TITLE” tag in the HTML can help those using screen readers. Figure 7 shows an example of the code using a TITLE tag.
Figure 7 – Sample code showing title tag. Source: wc3.org
Page Hierarchy
In both websites and PDFs, the document organization should make sense. If headers are used, they should be used in logical order — that is, a size 1 header should be used first, then followed by size 2 and 3, etc., so that the document has a structure that is clear. The metadata for the document should be completed as well (in the document properties or information), including a document name and the author name, when needed. On a web page, both headers and ARIA landmarks (see Note 1) can be used to explain the organization of a page.
PDFs
PDFs are among the most complex documents to remediate for accessibility. Fortunately, newer versions of Adobe Acrobat Pro include a built-in accessibility tool (see Figure 8, although this option appears in different locations in different versions of Acrobat Pro), however, it goes only so far in doing a full check. And in spite of their claim that it’s “easy” to make accessible PDFs, the document found on their site explaining the process outlines something that is not actually that simple.
Figure 8 – Adobe Acrobat Accessibility Menu
Designing for Dyslexia
Font choice has an impact on readers with dyslexia. Several designers have created fonts that are intended to improve the reading experience of those with dyslexia. The website for Dyslexie [1], one of these fonts, states: “The most common reading errors of dyslexia are swapping, mirroring, changing, turning and melting letters together” (dyslexiefont.com). Fonts designed for dyslexia are similar in design, looking like that shown in Figure 9.
Figure 9 – Example of OpenDyslexic Font
However, a study by Rello and Baeza-Yates found that the “fonts designed specifically for dyslexia, OpenDys and OpenDys [Italic], did not lead to a better or worse readability” (2013, n.p.). They conclude:
Good fonts for people with dyslexia are Helvetica, Courier, Arial, Verdana and CMU, taking into consideration both, reading performance and subjective preferences. Also, sans serif, monospaced, and roman font types increased significantly the reading performance, while italic fonts decreased reading performance. In particular, Arial [Italic] should be avoided since it significantly decreases readability. (2013, n.p.)
Resources to Educate Yourself
This article is, of course, just a start into the world of internet accessibility. There are numerous websites and other resources to help you learn more about this evolving subject. There is also an edX.org MOOC, “Information and Communication Technology (ICT) Accessibility” offered by Georgia Tech University, which explains the legal foundations of accessibility regulations, as well as the implementation of best accessibility practices. Most large companies, such as Microsoft, Adobe, or Google also have blogs and websites devoted to their accessibility practices. It is a good practice to read up on progress made for individual software packages, and upcoming improvements. Microsoft, for example has a dedicated website for their accessibility goals.This site includes five different downloadable documents that each address a different type of disability, and how their products align with regulations and practices.
Conclusion
While it may seem like “extra” work to make materials accessible, the essential question is: Why wouldn’t we want our materials to be maximally usable for all learners? While it may take time to relearn practices and retool our web pages or online activities, the end result is that we create materials that take into consideration the needs of all students. This should always be the goal of good pedagogy.
Notes
[1] ARIA landmarks are attributes you can add to elements in your web page to demarcate areas like the banners or forms. Some possible landmarks are:
– banner = contains the site-oriented content of each page, like the logo, usually located at the top of the page. There should only be one banner landmark per page.
– contentinfo = contains content usually found in the footer of a page, like copyright and privacy statements. There should only be one contentinfo landmark per page.
– form = contains form input elements which can be edited and submitted by the user
Etc. More information can be found at the North Carolina State IT Accessibility page.
[2] The Dyslexie font is a paid, rather than open-source font like OpenDyslexic. In addition, the dyslexiefont.com website fails accessibility tests for color contrast, link identification, and header hierarchy.
References
Alkire, S. (2002). Dictation as a language learning device. ITESLJ 8(3). Available: http://iteslj.org/Techniques/Alkire-Dictation.html
Ferlazzo, L. (2012). Using photos with English-language learners. Edutopia. Available: https://www.edutopia.org/blog/ell-engagment-using-photos
Rello, L., & Baeza-Yates, R. (2013). Good fonts for dyslexia. ASSETS. Available: http://dyslexiahelp.umich.edu/sites/default/files/good_fonts_for_dyslexia_study.pdf
Strausheim, C. (2017, March 6). Berkeley will delete online content. Inside Higher Ed. Available: https://www.insidehighered.com/news/2017/03/06/u-california-berkeley-delete-publicly-available-educational-content/
U.S. Department of Justice. (2016). The United States’ Findings and Conclusions Based on its Investigation Under Title II of the Americans with Disabilities Act of the University of California at Berkeley, DJ No. 204-11-309. Available: https://news.berkeley.edu/wp-content/uploads/2016/09/2016-08-30-UC-Berkeley-LOF.pdf
Appendix
Table of hyperlinks which can be clicked on in e-versions of this text made accessible here for readers of print versions. If you are using a screen reader, you may want to stop here.
| © Copyright rests with authors. Please cite TESL-EJ appropriately. |
Editor’s Note: The HTML version contains no page numbers. Please use the PDF version of this article for citations.