I have been reading lots about how to make my sites more accessible to everyone. I have always used HTML and thinking of switching to CSS. On one hand, they say to build the whole site in CCS but then I read that HTML is more compatable for older browser users...which way to go? I read that CSS are not supported in older browsers...<!--content-->I would use CSS where appropriate, because it speeds up coding, makes the result neater and more standards compliant, and has better accessibility.<br />
<br />
You're right, some older browsers do not support CSS very well, but most people use more modern browsers, and as long as you design your page well with CSS it should look ok without. Test your page by disabling the stylesheet, and make sure the content is still available.<br />
<br />
Adam<!--content-->If you test your site at <!-- m --><a class="postlink" href="http://bobby.watchfire.com/bobby/html/en/index.jsp">http://bobby.watchfire.com/bobby/html/en/index.jsp</a><!-- m --><br />
then as well as giving an accessibility rating, it wll also display it without style sheets. Just check it's still usable.<!--content-->The goal here is to use HTML and CSS to separate content from presentation. If you use HTML to describe the meaning of the content and CSS to control the presentation then it doesn't matter if a browser doesn't understand CSS; the user still has access to the meaning. That's what makes the page accessible. Each of the HTML elements means something. Use the P element to indicate paragraphs, the H elements to indicate headings, the CITE element to indicate a citation. And use BLOCKQUOTE to indicate a block quotation and not, as it is commonly used, to indicate an indentation. On some browsers the BLOCKQUOTE element will not be displayed indented. On some a different voice might be used or perhaps the word "blockquote" will appear at the start. And using the SPAN element and CSS to ape the FONT element makes your page no more accessible. Consider another example.<br />
<br />
<p><b>Some Heading</b</p><br />
<h4>Some Heading</h4><br />
<br />
Both of those are valid HTML 4.01 according to the DTD and both will be displayed the same way on any graphical browser but the first is not accessible. As a sighted person I can scan the page and tell from context that they are headings but imagine a person listening to the page on an audio browser. That context is not there. And further, when I am searching for a spot in the text I can quickly scan the headings and find my way. Audio browsers, and the graphical browser Opera, allow users to "tab through" the headings but only if they are marked up properly. And accessibility also means accessible to search engines. Said engines now rank you page according to the content of the headings, but only if they can tell what the headings are. <br />
<br />
See <!-- m --><a class="postlink" href="http://www.w3.org/TR/WCAG10/full-checklist.html">http://www.w3.org/TR/WCAG10/full-checklist.html</a><!-- m --> for the official accessibility checklist and make sure your page makes sense in Lynx, <!-- m --><a class="postlink" href="http://www.delorie.com/web/lynxview.html">http://www.delorie.com/web/lynxview.html</a><!-- m --><br />
<br />
That said, once we have a universally accessible page, we want it to stand out to sighted users. More than 95% of browsers currently in use will understand CSS2 and 97% or so will understand CSS1. Considering what it takes to get web authors to worry about the 13% of users that do not currently use JavaScript, I wouldn't worry about that 3 or 5% who do not use CSS, as it were. Those people will still understand your page if you have marked up your page properly. There is a problem, however with the 2% of users who use version 4 browsers. Those browsers do fine with CSS1, but they get wrong CSS2. There are ways around the problem but keep in mind that those people can upgrade their browsers to ones that get the CSS right. The blind cannot upgrade to graphical browsers. <br />
<br />
But if you absolutely want your page to be its best for all users, not just accessible to all browsers, then there is another option. As always you must start with an accessible page, written in HTML 4.01 Strict. Then you add presentation using HTML. This is what the HTML 4.01 Transitional DTD is all about. Just be certain to never use tables for just layout. As tables have real meaning, non-visual browsers are developing ways to let users understand the relationship between the cells. And some of them currently decide what cells are headings and then call out the appropriate heading with each cell.<br />
<br />
See <!-- m --><a class="postlink" href="http://www.thecounter.com/stats/2003/May/browser.php">http://www.thecounter.com/stats/2003/May/browser.php</a><!-- m --> and <!-- m --><a class="postlink" href="http://www.thecounter.com/stats/2003/May/javas.php">http://www.thecounter.com/stats/2003/May/javas.php</a><!-- m --> for the numbers.<!--content-->Thanks for your advise...appreciate it.<!--content-->
<br />
You're right, some older browsers do not support CSS very well, but most people use more modern browsers, and as long as you design your page well with CSS it should look ok without. Test your page by disabling the stylesheet, and make sure the content is still available.<br />
<br />
Adam<!--content-->If you test your site at <!-- m --><a class="postlink" href="http://bobby.watchfire.com/bobby/html/en/index.jsp">http://bobby.watchfire.com/bobby/html/en/index.jsp</a><!-- m --><br />
then as well as giving an accessibility rating, it wll also display it without style sheets. Just check it's still usable.<!--content-->The goal here is to use HTML and CSS to separate content from presentation. If you use HTML to describe the meaning of the content and CSS to control the presentation then it doesn't matter if a browser doesn't understand CSS; the user still has access to the meaning. That's what makes the page accessible. Each of the HTML elements means something. Use the P element to indicate paragraphs, the H elements to indicate headings, the CITE element to indicate a citation. And use BLOCKQUOTE to indicate a block quotation and not, as it is commonly used, to indicate an indentation. On some browsers the BLOCKQUOTE element will not be displayed indented. On some a different voice might be used or perhaps the word "blockquote" will appear at the start. And using the SPAN element and CSS to ape the FONT element makes your page no more accessible. Consider another example.<br />
<br />
<p><b>Some Heading</b</p><br />
<h4>Some Heading</h4><br />
<br />
Both of those are valid HTML 4.01 according to the DTD and both will be displayed the same way on any graphical browser but the first is not accessible. As a sighted person I can scan the page and tell from context that they are headings but imagine a person listening to the page on an audio browser. That context is not there. And further, when I am searching for a spot in the text I can quickly scan the headings and find my way. Audio browsers, and the graphical browser Opera, allow users to "tab through" the headings but only if they are marked up properly. And accessibility also means accessible to search engines. Said engines now rank you page according to the content of the headings, but only if they can tell what the headings are. <br />
<br />
See <!-- m --><a class="postlink" href="http://www.w3.org/TR/WCAG10/full-checklist.html">http://www.w3.org/TR/WCAG10/full-checklist.html</a><!-- m --> for the official accessibility checklist and make sure your page makes sense in Lynx, <!-- m --><a class="postlink" href="http://www.delorie.com/web/lynxview.html">http://www.delorie.com/web/lynxview.html</a><!-- m --><br />
<br />
That said, once we have a universally accessible page, we want it to stand out to sighted users. More than 95% of browsers currently in use will understand CSS2 and 97% or so will understand CSS1. Considering what it takes to get web authors to worry about the 13% of users that do not currently use JavaScript, I wouldn't worry about that 3 or 5% who do not use CSS, as it were. Those people will still understand your page if you have marked up your page properly. There is a problem, however with the 2% of users who use version 4 browsers. Those browsers do fine with CSS1, but they get wrong CSS2. There are ways around the problem but keep in mind that those people can upgrade their browsers to ones that get the CSS right. The blind cannot upgrade to graphical browsers. <br />
<br />
But if you absolutely want your page to be its best for all users, not just accessible to all browsers, then there is another option. As always you must start with an accessible page, written in HTML 4.01 Strict. Then you add presentation using HTML. This is what the HTML 4.01 Transitional DTD is all about. Just be certain to never use tables for just layout. As tables have real meaning, non-visual browsers are developing ways to let users understand the relationship between the cells. And some of them currently decide what cells are headings and then call out the appropriate heading with each cell.<br />
<br />
See <!-- m --><a class="postlink" href="http://www.thecounter.com/stats/2003/May/browser.php">http://www.thecounter.com/stats/2003/May/browser.php</a><!-- m --> and <!-- m --><a class="postlink" href="http://www.thecounter.com/stats/2003/May/javas.php">http://www.thecounter.com/stats/2003/May/javas.php</a><!-- m --> for the numbers.<!--content-->Thanks for your advise...appreciate it.<!--content-->