Skip to Main Content

Archive for the 'Accessibility' Category

Software at IU – a quick overview

One of the perks of being an IU student, faculty, or staff member is having access to low-cost and no-cost software. This quick post will give you a rundown of what’s available.


Let’s start with IUware. Go to the IUware website to download software to your computer. The site will detect what operating system you’re using and take you to the appropriate page. Software is available for PC, Mac, and Linux. Browse software titles by category or use the search box to find what you need. When you’ve found your software, follow the download instructions. You’ll be prompted to enter your IU username and passphrase if you’re not already logged into the Central Authentication System (CAS). Some software requires a product key. You can find keys to products you’ve downloaded by clicking the Keys and Licenses link at the top of the page.

Read the rest of “Software at IU – a quick overview” »

Web Accessibility Resources

Computer screen and wheelchair symbol illustration.









Web content accessibility is crucial for reaching the widest audience possible and is part of Indiana University’s commitment to equity and diversity. IT Training can show you what it means to be accessible, the laws and standards that govern web accessibility, and how to easily address some of the common concerns that prevent individuals with disabilities from using the web effectively. We offer workshops on evaluating and updating your existing content. We can also show you how to create new accessible content for your web presence using a variety of software tools.

Here’s a list of resources you might find helpful after you’ve attended our training sessions.

Read the rest of “Web Accessibility Resources” »

Video Captioning: DIY Method Using YouTube

Video Captioning: DIY Method Using YouTube

Recently, Peter Ermey of UITS IT Training and Tomas Gregg of IU’s Assistive Technology and Accessibility Center (or ATAC) teamed up to demonstrate and explain how to use YouTube to generate caption files that will help to make your videos be more accessible. YouTube’s auto-captioning capability can create a great starting point, from which you can perfect and export a caption file to use with videos.

View webinar recording. View the webinar recording for “Video Captioning: DIY Method with YouTube.”

In this webinar, we covered:

  • how to sync a transcript to a video to create captions in YouTube
  • how to auto-caption a video and edit captions for accuracy in YouTube
  • how to export a caption file from YouTube for use in other programs
  • how to load a video and caption file in Kaltura

To register for additional upcoming IT Training online webinars or workshops, visit

How does Accessibility Affect You



Accessibility. This is definitely a word that you need to know. Indiana University is committed to providing accessible programs, as well as services, for its students, faculty, and staff in all departments. Making sure that your website, program, and documents can be read by all people with any form of disability is the key to making really accessible documents. You are allowing people with disabilities, including visual, auditory, speech, physical, learning, and neurological disabilities, to use the computer in an easier manner. However, even when you do not have a disability, designing accessible documents can still help you!

Read the rest of “How does Accessibility Affect You” »

Creating Accessible Documents at IU

Creating Accessible Documents at IU

We all know that creating accessible documents is an important part of providing universal access to courses and other university materials. In a recent IT Training webinar, presenters Joe Humbert and Mary Stores from IU’s Assistive Technology & Accessibility Centers provide general guidelines, along with detailed demonstrations, to help you ensure your documents are accessible.

View webinar recording. View the webinar recording for “Creating Accessible Documents at IU.”

In this presentation, several resources were shared to enable participants to follow along and use as reference later. View and/or download the shared resources for this presentation.

In this webinar, we covered:

  • How to create or improve the accessibility of PDF, MS Word, MS PowerPoint documents
  • Techniques for writing alternate text descriptions and descriptive link text
  • Best practices for syllabi

Follow-up questions are welcome. You can add a comment to this post or reach out to IU’s Assistive Technology and Accessibility Center directly.

Web Accessibility Made Easy: Consistent Navigation and Presentation

This blog post in the “Web Accessibility Made Easy” series discusses why it is important to keep the navigation and presentation consistent.


In spite of the importance of consistency for navigation and presentation, not all Web sites on the internet have a consistent navigational structure or presentation. This can be a severe disadvantage for users with physical or cognitive disabilities. For those with cognitive disabilities, remembering the location of links or sections of a Web can be very taxing. If these locations change from page to page, the extra cognitive processing required to relocate links or web page sections may inhibit users from task completion. Similarly, people with other impairments (fine motor, vision, or dexterity issues) may find it physically exhausting if links constantly change position on a Web page.

