[skalie]

I'm starting a new project, I need to make sure that the end result will be accessible for those with disablilities, as one might have guessed from the thread title.

Tools shall be php, mysql, css and xml, possibly rss.

I was planning to use XSLT, but that would alienate those with a useless old browser, so I'm looking into using the DOM functions from PHP to generate/read/translate the xml.

Then there's the question if I can use CSS totally for the structure without having the cross browser problems.

In short, the site has to be usuable by a half-blind person on dial-up with an ancient browser. I guess I'll be wanting to have an "only text" version available.

Anyhowz, it's all at research stage at the moment, hence this thread.

Have I missed any keywords along the line? Technologies that I have overlooked, or usefull resources residing on the web somewhere ( http://www.w3.org/ etc. )?

TIA for any suggestions.

[registered_user]

I don't know if I can cover all of it in a post, but I'll run down some of the stuff, I'm sure it's not a complete list.

• Use xhtml and css. There's no need for alternate versions, though you can provide different style sheets for different media.
  
• Use onkeypress everytime you use onclick (to do the same thing).
  
• Do not use blank href="" or href="#" use proper urls and return false in the javascript if you use it
  
• Mark up your page effectively and intelligently. eg: Use <h*> to mark up the headlines, and <p> to mark up paragraphs, and lists to mark lists (like I did in this post). Do not use tags that aren't logical just because they look right. (like blockquote for indenting stuff that isn't a blockquote)
  
• Avoid tables for presentation if you can, use minimal ones if you must use them at all. Nesting tables isn't the best idea. If you do use tables, summarize them and make use of the head <th> tags if at all possible.
  
• If you have a navigation at the beginning of the markup, provide a link before the nav to an anchor tag after the nav that's labeled "skip navigation" or something. (hide it with css so it's not visible to regular browsers.) This is so someone with a screen reader doesn't have to listen to the nav with each load.
  
• Use an alt attribute for every image that isn't just a decorative or branding element, for others use alt="" using css for background images is a great way around bloating your markup with images that don't contribute anything to the content (from a screen-reader's point of view)
  
• Use a title attribute for each link.
  
• If you really want to cram for it, read Zeldman's book. It is written to specifically address these issues. That is, if time permits.

That's a start, I'm sure I've overlooked some things. The best advice, I think, it to ensure the markup (unstyled) is logical and easy to comprehend. That's probably the biggest hurtle for most people). Then validate your code, and it couldn't hurt to pass it through a validator like Bobby who will ask vague questions that'll lead you to better accessibility.

[Simon Mundy]

I'm a big fan of removing all the 'onload', 'onclick' and other hard-coded attributes and using JavaScript to assign events to elements - it cleans up your code and reduces the risk of less-compatible versions of Javascript falling over at runtime. I think it keeps Bobby happy, too!

That's a sensational checklist to start with!

[skalie]

Originally posted by Simon Mundy:
That's a sensational checklist to start with!

Seconded.

Thanks.

[Millennium]

Originally posted by skalie:
I was planning to use XSLT, but that would alienate those with a useless old browser, so I'm looking into using the DOM functions from PHP to generate/read/translate the xml.

Only client-side XSLT alienates those with older browsers. You can use PHP's XSLT functions to do the translation server-side; everyone's browser will work in that case. You may want to look into this method if you've already got XSLT code working.

Then there's the question if I can use CSS totally for the structure without having the cross browser problems.

Using CSS for the layout, you mean? Or using HTML for the structure?

That depends. NS3 and below, as well as IE2 and below, won't look great, but if you've structured the site right then it should still make sense. The CSS won't break anything, because it won't load at all. It's really NS4 and IE3-4 that you have to worry about.

In short, the site has to be usuable by a half-blind person on dial-up with an ancient browser. I guess I'll be wanting to have an "only text" version available.

Not necessarily. The user may browse with images turned off (a fair number of dial-up users do exactly this), and as long as your site still makes sense in that mode then you'll be OK.

