IT Accessibility Committee

Accessible Accessible

TablesTablesPrepared by the NYS Forum IT Accessibility CommitteePrepared by the NYS Forum IT Accessibility Committee

http://www.nysforum.org/accessibility/resources/curriculum/tableshttp://www.nysforum.org/accessibility/resources/curriculum/tables

Presented by Michael B. ShortPresented by Michael B. Short

Accessible TablesAccessible Tables

OBJECTIVE: OBJECTIVE: The learner will list The learner will list three accessibility issues with tables three accessibility issues with tables and how to avoid each oneand how to avoid each one

What is a Table?What is a Table?

Presentational constructPresentational construct Arranged in rows and columnsArranged in rows and columns Useful for organizing information in Useful for organizing information in

two dimensionstwo dimensions

What is a Table?What is a Table?

Comprised of collection of table cellsComprised of collection of table cells

What is a Table?What is a Table?

Co-opted by web developers for use Co-opted by web developers for use as layout tool prior to adoption of as layout tool prior to adoption of Cascading Style Sheets (CSS)Cascading Style Sheets (CSS)

Use for layout no longer necessary Use for layout no longer necessary and strongly discouraged, but still and strongly discouraged, but still usedused

Why Use HTML Tables?Why Use HTML Tables?

Appropriate for:Appropriate for:

Data tables Data tables

SpreadsheetsSpreadsheets

Tabular ChartsTabular Charts

Parts of an HTML TableParts of an HTML Table

tabletable element element Opens and closes tableOpens and closes table Sets some aspects of appearance (via Sets some aspects of appearance (via

border, cellpadding, cellspacing, widthborder, cellpadding, cellspacing, width attributes)attributes)

Provides summary of contents (not Provides summary of contents (not displayed, but used by screen readers) displayed, but used by screen readers) via via summarysummary attribute attribute

Parts of an HTML TableParts of an HTML Table

captioncaption – between table declaration – between table declaration and first row, provides table’s and first row, provides table’s displayed titledisplayed title

thead, tbody, tfootthead, tbody, tfoot – elements – elements identifying different sections of identifying different sections of larger tables – “macro” elements larger tables – “macro” elements usually containing multiple rowsusually containing multiple rows

Parts of an HTML TableParts of an HTML Table trtr – table row – identifies collection of – table row – identifies collection of

adjacent cells that will appear on the adjacent cells that will appear on the same linesame line

thth – column/row heading – identifies the – column/row heading – identifies the cell that describes a column’s or row's cell that describes a column’s or row's contents contents

tdtd – table data – identifies contents of – table data – identifies contents of single table cellsingle table cell

What Accessibility What Accessibility Problems do Tables Pose?Problems do Tables Pose?

Failure to provide adequate context Failure to provide adequate context can make information meaninglesscan make information meaningless

Improperly designed tables do not render Improperly designed tables do not render information correctly when using screen information correctly when using screen readerreader

Using absolute values in table dimensions Using absolute values in table dimensions can make scrolling difficult for users with can make scrolling difficult for users with mobility impairmentsmobility impairments

Table Cell RelationshipsTable Cell Relationships

Table cells aren’t useful without Table cells aren’t useful without contextcontext

What does “3.5” mean in this What does “3.5” mean in this context??context??

Table Cell RelationshipsTable Cell Relationships

Table cells aren’t useful without Table cells aren’t useful without contextcontext

What does “3.5” mean in this What does “3.5” mean in this context??context??

IT Accessibility Committee

Example: ContextExample: ContextEAP Monthly ReportEAP Monthly Report

What Accessibility What Accessibility Problems do Tables Pose?Problems do Tables Pose?

Failure to provide adequate context can Failure to provide adequate context can make information meaninglessmake information meaningless

Improperly designed tables do not Improperly designed tables do not render information correctly when render information correctly when using screen readerusing screen reader

Using absolute values in table dimensions Using absolute values in table dimensions can make scrolling difficult for users with can make scrolling difficult for users with mobility impairmentsmobility impairments

Table Cell RelationshipsTable Cell Relationships

Screen readers Screen readers LINEARIZELINEARIZE table table datadata

How a Screen Reader processes a How a Screen Reader processes a table:table: Top to bottom, left to rightTop to bottom, left to right

Row 1, Column 1Row 1, Column 1 Row 1, Column 2Row 1, Column 2 Row 1, Column 3Row 1, Column 3 Row 2, Column 1Row 2, Column 1 Etc….Etc….

