Creating accessible online course content – Part 1

Screenshot of Alt Text entry form for an image

You don’t need to be an accessibility expert to make sure that your content is accessible. There presently are no government standards for web accessibility. However, the World Wide Web Consortium has published Web Content Accessibility Guidelines (WCAG), the latest being WCAG 2.1. The WCAG contains guidelines for how websites can be developed to be accessible for people with disabilities. Your institution might have drafted its own set of accessibility requirements for online courses and web content, and quite possibly adopted some of the WCAG. I would strongly advise taking the time to at read through WCAG 2.1. WCAG 2.2 will be finalized soon.

Let’s start with web content that is viewed within a browser, and how to make it accessible.

Add alternative text

Assign alternative text descriptions to all images, graphics, and non-text content. Screen readers and other assistive technologies can read the descriptions and present the interpretation to visually impaired users. Screen reading software is able to identify images, so your description does not need to include text such as “image of…” or “graphic of…”

Provide captions and transcripts for video and audio

Add captions to videos for spoken dialogue, relevant sounds and music, and other important contextual elements that convey the video’s purpose. Captions should be synchronized so they appear at the same time the audio is available. Transcripts should also be included. Text transcripts are often preferred by proficient screen reader users since they can read at a faster rate than most people speak. A transcript allows a screen reader user to access the video’s information in less time than it would take to listen to the audio content.

Be sure to include transcripts for audio-only content that includes spoken dialogue.

Use meaningful link names

Give hyperlinks meaningful link text names. The link text should describe the content of the linked location, and should not consist of meaningless text such as “Click here.”

Punctuate

The correct use of punctuation enables voice synthesizers to output the correct cadences and generate more understandable speech.

Do not use color alone to convey information

Users with color deficiencies or other visual impairments must be able to perceive the information without relying on color.

Use enough contrast between text and background

Use text and background colors that provide enough contrast so that text stands out and is readable.

Don’t use unnecessarily small font sizes

Text should be easily readable without the need to zoom in.

Use headings correctly

Screen readers and other assistive technologies can navigate web pages by using headings. Using headings keeps your content well-organized and structured with levels of hierarchy, benefitting everyone. Always use headings in the proper order, Heading 1 (h1), Heading 2 (h2), Heading 3 (h3), etc., with h1 being the most important. Never skip a heading level, i.e. don’t use a Heading 1 and a Heading 3 without a Heading 2.

Use the list function to format lists

Format lists using your software’s or LMS’s list function. Bulleted (unordered) lists should be utilized for related items, and numbered (ordered) lists for sequential information. Using the list function helps assistive technology users in navigating and comprehending lists. This cannot be accomplished by instead, typing in bullets, spaces, or tabs to manually format lists.

Screen readers usually cannot recognize levels of indentation within an unordered list. If you are nesting or creating lists within lists, it is better to use an ordered list, and a different numbering system for each level of nested lists, similar to writing an outline. The following is an example of an accessible list with three levels:

Major League Baseball Teams

  1. National League
    1. East Division
      1. New York Mets
      2. Miami Marlins
      3. Washington Nationals
      4. Philadelphia Phillies
      5. Atlanta Braves
    2. Central Division
      1. Pittsburgh Pirates
      2. Cincinnati Reds
      3. Chicago Cubs
      4. Milwaukee Brewers
      5. St. Louis Cardinals
    3. West Division
      1. San Diego Padres
      2. Los Angeles Dodgers
      3. Colorado Rockies
      4. San Francisco Giants
      5. Arizona Diamondbacks

When using tables, specify which cells are data and which are headers

Assistive technologies need to know the structure of a table in order to provide context to users. Your LMS should include a way to mark cells as data, row headers, or column headers. It’s also helpful to add a table caption. The caption functions as a heading, and identifies the overall topic of the table.

Link to accessible content

Remember that any content you link to should be accessible too.

Perform periodic accessibility checks

Making on online course accessible is not a one-time fix. Over time, changes occur in Learning Management Systems, browsers, assistive technology, and in the content of the course. These changes require ongoing reviews to maintain accessibility. Even if the course content has not changed, it is good practice to perform regular accessibility checks, such as before each new run of the course. In Part 2, I’ll talk about course content viewed outside of a browser, mainly Microsoft Office documents.

Start making your online course accessible right now

broken entrance gate with Notice - Restricted Access sign

Whether you’re developing a new online course or teaching an existing one, now is the time to start making your course accessible to people with disabilities.

Why should you make your course accessible?

