PowerPoint Presentation SLIDE FORMAT: Generally speaking, the slides consist of black text against a white background. Where significant images are used, they will be described. SLIDE 1 SLIDE TITLE: Accessible Tables SLIDE CONTENT: The slide is divided into two vertical columns. On the left: Prepared by: The NYS Forum for Information Resource Management IT Accessibility Committee On the right: A photo of an animal cracker in the shape of an elephant, with several bites removed. SLIDE 2 SLIDE TITLE: Accessible Tables SLIDE CONTENT: OBJECTIVE: The learner will list three accessibility issues with tables and how to avoid each one. SLIDE 3 SLIDE TITLE: What is a Table? SLIDE CONTENT: * Presentational construct * Arranged in rows and columns * Useful for organizing information in two dimensions Below the bullets is an image of two perpendicular lines, intersecting in the upper left corner, and each opposite end terminated with an arrow. Along the top axis is the word COLUMNS; along the left axis is the word ROWS. SLIDE 4 SLIDE TITLE: What is a Table? SLIDE CONTENT: * Comprised of collection of table cells Below the bullets is an image of two perpendicular lines, intersecting in the upper left corner, and each opposite end terminated with an arrow. Along the top axis is the word COLUMNS; along the left axis is the word ROWS. Inside the lines is a ruled table consisting of three columns and four rows: Row 1, Column 1: Blank Row 1, Column 2: "Column 1" Row 1, Column 3: "Column 2" Row 2, Column 1: "Row 1" Row 2, Column 1: "CELL" (The cell is highlighted in yellow) Row 2, Column 3: Blank Row 3, Column 1: "Row 2" Row 3, Columns 2,3: Blank Row 4, Colunms 1-3: Blank SLIDE 5 SLIDE TITLE: What is a Table? SLIDE CONTENT: * Co-opted by web developers for use as layout tool prior to adoption of Cascading Style Sheets (CSS) * Use for layout discouraged, but still popular SLIDE 6 SLIDE TITLE: HTML Tables are used for? SLIDE CONTENT: * Appropriate for: * Data tables * Spreadsheets * Tabular Charts SLIDE 7 SLIDE TITLE: Parts of an HTML Table SLIDE CONTENT: * TABLE element * Opens and closes table * Sets appearance (via BORDER, CELLPADDING, CELLSPACING, WIDTH attributes) * Provides summary of contents (not displayed, but used by screen readers) via SUMMARY attribute SLIDE 8 SLIDE TITLE: Parts of an HTML Table SLIDE CONTENT: * CAPTION - between table declaration and first row, provides table's displayed title * THEAD, TBODY, TFOOT - elements identifying different sections of larger tables - "macro" elements usually containing multiple rows SLIDE 9 SLIDE TITLE: Parts of an HTML Table SLIDE CONTENT: * TR - table row - identifies collection of adjacent cells that will appear on the same line * TH - column heading - identifies the cell that describes a column's contents (also used for the first cell in a row to describe the row's content) * TD - table data - identifies contents of single table cell SLIDE 10 SLIDE TITLE: What Accessibility Problems do Tables Pose? SLIDE CONTENT: * Failure to provide adequate context can make information meaningless (Bolded) * Improperly designed tables do not render information correctly when using screen reader * Using absolute values in table dimensions can make scrolling difficult for users with mobility impairments SLIDE NOTES: The next set of slides will address the first issue, context, by exploring the relationships between table cells. SLIDE 11 SLIDE TITLE: Table Cell Relationships SLIDE CONTENT: At the top of the slide, a white text box with a thin black border, haloed in yellow, contains "3.5" written in blue. Below the text box: Table cells aren't useful without context What does "3.5" mean in this context?? Along the bottom of the screen is an image depicting a two-row, black-bordered ruled table. Text within the table is in royal blue. The caption above the table reads "Coffee Recipe." Row 1, Column 1: "To Make:" Row 1, Column 2: "Tsps. Coffee" Row 1, Column 3: "C. Water" Row 2, Column 1: "3 cups" Row 2, Column 2: "3.5" (The cell is highlighted in yellow) Row 2, Column 3: "3" SLIDE NOTES: Ask participants what they think this cell might be. What does that bit of information pertain to? SLIDE 12 SLIDE TITLE: Example: Context SLIDE CONTENT: The slide consists of an image of a table, unruled. The image has a thin black border. The table is captioned "Source of Contact." The first row, containing column headings, has entries in columns 2, 3, and 4 (there is no heading in column 1): Male, Female and TOTAL respectively. The first column consists solely of row headings: "Family, Peer, Self, Supervisor, Union, Other." The remainder of the table appears to be random numbers. SLIDE NOTES: Switch to examples of tables. Show them badsampletable.html for 30 seconds, then turn off the display and have Jeff read it to them with a screen reader. Recall the number "53" (the number of times a counselor was contacted by a female supervisor) and ask them what it referred to. Next, show participants goodsampletable.html and have Jeff screen read the table and have him stop after the cell for "supervisor, female, 53" is read. Point out the differences in the way the table looks (there are none), and point out that with the addition of a few attributes (scope, ID, headers) the table becomes far more meaningful for someone without a visual reference. SLIDE 13 SLIDE TITLE: Table Cell Relationships SLIDE CONTENT: * Screen readers LINEARIZE table data * How a Screen Reader processes a table: * Top to bottom, left to right . Row 1, Column 1 . Row 1, Column 2 . Row 1, Column 3 . Row 2, Column 1 . Etc.... SLIDE NOTES: Explain "linearization" as the process of turning page contents into series of lines of data. Explain that this is what's meant when the WCAG states that "tables must linearize properly." Point out that participants already heard what this theory sounds like in practice, and it underscored how important the idea of providing context could be. SLIDE 14 SLIDE TITLE: What Accessibility Problems do Tables Pose? SLIDE CONTENT: * Failure to provide adequate context can make information meaningless * Improperly designed tables do not render information correctly when using screen reader (Bolded) * Using absolute values in table dimensions can make scrolling difficult for users with mobility impairments SLIDE NOTES: Remember how screen readers move through a web page.the next slides deal with LINEARIZATION. SLIDE 15 SLIDE TITLE: Linearization Problems SLIDE CONTENT: * Caused when tables used to layout for looks, not relationships Below this text is a screen shot of a web page in the common three-column layout (left and right columns are narrow and typically used for navigation, ads, etc., the center column is wide and typically holds content). The left and right columns are multicolored and contain various information. The center column appears to hold a news story. SLIDE NOTES: This is a simple example of this principle. Call up sampletable2.html, and point out that although rather plain, it's an example used by a lot of news and portal sites. Ask them to predict what a speech program's readback would be. The web page content (out of sequence) is listed below. <--Begin HTML Code--> Sample Table 2
 

The Spirit Times

 

NEW in Today's Edition:

Keeping the Lions from Eating the Lambs

Today's News:

Man Opens Closet, Gets More than Bargained for

SALEM, Massachussetts - When Gater Putney opened his closet door this morning he wasn't prepared for what he saw.

"There I was, naked, right out of the shower. I opened up my closet to pull out a suit, and everything was covered in this odd green slime." Putney said he'd never seen anything like it.

Sections:

Scores:

Hill House v. Addams Family
Poltergeists v. Ha'nts
Vampires v. Werewolves

A technician from exTerminex was called to the Putney home, and after testing the gook, said that it was "low-grade ectoplasm." It's from the Apparations, Inc. crew. I must have had a dozen calls from places they've infested." He held up a handful of the green slime. "This is their calling card. The cheapest stuff they can find."

Janice, Putney's wife, was nonplussed. "I've seen worse," she said. "I been cleaning his drawers for nigh on twenty years now."

But Putney was insistent that this was far from the norm. "No sir, this is nothing I'm responsible for. And when I find out who is responsible, they're going to get a piece of my mind and my dry-cleaning bill!"

Calls made by this reporter to Apparations, Inc., requesting the identity of the entity involved were not returned by press time.

Today's Weather:

Temp - 45-50°F
Sky - Cloudy, w/Fog
Sunrise - 5:45 a.m.
Sunset - 6:29 p.m.
<--End HTML Code--> SLIDE 16 SLIDE TITLE: Linearization Problems SLIDE CONTENT: What you see isn't always what you get ... Below this text is a copy of the image from the last slide, but the page contents have faded somewhat, and the page is overlain by large red numbers indicating the order in which page contents are accessed linearly: 1. Table Row 1, Columns 1-3: The top row spans three columns and includes the newspaper's title against a pink background. 2. Table Row 2, Column 1 (Navigation): The column background is a pale blue. Contents: NEW in Today's Edition: Keeping the Lions from Eating the Lambs 3. Table Row 2, Column 2 (News Story): The column background is white. Contents: Today's News: Man Opens Closet, Gets More than Bargained for SALEM, Massachussetts - When Gater Putney opened his closet door this morning he wasn't prepared for what he saw. "There I was, naked, right out of the shower. I opened up my closet to pull out a suit, and everything was covered in this odd green slime." Putney said he'd never seen anything like it. 4. Table Row 2, Column 3 (Navigation): The column background is bright green . Contents: Sections: * Hauntings * ESP Incidents * Cold Spots * Things That Go "Bump" 5. Table Row 3, Column 1 (Navigation): The column background is light orange. Contents: Scores: Hill House v. Addams Family Poltergeists v. Ha'nts Vampires v. Werewolves 6. Table Row 3, Column 2 (News Story): The column background is white. Contents: A technician from exTerminex was called to the Putney home, and after testing the gook, said that it was "low-grade ectoplasm." It's from the Apparations, Inc. crew. I must have had a dozen calls from places they've infested." He held up a handful of the green slime. "This is their calling card. The cheapest stuff they can find." Janice, Putney's wife, was nonplussed. "I've seen worse," she said. "I been cleaning his drawers for nigh on twenty years now." But Putney was insistent that this was far from the norm. "No sir, this is nothing I'm responsible for. And when I find out who is responsible, they're going to get a piece of my mind and my dry-cleaning bill!" Calls made by this reporter to Apparations, Inc., requesting the identity of the entity involved were not returned by press time. 7. Table Row 3, Column 3 (Navigation): The column has a yellow background. Content: Today's Weather: Temp - 45-50°F Sky - Cloudy, w/Fog Sunrise - 5:45 a.m. Sunset - 6:29 p.m. SLIDE 17 SLIDE TITLE: Help for Linearization SLIDE CONTENT: * Several sites help you discover what your page looks like linearized: * Tablin (http://www.w3.org/WAI/References/Tablin) * Lynxview (http://www.delorie.com/web/lynxview.html) * Lynx - Text browser for Unix and Windows (http://lynx.browser.org) SLIDE 18 SLIDE TITLE: What Accessibility Problems do Tables Pose? SLIDE CONTENT: * Failure to provide adequate context can make information meaningless * Improperly designed tables do not render information correctly when using screen reader * Using absolute values in table dimensions can make scrolling difficult for users with mobility impairments (Bolded) SLIDE NOTES: The next set of slides will address the last issue, sizing, by exploring the relationships between table size and screen size. SLIDE 19 SLIDE TITLE: Making Tables Accessible: Proportional v. Absolute Sizing SLIDE CONTENT: * The problem starts with a developer that wants to optimize his table to fit his entire screen... Below the text is a caption: Table width - 1000 px. Below the caption, on the left, is an image of a blue box labeled "table." Around the blue box is a yellow border, and outside the yellow border is a thicker black one. Below these boxes is a label: 1024 px. wide. SLIDE 20 SLIDE TITLE: Making Tables Accessible: Proportional v. Absolute Sizing SLIDE CONTENT: * The first person to visit the developer's site has an 800 X 600 display and doesn't see things quite the same way... Below the text is a caption: Table width - 1000 px. Below the caption, on the left, is an image of a blue box labeled "table." Around the blue box is a yellow border, and outside the yellow border is a thicker black one. Below these boxes is a label: 1024 px. wide. Below the caption, in the middle, is an image of a blue box labeled "table." Around the blue box on the top, left and bottom is a yellow border -- on the right side, the blue box extrudes perhaps 20% beyond the yellow border. Outside the yellow border is a thicker black one on the top, left and bottom -- on the right side, the blue box extrudes perhaps 20% beyond the black border. Below these boxes is a label: 800 px. wide. SLIDE 21 SLIDE TITLE: Making Tables Accessible: Proportional v. Absolute Sizing SLIDE CONTENT: * And the developer's customer has a 640 X 480 display ... Below the text is a caption: Table width - 1000 px. Below the caption, on the left, is an image of a blue box labeled "table." Around the blue box is a yellow border, and outside the yellow border is a thicker black one. Below these boxes is a label: 1024 px. wide. Below the caption, in the middle, is an image of a blue box labeled "table." Around the blue box on the top, left and bottom is a yellow border -- on the right side, the blue box extrudes perhaps 20% beyond the yellow border. Outside the yellow border is a thicker black one on the top, left and bottom -- on the right side, the blue box extrudes perhaps 20% beyond the black border. Below these boxes is a label: 800 px. wide. Below the caption, on the right, is an image of a blue box labeled "table." Around the blue box on the top and bottom is a yellow border -- on the right and left sides, the blue box extrudes perhaps 20% beyond the yellow border. Outside the yellow border is a thicker black one on the top and bottom -- on the right and left sides, the blue box extrudes perhaps 20% beyond the black border. Below these boxes is a label: 640 px. wide. SLIDE 22 SLIDE TITLE: Making Tables Accessible: Proportional v. Absolute Sizing SLIDE CONTENT: * If the developer had used a proportional table size, his table would have been optimized for EVERYONE'S monitor... Below the text is a caption: Table width - 100% Below the caption, on the left, is an image of a blue box labeled "table." Around the blue box is a yellow border, and outside the yellow border is a thicker black one. Below these boxes is a label: 1024 px. wide. Below the caption, in the middle, is an image of a blue box labeled "table." Around the blue box is a yellow border, and outside the yellow border is a thicker black one. Below these boxes is a label: 800 px. wide. Below the caption, on the right, is an image of a blue box labeled "table." Around the blue box is a yellow border, and outside the yellow border is a thicker black one. Below these boxes is a label: 640 px. wide. SLIDE 23 SLIDE TITLE: Screen Readers and Tables SLIDE CONTENT: Below the slide title is an image depicting a two-row, black-bordered ruled table. Text within the table is in royal blue. The caption above the table reads "Coffee Recipe." Row 1, Column 1: "To Make:" Row 1, Column 2: "Tsps. Coffee" Row 1, Column 3: "C. Water" Row 2, Column 1: "3 cups" Row 2, Column 2: "3.5" (The cell is highlighted in yellow) Row 2, Column 3: "3" Below the table image: * Highlighted cell in Screen Reader (without proper markup): "3.5" - 3.5 what? * Highlighted cell in Screen Reader (with proper markup): "To Make:, 3 cups, Tsps. Coffee, 3.5" * HOW? SLIDE NOTES: Point out that this is a small table, and it might be possible to remember that the second column heading is the number of teaspoons of coffee to use. Ask participants to imagine that the table gives measurements for everything from 3 to 12 cups of coffee, and imagine how difficult it might be to keep track of the intervening rows when you want to make 9 cups of coffee. SLIDE 24 SLIDE TITLE: Leverage Attributes to Provide Additional Context SLIDE CONTENT: Below the slide title (HTML Code):
Coffee Recipe
To Make: Tsps. Coffee C. Water
3 cups 3.5 3
SLIDE 25 SLIDE TITLE: Other Common Problems SLIDE CONTENT: * Large tables load slowly for people with low-bandwidth connections * Large, complex tables difficult to decipher for those with low vision; can be impossible for those without vision * Inappropriate use of markup (e.g., using TH because you want text bolded & centered SLIDE 25 SLIDE TITLE: QUIZ SLIDE CONTENT: None. END PRESENTATION.