Accessible tables representing many-to-many relationships

We encourage users to post events happening in the community to the community events group on https://www.drupal.org.
Liam Morland's picture
Posted by Liam Morland on April 13, 2012 at 4:09pm

I am trying to figure out how to make a particular table accessible. On the y-axis are the names of professors. On the x-axis are the names of research interest areas. The body of the table is used to show which professors work in each area. Each professor can work in multiple areas. So, going along the row for a professor, there is a bullet in the column for each research area that they work in; the other cells are empty. As an added wrinkle, the column headers are numbers which refer to labels elsewhere on the page; this last problem can easily be fixed by putting the numbers in abbr elements with the full name as the @title.

Here is the current version of the table.

I was thinking of putting the bullets also in abbr elements with the name of the research area as the @title. I think that would mean that a screen reader user would hear the the person's name followed by their areas.

However, one might use the table to find out who all works in a given area. In other words, they would be reading down a column and across for the name whenever they see a bullet. How would that work on a screen reader? Is there anything I can do to make it work better?

Categories:

Comments

Re: accessible tables

Posted by bowersox on April 16, 2012 at 3:47am
bowersox's picture

Hi @Liam,

Here are a few suggestions for making this table more accessible:

  • Use TH for row headings too - I see that the column headings use TH, but the rows need to as well
  • Use scope="col" and "row" - The TH elements need a scope="" attribute to say whether they are a heading for their row or their column. See http://webaim.org/techniques/tables/data#th for info and examples.
  • Combine name and email - I think having two cells for each row that are the heading may be confusing, although it is legal AFAIK. What about putting the Name and Email address of each researcher into the same cell on the left side? You could use a BR line break to put the email link below the name.
  • Use something besides a bullet - I think the bullet character might be confusing and may sound wrong on many screen readers (or not be read out loud at all). What about putting a "Yes" or even another character in the cells? Or what about using something with an ABBR style abbreviation so it can be understood better?

That is my 2 cents about making this table more accessible. Thanks for your time and energy making your content accessible to all! Cheers,

-Brandon Bowersox-Johnson

www.pixotech.com

Could also use ID and Headers attributes

Posted by sidnc1986 on April 16, 2012 at 10:29am
sidnc1986's picture

Hi @lieam,

You could also make use of id attribute of th element and headers attribute of td element to achieve better accessibility.
This technique is thoroughly explained in technique h43 of WCAG 2.0. The technique is used for attaining compliance with Guideline 1.3.1 Info and relationships.

Hope this helps,

Siddhant Chothe,
Senior Software Developer at Techvision

Tried reading the current table with JAWS12

Posted by sidnc1986 on April 16, 2012 at 10:38am
sidnc1986's picture

Hi @liam,

I also tried to read the table using JAWS 12 (verbosity level=advanced). The bullets are being read out. But I agree with Bowersox that bullets won't be a great choice. This is because screen readers have features that allow to read content with all or most or some or none punctuations/symbols. Hence I'ld suggest not to depend on symbols. Instead it would be better to use text or else graphic (that looks like bullet) having alternative text.

Siddhant Chothe,
Senior Software Developer at Techvision

Thanks for the ideas,

Posted by Liam Morland on April 16, 2012 at 1:50pm
Liam Morland's picture

Thanks for the ideas, everyone.

@sidnc1986, is there a way that JAWS can read down a column, allowing the user to find out everyone who works in a particular area?

Thanks

Yes, columnwise reading table is possible with JAWS

Posted by sidnc1986 on April 18, 2012 at 5:56am
sidnc1986's picture

Hi Liam,
There are ways in which you could read a html table:

  1. Using the combination ctrl+alt+arrow keys: read table cell by cell. One can read column cellwise pressing ctrl+alt+up/down arrow keys.
  2. Using windows+alt+arrow keys:: read table columnwise or rowwise. One can use windows+alt+left/right arrow keys to read entire column in one go.

You can find all keystrokes at JAWS Keystrokes page under heading "Tables in HTML".

Siddhant Chothe,
Senior Software Developer at Techvision

OK, and if you are reading

Posted by Liam Morland on April 17, 2012 at 1:32pm
Liam Morland's picture

OK, and if you are reading down a column, does it read the row headers for each row prior to reading the cell contents?

Not for your table

Posted by sidnc1986 on April 18, 2012 at 6:07am
sidnc1986's picture

Hi Liam,
When I tried reading your table, JAWS was reading the column headers along with the cell data. But It didn't read the row headers.

Well, I tried out creating html table my self that matches your situation having only 2 data rows. Both scope and ID/Headers approach work the same way.

Siddhant Chothe,
Senior Software Developer at Techvision

Thanks for your help!

Posted by Liam Morland on April 23, 2012 at 2:43pm
Liam Morland's picture

Thanks for your help!