Entries tagged as en

2009-07-01 The 5 Layers of Web Accessibility

A Month ago I was very happy to be able to speak at Skills Matter as Part of the monthly YDN Tuesdays. I spoke about my ideas about Web Accessibility and introduced them as "The 5 Layers of Web Accessibility".

Thanks to Skills Matter you can now watch the recording of this talk here. You can also find the according Slides underneath:

You can also read the great writeup by Marc Hibbins who very nicely sums up the contents of my talk.

2009-04-16 Accessible Javascript with and without WAI ARIA at GeekUp Leeds

Yesterday I had the great pleasure to have been invited to speak at a GeekUp special in Leeds.

I must say that these lovely Northeners turned out to be the best audience a speaker can dream of. I was presented with an endless stream of really good and very interesting questions. It's a shame there was no recording because the amazing audience really made this evening and my slides can in no way show the great discussions and fun we had. 

2009-03-09 Think Visibility - SEO and more

Last weekend I had the great pleasure to have been invited to a very interesting new conference.

Dom "The Hodge" Hodgson kicked off the first, of hopefully a lot more conferences called, Think Visibility.

The one day conference featured a very wide selection of talks across Usability, Eye Tracking, Social Media, Affiliate, Analytics and many more with a slight focus on SEO. The Talks I've listened to were packed with a lot of insight and informations you wouldn't expect the speakers to give away. I learned a lot and I'm now very tempted to try out some of the SEO Voodoo myself ;-)

Not only was the Think Visibility very interesting but also great fun! The Northerners and their guests are a lovely bunch and as great to talk to during the conferences as in the Pub before and afterwards.

Here are the Slides of my own Talk. A very basic introduction to Web Accessibility for a audience containing hardly any frontend guys which was quite new to me:

2009-02-07 jQuery Accessible Tabs - How to make tabs REALLY accessible

translations: german

While a lot of Tabs-Scripts claim to be accessible it turns out, most of them are really not. While developing this jQuery Plugin with my coworker Artur Ortega, we tried to find a single existing Javascript powered Tabs-Interface that Artur, using his Screenreader, would actually be able to use properly. We eventually gave up the search.

The one Problem even the better ones have is the missing Feedback of the content change. Most of the tabs scripts change the style of the tabs and the visibility of their corresponding content but leave the user just where he was - on the tab-link - not knowing that something happened (just like clicking on a, ever so popular, inactive link (a href="#")).

This is also the big difference this Script makes. While the user experience for users without visual impairment is exactly the same, there's a lot happening under the hood. But let's start from the beginning.

jQuery Accessible Tabs uses a very simple and flexible HTML markup as it's base to build upon. All it needs it's a wrapper containing Headlines and content elements one after the other. This provides a nice non-javascript fallback that does not look like something is missing or broken.


        <div class="tabs">
            <h2>some dummy headline</h2>
            <div class="tabbody">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

                <h3>Lorem ipsum</h3>
                <p>Nullam malesuada suscipit pede. Nullam ipsum lacus, varius</p>

            </div>
            <h2>another dummy headline</h2>
            <div class="tabbody">
                <p>Integer tincidunt. Cras dapibus. Vivamus elementum nisi.</p>

                <p>Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel.</p>

            </div>
            <h2>anything else</h2>
            <div class="tabbody">
                <p>Here could be your content</p>

            </div>
        </div>
     

A simple jQuery call then transforms this to the accessible Tabs:


        $(document).ready(function(){
                $('.tabs').accessibleTabs();
        });
     

To not only be accessible but also to be as flexible as possible the script allows configurations to be passed to.


    $('.tabs').accessibleTabs({
        // Classname to apply to the div that is wrapped around
        // the original Markup
        wrapperClass: 'content',
        // Classname to apply to the LI of the selected Tab
        currentClass: 'current',
        // Tag or valid Query Selector of the Elements to Transform the
        // Tabs-Navigation from (originals are removed)
        tabhead: 'h4',
        // Tag or valid Query Selector of the Elements to be treated as
        // the Tab Body
        tabbody: '.tabbody',
        // can be 'fadeIn', 'slideDown', 'show'
        fx:'show',
        // speed (String|Number): 'slow', 'normal', or 'fast') or the number of
        // milliseconds to run the animation
        fxspeed: 'normal',
        // text to indicate for screenreaders which tab is the current one
        currentInfoText: 'current tab: ',
        // Definition where to insert the Info Text.
        // Can be either 'prepend' or 'append'
        currentInfoPosition: 'prepend',
        // Class to apply to the span wrapping the CurrentInfoText
        currentInfoClass: 'current-info'
    });
     

So, why is this Tabs-Script more accessible than others?

The main thing this Script does better than the others is providing a click feedback for Screenreader Users. When the user clicks on one of the tabs there's actually a navigation going on on the page.

Every link in the tabs is pointing to an actually focusable content. To allow this, we create a named anchor inside of the tabs content. This anchor, as it has no href property, is not focusable by default though. To make it focusable we gave it a tabindex="0". Why 0? Because a tabindex of 0 does not change the natural tab flow of the page but it makes an element focusable which is not able to receive focus by default.


    <h4>
        <a id="accessibletabscontent" name="accessibletabscontent" class="accessibletabsanchor" tabindex="0">
            some dummy headline
        </a>
    </h4>
     

Inside of the named anchor we add the same text as the tab that was just clicked and wrapped it into a headline element. This provides a very nice user experience for screenreader users, as it nicely confirms that you actually jumped into a new content of the page.

The other thing that adds benefit for screenreader users is a little text that indicates the currently selected tab. It defaults to "current tab: " followed by the default text of the tab. For internationalisation reasons this text as well as the text position (either before or after) can easily be configured.

Problem: Focussing hidden or recently hidden Elements

During the testing of the tabs we discovered a very interesting, yet very annoying, behaviour of the Screenreader Jaws (and probably others too). We wanted to focus the headline in the content of the current tab after clicking the tab which made the content visible. Everytime we tested, the Screenreader was unable to find the element to focus on and simply jumped to the end of the page or randomly somewhere else. We discovered that this is only happening when the focus target was recently hidden. This phenomenon is caused by the screenreaders virtual buffer, an internal copy of the actual DOM in which the Screenreader user navigates. The virtual buffer does regularly update itself from the Browser DOM but there's always a delay.

To work around this issue we used a different approach. The named anchor we're linking to is not actually in the hidden tab content but before it in the DOM of all of the contents and hidden offscreen. Also actually every link in the tabs is pointing to the same anchor. We're simply dynamically rewriting the headline text on the fly and show and hide the contents accordingly. The user experience is just the same. The screenreader user clicks on the tab, follows the link and finds the linked content starting with a corresponding headline.

You can see the script in action in in many different Examples here. This plugin is also part of the The CSS Framework Yaml

You can download the latest version of this script including the demos here.

Update:

Jason Kiss wrote this excellent followup about how to make this even better

His enhancements are now also in the official repository

You can always find the latest Code in the Accessible Tabs github repository