IT Accessibility Committee Accessible Tables Prepared by the NYS Forum IT Accessibility Committee .
-
Upload
alfred-marquess -
Category
Documents
-
view
213 -
download
0
Transcript of IT Accessibility Committee Accessible Tables Prepared by the NYS Forum IT Accessibility Committee .
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