Consistency also benefits those without disabilities. Because of the vast array of information available on the Internet and the wide variety of Web site design methods, the cognitive load on people without disabilities is great. If the navigation and presentation remain the same throughout a Web site, the cognitive load is lessened for all users and the time it takes for users to locate their desired content is significantly reduced. Consistent navigation and presentation, also known as user interface, is a big topic in the world of usability. Renowned usability expert Jakob Nielsen has written a book on this topic, Coordinating User Interfaces for Consistency ( With the advent of templates and content management systems, consistent navigation and presentation is becoming easier to maintain and more prolific throughout the Internet.

The Guideline

IU Web Accessibility guideline

  1. Presentation and navigation style shall remain consistent throughout the document.

Wrap Up

Maintaining consistent navigation and presentation is not hard to do and is beneficial for both users with and without disabilities. It provides better usability and efficient navigation for all users. Take steps to help improve user experiences by ensuring all navigation and presentation of content on your Web site is consistent.

Web Accessibility Made Easy: Lists

This blog post in the “Web Accessibility Made Easy” series describes how to appropriately use lists… a common feature of Web sites. Although helpful, lists are not always coded correctly.


HTML lists are an accepted way to outline or organize information into related groups on a Web page. Lists are a particularly helpful means of organizing navigation links. There are three list sub-types: unordered, ordered and definition. Unordered lists, which are proceeded by a bullet, may be the most common type of list. Ordered lists are more commonly recognized as numbered lists.  Definition lists are a special list type, created to order and organize term/definition pair sets.  Below are examples of each type of HTML list. For more information on HTML lists, please consult the W3C HTML 4 List page.


  • Fred
  • Joe
  • Johnny


  1. Joe
  2. Fred
  3. Johnny



Given to using long words.


Marked by strong urging; serving to encourage or incite

Note: The Definition list has been faked above because the HTML definition list element is not recognized by WordPress.

Lists, whether unordered, ordered or definition, need to have opening and closing tags to be valid HTML lists and render correctly to user agents including internet browsers and screen-reading software.

Code Example:


Many developers create fake lists using images and CSS style rules to create the visual appearance of a list.  This creates navigation roadblocks for screen-reader users, especially if there are multiple lists coded in the same manner.   However, with correctly coded lists, screen-reader users can jump from list to list using keyboard shortcuts for easy navigation. In addition, screen-reading software announces how many items are in each list and if nested lists are present, allowing screen-reader users to understand the hierarchical structure of the list.  For these reasons and many others, lists should always be properly coded, after which, the developer can use CSS style rules to control their visual appearance.


IU Web Accessibility Guidelines

18. Mark up lists and nested lists properly.


This tutorial will be using both the Bad example web page and the  Good example web page, along with their associated style sheets.

1.   The bad code – Fake lists coded with images and CSS.

In the code below there is no actual list; the list is faked.  To a screen-reader user, each bullet of this fake list would be read out, “img/bullet,” which would get annoying to any person.  Instead of using <img> tags, the developer should have created a HTML list and used CSS style rules to change the bullet to an image.

<img src="img/bullet.jpg" width="7" height="7" />Learn about the federal statues<br />
<img src="img/bullet.jpg" width="7" height="7" class="float-left" />Research free and commercial tools that can aid you<br />
<img src="img/bullet.jpg" width="7" height="7" class="float-left" />Participate web accessibility training<br />
<img src="img/bullet.jpg" width="7" height="7" class="float-left" />Design the web site according to the standards provided<br />

2.   Create correctly coded HTML lists.

Add the opening and closing tags <ul> and </ul>. Then, replace the <img> and <br/> tags with <li> and </li> tags.  The CSS style declaration below changes the bullet into the chosen image.

<ul class=“cbullet”>
<li> Learn about the federal statues </li>
<li> Research free and commercial tools that can aid you </li>
<li> Participate web accessibility training </li>
<li> Design the web site according to the standards provided </li>

CSS Style declaration:

.cbullet ul {

list-style-image: url(img/bullet.jpg);


Note: Having an image as a bullet does not affect how screen-reading software announces the list items.

Wrap Up

Properly coding all lists is an easy way to improve the accessibility and navigability of a Web site without impacting the visual design.  Properly coded HTML lists are particularly important for screen-reader users.  In addition, coding lists items properly helps web pages to validate and ensures the Web page renders accurately in any Web browsing software.

Web Accessibility Made Easy: Cascading Style Sheet Basics

This blog post in the “Web Accessibility Made Easy” series discusses the basics of Cascading Style Sheets (CSS) and the importance of correctly using CSS.

Cascading Style Sheets

Use Cascading Style Sheets (CSS) to add consistent styling to Web pages. CSS rules separate document presentation elements (color, fonts, spacing, layout, headings, etc.) from document content (written in HTML or a similar markup language). Separation of content and presentation does the following:

  • Improves content accessibility
  • Improves flexibility and control for specification of presentation characteristics
  • Enables multiple pages to share formatting
  • Reduces complexity and repetition in the structural content though web design that does not rely on tables. (W3C & Wikipedia)

Modern Browsers (Firefox, Opera, and Internet Explorer) allow users to substitute their own custom style sheets that render Web pages in a more accessible format for that user. Without the use of Cascading Style Sheets this is not possible because inline and embedded styles override external style sheets added by the user. The images below show an example of a user modified style sheet created to improve the visual accessibility of the Web page to meet their particular needs.

Normal view of Web Accessibility Good Example Web Page

Normal View as set by CSS

High Contrast view (White on Black) of the Web Accessibility Good Example Web Page

High Contrast view (White on Black)

The first image shows the Web page using the CSS style sheets created by the Web developer. The second image of the same Web page derives from a user specified CSS style sheet. High contrast black and white text improves visual contrast of the page. This is often helpful to individuals with low vision.

It is important to note, not all CSS style rules improve accessibility. If important content is added to a Web page by using CSS instead of through the underlying code, when Cascading Style Sheets are disabled or they are substituted to accommodate personal preference or adaptive technology, the content added with CSS might not be accessible to the user.

Good example with style sheets turned off

Below is the Web page used in the examples above. In this instance, the Cascading Style Sheets have been disabled. Cascading Style Sheets have been used correctly because all the information available with the Cascading Style Sheets enabled is available when Cascading Style Sheets are disabled. In addition, new content is visible that was initially hidden by the CSS. This hidden content aids users of adaptive technology with page navigation. It was hidden so that it would not disrupt the visual layout, but still be useful.

Web Accessibility Good Example page with Stylesheets turned off

Bad example with style sheets turned off

CSS has not been used appropriately in the Web page below. Using CSS, the header image and contact information were coded as background images of an HTML division element (<div>). Neither the header image nor contact information appears when the Cascading Style Sheets are removed.

Web Accessibility Bad Example page with Stylesheets turned off


IU Web Accessibility Guidelines

  1. Presentation and navigation style shall remain consistent throughout the document.
  1. Documents shall be organized so they are readable without requiring an associated style sheet.
  1. Use style sheets to control layout and presentation.


This tutorial demonstrates Cascading Style Sheet coding for both the bad example Web page and the good example Web page.

  1. Bad Code – Important content is coded as a CSS background image.

    To display the header image, the code below uses an HTML <div> element with a background image coded using CSS encapsulated in an HTML link element (<a>). The CSS style rule is linked to the <div> element’s id attribute, “headerimg”. Normally, there is no accessibility issue when using CSS background images. But in this case, the header image is the main heading on the page. Therefore, its content should be accessible to adaptive technology through the alternative text attribute. Unfortunately, alternative text can only be added to hard coded images not CSS background images. The CSS style rule is found in the screen.css file or below:

<div id="header">
  <a href="Bad.html"><div id="headerimg"></div></a>

CSS code

#headerimg {
  margin-left: 15.5em;

  1. Good Code – The CSS background image is hard coded as an image with alternative text in a HTML heading element

    The header image and parent link element act as the main heading for the page and therefore should be encapsulated a HTML heading element. HTML heading level 1 (<h1>) opening and closing elements are added around the entire link element, which encompasses the HTML <div> element and header image. The HTML heading level 1 element was chosen because the image describes the main topic of the Web page, “Indiana University Web Accessibility Class.”

  2. <div id="header">
        <a href="Good2.html"><div id="headerimg"></div></a>

    As stated above, because the image is now part of a heading it should be coded as an image with alternative text, instead of a CSS background image. If no alternative text is present, the heading and link will appear empty to adaptive technology. The HTML <div> element is changed to an HTML <img> element. The image should have its height and width specified in the source code instead of in the CSS style rule to ensure the page layout does not expand when the image is loaded. Finally, a new CSS style rule is added to the image to reposition it in the center of the parent HTML <div> element.

    <div id="header">
        <img src="img/Header.jpg" width="552" height="150"
        alt="Indiana University Web Accessibility Class" />

    CSS code

    .thrColElsHdr #header img {
      margin: auto;

    Wrap Up

    Properly using CSS can increase accessibility. However, when improperly used, CSS can adversely affect accessibility for those who use adaptive technology to access the web or who need to modify web pages to fit their specific accessibility needs. Remember, CSS creates the most accessible Web pages when used to style content that already exists in the underlying code. Therefore, a good rule of thumb is to create page content first and then use CSS to style it for presentation on the Web page. By following this rule, no matter what style is used, the content will be accessible to all users of assistive technology. In future blog posts more advanced CSS techniques will be discussed.

Web Accessibility Made Easy: Tab Order

This entry in the “Web Accessibility Made Easy” series discusses an HTML attribute many web developers may overlook… tab order.

Tab order and tabindex

Tab order or “tabbing order”, “defines the order in which (HTML) elements will receive focus when navigated by the user via the keyboard.” (Tabbing navigation, W3C) All elements that by specification or scripting can receive focus will be present in the tab order. The tab order works with the following elements among others…. Read the rest of “Web Accessibility Made Easy: Tab Order” »

Web Accessibility Made Easy: Form Labels

This entry in the “Web Accessibility Made Easy” series will discuss explicitly associating a label with a form control.

Label Elements

The <label> element is an HTML element that defines a label for a specific control on a form.  There are two different ways to use label elements to associate a form control with a meaningful, control specific label. The first way is to associate the label element’s “for” attribute with the corresponding “id” attribute of the form control.  The second way is to give the form control a title attribute, using the label description as the title.

Associating labels with form controls is essential to screen-reader users. Without explicit labeling of form controls, these users would have to guess what kind of information should be entered in each form control. Read the rest of “Web Accessibility Made Easy: Form Labels” »

Get Training Tips via RSS Subscribe to Entries feed or Read Comments via RSS Subscribe to Comments feed.