Category: table

Clearing Up Summary

The summary attribute is a “classic” method to describe data tables to screen readers users. It’s mentioned in Section 508 and even in WCAG 2.0 technique H73. But this technique is outdated and I haven’t recommended its use for a while now.

Reasons not to use the summary attribute

Why don’t I recommended its use? Here are some reasons:

  • Many web editors don’t support it.
  • Because it’s not visual, the content can be easily be forgotten and therefore outdated/irrelevant.
  • Screen readers can automatically tell the user how many rows and columns a data table has so summary isn’t needed for this.
  • It’s deprecated in HTML5.
  • There is an ARIA alternative.

Misinformation

In the past, two web professionals, supposedly knowledgeable in accessibility, thought that the HTML5 Summary element (together with the Details element) can be used in place of the summary attribute. This is wrong. The Details/Summary elements are not related to the summary attribute and data tables.

And if you’re wondering, the Details/Summary elements are HTML5’s solution to toggle functionality. Browser support for Details/Summary is not quite there yet.

The ARIA Alternative

A description of a data table isn’t needed (and therefore a summary attribute) if the table is simple and clear (one header level, succinct header text, caption provided, etc.). If a description is needed, the text should be placed in the main content itself. This text can then also be associated to the table with ARIA.

In the HTML 5.1 Nightly, you’ll see the ARIA technique, 4.9.1.1 Techniques for describing tables. (Also in HTML5 technique 4.9.1.1) This is the proper way to use ARIA in place of the summary attribute to describe a data table.

Addendum: Thanks to @DBoudreau for pointing out the the tabindex=0 is required at this time for this to work properly for all screen readers.

<p id="tblDesc">The following table displays student population data of Foobar High School between 2003 and 2011 as computed by the XYZ Corporation.</p>
<table aria-describedby="tblDesc" tabindex="0">
 <caption>Student Population of Foobar</caption>
 <thead>
  <tr>
   <th>Year</th>
   <th>Population</th>
   <th>Change</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>2003</td>
   <td>846</td>
   <td>-3</td>
  <tr>
   <td>2004</td>
   <td>855</td>
   <td>+9</td>
  </tr>
 </tbody>
</table>

Response to MSDN Article “Designing Accessibility with HTML5″

This blog is a review/response to the recent MSDN article Designing Accessibility with HTML5 by Rajesh Lal (@irajlal). The article is quite extensive and covers an intro to accessibility and disability, progressive enhancement, ARIA, forms, tables, and more.

I had actually reviewed an early version of this article, but it seems some of my feedback was not incorporated, and there is also some new content in the article. So let’s discuss some of those items and more.

The introduction does an adequate job of covering the four main types of disabilities: hearing, mobility, cognitive, and visual. For reference, here’s the link to the WCAG 2.0 POUR model (perceivable, operable, understandable, robust) as mentioned.

Progressive Enhancement

I was happy that Progressive Enhancement (PE) was mentioned next, early in the article. I firmly believe that semantic markup and PE are essential to a robust and accessible webpage. PE was described fairly well, but then I was disappointed to see example code further down the page which does not use PE. In Figure 9, the form example is missing a URL in the action attribute and contains the following line to submit:

<div><a href="#" onclick="submit()">Send Your Message!</a></div>

This line does not represent proper semantic markup, progressive enhancement, nor the non-JavaScript use case. A better example would be to add a dummy URL in the action attribute, and for the submit button, do this:

<input type="submit" value="Send Your Message!" />

Headings

In Figures 6 and 7, home page sample code, the document outline is broken. The heading order jumps from H2 to H4 so is missing the H3. It also appears that the H4 elements in the aside element are correlated to the last H2, which in incorrect; they are separate topics. To solve, I would insert an H2 heading in the aside element and change the H4 elements to H3. In addition, there is no H1 element.

Figure 11, Markup for a FAQ Page, does indeed provide an ideal heading structure.

A perfect heading structure is not essential, but certainly helps. Especially when the code is an example for other developers.

And for the record, in Figures 6 and 7, the image element for the logo is missing alt text.

JavaScript Insertion

