1. Skip Navigation  
  2. What's New  
  3. Search  
  4. Contact Me  
  5. This Site

The following information is a series of transcripts from the WebAxe Podcasts. The WebAxe podcasts are a discussion about accessibility. So far, transcripts of podcasts 1 to 4 are available here, as well as the WebAxe promo. Please note that all content is as transcribed from the WebAxe transcript any does not necessarily correlate with my own personal opinion. Where I have taken the liberty of rephrasing something -
e.g. w e b a x e dot blogspot dot com as webaxe.blogspot.com I have enclosed my transcription with square brackets.

WebAxe Promo

WebAxe - Practical Web Accessibility Tips. The blog and podcast for programmers, coders, or anyone else interested in techniques for web development with accessibility in mind. [ WebAxe.blogspot.com ]

WebAxe Episode 1

Welcome to WebAxe - Practical Web Accessibility Tips

Hello and welcome to WebAxe. This is your host Dennis Lembree and I'm coming from outside [...] Michigan. Basically, this podcast is just about web accessibility, Section 508 etc, so it's for any programmers, coders or anyone else interested in techniques for making accessible websites. And if you have any questions on what an accessible website is, then why don't you check out the websites that I'm going to - the URLs I'll give you at the end of this podcast.

But basically what it is about is about people who are using alternative input devices or different "user agents", it's just to make sure these people can access the same content as somebody using just a typical browser. A lot of people think that accessibility is just about the handicapped so that a blind or deaf person can get at the same content as, you know, a fully enabled person. But that's not always the case and that's a whole other discussion.

So, just a quick background on myself. Again, my name is Dennis and I've been a web designer/programmer for about 8 years or so and for a few odd other years, I've done some marketing and some electronic publishing and some technical writing.

So, some of the topics that I'd like to cover in upcoming episodes of WebAxe are going to be things like tables and forms - making sure your HTML forms are accessible, and the skip nav feature, maybe we'll talk about colours, and to make sure your site is, you know, accessible or 508 compliant as far as the colours go. And another item I'd written down that we could talk about would be phrase elements, such as abbreviation, and proper use of block quote and some of the newer ones like cite and keyboard.

So essentially, I'll just be going through the code and giving practical tips on how to clean up your code and add some tags and make your site more accessible and user friendly. So with that, I'll just go over three websites that I think are very very valuable as far as web accessibility and then I'll see you at the next podcast.

The first one is by the W3C and it's the Web Accessibility Initiative. So the URL is [http://w3.org/wai]. The next website I want to give you is the United States Federal Government site [Section508.gov] which is basically the United States Federal Law on accessibility. And the third site I'd like to reference for you is WebAIM which stands for Web Accessibility In Mind which is a great site and it just has a lot of good practical tips - the site itself is a good example. You can find that at [webaim.org].

Okay, so that's it for this quick first episode of WebAxe, and we'll see you next time. Thanks for listening.

WebAxe Episode 2

Hello and welcome to WebAxe. This is your host Dennis Lembree and this is the second episode - glad you could join me. And what we're going to be talking about today is forms and how to add a label tag to a form element in order to make it accessible and a little more user friendly.

This technique is priority 2 by the W3C standards which is a little surprising to me since forms are so popular on the web, and it's not very hard to implement this technique. By the way, this is checkpoint 10.3.2 if you want to go to W3.org and look it up.

So, let's get on with it then. Let's say you have a field in a form on your web page called YourEmail so you want the user to enter his or her email address. So you have the words "Your Email" and then [<input type="text" name="txtEmail" id="txtEmail"> ] Now, make sure you have the id="txtEmail" in there because you're going to need it for this functionality but also because it's just good XHTML practise - hopefully that's what you're writing for.

So, the next step is simply to add that label tag. So you can put it in front or after your input but basically, I mean it could be anywhere on the page but in good practise you probably want to place it just before your input tag and you want to wrap it around the words 'your email' because what you're doing is you're actually setting - attaching that label semantically, attaching that label "Your Email" to the input field. So you would type [ <label for="txtEmail">Your Email</label> ]. So you've wrapped the label tag around the words Your Email and you've got the for="txtEmail" attribute in your label. So that's basically it - now your email form element is accessible and 508 compliant and it's also user friendly because on most browsers if you click on the label text, your cursor will become enabled in the field so you don't have to click on the field all the time, you could also click on the label text which is kind of nice. In some browsers, if you even mouse over the label text, the form element, especially radio buttons, will highlight so you know that that label text is associated with that form element.

