WebAIM - Web Accessibility In Mind

E-mail List Archives

Yet another tab panel implementation

for

From: Dejan Kozina
Date: Sep 13, 2015 9:08PM

Hello list,

I'd like to hear your critics and advice regarding a CSS-only tab panel
widget I implemented recently.

ISSUE: the EU cookie normative (as interpreted in Italy) requires for a
website to intrusively ask for consent before placing any tracking
cookie, be it its own or by a third party (think embedded Google Maps or
Youtube videos). Also, the website itself is multilingual – so I guess
the consent form itself should be multilingual, even if this is not
explicitly required by law. The lawmakers suggest a pop-up, which sounds
odd and somewhat dirty to me - this would deny any visitor with
scripting disabled the right to make a choice. One more requirement was
that the whole thing had to be easy to implement on various existing old
websites without having to rewrite them too much;

IMPLEMENTATION: an absolutely positioned form with role=dialog and
aria-live=assertive containing a CSS-only tab panel widget where tab
represent the language choice; selecting a tab causes the form controls
and relative text in the selected language to be presented onscreen. At
screen widths below 420px the whole thing morphs into a CSS-only
accordion; there is some scripting too added at the end: this is not
required for the widget to work, but helps in switching the aria-* and
tabindex attributes to the correct values upon language choice; the
whole thing is included at the end of the document to prevent search
engines to describe every page with 'this website may contain
third-party content...';

DEMO: an example is deployed at http://almiticoeremita.com, where a
consent form appears on every page until the visitor either clicks OK or
NO or goes further to allow or deny cookies one by one on a separated
page; if you click on one of the buttons you have to delete the cookie
named 'cookieconsent' to have the form reappear;

RESULTS:
- using a mouse the thing works as expected (without scripting where
configurable) in Chrome, Firefox, Opera, IE from 7 to 11, Edge, Safari
for Windows (5.1.7), Fennec, Yandex Alpha and the Opera Mobile
simulator; seems OK on touch screens too, but my choice of testing
devices is very limited (one Sony Xperia with a 4x5.5 cm screen – I can
barely see if the text changes; anyway the default browser and Opera
Mobile do work, Opera Mini and Dolphin do not); definitely fails in IE6;
- keyboard navigation with javascript enabled behaves as expected in
Chrome, Firefox and Opera; all version of IE seem to make a large detour
before landing on the form;
- keyboard navigation with javascript disabled is definitely subpar;
- seems OK to me in NVDA, but I'm a beginner with screen readers; I'm
not sure NVDA does actually react on language changes as it should;
- the whole site is usable in Linx too, for what it's worth.

That's it. Suggestions and critics welcome, and thanks in advance to
anybody who cares to take a look.
--
-----------------
Dejan Kozina
Dolina 346 (TS) - I-34018 Italy
tel.: +39 040 228 436 - cell.: +39 348 7355 225
e-mail: <EMAIL REMOVED>