[skalie]

Originally posted by Millennium:
Using CSS for the layout, you mean? Or using HTML for the structure?

CSS for layout with the intention to avoid using html tables whatsoever.

[Millennium]

Originally posted by skalie:
CSS for layout with the intention to avoid using html tables whatsoever.

Be careful about completely avoiding tables; they do have their place: namely, displaying actual tabular data, such as calendars. Tables have accessibility features geared towards displaying data of this type, and if you're actually using them for this purpose then these features will benefit you greatly.

The misuse of tables has been well-documented. At the same time, don't be so quick to eschew them completely, or you'll risk destroying semantics in the name of semantics.

[Synotic]

Originally posted by Millennium:
Only client-side XSLT alienates those with older browsers. You can use PHP's XSLT functions to do the translation server-side; everyone's browser will work in that case. You may want to look into this method if you've already got XSLT code working.

Hmm, thanks for that, I'll have to look into it, it seems like a very cool technology.

Using CSS for the layout, you mean? Or using HTML for the structure?

That depends. NS3 and below, as well as IE2 and below, won't look great, but if you've structured the site right then it should still make sense. The CSS won't break anything, because it won't load at all. It's really NS4 and IE3-4 that you have to worry about.

I don't remember the exact code, but I believe if you include your stylesheets like this:

Code:
<style type="text/css">@import "style.css";</style>

then Netscape 4 and below won't interpret the CSS, and it'll fall back on the unstyled version. I'm not sure about <IE5, but it may be something you want to look into, skalie.

Not necessarily. The user may browse with images turned off (a fair number of dial-up users do exactly this), and as long as your site still makes sense in that mode then you'll be OK.

Also keep in mind that if anyone has images off and CSS on, then the background image method may not work too well. They won't get the visual images or the alternative text.

To the comment about using different stylesheet for different media... don't get your hopes up to high about that one. I think the only well supported medias are "screen" and "print".

registered_user's list pretty much covered it, but just some more stuff:

Try and make your design as flexible as possible. Avoid using absolute positioning as much as possible. You want to make sure that your design can be resizes horizontally or vertically, support any amount of content, and you want the user to be able to resize the text up and down. Generally, absolute positioning doesn't facilitate those goals. Also, try limit your use of "image text" as possible, in favor of plain text. CSS's basic typographic control can allow for some nice design. Also look into use 'em's for padding, widths, and other places. This allows everything to grow proportionately with the text size.

Use generous line-height and nice big default font-size, like 14 pixels. The extra line-height makes things easier to read, regard of any vision problems. It also makes the 14px (or anywhere around there) font-size seem not so big. This is one place where you should definitely use 'em's, as the line-height should expand proportionately with the font-size.

Expanding on registered_user's alt explanation... A good thing to keep in mind when writing ALTs and TITLEs is that 'alt' is an alternative means of representing the image (alt's are solely for images). Such as image based navigation (although that would be bad ) or any other image text on the site. A 'title' is for describing the element. A title can be attributed to any HTML element. An example of using it on a link:

Code:
Download it <a href="Transmit.dmg" title="Transmit 2.1 Download">here</a>

Depending on how well you code HTML and CSS now, you'll find that HTML is a lot simpler than it ever was, once you mark everything up appropriately.

Code:
<h3>This is my subheader</h3>
<p>This is my paragraph</p>

If possible, try and create the HTML and markup your content before even thinking about the layout. And then try and apply the CSS to your layout. I've found that if I do this, that my content makes a lot more sense, with appropriate headers, subheaders, paragraphs etc... This is a good site that provides an overview of all the different HTML elements. If you want to mark something up, see if an element exists on that page that properly marks up your content. Perhaps you may not be familiar with 'cite' or 'kbd'. How it displays doesn't matter&mdash; you can control that with CSS. The important thing is that now it makes sense semantically. Keep in mind the difference between block and inline elements. DIV being a block element and SPAN being an inline element should give you some idea on how they can be styled differently and how they react within a webpage.