And keep in mind that you know that your attributes should have double quotes around them - I didn't want to repeat that for every attribute when I was explaining this - and there you have it - accessible form elements on your website.

So that's your tip for this episode - thanks for listening, take care.

Visit WebAxe at webaxe.blogspot.com.Grab your RSS or ATOM feed here. You can also leave a comment or send Dennis an email.

WebAxe Episode 3

Welcome to WebAxe - Practical Web Accessibility Tips

Hello and welcome to WebAxe. 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 WebAxe 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 WebAxe at webaxe.blogspot.com.Grab your RSS or ATOM feed here. You can also leave a comment or send Dennis an email.

WebAxe Episode 4

Welcome to WebAxe - Practical Web Accessibility Tips

Hello and welcome to WebAxe. This is your host Dennis and this is episode 4 - quick but important tips. I'll be covering four different topics today: just real briefly, for four short but I feel pretty important programming techniques for web accessibility.

The first one is text links, and you will see on the web it will say 'click here' and have the 'click here' hyperlinked, which is a big no-no. If you've been doing web programming for a while you probably already know this but another reason not to do this is accessibility. And the reason why for accessibility - besides usability and it being bad practise - but for accessibility if there is a user using a screen reader or some kind of special device then there will most likely be a tool where the user can view all the links on the web page that they are currently at. So, if they're viewing the links and it says click here, then they are obviously not going to know where that link goes to. So it's much much better, say the link says 'click here' to view the map to my store', well it's much better practise for the link to say 'map to my store' and just hyperlink that whole phrase. Then, if the link is viewed out of context, it is really easy to tell where that link goes.

Okay, so the next topic we'll talk about is heading tags and there's many many reasons why you should have proper use of header tags in your HTML - H1, H2, H3 - but another reason is for accessibility. And the reason is similar to the text link reason - there are tools for people with different user agents where the user can view the structure of the web page. So if you've got a really long web page with a lot of content and a lot of text, instead of having to read through - or listen through - the whole web page, the user can view the structure of the document by the heading tags, so that he or she can just jump to the portion of the page that he or she wants to listen to, thereby making it much more user friendly and accessible.

The next quick link for today is close links on popups which is a pretty straightforward item. It's basically saying if you open a popup window, at the end of the content in the popup window, you should just add a close link on there at the end of the content, which makes it more quick and easy for the user to know that they're at the end of the file and to close the window. And that goes for fully enabled people as well as people using screen-readers or whatnot. Another side note on that - it's another whole other topic in itself - is opening a popup window. Technically there are a lot of different things involved in that as you may know, but at the minimum I'd just like to say that if you're opening windows - and some people think that's a terrible idea to begin with - but if you open a popup window make sure you tell the user one way or another that they are going to open another window, either by just text in front of the hyperlink, or maybe in the title tag of the hyperlink, or maybe just at the beginning of your website.

The last topic I'd like to discuss is dropdown menu links. So, when you come to a web page, many times you'll see a select form element, you know, a drop down menu and when you select something all of a sudden it just shoots you over to whatever page it's linked to. And personally this bugs me - as far as usability goes, it's not very good, and as far as accessibility goes, this isn't very good either. And it just has to do with the user being in control, and knowing what's going on on the web page so that they don't get confused or get lost and it kind of is similar to the popup window issue also. But if you look at the web accessibility guidelines, check out checkpoint 7.4 or 7.5 and 10.1, which will cover this issue. So in order to correct this problem for your dropdown menu all you need to do is just add a submit button, or a go button, or however you want to label it, and so once you make the selection, the user just then has the control, and press that button and then be taken to the link that he or she has chosen. And another little point I'd like to make about that is, the reason why I don't think doing it the other way is very good is because if you select something, say it opens a window with the selection, and then you close the window and in the dropdown menu the selection is still there. Well what if you wanted to open it again? You'd have to change your selection, close another window and then change your selection back so it's just a big miss. So please, just put a submit, or a go button or something, next to your dropdown menu for links and everyone will be happy.

All right, so that's it for episode 4 of WebAxe, this is Dennis signing off, please leave any comments to questions, or suggestions you may have for my podcast, and you can do that by going to webaxe.blogspot.com. Thanks. See you next time.

Visit WebAxe at webaxe.blogspot.com.Grab your RSS or ATOM feed here. You can also leave a comment or send Dennis an email.