Your institution might require all courses to be accessible. If it does not, it very likely will in the near future. The Americans with Disabilities Act (ADA) of 1990 provides civil rights protections to people with disabilities. It was created before widespread use of the Internet and does not mention anything about websites. However, in more recent years, the ADA has increasingly been applied to websites, internet-based programs, and services, which includes online courses. Many lawsuits have been successfully filed against high profile businesses, individuals, and learning institutions for failing to comply with accessibility requirements.

According to a 2016 report by the Centers of Disease Control and Prevention (CDC), 25% of adults and 40% who are 65 and older have a disability. Making your course accessible provides them with equal access with the added benefit of increasing your market of potential students.

Instructors have often asked me, “Why do I have to make my course accessible if I don’t have any students with disabilities in my course?” The answer is that in addition to the fact that it’s the law, you don’t really know for sure if any students have disabilities. A student might choose not to disclose that he/she has a disability, and in many states, is not required to do so. Also, students often rely on the help of parents and others with school work and other tasks, and they could have a disability. Even if there is no student with a disability enrolled in the current run of your course, that could change in future runs. It is better to make your course accessible now rather than putting it off.

I previously published another post, Making your website accessible to people with disabilities helps everyone. The post refers to websites but the same principles for website accessibility also apply to online courses, since they are web-based too. If your course is hosted on a Learning Management System (LMS) such as Blackboard, Canvas, or Moodle, then the task of making your course accessible will most likely be easier than making a website accessible. Learning Management Systems are designed so that you don’t need to be a web developer to create an online course. Unlike designing a website, an LMS does a lot of the work for you behind the scenes, and simplifies adding content.

Do it now. Don’t wait.

There is no question that creating an accessible course usually requires some more time and work, but doing the work now will be easier and more cost-efficient than waiting until later. This especially holds true if you are developing a new course, and you have the freedom to create or add only accessible content, rather than having to change or discard inaccessible resources you’ve already invested a lot of time finding or creating.

Modifying an existing course is more time-consuming. I’ve worked with instructors who had to revise dozens of PowerPoint presentations in their existing courses, to add voice over narration, transcripts, and tag images. Quite often, external content such as YouTube videos and Acrobat/ PDF files, had to be omitted because it was not accessible. This content was not owned by the instructor and therefore could not be modified to be made accessible. Considerable time had to be taken to locate accessible alternatives. Furthermore, significant changes in the course required discussing and clearing updates with a department head or manager. Even if your organization does not have accessibility requirements, it is best to prepare now for the possibility that you’ll need to make your course accessible in the future.

In the next post, I’ll begin a two-part discussion on how to create accessible content.

Making your website accessible to people with disabilities helps everyone

The information super highway is open for everyone to travel but the journey for people who are disabled all too often ends in reaching an exit ramp and finding it closed. Making your website accessible usually requires minimal time and effort, and not only expands your audience to visitors with disabilities, but also benefits everyone.

The Internet has been a godsend to people who have a disability by providing access to information that was impossible in the past. However, too many of us create websites, post to blogs, and upload videos without ensuring they are accessible to all site visitors. Before learning how to make your site accessible, it helps to first understand the obstacles to accessing the Internet that different disabilities present and the assistive technologies that are used to overcome them.

Disabilities and challenges

Hearing

Challenges: Cannot hear sound from video and audio content.

Assistive Technologies Used

  • Captions
  • Transcripts

Visual

Challenges: Dependent on type and severity of disability. Some people simply cannot read small text. The blind are unable to see any visual content. People who are color blind cannot distinguish between elements differing in color alone.

Assistive Technologies Used

  • Screen-reader, which translates the text of a web page into speech or Braille.
  • Web browser that can enlarge text
  • Screen magnifier software

Motor

Challenges: Extreme difficulty or inability to use a mouse. The user must rely on some form of keyboard navigation.

Assistive Technologies Used

  • Mouth stick, which is a stick held in the mouth and used to type on a keyboard.
  • Voice recognition software
  • Sip and puff switch
  • Oversized trackball mouse

I can think of no better way to comprehend the struggles with web accessibility that people with various disabilities face, than listening to them describe their experiences as featured in the following two videos from WebAIM:

Keeping Web Accessibility in Mind (Closed Captioned)

Experiences of Students with Disabilities (Closed Captioned)

Steps for making your website accessible