Try and keep any unnecessary DIVs and SPANs out of your code. Also try to avoid excessive 'class's and 'id's. Keeping that in mind, use 'id's and 'class's appropriately... 'id's are for items that are only on the page once, while 'class's are for any item that appears multiple times, or may appear multiple times.

Every now and then, it's a good idea to check your site with the stylesheet turned off... see if it's still readable. Another good idea is to view your site with this. It shows you how your site will look with Lynx, which is somewhat indicative of how well your site will read in a screenreader, but people would argue otherwise

Also, if you do decide to do the background-image method, use the latest image replacement technique. I believe the text-indent method is most popular now:

Code:
<a href="About/" style="background: url(nav/about.gif); text-indent: -9999px">About</a>

That pushes the "About" out of view. If CSS is turned off, then the text appears, and the image disappears. It was found a while ago that the "display: none" of a 'span' inside an 'a' wouldn't be read by screenreaders. They will read the text in this method, however.

Oh, and like registered_user said, validate your code through both an HTML validator, and a CSS validator. Also run it through an accessibility validator. Some people don't like Bobby because it will claim too many problems. From what I gather, Cynthia Says is pretty well liked. Make sure you check for Accessibility Guidelines, 1, 2 and 3. Section 508 is just the bare minimum.

Good luck

P.S. I sub-consciously write things like "font-size" instead of "font-size now"

[registered_user]

Oh yeah... Synotic's response reminded me of one other thing.

If you specify your font-size with pixels, Win IE users will not be able to resize it. Use relative measures like percentages or ems to specify font-size. Default font-size is 16px (less for monospace but anyway).

And when you do that keep in mind that relative measurements are inherited so if you do something like this:

<p style="font-size:50%">This is a paragraph of stuff that will have 8px sized type because 8px is 50% of the default 16px<span style="font-size:50%">this span will have a font size of 4px because it is half of its parent's font size</span>This is now back to 8px</p>

Styles should, however, be external or in the head, not inline as above, that's just for demonstrative purposes.

[skalie]

Wow, to think if I hadn't purchased an iBook I wouldn't have known this forum even existed. Money well spent.

Thank you everyone for taking the time to post your input, I will be proudly showing this thread to my boss (in charge of the programming) tomorrow, and will be using this thread time and time again for reference.

I will also post the url to the site when it reaches testing stage.

*pre-emptive cringe*

[Synotic]

Originally posted by registered_user:
Oh yeah... Synotic's response reminded me of one other thing.

If you specify your font-size with pixels, Win IE users will not be able to resize it. Use relative measures like percentages or ems to specify font-size. Default font-size is 16px (less for monospace but anyway).

And when you do that keep in mind that relative measurements are inherited so if you do something like this:

<p style="font-size:50%">This is a paragraph of stuff that will have 8px sized type because 8px is 50% of the default 16px<span style="font-size:50%">this span will have a font size of 4px because it is half of its parent's font size</span>This is now back to 8px</p>

Styles should, however, be external or in the head, not inline as above, that's just for demonstrative purposes.

Another thing to keep in mind is that if you use anything other than pixels, the font sizes will be wildly different across browsers and platforms If you want to make sure that the default size isn't too small for people with vision problems, you have to make sure the font-size is much bigger than you want initially, to account for the browsers that may make ems, percents or keywords smaller. Pixels offer the best, predictable, font-size. Of course you suffer from the resizing problem. If a good initial font-size is important to you, then you can implement a JavaScript font-size changer, with a fallback to PHP that reloads the page with whatever font-size... for those that don't have JavaScript enabled.

[registered_user]

Originally posted by Synotic:
Another thing to keep in mind is that if you use anything other than pixels, the font sizes will be wildly different across browsers and platforms

Not so much anymore. Browsers have standardized the default font size so that's really an old issue.

http://roo.clubhouse54.com/fontsizetest/

Check that page on different browsers. If you don't have WinIE available, I can take a snap with VPC.