Adding Multiple Column Slide to Webpage Template

The previous page discussed how to convert a Bullet-List Slide when using the recommended Make Webpage Method for achieving an accessible PowerPoint presentation. In this module, a sample twelve slide PowerPoint presentation (HCI.ppt) will be made into one webpage. Sometimes information in PowerPoint slides is conveyed across multi-columns.

In a webpage, columns are generally created with the use of a table for an aesthetic layout and easier visual interpretation. However, when Converting a Multiple Column Slide into Webpage Content, a list or paragraphs should be used to convey the information. But, why not use a table when converting a Multiple Column Slide? Because the content of a table often cannot be correctly accessed by individuals using alternative technologies such as a text-to-speech program, a screenreader (i.e. Jaws) or text-based web browser.

Note: Before proceeding, you should have completed all steps in the Save Slides as Images and Template of Webpage.

Why Not Use a Table When Converting a Multiple Column Slide?

Text Gets Unwrapped

Some voice-enabled technologies such as older screen readers and text-to-speech programs do not understand word wrapping and will read across the page through the cells of a table line by line - like you might read a page in a book. When table cells are side by side on a webpage, the first line of Cell 1, then the first line of Cell 2, followed by the second line of Cell 1, and so on would be read.

Example of a two-celled table viewed in a web browser

There is a 30% chance of rain
showers this morning, but they
should stop before the weekend.

Classes at the University
of Wisconsin will resume
on September 3rd.

Example of a two-celled table read by a screen reader

"There is a 30% chance of rain Classes at the University showers this morning, but they of Wisconsin will resume should stop before the weekend on September 3rd."

More recent versions of screen readers, text-speech programs, and other voice-enabled technologies should read the table cells correctly. However, many individuals with disabilities often use a mixture of different assistive technologies and may be using older equipment for a various reasons (i.e. familiarity, high replacement or purchase cost, access to service provider, etc.).

Linearize the Table

Linearization is a table rendering process used by screen readers and text browsers to convert the content of tables into a series of paragraphs that will be read one after the other. The paragraphs will occur in the same order as the content is defined in the webpage code.

When a table with multiple-columns and rows is read, the text in the first column of row one, the second column of row one, the third column or row one, and so on will be read until there are no more columns in row one. Then, the reading will continue with the first column of row two, the second column of row two, etc.

Image 13: Conceptual idea of a three-column table

Image 14: Conceptual idea of a linearized three-column table

Example of a linearized three-column table

For example, when a table displaying information side-by-side across three columns (see Image 13) is linearized, the contents of the columns (from left to right) become a "down the page" series placing each column "below" its preceding column. (see Image 14).

Tip: Tables were originally designed for displaying data in a tabular format. However, tables are often used in web development to structure the layout of the webpage. The World Wide Web Consortium (W3C) Web Content Accessibility Guidelines (WCAG) recommends that tables not be used for layout purposes . But, if it is necessary to use a table for layout, the table must linearize in a readable order. For more information on accessible tables, read Adding a Table Slide to Webpage Template from this module and Tables in HTML from Module 9: Making HTML Files Accessible

Converting a Multiple Column Slide into Webpage Content

When making a PowerPoint presentation into a webpage, each slide must be converted and inserted into a template file, which is the basis of the webpage. The following fourteen steps demonstrate how to convert a Multiple Column Slide.

To convert a Multiple Column Slide into webpage content:

Open the template file in your preferred text editor or web authoring tool. For this example, use NotePad and open the "presentation.html" file within the "Mod3_PPT_to_Webpage" folder of "My Documents."
Go to the <BODY> section of the file.
Create a comment for the Multiple Column Slide to be converted by adding this code:
.

For this example, after the slide 2 horizontal line (<hr>) , add a comment for slide 3, which will be created from converting slide 3 of the sample PowerPoint (HCI.ppt).
Provide the image (<img>) of the original PowerPoint slide by adding this code:
<img src="location/name of image file" alt="text describing the image">.

For this example, slide 3 of the sample PowerPoint presentation (HCI.ppt) is the Multiple Column Slide (see Image 12 ).

