Working with Mint I was missing an option to collapse the different panes when I don’t want to read them.

Some hacking later, I wrote a script that automatically allows you to collapse and expand a table by activating its footer. As a visual indicator, the script adds an image to the footer (this also allows keyboard access).

It is a work in progress and I need your help to fix it for Opera and get rid of a weird Firefox issue.

See the collapsible tables demo

I thought I had done well and created an easy to use, dynamic gallery with DOM and CSS. What it does is show pictures when you click them in the page instead of doing a reload. It also shows a “loading image” message. All feedback I got was positive and I was happy to have provided something slick and useful. Alas, I found out that it is not all like that. (more…)

We have faced quite a dilemma today and had a 4 hour meeting about possibilities how to solve it. The client has a huge sitemap, and they are bound by law to offer all of the services listed in it on their site as links.

Now, up to two levels, a navigation on the left hand side is bearable, but when it comes to three levels with up to 30 links each, even the highest resolution will have the current link below the proverbial fold.

We tackled a lot of that by using something I christened “Contextual navigation order (CNO)”, meaning the current section will always be the first in the navigation, which is good for visual users and screen readers, as neither need to go past the other links to reach where they want to go. An example of CNO is on the easynav demo page and on the North Yorkshire Council web site. North Yorks solved the third level by moving it to the right of the screen, but in this case that space is reserved for marketing.

As cutting down on links is not an option – although it would be more usable – we needed a solution that shows the third level. As the client was not sure if their development team can put parts of the navigation somewhere else on the screen – the easiest option in the CMS (Tridion) is to loop through all folders once and generate one navigation – we wondered if there is a CSS/JS solution which still remains accessible.

A first draft of my attempts can be found here:

• Different examples of third level navigation via CSS and DOM

Maybe you will have to face the same problem, or you have another option?

Personally, I don’t see much sense in displaying that many links at once, and as a visitor I’d use the A to Z or the search instead.

As some might know, I am currently writing a chapter for “Constructing Accessible Web Sites” by Apress / Friends of Ed.

As an example, I am writing a script to allow for “accessible” pop-up windows. I had an idea I hadn’t seen yet before and wondered if I should pursue with it.

Here’s the deal:

• We cannot assume that the user agent allows for popup windows
• When we only use HTML and the target attribute, we can open a window, but cannot “style” it or close it with a button
• When we have JavaScript enabled and we have a window.opener, we can assume that the window was opened and we can add window.close() links.

Therefore I considered using link relationships in conjunction with a script to make the whole process failsafe:

popup

would be changed by the script to a link opening the new window and get a message attached that it does so.

back

would get a close.window() attached and the text changed to “close window”.

Any comments why that is a bad idea and what would be a better one?
Yes, I will point out that popups should be avoided.

Eric Meyer’s S5 standards based presentation slides system is used quite a lot by webstandardismos for their presentations.

However, some of its functionality is great for presenters but can be quite hard to follow for web surfers who just want to see what someone has presented.

My personal challenge was to come up with something that is as cool as Eric’s system, but much easier to use and more lightweight when it comes to creating your own slides.

The outcome is called DOMSlides and is licensed under Creative Commons for you to use, change and copy.

Any feedback, testing on Macs and own style sheets to bundle with the script are welcome.