You don’t need to be a web design expert to make your site more accessible. The process results in pages that are well-designed, more user friendly, work better on mobile devices, and rank higher by search engines. Some of the steps that you or your web designer can easily implement are:

  • Caption or provide transcripts for video and audio content.
    Create transcripts with a word processor or text editor. YouTube provides instructions on how to use transcripts or caption files. A transcript contains only the text of what is said in the video, which will be automatically synchronized by YouTube. A caption file includes the time codes for when each line of text should be displayed. Special software also exists to create and add captions directly into your video file, including free programs such as Subtitle Workshop (Windows) and Aegisub (Windows/Mac/Linux). An added benefit of including a transcript with your YouTube video is that it will be indexed and searchable in Google. Make sure you let your audience know that your content includes captions or a transcript.
  • Provide alternative text for important non-text content.
    Use your web design software or blogging interface to type in alternative text for all important images and graphics so that it can be read by a screen reader. Avoid including alternative text for graphics that are purely decorative.
  • Use headers.
    Including headers in your content provides structure and levels of hierarchy. Screen readers can navigate from header to header and create a summary of a page based on headers. Be sure to use headers in the proper order, h1, h2, h3, etc.
  • Do not use graphics to represent text when plain text is suitable.
    A browser is capable of enlarging plain text and making it readable. Graphical text, when enlarged, might become blurry and unreadable.
  • Do not use unnecessarily small text.
    Keep text in a size that is easily readable. Although text can be enlarged with software, do not assume that everyone knows how to do so.
  • Use punctuation.
    Punctuation enables voice synthesizers to use correct cadences and produce more understandable speech.
  • Use descriptive link names rather than “click here.”
    Screen readers often create a list of links on a page, consisting only of the link text. Without any context, link names such as “click here” are meaningless.
  • Use enough contrast between text and backgrounds so the text stands out and is readable.
  • Do not use color alone to convey information.
  • Use an online tool to test your website’s accessibility.
    The tools produce reports that can help you identify problems with your web page’s accessibility. Much of the information could be difficult to understand for those not familiar with HTML and web design but, nevertheless, still worth a look for everyone. There are several online tools listed in the Resources below.

I have covered only the basics on how to make your website more accessible. For more in depth, technical information, check out the Resources links listed at the end of this posting.

I hope you are motivated to address web accessibility in your current and future websites and blogs. Doing so will not only open those exit ramps on the information super highway to people who are disabled but also improves travel for everyone. Please feel free to post your comments about your experiences.

woman in wheelchair at end of path on the beach

Resources

Use Screencasts to Teach, Demonstrate, Sell

In just two days, the job would be over, but to me, the work unfinished. I’d been providing software training for the faculty at a small college during my two week consulting stay but more of them would need help after I’d gone. For those I would not meet, I wanted to find a way to recreate the training experience of sitting down with each of them at the computer. Creating a screencast allowed me to do just that.

A screencast is a video of the actions on a computer screen, usually including accompanying narration or captions that explain the on-screen activity. Screencasts are quick and easy to produce. They are commonly used for software tutorials, product demonstrations, and presentations. Videos are typically distributed online or on discs.

Screencasts offer advantages to both the instructor and learner over more traditional instructional materials. Instructors are able to demonstrate concepts, allowing the audience to learn by example. This can be much more effective than reading through pages of text and static images. Viewers benefit by accessing videos at their own convenience when they have the time and proceed at their own pace.  The control over starting, pausing, and replaying videos helps accommodate different learning styles. A screencast also provides a personal connection between the instructor and audience that is often missing in distance learning.

Without question, one of the most popular applications of screencasts is in training and education. Years ago, I first taught myself software such as Adobe Photoshop and Illustrator by viewing hours of training videos on discs. Companies such as Lynda.com and VTC offer hundreds of courses in software product training including graphic design, video, operating systems, programming, web development, and digital photography.  Courses are broken down into videos on different topics, giving the learner the ability to choose the video that addresses the specific issue at hand. Software publishers offering libraries of such videos can increase sales and reduce product support issues. Some other uses for screencasts are:

  • Presentations
  • Product demonstrations
  • Capture of live lectures and webinars
  • Explaining technical concepts
  • Website tours
  • Project Orientations
  • Software Reviews
  • Providing feedback for grading of assignments and tests

Making a screencast requires special software to record the screen activity and a microphone if you’ll be adding narration.  The process is simple. Run the screencast software. Start the application that you would like to record. Select the area of the screen to be captured. Capturing the entire screen is not necessary, only the relevant areas. After selecting the area, start recording. Run some tests to check audio levels and to be sure everything is working correctly before proceeding with the full recording. Record, save, and make any necessary edits to the video. Once your screencast is completed, the content can be delivered on a disc or online by publishing the file to either your own website or to a hosting site such as YouTube or Vimeo. In order to demonstrate the basic process of creating a screencast, I created…what else…a screencast, listed below:

