Accessible web coding 101
- Thread starter Jazajay
- Start date
Jazajay
Active Member
XHTML tables
Now data tables can have huge problems with accessibility and are by far the most complex side of accessible web coding.
I'm not talking about XHTML tables for layout but for there actual use that being to display data.
So we have a XHTML table like so ~
<table>
<tr>
<td>City</td>
<td>Weather</td>
<td>Day</td>
<td>Month</td>
<td>Year</td>
</tr>
<tr>
<td>Liverpool</td>
<td>Hot</td>
<td>12</td>
<td>October</td>
<td>1993</td>
</tr>
<tr>
<td>London</td>
<td>Cold</td>
<td>14</td>
<td>December</td>
<td>1994</td>
</tr>
</table>
Now a screen reader will read that out as ~
Weather Day Month Year Liverpool Hot 12 October 1993 London Cold 14 December 1994
Which is pointless if you have 50 odd rows how do they know which row is to which column?
So what we want to do, is add a caption to give the table a header to explain it better, give it a header section to display the column options and then apply row headers to tell blind users which city has which result.
So our new table now looks like this ~
<table>
<caption>Weather results for the UK over the last 10 years, exciting topic, lol</caption>
<thead>
<tr>
<th scope="col">City</th>
<th scope="col">Weather</th>
<th scope="col">Day</th>
<th scope="col">Month</th>
<th scope="col">Year</th>
</tr>
</thead>
<tbody>
<th scope="row">Liverpool</th>
<td>Hot</td>
<td>12</td>
<td>October</td>
<td>1993</td>
</tr>
<tr>
<th scope="row">London</th>
<td>Cold</td>
<td>14</td>
<td>December</td>
<td>1994</td>
</tr>
</tbody>
</table>
Now when a screen reader hits this it can now tell the blind user more efficiently what is headers and where columns start and stop which breaks it up a lot better.
Jaz
Key:
Blue ~ XHTML
Edit: Check out Harry's coded table for a great example.
Now data tables can have huge problems with accessibility and are by far the most complex side of accessible web coding.
I'm not talking about XHTML tables for layout but for there actual use that being to display data.
So we have a XHTML table like so ~
<table>
<tr>
<td>City</td>
<td>Weather</td>
<td>Day</td>
<td>Month</td>
<td>Year</td>
</tr>
<tr>
<td>Liverpool</td>
<td>Hot</td>
<td>12</td>
<td>October</td>
<td>1993</td>
</tr>
<tr>
<td>London</td>
<td>Cold</td>
<td>14</td>
<td>December</td>
<td>1994</td>
</tr>
</table>
Now a screen reader will read that out as ~
Weather Day Month Year Liverpool Hot 12 October 1993 London Cold 14 December 1994
Which is pointless if you have 50 odd rows how do they know which row is to which column?
So what we want to do, is add a caption to give the table a header to explain it better, give it a header section to display the column options and then apply row headers to tell blind users which city has which result.
So our new table now looks like this ~
<table>
<caption>Weather results for the UK over the last 10 years, exciting topic, lol</caption>
<thead>
<tr>
<th scope="col">City</th>
<th scope="col">Weather</th>
<th scope="col">Day</th>
<th scope="col">Month</th>
<th scope="col">Year</th>
</tr>
</thead>
<tbody>
<th scope="row">Liverpool</th>
<td>Hot</td>
<td>12</td>
<td>October</td>
<td>1993</td>
</tr>
<tr>
<th scope="row">London</th>
<td>Cold</td>
<td>14</td>
<td>December</td>
<td>1994</td>
</tr>
</tbody>
</table>
Now when a screen reader hits this it can now tell the blind user more efficiently what is headers and where columns start and stop which breaks it up a lot better.
Jaz
Key:
Blue ~ XHTML
Edit: Check out Harry's coded table for a great example.
Jazajay
Active Member
Yeah, lol.
I was thinking last night, after bluecote's post, I could probably put a site together from what I know.
I have only had to code XHTML tables twice, I deleted the first 1 3 days later as I thought of a better way of doing it, but it stuck so I thought I would share.
Any way no worries if I think of anything else I'll let you know,
Or if anyone has any techniques I have missed by all means post them, always happy to increase my knowledge base, TBH,
Glad it has helped anyway.
Jaz
I was thinking last night, after bluecote's post, I could probably put a site together from what I know.
I have only had to code XHTML tables twice, I deleted the first 1 3 days later as I thought of a better way of doing it, but it stuck so I thought I would share.
Any way no worries if I think of anything else I'll let you know,
Or if anyone has any techniques I have missed by all means post them, always happy to increase my knowledge base, TBH,
Glad it has helped anyway.
Jaz
br3n
Senior Member
Jazajay
Active Member
Well I'm not going to say I validate every page to XHTML strict, the toughest of the lot, there are 4 settings, because some wont. If I include a link with parameters in it, using the ampersand (&) for example, to an external site that my site visitors want, will I not include it just to validate the page, no of coarse not that is stupid if my site visitors want it.
Also if I use a textarea tag I refuse to under principal to, add cols and row attributes to the tag, and instead apply height and width with CSS, as to me they should be included in CSS as they effect how that tag looks. This to me anyway is something that should have been moved, and deprecated, in the last update, again does it matter?
No.
Also will I not use target, even though it has been deprecated?
No because it works when JS has been turned off, requires less code and improves performance, so has huge benefits.
But apart from those, minor issues, that only pop up very occasionally, do I code to the highest level of standards, XHTML strict, the rest of the time?
Yes.
Why?
Because it shows the quality of my work as a developer, the fact that that guy, or gal, doesn't even code to strict then well, TBH shows me the quality of his work, and it is not as high as it can be IMO.
But the fact that Google doesn't validate to W3C guidelines, pay attention to that as I will get to it in a min, so we shouldn't argument, well don't get me started.
Not all of us are lemmings, and only do what the big boys and girls do.
Just because 1 big company doesn't code to quality does not mean that we as developers should follow their bad example.
IBM does and to the highest level of strict, not transitional.
And their pretty big, IMO.
But 1 fact you have appeared to got mistaken with is coding to standards is not the same as coding for accessibility, they are 2 different things.
W3C and Legal guidelines, these are not the same, or even run by the same people.
The W3C validator, which is what you are talking about, is a (X)HTML validator that tells web developers if their work is up to high quality standards, by the World Wide Web Consortium (W3C).
Now the W3C, who is ran by Tim Berners-Lee, who actually created the world wide web, are the people who set what divs are, how much padding should be in certain areas, which tags are used for what, what new tags are allowed to enter the html spec, as in version 5, that sort of stuff, browser developers then try to implement them, or more recently put ideas forward, such as CSS transitions and transformations, dont get me started personally that should be included in the JS spec not CSS, which is where they are going to end up, due to the fact it is technically animation, but, hay.....
Now the legal guidelines, which is what I am on about, are what countries set to make sure that all their citizens can view the same content on-line, and off-line, and are not set by the W3C, which controls the html spec, and thus invalid or valid coding.
Now section 508, is the US guidelines to code to under US federal law to make your site accessible to US citizens, we are not constrained by what it says, if you server is in the UK you are confined to UK law. Now the UK one falls under the 2005 Disability Discrimination Act (DDA), (Now the 2010 equailty act) and is not as clear cut, bit like the UK constitution in comparison to the US constitution, but by following the US guidelines you will be safe under UK law, due to the fact that they are intensive and the guy who headed the 508 (sub-)committee was Jim Thatcher, the guy who created the first screen reader way back in the day.
Now their is a 508 validator run by cynthiasays.com.
This is not what that article you quote was on about, they where on about the W3C validator.
However the author you reference was right on one point, most validators wont tell you if your site is accessible, which is different to valid coding.
But for clarity does Google validate to section 508, legal guidelines?
O crap it does, ooooooo how about Yahoo!, yeah that does, oooooo what about Live.com, o surprise, surprise it does.
As they must do as they are US companies, and are therefore constrained to section 508 under US law.
Please note:
Google was only done first to prove the point otherwise it would have been done last.
So the big boys actually do, they don't validate to the W3C which is different, and to me shows the quality of the designers/developers work, but that is a different topic.
Hopefully that has settled the point though.
Jaz
Also if I use a textarea tag I refuse to under principal to, add cols and row attributes to the tag, and instead apply height and width with CSS, as to me they should be included in CSS as they effect how that tag looks. This to me anyway is something that should have been moved, and deprecated, in the last update, again does it matter?
No.
Also will I not use target, even though it has been deprecated?
No because it works when JS has been turned off, requires less code and improves performance, so has huge benefits.
But apart from those, minor issues, that only pop up very occasionally, do I code to the highest level of standards, XHTML strict, the rest of the time?
Yes.
Why?
Because it shows the quality of my work as a developer, the fact that that guy, or gal, doesn't even code to strict then well, TBH shows me the quality of his work, and it is not as high as it can be IMO.
But the fact that Google doesn't validate to W3C guidelines, pay attention to that as I will get to it in a min, so we shouldn't argument, well don't get me started.
Not all of us are lemmings, and only do what the big boys and girls do.
Just because 1 big company doesn't code to quality does not mean that we as developers should follow their bad example.
IBM does and to the highest level of strict, not transitional.
And their pretty big, IMO.
But 1 fact you have appeared to got mistaken with is coding to standards is not the same as coding for accessibility, they are 2 different things.
W3C and Legal guidelines, these are not the same, or even run by the same people.
The W3C validator, which is what you are talking about, is a (X)HTML validator that tells web developers if their work is up to high quality standards, by the World Wide Web Consortium (W3C).
Now the W3C, who is ran by Tim Berners-Lee, who actually created the world wide web, are the people who set what divs are, how much padding should be in certain areas, which tags are used for what, what new tags are allowed to enter the html spec, as in version 5, that sort of stuff, browser developers then try to implement them, or more recently put ideas forward, such as CSS transitions and transformations, dont get me started personally that should be included in the JS spec not CSS, which is where they are going to end up, due to the fact it is technically animation, but, hay.....
Now the legal guidelines, which is what I am on about, are what countries set to make sure that all their citizens can view the same content on-line, and off-line, and are not set by the W3C, which controls the html spec, and thus invalid or valid coding.
Now section 508, is the US guidelines to code to under US federal law to make your site accessible to US citizens, we are not constrained by what it says, if you server is in the UK you are confined to UK law. Now the UK one falls under the 2005 Disability Discrimination Act (DDA), (Now the 2010 equailty act) and is not as clear cut, bit like the UK constitution in comparison to the US constitution, but by following the US guidelines you will be safe under UK law, due to the fact that they are intensive and the guy who headed the 508 (sub-)committee was Jim Thatcher, the guy who created the first screen reader way back in the day.
Now their is a 508 validator run by cynthiasays.com.
This is not what that article you quote was on about, they where on about the W3C validator.
However the author you reference was right on one point, most validators wont tell you if your site is accessible, which is different to valid coding.
But for clarity does Google validate to section 508, legal guidelines?
O crap it does, ooooooo how about Yahoo!, yeah that does, oooooo what about Live.com, o surprise, surprise it does.
As they must do as they are US companies, and are therefore constrained to section 508 under US law.
Please note:
Google was only done first to prove the point otherwise it would have been done last.
So the big boys actually do, they don't validate to the W3C which is different, and to me shows the quality of the designers/developers work, but that is a different topic.
Hopefully that has settled the point though.
Jaz
br3n
Senior Member
Once again, My posts arn't intended to anoy or disprove yours, you obviously know a lot about the subject your arguing which is perhaps where I fall short!
The only reason I posted that link was as it completed a strange circle from another of your posts, the tattoo font thread, someone posted the "I <3 Helvetica" tatoo and thats the company the guy works for.
I read your post and understand a little more about the topics so that alone must be a good thing.
The only reason I posted that link was as it completed a strange circle from another of your posts, the tattoo font thread, someone posted the "I <3 Helvetica" tatoo and thats the company the guy works for.
I read your post and understand a little more about the topics so that alone must be a good thing.
Jazajay
Active Member
O no, don't take anything I said as an attack at you, it was truly not meant to sound like that, I just disagreed with the link, TBH, doesn't mean I am right by the way, but I thought I would clarify my point, lol.
My apologise if you took some bits personally, that was not my intention, I've just reread it, and I can see how some bits may sound like that, but they are not intended to, if that makes sense.
I can have a bit of a quirky sense of humour at times, my friends tend to get it as they know me, so.......lol.
PS ~ The tattoo font thread, is a great thread, it has given me so much to think about, got any fonts for tats you would like to share?
Let me know on that thread, would love to here any thoughts you have, or anyone's for that matter, with being a designer and all.
My apologise if you took some bits personally, that was not my intention, I've just reread it, and I can see how some bits may sound like that, but they are not intended to, if that makes sense.
I can have a bit of a quirky sense of humour at times, my friends tend to get it as they know me, so.......lol.
PS ~ The tattoo font thread, is a great thread, it has given me so much to think about, got any fonts for tats you would like to share?
Let me know on that thread, would love to here any thoughts you have, or anyone's for that matter, with being a designer and all.
Thudfactor
Junior Member
Hey, thought I'd drop in since I wrote that thing about code validation. Jazajay's points are valid, and I'm certainly not making an argument *against* validating your code. We validate our code all the time while it's in development, make heavy use of web standards, and abandoned table-based layouts ages ago.
But those decisions were not made in order to adhere to an abstract ideal rule-set that people ought to follow but because we understand and appreciate the value coding in this fashion provides.
But an over-emphasis on code validation can rob a project of resources needed elsewhere, and we don't worry ourselves overmuch with problems that don't have any apparent effect.
But those decisions were not made in order to adhere to an abstract ideal rule-set that people ought to follow but because we understand and appreciate the value coding in this fashion provides.
But an over-emphasis on code validation can rob a project of resources needed elsewhere, and we don't worry ourselves overmuch with problems that don't have any apparent effect.
Thudfactor
Junior Member
I'll give you an example. In a place I used to work we had a QA process for produced web applications and web pages. Two or three people would spend several days going over a section of a site or application, noting every unescaped ampersand in an HTML link (for example) -- minor things that did not affect display, did not affect browser behavior, and did not affect usability. Each error was a bug report, had to be documented, had to be fixed, had to be regression-tested, and had to be closed.
Usability testing? None. Accessibility testing? Only rules-based. Audience research? Nil. Web application testing? Zip. But because the site passed a mechanical validation process, it was considered good enough for public consumption, and our entire QA process was focused on passing that mechanical validation test.
Code validation is a poor measure of quality. There are certainly code validation issues that impact display, functionality, and accessibility. But rather than focus on getting display, functionality, and accessibility correct, some people focus more on getting the happy green bar on the W3C validator instead, and then think that's sufficient.
That's why I'm saying validation is a tool, not a goal: it helps you identify what's causing these other problems. But the fact that your site validates perfectly really tells you nothing beyond the fact that your site validates perfectly.
Usability testing? None. Accessibility testing? Only rules-based. Audience research? Nil. Web application testing? Zip. But because the site passed a mechanical validation process, it was considered good enough for public consumption, and our entire QA process was focused on passing that mechanical validation test.
Code validation is a poor measure of quality. There are certainly code validation issues that impact display, functionality, and accessibility. But rather than focus on getting display, functionality, and accessibility correct, some people focus more on getting the happy green bar on the W3C validator instead, and then think that's sufficient.
That's why I'm saying validation is a tool, not a goal: it helps you identify what's causing these other problems. But the fact that your site validates perfectly really tells you nothing beyond the fact that your site validates perfectly.
Jazajay
Active Member
mmmmmm nice argument, .
I do disagree with that because as you rightly say ~
That it does, and a true website needs good design, accessibility, usability, SEO and validation, only then is it a high quality peace of work.
If 1 is missing, to me a developer then it is not high quality, 1 of those areas was not completed to the best ability it can be so it is a flawed piece of work, because it can be improved on.
Granted not all validation errors effect the way the site looks, not all on page SEO is needed if it can be circumvented with incoming links, not a great design is needed if your competitors sites suck, not all usability conventions need to be followed to have an usable site, not all accessibility guidelines need to be followed if the site is an Intranet and you know all employees don't have a disability but by ticking all the boxes and crossing all the T's the website is the best it can be. Which means it is a high quality piece of work.
Slacking in 1 area, regardless of what it is, if you can do a better job, means the site is not as great as it can be.
But maybe it's just me who looks at my work that.
.I do disagree with that because as you rightly say ~
That it does, and a true website needs good design, accessibility, usability, SEO and validation, only then is it a high quality peace of work.
If 1 is missing, to me a developer then it is not high quality, 1 of those areas was not completed to the best ability it can be so it is a flawed piece of work, because it can be improved on.
Granted not all validation errors effect the way the site looks, not all on page SEO is needed if it can be circumvented with incoming links, not a great design is needed if your competitors sites suck, not all usability conventions need to be followed to have an usable site, not all accessibility guidelines need to be followed if the site is an Intranet and you know all employees don't have a disability but by ticking all the boxes and crossing all the T's the website is the best it can be. Which means it is a high quality piece of work.
Slacking in 1 area, regardless of what it is, if you can do a better job, means the site is not as great as it can be.
But maybe it's just me who looks at my work that.
Thudfactor
Junior Member
"Best ability" is different from absolute perfection, however. There are limitations of time and limitations of resources. The trick is getting the best site you can manage with the tools at your disposal. I tend to think quality is a balancing act. And with web sites, refinement and improvement should be constant. "Quality" is not perfection, but how close we can come to that unattainable ideal.
Honestly, though, I think we're arguing around the edges. All of these things are important -- as is the customer experience, which I don't think we've mentioned except in passing. There's no argument for *not* using a validator. There's no excuse for not reaching a basic level of accessibility. And table-based layout is just a bad idea period (for so many reasons). I think we have plenty of common ground there.
Honestly, though, I think we're arguing around the edges. All of these things are important -- as is the customer experience, which I don't think we've mentioned except in passing. There's no argument for *not* using a validator. There's no excuse for not reaching a basic level of accessibility. And table-based layout is just a bad idea period (for so many reasons). I think we have plenty of common ground there.
Jazajay
Active Member
CSS sprites
Hay guys and gals this came up in a few designs recently and it slipped my mind TBH so I thought I would update the list.
Now a CSS sprite is a bit like a client side image map but CSS wise.
So for example you have one image of say 20 separate individual images combined you then apply background images and height and width, to elements and just show the background you want to show off that one image.
For example ~
#header,#email,profile{background:url("path/to/1/image/containing/all/3/images/in/the/same/image.png") no-repeat}
#header{width:1000px;height:200px;background-position:0, 200px}
#email{width:10px;height:10px;background-position:201px, 211px}
#profile{width:20px;height:20px;background-position:212px, 232px}
Now the problem is because the image is now in the CSS it has no ALT attribute to show to the user.
To let a blind user read it apply a blank transparent GIF and set the ALT attribute of the GIF to the witting in the sprite.
If it is just decorative though leave it as it is TBH.
So for example following on from the above example ~
<p id="email"><img src="path/to/a/1x1/transparent/gif.gif" alt="Contact us" /></p>
Hope it helps.
Jaz
Key:
Green ~ CSS
Purple ~ XHTML
Hay guys and gals this came up in a few designs recently and it slipped my mind TBH so I thought I would update the list.
Now a CSS sprite is a bit like a client side image map but CSS wise.
So for example you have one image of say 20 separate individual images combined you then apply background images and height and width, to elements and just show the background you want to show off that one image.
For example ~
#header,#email,profile{background:url("path/to/1/image/containing/all/3/images/in/the/same/image.png") no-repeat}
#header{width:1000px;height:200px;background-position:0, 200px}
#email{width:10px;height:10px;background-position:201px, 211px}
#profile{width:20px;height:20px;background-position:212px, 232px}
Now the problem is because the image is now in the CSS it has no ALT attribute to show to the user.
To let a blind user read it apply a blank transparent GIF and set the ALT attribute of the GIF to the witting in the sprite.
If it is just decorative though leave it as it is TBH.
So for example following on from the above example ~
<p id="email"><img src="path/to/a/1x1/transparent/gif.gif" alt="Contact us" /></p>
Hope it helps.
Jaz
Key:
Green ~ CSS
Purple ~ XHTML