Welcome to Web Axe - Practical Web Accessibility Tips
Hello and welcome to Web Axe. This is your host Dennis and before we get started, I'd just like to mention real fast that to my surprise I'm - that this podcast is now listened to on iTunes, which was pretty neat to find out and also that I am listed on [podcastingnews.com] which is also a really good directory of podcast sites.
Okay so today we're basically going to talk about tables and accessibility, mostly about the summary, caption, th and abbreviation tags and attributes that you'll be applying to tables to make your site accessible. And when I say tables, I'm not talking about a layout table. Due to XHTML we don't need layout tables any more, thank God - in my opinion (laughs) - I'm talking about data tables, or as some people call them, tabular data tables.
So we'll be discussing pretty much the basics, but in my opinion that's pretty much all you'll need - there were some more issues and some more complicated technical techniques but if you want good clean code and layout then in my opinion that's all you will need.
So, let's say we have a data table. And let's say for the purposes of this example its - what can we do? - how about average temperature and humidity for all the states in the United States. So we'd have three columns, one would be the state name, and the next would be average temperature and the next would be average humidity level. Say for average - year round. And then - so in your first column you would list all the states, underneath the state name heading, and in the second column you'd list all the average yearly temperatures for that state and in the third column you'd list all the average humidity levels for all the states. So basically, you'd have 3 columns and 50 rows. Well, 51 rows including the header row.
Okay so we have our table, and we won't get into the design of the table, that's basically a CSS issue, but what we're going to talk about is the actual structure. Now, to make this table accessible, the first thing you want to do is to add a summary attribute. So, in your table tag - the very first tag of your table [transcribed <table summary="3 column table of annual average temperature and humidity for all states in the United States">]. The summary basically it's invisible, it's in the code but to a typical sighted user you're not going to be able to see or read the summary tag. The summary tag is mostly for visually impaired users... [description of what to include in summary]... When a non-sighted user would come to the table, say using a screen reader or, well I guess it would be a screen reader usually, then it would read the summary tag, say this is a data table coming up and give the user a little heads up on what's to come.
So the next thing you would want to add is a caption, and the caption can be viewed - or should be viewed really, in my opinion, and you know, with CSS you can change the style of the caption but the caption tag comes in between your table tag and the very first table row, and so after you close your table tag before the first table row you type in [transcribed <caption>Average temperature and humidity for the United States</caption> ]. So at the top of this data table, just above your table header, which we'll get to in a second, you'll see this caption, which basically is just a name for this table. And you'll see a lot of times when there's a data table that people will - they'll put a caption in but there'll just be an h2 tag, or a paragraph tag with a bold on it which is okay when you're looking at it but semantically it's not really correct, and for XHTML purposes or just validity purposes and accessibility purposes of course that is not correct.
Okay, so the next thing you want to do for your accessible table is add a th row. Most people do this - most web editors have a tool to easily add the table header but basically it's the first row in your table should be the table header row not a table data row so instead of a td tags in your first row you'll be using th tags. So in Dreamweaver, in the properties bar, if you just select the top row and td, in the property bar there's a checkbox you can check to mark it as a table header. And that's pretty straight forward, but there's another thing you can do in your th tags that most people don't do and that is to add the scope attribute so for example in the first th tag for say the state name you would add an attribute in that th tag and you would say scope="col" and what that does is it kind of marks that the scope of this header goes down the column so that the state name - the scope of that state name, goes down the column, so all the state names below it belong to this table header. So in your next th tag, for average temperature, you would also add the same thing scope="col" and then you would do the same for your average humidity column in your third th tag.
Okay, so the fourth and final item that we're going to go over is the abbreviation attribute abbr, and this is also in the th tag. And what this does is, for screenreaders like, instead of it reading, what it's going to do is every time it gets to like the average temperature, it's going to say average temperature and then give whatever the content is in that data cell, and then it's going to continue on. So let's shorten that up, is the idea and so the screen reader would just say temp instead of average temperature, because temp is a lot shorter, and that's what the abbreviation attribute would be for. So in your th tag, you'd just type in abbr="temp", and that'll make it a lot easier for your non-sighted users when they're trying to read this long data table.
Okay, so that's it for today. I hope you learned a little something about data tables and accessibility. I know there's a little more to it but if you have anything to add, email me or better yet go onto the Web Axe website and give some comments or opinions there. That's [WebAxe.blogspot.com].
Thanks again for listening and I'll see you next time.
Visit Web Axe at WebAxe.blogspot.com.Grab your RSS or ATOM feed here. You can also leave a comment or send Dennis an email.
For advanced techniques on data table accessibility, check out Podcast #36: Complex Data Tables