Web Accessibility at Refresh Baltimore

Mike Brenner and Reinhard Stebner

Reinhard Stebner provided an engaging talk on Web Accessibility this evening at MICA. This post contains a few of my favorite highlights. I’d like to note here that Bill Mill is a good sport.

I’ve read and thought a lot about Web Accessibility. I’ve used JAWS to test sites and worked to make Flash more accessible in client projects. Yet, it’s so valuable to watch a skilled, unsighted user like Mr. Stebner navigate a system. Just as no two people will use Microsoft Excel the exact same way, there are many ways to use JAWS and Windows Eyes. And just as each Web browser handles CSS slightly differently, accessibility software varies from product to product.

Jaws will ignore display:none; in css and Windows Eyes will not. Instead, Mr. Stebner suggests using positioning to handle things we don’t want to be visible (top:0; left:-9999;) and then dealing with the hidden items contextually with labels.

He emphasized usability vs. accessibly and demonstrated how sites can be technically accessible and yet hardly usable. Having a highly usable site is a win for everyone. That’s common sense and therefore not always achieved. Headings should be used appropriately, as many people will navigate a page through its headings. They should be meaningful and used correctly. Specifying a tab-index is a bad idea, as it makes the arrow-key functionality not work and many people use arrow keys to navigate content. Documents shall be organized so they are readable without requiring an associated style sheet.

The item that gave me the most to think about is the idea of using lists to organize links. In HTML, a list is a collection of things. Putting a navigation structure, which is just a collection of hyperlinks, in a list is supposed to allow screen readers to pause between each link instead of reading all the links as a sentence. Semantically, this makes sense. We use HTML to apply meaningful mark-up to content – making things lists seems like a good idea. Yet, there’s no easy way to identify a list as a set of links, so a page with 12 sets of links can be very confusing. He demonstrated this with Jaws.

We touched on ARIA as a way to help deal with some of this, and instead of using lists for links, he would like to see more <div> and <spans> used.

I’m really glad I had a chance to see some examples of what works well and doesn’t with JAWS. And, I didn’t know about a JAWS feature called Virtual View, which allows the visitor to access extra information about the DOM, like class and id names. This supports the notion that class and id names should be as semantic as HTML itself.

It was a great talk. Please note that Mr. Stebner also provides accessibility consultations, should anyone want to hire him for his services.

Fourth Annual e-Learning Summit

I just got back from presenting at the Baltimore County Fourth Annual e-Learning Summit. I heard most of Susan Patrick’s keynote address, and was amazed to learn just how far Mexico and China are in developing e-Learning content and platforms.

I co-presented a talk with Heather Katz on creating accessible content for e-learning. Heather did a wonderful job of explaining the current state of Flash accessibility and best practices. This is the third talk I’ve given this year on accessibility, and I’ve created a new area on my site for the subject.

Talking about Melons
Here’s me, demonstrating how to talk with your hands. About fruit.

Nice watertower

Thank you to all the great people I met today.

Web Accessibility Conference, 2008

At long last, the day is here. After almost a full year of planning, the Johns Hopkins Web Accessibility Conference will take place today.

web blocks

I’m delighted to say that I’m giving a talk on the basics of CSS and you can download my materials here. My presentation slides, the examples and sample site are available in a zip file. I’ve been teaching the in-and-outs of CSS for two years, sometimes in a semester long format, sometimes in a single day. This is my first shot at an hour and fifteen minute long overview.

[Update: I’m writing from the conference. There are about 140 attendees. That’s more than the sum of all co-workers at every small company I’ve ever worked for. My talk went well!]

If you came to the conference, thank you! I hope it was helpful!

I’ve donated my own time to create this presentation and these materials – I didn’t get paid to do this. I think accessibility is important, and I think that if we all strive to make web sites using the standards provided by the W3 – as flawed as the process is – we will  shape that path we all are on – developers and designers, web users and browser makers.

Accessible Rich Text

I have been looking for a rich text editor that I could drop onto a PHP form and that would not break my XHTML strict mark-up. I downloaded a handful of them, and tried various combinations within custom content management widgets that I’ve put together.

What I noticed is that a lot of them still use the <FONT> tag with various formatting attributes. Or worse – they weren’t free. This became something of a pet project.

I found two worth mentioning:

I like this one, and it made a good start with it. It’s based on the Mozilla Rich Text editing API included with Mozilla 1.3+. I spent some time figuring out how to get a MSSQL recordset into the form field via all the document.write gak, and then had to attend to other things. Some time went by before I could pick this up again.

I then discovered the FCKeditor, and was able to implement it within 20 minutes. I chose a simple format, meaning that I didn’t want to give my CMS users a lot of extraneousness options:

FCK Options

The extra option are mostly *not* accessible, but that’s ok. I don’t need them. The site CSS handles the styling – I want my user to be able to quickly input text and have it show up correctly when published. POW!

I did spend a little time looking how to format text myself, thinking it would be easy to use custom CSS classes, since that’s something I usually have full control over and do consistently – I could build them into the editor. I managed to get the several of the buttons done, and started on the text color picker when it was time to move on once again. I hope to return to it, and when I do, I’ll post the code up here. In the meantime, maybe give FCK a spin.