It’s good that the author recommends placing the external JavaScript files at the end of the body (at end of home page section), but remember that you may need to put certain JavaScript at the top, mostly scripts for feature detection such as Modernizr. (This isn’t really accessibility but thought I’d include anyway.)

Fieldset/Legend

In the Contact Form section, I really like that the sample code is using the placeholder attribute correctly. But there’s one issue; the fieldset element is being used but the legend is missing. The spec oddly says legend is optional, but it’s definitely best practice to use it. Otherwise, there’s no reason to use fieldset in the first place as far as I know.

Data Table

In the data table, use of a caption element is great, but I’m perplexed as to why there is a details and summary element within the caption. And I wouldn’t recommend using a strong element with the caption text; use CSS instead. Also, the TH elements should have a scope attribute; it may not be necessary with newer assistive technologies, but makes the code more robust and semantic.

Links, titles, and abbreviations

Towards the end of the article, there’s a section on links and images. I really advocate this advice: Use a CSS background image if your design requires an icon such as “>”.

Just before that, I have issues with the sample text link. Avoid “click here” is good, but then the title attribute contains “click for”. This somewhat of a moot point as the title isn’t needed at all. Traditionally, the title attribute is only needed for additional supplementary information (not required for user). The mighty Steve Faulker, in his article Using HTML title attribute, suggests that title only be used in a couple rare cases.

For images, I would not recommend the title attribute here either (due to lack of support). For even more on that, check out this recent article about title attributes on the RNIB site.

About the link underline, of course I agree that text links (in main content especially) should be underlined. The sample CSS adds the underline, but it’s much better to do this by not removing it in the first place. The underline does not have to be added; it should already be there by default.

The abbreviation example is simple and solid, but there’s more to it than that. Because of poor support, the title attribute doesn’t work typically with the keyboard and some assistive technologies (see links above). Therefore, I strongly suggest that the full text of the acronym or abbreviation is written out when it first appears on each page.

Final Thoughts

I don’t have much to say about the audio/video section; I’m just wondering where the keyboard shortcuts listed for the HTML5 media controls comes from.

It’s great to see that Visual Studio 2012 has ARIA support. I know it’s still a popular application, but I don’t have much experience with it myself.

The MSDN article Designing Accessibility with HTML5 has a lot of good information and tips. But many times, especially with accessibility, the devil is in the details. It is quite a tricky topic and there are many nuances and gray areas. I hope this response has cleared up some of those.

Roundup: Accessibility Links on Twitter

Here’s a list of some great links relating to web accessibility going around Twitter last week.

Podcast 54: The Summary Attribute

By now most of us should be pretty familiar with creating an accessible data table–use a caption, TH for row and col headers, scope attribute, and the summary. In this podcast, Dennis talks about the least familiar of these techniques–the summary attribute of the table element. The summary attribute is WCAG Checkpoint 5.5 (Priority 3).

Download Web Axe Episode 54 (The Summary Attribute)

Examples of good summary text:

  • The number of employees and the foundation year of companies in Orlando, Florida, in 1988.
  • A warming trend has been observed in Cache Valley, with temperatures about 5 degrees above historical averages over the last two months.
  • This table charts the number of cups of coffee consumed by each senator, the type of coffee (decaf or regular), and whether taken with sugar.
  • Total required by pollution control standards as of January 1, 1971. Commercial category includes stores, insurance companies and banks.

Sample Code (from 456bereastreet’s Bring on the Tables):


Table 1: Company data
Company Employees Founded
ACME Inc 1000 1947
XYZ Corp 2000 1973

Links

News

Podcast #36: Complex Data Tables

In addition to a nice caption tag and summary attribute, you may know that a data table requires table header cells (TH) for the header rows and/or columns, and a scope attribute (see Web Axe episode 3, Data Tables). But what is there is more than one row of headers? This is called a complex table, and a different type of coding should be used.

Download Web Axe Episode 36 (Complex Data Tables)

A complex table:

  • can have any number of rows as a set of headers and/or the first column as a set of headers
  • can contain data rows in between the header rows
  • uses the id and headers attributes

Links:

Sample code (modified from WebAIM):


Shelly's Daughters
Name Age Birthday
by birth Jackie 5 April 5
Beth 8 January 14
by marriage Jenny 12 Feb 12