ACCESSIBILITY@MC
Tuesday Tips on creating accessible electronic information
September 30, 2014
How to make your websites, documents, course content, and videos accessible
INTRODUCTION
SECTION 508 1194.22(g)
STANDARD
Row and column headers shall be
identified for data tables.
SECTION 508 1194.22(h)
STANDARD
Markup shall be used to associate data
cells and header cells for data tables that
have two or more logical levels of row or
column headers.
The Section 508 Standards are part of the Federal Acquisition Regulation
(FAR) and address access for people with physical, sensory, or cognitive
disabilities. They contain technical criteria specific to various types of
technologies and performance-based requirements which focus on functional
capabilities of covered products. Specific criteria cover software applications
and operating systems, web-based information and applications, computers,
telecommunications products, video and multi-media, and self-contained
closed products. Today we will address the topic of Tables – Row & Column
Headers.
Who could use this tip? Faculty, staff, Content Managers, Web Developers
Techniques for Addressing Accessibility – Tables (Row and Column Headers)
There are two basic uses for tables on the web: data tables and layout tables. The original intended use of
HTML tables was for tabular data. It is sometimes suggested, even by some accessibility advocates that
layout tables are bad for accessibility. In reality, layout tables do not pose inherent accessibility issues.
People with all kinds of disabilities can easily access layout tables, as long as the tables are designed with
accessibility in mind - ensuring proper linearized reading order, content scaling, etc.
For examples of the different types of tables go to the links below
Sample Layout Table: http://www.expression-web-tutorials.com/table-examples/sample-layout-table.html
Sample Data Table: http://www.ironspider.ca/webdesign102/tables4layout2.htm
Websites
A table is a data table when row headers, column headers, or both are present. For example, here is a
simple data table:
Shelly's Daughters
Name Age Birthday
Jackie 5
Beth 8
April 5
January 14
ACCESSIBILITY@MC
Tuesday Tips on creating accessible electronic information
September 30, 2014
How to make your websites, documents, course content, and videos accessible
Tables are also commonly used for page layout. Layout tables do not have logical headers that can be
mapped to information within the table cells. Layout tables were traditionally used to overcome limitations in
visual presentation and layout using HTML. With CSS, however, there is much more flexibility in controlling
page layout, so it is best to not use tables to do this. Using CSS results in cleaner, more simple HTML code,
better end user adaptability, and few potential accessibility issues.
Identify Row and Column Headers
A critical step toward creating an accessible data table is to designate row and/or column headers. In the
markup, the <td> element is used for table data cells and the <th> element is used for table header cells.
Going back to our original data table example, the column headers for this table are Name, Age, and
Birthday. The row headers are Jackie and Beth. Also note the associated caption.
Table headers should never be empty. This is particularly of concern for the top-left cell of some tables.
For more information on creating accessible tables go to links below
Accessible Tables: http://webaim.org/techniques/tables/
HTML Tables: http://accessiblehtml.sourceforge.net/accessible_tables.html
Documents
Creating accessible tables in PDF format
Usually when people talk of a PDF file being accessible it is a ‘tagged’ document. A ‘tag’ in a PDF is similar
to a HyperText Markup Language (HTML) tag. Basically it is part of the coding of the document that
Assistive Technologies (AT) can recognize, and provide a way for the AT to navigate the document.
Preferably tags are assigned in a document when creating a PDF using Adobe’s Acrobat software.
For more information on creating accessible tables in PDF format go to:
http://www.section508.va.gov/support/tutorials/pdf/12tables_1.asp
Without Adobe Acrobat, the easiest way to create an accessible PDF file is to first begin with an accessible
Microsoft Word document. In order to save the accessible functionality of an accessible Microsoft Word
document it must be ‘saved as’ a PDF.
For more information on how to save as PDF go to: http://office.microsoft.com/en-us/help/save-as-pdfHA010064992.aspx#BM14
Creating accessible tables in Word format
It is important that you specify column header rows in tables
In addition to adding alt text that describes the table, having clear column headings can help provide context
and assist navigation of the table’s contents.
To specify a header row in a table, do the following:
1. Click anywhere in the table.
2. On the Table Tools Design tab, in the Table Style Options group, select the Header Row check box.
ACCESSIBILITY@MC
Tuesday Tips on creating accessible electronic information
September 30, 2014
How to make your websites, documents, course content, and videos accessible
3. Add your header information.
Learn more in Word 2010: Tables.
A document entitled ‘Seven Steps to Creating an Accessible Word document’ has been made available for
you. For any questions about how to create an accessible Word document take a few minutes to download
and review this document.
Follow the directions provided in ‘Seven Steps to Creating an Accessible Word’ document to easily create
an accessible Word document. Then simply follow these next few steps to Step successfully convert the
accessible Word document into an accessible PDF file.
‘Save As ’ a PDF
Microsoft Word 2007 (Using Mouse) [For Word 2010 go to Word 2010_Tables]
To save as a PDF using a mouse, from the Office Button menu, hover over the Save As option, then choose
PDF.
Word
Figure 1: Office Button menu options
In the Publish as PDF menu, enter the File Name and then click on the Options button.
ACCESSIBILITY@MC
Tuesday Tips on creating accessible electronic information
September 30, 2014
How to make your websites, documents, course content, and videos accessible
Figure 2: Publish as PDF Screen
In the Options menu box make sure the Document structure tags for accessibility box, is checked. Click on
OK and then Publish.
Figure 3: Options menu
Microsoft Word 2007 (Using Keyboard) [For Word 2010 go to Word 2010_Tables]
To save as PDF using just the keyboard in Word 2007 and 2010 follow these steps:
1. Alt, F, A, type in the file name, Press Tab, Arrow Down to PDF then press Enter.
2. Save as PDF, Tab to the Options button, and press Enter.
3. In the Options menu Tab down to the Document structure tags for accessibility box, use the Spacebar to
make sure it is checked.
ACCESSIBILITY@MC
Tuesday Tips on creating accessible electronic information
September 30, 2014
How to make your websites, documents, course content, and videos accessible
4. Tab to the OK button and Enter.
5. Tab to the Publish button and Enter.
Check Accessibility with Screen Reader
Because Adobe Acrobat is the native program for creating PDF files, the PDF just created using this method
may not be perfectly accessible. However, if it was an accessible Word document, the PDF created should
also be accessible and ready for distribution.
For more information on creating accessible tables in Microsoft Word format go to:
http://www.section508.va.gov/support/tutorials/word/6tables_1.asp
Creating accessible tables in PowerPoint 2010 format
Data tables and accessibility issues
In HTML, there are ways to identify row and column headers in a data table (using the <th> element). In
PowerPoint, you can style rows and columns so they appear as data tables, but there is no way to add the
content in a way that will be identified by a screen reader. If your presentation contains more than the
simplest tables, and if you have Adobe Acrobat, consider saving your presentation to PDF and adding the
additional accessibility information in Acrobat Pro.
For more information on creating accessible tables in Microsoft PowerPoint format go to:
http://www.section508.va.gov/support/tutorials/powerpoint/6tables.asp
Need HELP with making your
website or document
accessible?
Go to Accessibility@MC or contact
Luis Gorres,
Accessibility Coordinator at
[email protected]
or at 240-567-4370
VALIDATION TECHNIQUES
Automated test tools such as WAVE and WAT toolbars can check
for the presence of tables.
For more information of test tools see resources at
Accessibility@MC.
Tables are best tested with assistive technology (AT).
Procedure
Perform a test of the website or document’s accessibility prior to
distribution or release to production using assistive technology such
as Jaws.
Results
The table is read from left to right and in a logical manner.
AT recognizes and reads the Alt tags and all Table Headers (rows
and/or columns).
Tables used strictly for layout purposes do NOT use the <th>
element.
Data table cells are associated with the appropriate headers using
the scope or id/headers attributes