“Accessible” in this context refers to ease of use by disabled people. I’ve been looking over the guidelines at w3.org. I also want to know if there are any free or cheap authoring tools that can create accessible webpages. I found a free tool called Nvu, but I haven’t started using it yet. I wouldn’t be creating anything very complicated, just a few pages with information and a few pictures at first. A message board may be added at some point.
I’m not sure what your question is exactly, but just about any tool can be used to create accessible websites. Even Notepad. I use Dreamweaver for the websites I design, with a big focus on accessibility. In fact, I designed the website for a local camp which caters to disabled children, and I built the website to be as accessible as the camp is. http://campbigsky.org/ if you’re interested.
It seems like you’re doing a bunch of reading up on the process already. It takes practice to be able to make a site look good and follow all the rules… I don’t even follow ALL the rules myself, like giving all my links titles and descriptions, but those changes are coming.
Give your images ALT descriptions and make sure images aren’t necessary to the website. Don’t use table based layouts. Make sure headings are properly labeled with the <h> tags. Paragraphs should be opened and closed every single time. List items need to be properly tagged. All styling should be left to the CSS and should not be contained in your HTML.
If you have any specific questions, feel free to ask them here or shoot me an email.
Oh, and get the Web Developer Toolbar for FireFox. Use it to disable images and CSS and make sure your website is still usable because a lot of seeing impaired people will be looking at your site without images or styling applied.
My copy of Visual Studio - not the free express edition - has an accessibility checker tool. I would bet that the free one has it too. It’s under the Tools menu.
I’m still working on this thing. That Firefox toolbar is awesome, I’m using that a lot. Turns out the Web Developer Express doesn’t have the accessibility checker, but I’m still using it as a syntax checker rather than coding completely by hand. I’ll post a link when I’m done and you guys can see what you think.
I wouldn’t pay much attention to any kind of automated checker anyway… you’re better off learning the rules and sorting through your code by hand to make sure its all appropriate.
Like I said, if you’ve got any specific questions just let me know. There’s a couple other CSS/accessibility web guys around the SDMB, so you’ll get some good feedback.
What wasson said. 
Nvu isn’t bad – although it has the annoying habit of reformatting the html (indentation, linebreaks, etc), which drives me a little loopy. No effect on the result, but if you hand-code a lot it can get frustrating.
When I’m hand-coding under Windows I just use the Notepad2 (freeware) editor. It is easy and pleasant to use and has some useful syntax highlighting.
One further addition to Firefox that I’d heartily recommend is Firebug which gives you tools for inspecting your page elements, and making CSS changes on the fly – to see what effect they would have on look / feel / layout.
Another accessibility tool you might want to try out is a colour-blind web page filter (such as this one), which will give you an idea of what your page’s colour scheme will look like to people with different types of colour impairment.
I installed this recently and it’s bloody awesome. Incredibly useful (to me) for trying to make sense of someone else’s templates - because you can just turn on the option to view the style information of anything you mouse over - you can instantly see which parts of the style sheet you need to change. It really isn’t easy doing that longhand, if you didn’t write the code yourself from scratch.
For authoring actual websites, I’m going to heartily recommend fuzzylime CMS - it’s a Content Management System that you install on your web server and from there on, you create content by logging in through your browser and entering it through the interface.
Unlike many other CMS offerings, it runs entirely in PHP with no additionaly requirements for a back-end database, and unlike the few other all-PHP CMS programs, it creates a cache of the content, so it doesn’t suffer poor performance as the site grows, or if there is a sudden inrush of visitors.
It’s really, really easy to set up too.
OK, here it is: http://ostillaw.com/index.htm
Firebug is definitely awesome. Fuzzylime seems cool, but I haven’t used it yet as I was more concerned with layout than adding content. It should be useful if my wife wants to add stuff without having to get me to do it though. I still need to tweak a few things, like getting the footer to stay down. I found a really good set of CSS templates here - I used the one in the link for the site. That guy has a footer template that does what I want, but I have to figure out how to combine it with the 2-column template.
Looks like you nailed it! I have only 1 “accessible” suggestion and 1 suggestion you can totally ignore.
There’s a forgotten HTML tag out there which is still very handy. <address>. You can wrap the physical address of the law firm in those tags, which can also be styled via CSS, and that will help things like Google Maps when it automatically displays a map of where a business is and such. It will also help your accessibility, so there’s no ambiguity about what the address is.
And for a totally different suggestion, steer clear of descriptive class names in your CSS. For example “leftnav”. I understand that’s the navigation on the left hand side, but the beauty of CSS is that you can shift the menu anywhere you want it. So, in a future redesign, the menu may be lined up at the top but still called “leftnav”. It’s the same sort of concept as naming a class “bluelink”, then defining it with the color red. It’s not a huge deal, but just slightly bad form as your website grows and changes.
Thanks for the tips everyone. I’ll probably make those changes wasson suggested while I’m polishing up a few things.
I pulled up this site and pressed [control-plus] a few times to make the text larger, because it’s the first thing someone with weak eyesight does. The site broke instantly because the height and width are locked on the boxes, so the “more” and “read more” links disappeared. The drop-down menus also stopped working.
On my large, high-resolution monitor, the site doesn’t expand to fill the window when I maximize Netscape–it leaves half the width of the screen empty.
There’s no alt text on any of the images.
That’s just what I found in a minute of looking. It’s definitely not an accessible site.
That one is my fault… those boxes are altered dynamically from the backend, and it looks like it didn’t cut the query off with enough room to spare. I probably need to rethink the way the “read more” links are pulled up. Thanks for bringing this to my attention.
I can’t replicate this in IE6, IE7, FireFox 1.5 or 2.0, or Safari. What browser are you using?
It is a fixed-width website, so this is not an error and has nothing to do with accessibility. I should probably convert from pixels to ems for heights and widths, however, to avoid this problem with text increases/reductions. Once again, thanks for helping with the error checking (I’m sure you understand that no one else on the committee is fantastic about the technical details of websites…).
I’m not sure what website you’re looking at, but there are alt tags on ALL images (with the exception, again, of the ones the committee loads and neglects to add, but the main layout images all have alt text). As I mentioned before, there are no title attributes, which is on my list of things to add, although I haven’t read any compelling reason to use titles instead of, or in addition to, alt attributes.
You’re right that it isn’t as accessible as it could be. I will update it based on your recommendations in the next couple of days.
I was using Windows XP with FireFox 2.0 at work. When the text got large, the drop-downs would drop down, but I couldn’t reach any of the menu entries without making them go away. I tried to replicate this here using my Mac with Safari and it behaved erratically with large text. Sometimes the drop-down would disappear when I moved the mouse down and sometimes it would work fine.
I know this one is subjective, but here’s my reasoning: When someone with a visual impairment is viewing the site, he will enlarge the text. If the site is fixed-width, then the columns won’t widen with the text and the viewer won’t get full use of the large monitor.
Fixed-width sites are a pet peeve of mine. Every other application I use (Word, Excel, Powerpoint, Photoshop, InDesign…) allows me to utilize the full width of my screen if I choose to. Most well-designed Web sites do also. Other sites restrict the width. Why? People viewing the Web site may have monitors with a wide variety of sizes and resolutions. The Web was designed to expand and contract with the window. I just don’t understand why you’d lock the width down.
This is odd. I just took a look at your source for the main page, and it clearly shows alt text. But that alt text doesn’t show up when I hover over the logo or the “photo gallery” image on Windows/Firefox 2.0 or OSX/Safari.
I’m impressed. You’re very responsive to feedback. Thank you.
I do understand the argument, and we’re discussing the same thing in another thread titled “double-wide websites” or something like that. It’s a pet peeve of mine to not define clear boundaries to your website (like what the SDMB does), stretching out paragraphs and spacing images strangely as the window grows. It’s personal preference, and it’s unfortunately not always possible to build sites with both options available.
Using “ems” instead of pixels is a good compromise for accessibility, so that the entire site grows as the font size does. The only reason I didn’t implement this at launch is because… well… I didn’t think of it until I was already in over my head with pixel measurements and I didn’t think anyone would notice anyway, until I had time to switch it over. I guess I should have known someone from SDMB would call me out!
It shouldn’t. I know IE displays alt text when you hover over images, but this is an unsupported “feature” which is actually closer to a bug. The pop-up tool tip should actually be in the ‘title’ and not the alt. Using the ‘alt’ attribute to display that tool-tip is considered bad form.
Titles can also be applied to links.
In the web design business, one needs to develop a thick skin. I spend a lot of my time on thankless tasks working totally solo, just teaching myself the latest in web trends and trying my best to implement them. I’m always thankful when someone shows me something I didn’t know or the error of my ways. It’s a learning experience, and one would have to be totally ignorant to ignore helpful feedback.
Alt text doesn’t show up on mouse-over in Firefox - you have to use titles. (I guess the same applies to Safari) sigh
Do you use a text reader ever? Do you know if title tags are read by text readers?
It’s nice to hear opinions on a site from a person who relies on accessibility features. Thanks for posting!
I don’t believe they are. The “alt” feature means “alternative” which is the text you read if the image doesn’t show up, or if you use a text reader. That’s what it’s for and it is not supposed to be the tooltip.
“Title” is supposed to be the tooltip, that is its intended purpose. I hope it doesn’t get read by a text reader, though it may be a setting in one.
When I worked in ISP tech support, one of our regular clients was a young blind man, and his text reader seemed to only read the text and the alt, and recognise the em and strong tags as emphasis (as opposed to italic and bold).
A few suggestions:
Go get the Colour Contrast Analyser Firefox Extension. The site owner is guru in the web accessibility community. When you run a test on your page, you will find quite a few color contrast accessibility failures on your page.
Go get the Mozilla/Firefox Accessibility Extension from the Illinois Center for Information Technology Accessibility. It’s a great toolbar for testing several accessibility issues.
Go get the HTML Validator toolbar. It’s great for quickly find non-compliant code that hides accessibility issues. I used it to quickly find problem listed below.
Go get aDesigner from IBM (you have to register to obtain it). It a large 60 MB plus download standalone application that is superb. It tests for the US Government’s Section 508 requirements and all three priority ratings under W3Cs WCAG 1.0 accessibility standard. It’s probably the best all-around freeware accessibility tool out there.
A similar tool, but exceedingly detailed tool, and a royal PITA to appreciate its true worth is TAW. The online version is ok, but the download standalone is really something. The installation program is in Spanish but the app is in English. You need to spend quite a bit of time to really understand how it works. Its configurations are intricate but you can nail down specific WCAG 1.0 issues with it.
A couple of coding points:
- Dump this from your code:
<?xml version="1.0" encoding="utf-8" ?>
You don’t need it, and using it can throw IE in quirks mode. Also, if if really want to use it, you cannot have anything above it in the code; no open lines, no spaces, nada. Otherwise it causes IE to go funky.
- Fix this:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
so it says:
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
You can’t have the microsoft crapt if you want accessibility under W3C/WCAG 1.0 or even Section 508.
A few? Ha! I’m sure it’s good advice and all, it’s just that this is turning out to be much more work than I expected.
Don’t think of accessibility as work. It’s just the right thing to do.
Excellent addon, thanks Duckster. Though I just ran it again the brand new pure web 2.0 / GUI-like application that the project team I’m working with are building… I think I’ll crawl away and cry now.