IT Accessibility Committee Accessible Tables Prepared by the NYS Forum IT Accessibility Committee Presented by Michael B. Short

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

What is a Table? Presentational construct Presentational construct Arranged in rows and columns Arranged in rows and columns Useful for organizing information in two dimensions Useful for organizing information in two dimensions

What is a Table? Comprised of collection of table cells Comprised of collection of table cells

What is a Table? Co-opted by web developers for use as layout tool prior to adoption of Cascading Style Sheets (CSS) Co-opted by web developers for use as layout tool prior to adoption of Cascading Style Sheets (CSS) Use for layout no longer necessary and strongly discouraged, but still used Use for layout no longer necessary and strongly discouraged, but still used

Why Use HTML Tables? Appropriate for: Appropriate for: Data tables Data tables Spreadsheets Spreadsheets Tabular Charts Tabular Charts

Parts of an HTML Table table element table element Opens and closes table Opens and closes table Sets some aspects of appearance (via border, cellpadding, cellspacing, width attributes) Sets some aspects of appearance (via border, cellpadding, cellspacing, width attributes) Provides summary of contents (not displayed, but used by screen readers) via summary attribute Provides summary of contents (not displayed, but used by screen readers) via summary attribute

Parts of an HTML Table caption – between table declaration and first row, provides tables displayed title caption – between table declaration and first row, provides tables displayed title thead, tbody, tfoot – elements identifying different sections of larger tables – macro elements usually containing multiple rows thead, tbody, tfoot – elements identifying different sections of larger tables – macro elements usually containing multiple rows

Parts of an HTML Table tr – table row – identifies collection of adjacent cells that will appear on the same line tr – table row – identifies collection of adjacent cells that will appear on the same line th – column/row heading – identifies the cell that describes a columns or row's contents th – column/row heading – identifies the cell that describes a columns or row's contents td – table data – identifies contents of single table cell td – table data – identifies contents of single table cell

What Accessibility Problems do Tables Pose? Failure to provide adequate context can make information meaningless Failure to provide adequate context can make information meaningless Improperly designed tables do not render information correctly when using screen reader 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 Using absolute values in table dimensions can make scrolling difficult for users with mobility impairments

Table Cell Relationships Table cells arent useful without context What does 3.5 mean in this context??

Table Cell Relationships Table cells arent useful without context What does 3.5 mean in this context??

IT Accessibility Committee Example: Context EAP Monthly Report

What Accessibility Problems do Tables Pose? Failure to provide adequate context can make information meaningless Failure to provide adequate context can make information meaningless Improperly designed tables do not render information correctly when using screen reader 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 Using absolute values in table dimensions can make scrolling difficult for users with mobility impairments

Table Cell Relationships Screen readers LINEARIZE table data Screen readers LINEARIZE table data How a Screen Reader processes a table: How a Screen Reader processes a table: Top to bottom, left to right Top to bottom, left to right Row 1, Column 1 Row 1, Column 1 Row 1, Column 2 Row 1, Column 2 Row 1, Column 3 Row 1, Column 3 Row 2, Column 1 Row 2, Column 1 Etc…. Etc….

Linearization Problems Caused when tables used to layout for appearance, not data relationships Caused when tables used to layout for appearance, not data relationships

Linearization Problems: What you see isnt always what you get …

Help for Linearization Several sites help you discover what your page reads like when linearized: Several sites help you discover what your page reads like when linearized: Tablin ( Tablin ( Lynxview ( Lynxview ( Lynx – Text browser for Unix and Windows ( Lynx – Text browser for Unix and Windows (

What Accessibility Problems do Tables Pose? Failure to provide adequate context can make information meaningless Failure to provide adequate context can make information meaningless Improperly designed tables do not render information correctly when using screen reader 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 Using absolute values in table dimensions can make scrolling difficult for users with mobility impairments

Making Tables Accessible: Proportional v. Absolute Sizing The problem starts with a developer that wants to optimize his table to fit his entire screen… The problem starts with a developer that wants to optimize his table to fit his entire screen…

Making Tables Accessible: Proportional v. Absolute Sizing The first person to visit the developers site has an 800 X 600 display and doesnt see things quite the same way… The first person to visit the developers site has an 800 X 600 display and doesnt see things quite the same way…

Making Tables Accessible: Proportional v. Absolute Sizing And the developers customer has a 640 X 480 display … And the developers customer has a 640 X 480 display …

Making Tables Accessible: Proportional v. Absolute Sizing If the developer had used a proportional table size, his table would have been optimized for EVERYONES monitor… If the developer had used a proportional table size, his table would have been optimized for EVERYONES monitor…

Screen Readers and Tables Highlighted cell in Screen Reader (without proper markup): 3.5 – 3.5 what? 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 Highlighted cell in Screen Reader (with proper markup): To Make:, 3 cups, Tsps. Coffee, 3.5 HOW? HOW?

Leverage Attributes to Provide Additional Context Coffee Recipe Coffee Recipe To Make: To Make: Tsps. Coffee Tsps. Coffee C. Water C. Water 3 cups 3 cups

Other Common Problems Large tables load slowly for people with low- bandwidth connections 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 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 Inappropriate use of markup (e.g., using th because you want text bolded & centered