Planning ahead can help you produce a good screencast and save time by reducing the number of takes and cutting down editing time. Poor quality audio could quickly turn away an audience. An expensive, professional microphone is not necessary to record decent audio. However, it is best to use an external microphone rather than one that is built into your computer. A good headset should produce sufficient results. Plan out what you are going to show by creating simple storyboard sketches. Write out a script for the entire screencast, if that’s your style, or make an outline at the very least. Before you begin recording, organize all of the files and materials you’ll need. Open up any applications you plan to use. Rehearsing can be helpful. It is often best to do multiple takes until you get it right rather than spending a lot of time afterward editing together multiple video clips. However, you might also consider leaving some of your mistakes in the video if viewers are likely to encounter the same problems. Audience attention spans tend to be very short. If your screencast is long, break it up into smaller segments and label each so that viewers can jump to the parts of interest.

Screencast software comes in two types: online, web-based tools, and full desktop applications that you install on your computer. Online tools are usually free but have limits on the video duration and output file size. Those limits can be removed by paying a fee. An online tool is a good choice for short screencasts.  The desktop applications are better suited for long screencasts because they are capable of doing everything: recording, editing, adding captions, arrows, and special screen highlighting. They are available in both free and commercial software but the free ones have some limitations and usually do not offer editing capabilities.

Screencast Date

It took me only a few hours to create my screencast for the college, which they now have as a valuable training resource available at any time. If you have something to teach, demonstrate, or present, consider sharing it with a screencast. The time spent can pay off in many ways for both you and your audience.

This post was updated on October 4, 2016.

 

Free Alternatives to Commercial Software

The work kept coming in but the software I ordered to get it done sat in a pile of red tape. The situation lingered for months but fortunately, I found a solution: free software. I was able to locate free alternatives for nearly all of the commercial applications I was waiting for.

Free software exists for just about any type of application: word processors, antivirus protection, photo, video, and sound editors, computer backup, CD / DVD burners, 3D modelers, etc.  Check out the list of popular titles at the end of this entry.  Quality is dependent on the particular product, ranging from buggy, beta releases to full-featured, robust applications that can meet or exceed rival commercial software.

It is important to understand that there are different types of free software. They are generally categorized as freeware, shareware, or open source.  Freeware usually refers to software that can be downloaded and used for free but with little or no support and no access to its source code. Shareware can be tried for free but you are expected to pay for it if you continue to use it after a trial period. The shareware developer has full control of the intellectual property and is responsible for providing support and enhancements. Source code access is restricted. Open source software is released with its source code and is free to use, modify and redistribute. It is supported by an online community of developers and users.

So why would you want to use free software? If you’re interested in learning a particular type of application, you can download a program for free and dive right in without any financial investment. Afterward, you might stick with the free one if it suits your needs or go further and purchase a commercial program. Sometimes a commercial application might be too complicated, incompatible with your computer’s hardware, too buggy, or causes conflicts with other software. I once had problems with two different commercial antivirus programs so I decided to switch to a free one. Unlike much commercial software, open source is usually updated frequently and problems are quickly rectified. Finally, because there are no licensing costs you can use it on as many computers as you’d like.

Open Source Boutique Cartoon
Free software is not without its downsides. In the case of open source, it is often developed by programmers for use by other programmers and can be much less user-friendly than commercial software. Unlike commercial software, there is no one-on-one support available. Instead, support is provided through forums and there is no guarantee that your particular issue will ever be resolved. Development of an open source program could cease indefinitely without warning, or never make it past a beta stage. It’s a good idea to check how long a program has been around before deciding to invest a lot of time in it.

Where can you find free software? An excellent place to start is at Sourceforge.net where you can search from thousands of open source titles. Check out the links I’ve listed below for other good sites.

Eventually, I received all of the software that I requested on my job but some of the free applications I’d found were so good that I continued to use them alongside the commercial ones. Regardless of whether you’re in a bind like I was, exploring the free software available is well worth the effort. You can’t beat the price!

Popular Titles:

  • OpenOffice – Office software suite for word processing, spreadsheets, presentations, graphics, databases
  • LibreOffice – Open source office suite, based on the same code base as OpenOffice
  • GIMP – Photo retouching, image composition and image authoring
  • Cobian Backup – File backup and scheduler
  • Audacity – Open source, cross-platform software for recording and editing sounds
  • 7-zip – Open source file archiver. Supports 7z, ZIP, RAR, and many other archive formats
  • Microsoft Security Essentials – Free antivirus for Windows
  • VLC Media Player –Open source Windows media player for video and DVD
  • Blender – Open source 3D content creation suite
  • Inkscape – Open Source vector graphics editor, with capabilities similar to Illustrator, CorelDraw, or Xara X
  • Lightworks – Free video editor

Links