Image 12: Multiple Column Slide of sample PowerPoint (slide 3)

The source (src) of the slide image is located in the images folder "images" with the name of "Slide3.JPG" and the alternative text (alt) should be "Slide 3."

Tip: The text within the "alt" of the image tag (<img>) displays when images are unable to be seen whether due to disability or environment (i.e. text-based web browser). All images must have this alternative, more commonly called 'alt-text'. For more information, read Images in HTML from Module 9: Making HTML Files Accessible.

Provide the title of the slide using a "header 1" tag (<h1>) by adding this code:
<h1>Slide Title</h1>

For this example, the slide title should be "What You Were Expecting."

Tip: Because web browsers display code differently and assistive technology (i.e. screenreaders) rely on structure to correctly interpret a webpage, it is important to properly format the code of webpages. For more information, read Textual Elements in HTML from Module 9: Making HTML Files Accessible.
Ensure the information of the Multiple Column Slide conveys the intent of the slide.
- If the column information is not related, each of the points should be made into separate paragraphs: (<p>Text of Point</p> and then proceed to Step 10).
- If the column information is related, the points should be combined into a list (for this example, start a bullet-list <ul> and proceed to the next step #7).
  
  Tip: To create a list that has numbers instead of bullets add the code for an ordered list: <ol>. For an ordered list using letters, add the code: <ol type="a">.
Provide each of the points of a Multiple Column Slide being made into a bullet-list as a separate list item (<li>) by adding this code:
<li>Text of item in list</li> .

For this example, the information in slide 3 of the sample PowerPoint (HCI.ppt) has three main points that each need to be a list item: "Some technical information", "Apply 'common sense' to our systems", and "Also, discuss 'non-techie' topics."
Close a bullet-list for the information of a Multiple Column Slide by adding this code for ending an unordered list: </ul>.
(If an ordered list with numbers or letters is used, add this code. </ol>).
Sometimes a list in a PowerPoint slide will have one or more embedded "sub-lists".

Construct each inner or sub-list of the "parent" point that it "lives under". Before the end of the parent point (</li>), start the sub-list as a bullet-list (<ul>) or an numbered list (<ol>) and then create each point of the sub-list as a separate list item (<li>Item in sub-list.</li>). When the sub-list is complete, end the sub-list (</ul> or </ol>). The code should be as follows:
<li>This is the "parent" point. <ul> <li>The first item in the sub-list.</li> <li>The second item in the sub-list.</li> </ul> </li> For this example, a sublist will be constructed for the third "parent" point in Slide 3 of the sample PowerPoint (HCI.ppt). The third point ("Also, discuss 'non-techie' topics.") has a sub-list that contains four items:
- Human psychology
- Cognition and memory
- Interface design/aesthetics
- Device affordances.
After the slide information is complete, provide a horizontal line to separate this slide from the next slide by adding this code: <hr>
Save the file. For this example, "presentation.html" should be the filename.
Verify the code for converting a Multiple Column Slide resembles the following:
Code sample of a Multiple Column Slide converted into webpage content
 <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> <li>Also discuss "non-techie" topics <ul> <li>Human psychology</li> <li>Cognition and memory</li> <li>Interface design/aesthetics</li> <li>Device affordances</li> </ul> </li> </ul>

Verify the web browser view of converting a Multiple Column Slide. For this example, open the web browser, Internet Explorer,and view the file (presentation.html) in the "Mod3_PPT_to_Webpage" folder of "My Documents" (see Image 15).

Image 15: Multiple Column Slide of sample PowerPoint converted into webpage content (slide 3)

Browser view of converted Multiple Column Slide has:
- The title of the presentation (i.e. Human Computer Interaction) in the title bar of the web browser.
- The image of the Multiple Column Slide from the original PowerPoint.
- The slide title on one line (i.e. What You Were Expecting?).
- The slide information in a list or paragraphs. (i.e. multilevel bullet-list with three "parent" points; the third point has a sub-list with four items).
- A horizontal line to separate this slide and its information from the next slide.