Linearization ProblemsLinearization Problems Caused when tables used to Caused when tables used to

layout for appearance, not layout for appearance, not data relationshipsdata relationships

Linearization Problems:Linearization Problems:What you see isn’t always what you What you see isn’t always what you

get …get …

Help for LinearizationHelp for Linearization

Several sites help you discover what Several sites help you discover what your page reads like when your page reads like when linearized:linearized: Tablin (Tablin (

http://www.w3.org/WAI/References/Tablin))

Lynxview (Lynxview (http://www.delorie.com/web/lynxview.html))

Lynx – Text browser for Unix and Lynx – Text browser for Unix and Windows (Windows (http://lynx.browser.org))

What Accessibility What Accessibility Problems do Tables Pose?Problems do Tables Pose?

Failure to provide adequate context can Failure to provide adequate context can make information meaninglessmake information meaningless

Improperly designed tables do not render Improperly designed tables do not render information correctly when using screen information correctly when using screen readerreader

Using absolute values in table Using absolute values in table dimensions can make scrolling dimensions can make scrolling difficult for users with mobility difficult for users with mobility impairmentsimpairments

Making Tables Accessible:Making Tables Accessible:Proportional v. Absolute SizingProportional v. Absolute Sizing

The problem starts with a developer The problem starts with a developer that wants to optimize his table to fit that wants to optimize his table to fit his entire screen…his entire screen…

Making Tables Accessible:Making Tables Accessible:Proportional v. Absolute SizingProportional v. Absolute Sizing

The first person to visit the developer’s The first person to visit the developer’s site has an 800 X 600 display and site has an 800 X 600 display and doesn’t see things quite the same doesn’t see things quite the same way…way…

Making Tables Accessible:Making Tables Accessible:Proportional v. Absolute SizingProportional v. Absolute Sizing

And the developer’s customer has a And the developer’s customer has a 640 X 480 display …640 X 480 display …

Making Tables Accessible:Making Tables Accessible:Proportional v. Absolute SizingProportional v. Absolute Sizing

If the developer had used a If the developer had used a proportional table size, his table proportional table size, his table would have been optimized for would have been optimized for EVERYONE’S monitor…EVERYONE’S monitor…

Screen Readers and TablesScreen Readers and Tables

Highlighted cell in Screen Reader Highlighted cell in Screen Reader (without proper markup): “3.5” – 3.5 (without proper markup): “3.5” – 3.5 whatwhat??

Highlighted cell in Screen Reader (with Highlighted cell in Screen Reader (with proper markup): “To Make:, 3 cups, Tsps. proper markup): “To Make:, 3 cups, Tsps. Coffee, 3.5”Coffee, 3.5”

HOW?HOW?

Leverage Attributes to Provide Leverage Attributes to Provide Additional ContextAdditional Context

<<table bordertable border=“1” =“1” widthwidth=“100%”=“100%” summarysummary=“Chart showing =“Chart showing how much coffee and how much water to use to make how much coffee and how much water to use to make coffee, organized by number of cups of coffee desired.”>coffee, organized by number of cups of coffee desired.”>

<<captioncaption>Coffee Recipe</>Coffee Recipe</captioncaption>><<tr>tr>

<<th scopeth scope=“column” =“column” idid=“c1”>=“c1”>To Make:</To Make:</thth>><<th scopeth scope=“column”=“column” id id=“c2”=“c2”>Tsps. Coffee</>Tsps. Coffee</thth>><<th scopeth scope=“column” =“column” idid=“c3”>=“c3”>C. Water</C. Water</thth>>

</</trtr>><<trtr>>

<<th headersth headers=“c1” =“c1” scopescope=“row” =“row” idid=“r1”>=“r1”>3 cups</3 cups</thth>><<td headerstd headers=“c1 r1 c2=“c1 r1 c2”>3.5</”>3.5</tdtd>><<td headerstd headers=“c1 r1 c3”>=“c1 r1 c3”>3</3</tdtd>>

</</trtr>></</tabletable>>

Other Common ProblemsOther Common Problems

Large tables load slowly for people Large tables load slowly for people with low-bandwidth connectionswith low-bandwidth connections

Large, complex tables difficult to Large, complex tables difficult to decipher for those with low vision; decipher for those with low vision; can be impossible for those without can be impossible for those without visionvision

Inappropriate use of markup (e.g., Inappropriate use of markup (e.g., using using thth because you want text because you want text bolded & centeredbolded & centered