This page describes how to convert a multi-column slide into accessible HTML.

To convert multiple column slides to HTML:

1. Begin by editing your presentation HTML file. Go into the BODY section at the location where this slides should be inserted; it is here that you will add the next slide. Insert this new HTML slide just after slide 2 (and before slide 5), since the slide you are going to edit is the third slide in the PowerPoint presentation.

   From the sample "Human-Computer Interaction" presentation, (see Image 12 ) is the original PowerPoint slide 3.

2. Begin with the image representing the slide and the slide's title. The following should be inserted:

   <!-- Slide 3 -->
   <img src="Slide3.jpg" alt="Slide 3">
   <H1>What You Were Expecting?</H1>

   Now you need to convert the content of the slide into accessible HTML.

   With a multi-column slide, there are two options:

• "linearize" the columns (placing one after the other)
• use cascading style sheets to arrange the text in column-based format (preserving the look and feel of the columns).

Look at each of these techniques in turn:

Linearizing the Columns

This approach is recommended since it is easier to implement and yet still conveys the information. The idea is to simply move columns "below" each other, moving from left to right, and placing each column after its predecessor column. For example, if the original slide looked like (see Image 13)

Then the linearized, accessible HTML version would look like (see Image 14).

To linearize the slide material:

1. Place each column's content after the preceding column's content.

The original PowerPoint slide 3 would look like this in HTML using this linearized technique:

Note: In the linearized version of this slide, you have combined the two columns' list items into one list. This is the intent of this slide, but if the elements in the columns of your particular slide are not related (as in this list example), just make them separate paragraphs, images, etc. If you save your HTML document and view this newly-created slide, you should see something like (see Image 15).

Cascading Style Sheets

Though this method is a bit more complicated than linearizing, it is recommended this if you must preserve the column look and feel of the slide.

A cascading style sheet allows you to specify how the elements of our HTML document are displayed; style sheets separate the style (or look and feel) of the document from the structure (or the content and ordering of information). This page will only touch the surface of cascading style sheets; if you would like more information, there are many excellent sites on the internet that discuss cascading style sheets.

Note: The W3C specification states that you should not rely solely upon style sheets when presenting information to the user; to make a Web page accessible, the content of the slide must be easily understood even if the style sheet is not present.

To use CSS for converting multiple column slides to HTML:

1. Create the style that you will apply to achieve the columns in our slide. Create styles by adding a STYLE section to the HEAD section of our HTML document.

The basic template for defining a style is to add the following at the end of the HEAD section of the HTML document (just before the slash-HEAD closing tag):

1. Define a new style that will create the column. Place the following code in the STYLE tag section (replacing the comment "<!-- STYLE INFORMATION HERE -->"):

<style type="text/css">
  div.column { width : 50%; float : left; }
</style>

What this does is gives you the ability to use a DIV tag later in the document and associate the contents of the DIV section with this style. As a result, the content will occupy 50% of the width of the browser window (creating a column that takes half of the browser).

• The "type="text/css"" attribute of the STYLE tag specifies that you are defining the style local to the document in a text/css (cascading style sheet) format.
• The WIDTH attribute of the style specifies the width of the column, so if you wanted three columns side-by-side (instead of the two here), then you would want to specify the width to be 33% (one third of the browser); if you wanted four columns, set the width to 25%, etc.
• The FLOAT attribute of the style specifies that you want the columns to appear one after another, moving left to right, filling up the browser in a side-by-side fashion.

In this particular example, you are creating a "class" of the DIV tag and naming this new class "column". You will see how to apply this column DIV tag to a part of our HTML.

The HTML for slide 3 should contain its image and title as before (shown below):

<!-- Slide 3 -->
<img src="Slide3.jpg" alt="Slide 3">
<H1>What You Were Expecting?</H1>

But instead of using the linearized bullet list, we're going to keep the columns in place. To do this, we will have to create two separate lists, one for the first column and one for the second column.

If we created these lists as shown below, we don't get the intended results. Type the following in for slide 3 and see what you get.

<!-- Slide 3 -->
<img src="Slide3.jpg" alt="Slide 3">
<H1>What You Were Expecting?</H1>

<ul>
  <li>Some technical information</li>
  <li>Apply "common sense" to our systems</li>
</ul>

<ul>
  <li>Also discuss "non-techie" topics
    <ul>
      <li>Human psychology</li>
      <li>Cognition & memory</li>
      <li>Interface design/aesthetics</li>
      <li>Device "affordances"</li>
    </ul>
  </li>
</ul>

Notice that this slide contains two lists, one after the other (in the linearized fashion). However, we want the columns to appear side by side, not one after the other. We can achieve this by using the column-based DIV tag that we created earlier in our style sheet.

We can apply the style by "wrapping" the HTML element in the DIV tag. Once we do this, the style is applied to the tag, and we'll have our columns.

Save your work as an HTML file. For this example, save as presentation.htm. The completed code for converting a Multiple Columns Slide (i.e. Slide 3) of the PowerPoint presentation HCI.ppt should be as follows.

Code Sample of Multiple Columns Slide:

<!-- Slide 3 -->
<img src="Slide3.jpg" alt="Slide 3">
<H1>What You Were Expecting?</H1>

<div class="column">
  <ul>
    <li>Some technical information</li>
    <li>Apply "common sense" to our systems</li>
  </ul>
</div>

<div class="column">
  <ul>
    <li>Also discuss "non-techie" topics
      <ul>
        <li>Human psychology</li>
        <li>Cognition & memory</li>
        <li>Interface design/aesthetics</li>
        <li>Device "affordances"</li>
      </ul>
    </li>
  </ul>
</div>

Notice that each list appears inside of a DIV and a slash-DIV tag pair. We tell each DIV tag that it should associate with the "column" class, linking each of these to the "column" style that we previously defined in the HEAD section of our HTML document. If you had more that two columns, you would simply add the DIV tags around each of the columns' contents and you will get the column-based layout that you desire.

This cascading style sheet approach is a bit more difficult to implement that the simpler linearized version, but you preserve the look and feel of the slide. The slide is also accessible because we are not relying upon the layout or the cascading style sheet, so if someone is using a browser that doesn't support style sheets (or has this feature turned off), the information is still displayed in such a way that makes sense - one column after the other.

Open your HTML file in a web browser. The file should display with the slide image, followed by the title and then the slide content (see Image 16). You can also view the context of the Multiple Columns Slide in the complete conversion of the Sample PPT to HTML (, 520 KB).

For more information about style sheets, point your browser to http://css.nu/pointers/ .

Why Not Just Use a Table?

If you used a table to layout the information on the Web page, then you would be violating one of the W3C WAI accessibility specifications. See http://www.w3.org/TR/WCAG10-TECHS/#tech-avoid-table-for-layout for the specification's details. The specification states not to use tables for layout purposes unless the table linearizes gracefully, but this is open for quite a bit of interpretation. It is recommended that you only use tables for their originally intended purpose - displaying data in a tabular format.

The next page will discuss embedded video.