Skip to Main Content

Indiana University Indiana University


Archive for May, 2011

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.

Consistency

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 (http://www.useit.com/jakob/constbook.html). 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.

Lists

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.

Unordered:

  • Fred
  • Joe
  • Johnny

Ordered:

  1. Joe
  2. Fred
  3. Johnny

Definition:

Sesquipedalian

Given to using long words.

Hortatory

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:

<ul>
<li>Fred</li>
<li>Joe</li>
<li>Johnny</li>
</ul>

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.

Guideline

IU Web Accessibility Guidelines

18. Mark up lists and nested lists properly.

Tutorial

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>
</ul>

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

Guideline

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.

Tutorial

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>
</div>

CSS code

#headerimg {
  background-image:url(../img/Header.jpg);
  width:552px;
  height:150px;
  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">
      <h1>
        <a href="Good2.html"><div id="headerimg"></div></a>
      </h1>
    </div>

    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">
      <h1>
        <img src="img/Header.jpg" width="552" height="150"
        alt="Indiana University Web Accessibility Class" />
      </h1>
    </div>

    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.

it2go podcast – Episode 10 – Dreamweaver Series

The latest episode of the it2go podcast is here. On this week’s episode, we talk about all of the workshops in our Dreamweaver series. Figure out where you fit in skill-wise so that you can get the skills you need.

Feel free to comment on the podcast under this post. Enjoy!

Episode 10 – Dreamweaver Series

Overlaying and Comparing Calendars in Outlook

There are many reasons you might have multiple calendars in Outlook. Perhaps you want a calendar of your favorite sports team’s schedule, but don’t need that information on your work calendar. Or maybe you keep track of schedules for several people or rooms.

These multiple calendars might not be used for scheduling. Unless you’re a die-hard fan, you probably aren’t going to take off work to watch your favorite team in a Tuesday afternoon game. And if you keep calendars for other people, they won’t always attend the same meetings. Despite this, it might be helpful to overlay the calendars to get a quick visual representation of events.
(more…)

Send Multiple E-mails to an Access or Excel Recipient List

You may have a list of business e-mails already created in an Access table or Excel spreadsheet and would like to send a mass mailing using Microsoft Outlook.  Perhaps you would like to invite everyone on your list to a special event, or you would like to let everyone know that you are being promoted to a different department in your organization and, therefore, would like to provide different contact information.

If you have an Outlook profile set up on your machine, you can send multiple e-mails quickly to many recipients at once by using Microsoft Word and the Mail Merge feature. If no Outlook profile is set up, then when you try to send the e-mails, you will get a warning stating that no Outlook profile is set up on your machine.

Just follow these steps:

  1. Open Microsoft Word.
  2. Click the Start Mail Merge button on the Mailings tab of the Ribbon and choose E-mail Messages to define the type of mail merge you want to create.
  3. Click Select Recipients on the Ribbon.
  4. Choose Use Existing List
  5. Navigate to the Excel file or Access object that contains the data source with your e-mail addresses.
  6. Click Edit Recipient List to choose those records that you want to include in the mailing. Click OK when you have chosen the recipients or filtered the list.
  7. Write your e-mail message in the Word document.
  8. To finish the merge, click the Finish & Merge button on the Ribbon.
  9. You can either edit or view the individual email messages, or send the e-mail messages directly.

If you choose Send E-mail Messages, you will get this dialog box:

Merge to Email dialog box

In the To box, using the drop-down arrow, choose the field in your list that contains the e-mail address. Add a subject line and choose the desired Mail format. Click OK, and the messages will be sent immediately.

Keep in mind that if you want any formatting, you must add formatting within the Word main document before completing the merge. You can also personalize the messages (such as adding a first name) by inserting merge fields into the Word document.

Create High End Camera Effects Virtually in After Effects CS5.5

There are several new features in After Effects CS5.5, but the most impressive and frankly jaw-dropping effect that I’ve seen is the Warp Stabilizer. It sounds like something Captain Picard would need, but in fact it’s a way to stabilize camera footage.

When shooting film or video, there are several options for how to achieve camera motion while keeping the camera stable. If you’re a professional filmmaker, you might have access to a Steadicam rig, which uses gyroscopes to allow a camera operator to move freely while the camera stays still. However, for an amateur, this isn’t really an option due to the expense of such rigs.

But now in After Effects CS5.5 Adobe has introduced the Warp Stabilizer, which can take handheld camera footage, and stabilize it to the degree that it appears as if it was shot with a Steadicam. Stabilizing features have been part of After Effects for a long time, but the degree to which you can stabilize motion with this new effect is absolutely amazing. Watch this video to see an example of the stabilization and how to use this new feature.

Stabilize Shaky Footage with After Effects CS5.5

The next feature we will look at is the Camera Lens Blur effect. On a real camera, we can change the focal length of the lens as the shot is going on, which is a way to point the viewer at specific parts of the shot. This is called Rack Focus, and is quite complex to complete on an actual film set. It requires excellent timing and a second camera operator, called a Focus Puller in order to change the focus as the shot is happening.

Now we can do this in software with After Effects CS5.5. As long as the entire shot is in focus, we can use this effect to blur out specific parts of the image, and animate it so that it mimics the focus of an actual camera.

Camera Lens Blur in After Effects CS5.5

We also have a new effect for the people who work in 3D. After Effects CS5.5 has added some new light falloff features that more closely mimic real world lighting conditions. This can improve the look of your 3D effects in After Effects.

Light Falloff Effect in After Effects CS5.5

Introducing Adobe Audition CS5.5

Adobe Audition is an audio editing program that has been around for a long time, but it was not part of Creative Suite 4 or 5. SoundBooth was included instead, which was designed for video editors to be able to quickly open a video file, edit the sound, and go back to Premiere or After Effects.

However, with CS5.5 Adobe is replacing it’s light-weight audio editor SoundBooth with this high-end program in Production Premium.

Audition is a professional quality audio editing and processing program, however, as you can see in this introductory video, Audition is still accessible to basic users, but has the features and capabilities that professionals require:

Introducing Adobe Audition CS5.5

Also, Audition CS5.5 is the first version of the program available on the Mac. And it still has all the connections to Premiere and After Effects that made SoundBooth such a useful program. Keep an eye on IT Training’s offerings and Lynda.com to get training on this program.

Dreamweaver – 5 and a half glasses full

The CS5.5 version of Dreamweaver has significant additions and enhancements.  It will be well worth updating to the new version if you are doing any of the following:

  • creating web pages to be viewed on multiple devices
  • creating mobile applications for Android and/or iOS
  • working with HTML 5 and CSS3

Scott Fegette, the Senior Product Manager for Dreamweaver, gives an overview of the new and improved features:

Videos about the specific features can be viewed at:
http://tv.adobe.com/watch/cs-55-web-premium-feature-tour-/enhanced-html5-capabilities-in-cs55/

You can read more about the specific features at:
http://www.adobe.com/devnet/dreamweaver/articles/whats-new-dwcs55.html

Tracking and Counting Days in an Excel Calendar

There are several reasons we might need to keep track of particular days over the course of a year: vacation days, sick time, out of town meetings, days specific goals are met, etc. In this example, we will be tracking vacation days, but keep in mind that this could be modified for other purposes.

We will begin with a basic calendar in Excel. There are several calendar templates which can be downloaded.


(more…)

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