Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Pages: 1
skip-to link
Now that TXP-dev has a ‘skip-to’ link pointing to the content pane, it should be made somewhat useful for keyboard users (at present it is only useful to screenreader users).
Issue 1: neither WebKit nor IE (at least 9 and older, not sure about 10) move the focus to the main pane when following the link (and I had some random trouble with Opera 12). Using the keyboard (tab key + enter) to follow the link moves to the anchor visually but the next tab press moves to the next link (the navigation bar) – see this post for a full description of the issue. The author also offers a javascript powered workaround. A Jquery version is here (I had started working on one, but all the work is already done…). [*]
Issue 2: due to the way the .txp-accessibility class is applied to that skip-link element, there is presently no funny way to make that particular skip link visible when focussed (one can still follow the link, but it remains invisible).
Suggestion: apply the .txp-accessibility class to the a[href] element instead of the p, and (eventually) apply an ID to the p. Then a theme can easily hide the element and make it visible on :focus (or make it always visible). Additionally, eventually the focus ring on the main pane can be killed with #txp-main { outline: none; }.
[*] The way that function is written, it targets all internal links, I think in the case of the Texpattern Admin UI, it should be limited to just the skip-link at the top of the page, so something like $("a[href='#txp-main']").click(function() {. Other internal links don’t have the same issue, save maybe the ‘back-to-top’ link in Hive (haven’t tested to make sure).
I’d personally find the ‘highlight’ function to be highly annoying , btw.
——
Fo reference, the above mentioned Jquery function:
$(document).ready(function() {
// source: http://terrillthompson.com/blog/161
// note also http://terrillthompson.com/blog/161#comment-1251
// add a click handler to all links
// that point to internal targets (href="#...")
//$("a[href^='#']").click(function() {
$("a[href^='#']").not("a[href='#']").click(function() {
// get the href attribute of the internal link
// then strip the first character off it (#)
// leaving the corresponding id attribute
$("#"+$(this).attr("href").slice(1)+"")
// set tabindex on target element
.attr('tabindex','-1')
// give that id focus (for browsers that didn't already do so)
.focus();
// optional add a highlight effect to that id
// requires jquery ui effect-core + jquery effect-highlight
// .effect("highlight", {}, 3000);
});
});Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
Offline
Re: skip-to link
Thanks Philippe. I’m actually thinking of removing the ‘Skip to main’ links because that can and should be archived using ARIA roles instead – and also once we move the navigation menus to jQuery UI then they’ll be properly keyboard navigable without having to hit the tab key countless times to skip past it (tab once to enter navigation menu area, tab again to leave, move around navigation area with arrow keys).
The screen reader I have here for testing doesn’t seem to be very good at using ARIA, but I think’s a problem with the screen reader itself.
Offline
Re: skip-to link
philwareham wrote:
Thanks Philippe. I’m actually thinking of removing the ‘Skip to main’ links because that can and should be archived using ARIA roles instead
Right, that is what Aria roles are for in principle, assuming the user is equipped with a fairly recent AT. Voiceover is fine on 10.6+ and iOS 5+, up-to-date Jaws is OK, according to my sources. Others I don’t know.
And with the proliferation of touch devices and trackpads, keyboard navigation becomes less of an issue. I really should get hold of a trackpad for my desktop Mac, it would certainly alleviate the pain in my wrist. Still there is a group of physically less-abled users who need (good) keyboard interaction.
I could always add the skip link at theme level… (I do it for TXP 4.5 for one client).
– and also once we move the navigation menus to jQuery UI then they’ll be properly keyboard navigable without having to hit the tab key countless times to skip past it (tab once to enter navigation menu area, tab again to leave, move around navigation area with arrow keys).
Oh, you’re going to use that menu system. Iirc (but my testing is not so recent), the performance on tablets and phones isn’t great. But yeah, in terms of accessibility it is way ahead of what you currently use with Remora and Hive.
The things I don’t like with that menu system are (1) the hover fly-out (onclick is OK) and (2) the truckload of inline styling. I’ll need to have a fresh look at their API, maybe that hover thing can be disabled.
The screen reader I have here for testing doesn’t seem to be very good at using ARIA, but I think’s a problem with the screen reader itself.
this ^^
PS -
should be archivedshould be ‘achieved’? Safari autocorrection crazily playing alone? :-)
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
Offline
Re: skip-to link
To be honest, personally I think jQuery UI is pretty shit and there are much better accessible menus available, but Robert and Jukka were pretty insistent that we use it because it’s well supported and documented.
I won’t be using the horrible CSS classnames and stuff that comes with jQuery UI though, I’m gradually rebuilding one of their themes in our own style and simplifying. I’ll also look at how it all works on touch – I know jQuery UI v2 is going to be much more touch friendly too (currently interation states like draggable, sortable, etc just don’t work at all in touch devices).
Last edited by philwareham (2013-01-22 14:18:21)
Offline
Re: skip-to link
You can’t really change the class names jQuery UI uses. They are pretty much what they are. You can style the widgets, but you can’t change the markup structure and class jQuery UI expects. In no case we will fork the library. Forking defeats the purpose of having it, making it close to dead weight more than anything.
philwareham wrote:
Jukka were pretty insistent
I wasn’t insistent on including jQuery UI because it’s jQuery UI or because I’m awesome-struck about it. It just happens to be the only ‘viable’ solution. The abstraction part of it. Since it’s been included in 4.6-dev, I’ve already personally started using it in my stuff. Not the widgets, but the event abstraction which previously were painful to implement.
There is no real point of building our own shiny system or JavaScript abstraction layers. Smaller shiny scripts no one uses go to same category. Everything that nobody uses them, nobody knows how to use them — end result: nobody will use them. Shiny hipster shit doesn’t benefit 3rd-party developers or us. We don’t exactly have that big audience giving compatibility feedback and bug reports.
Last edited by Gocom (2013-01-22 17:29:09)
Offline
Re: skip-to link
What I mean is, I won’t be defining CSS rules specifically for every one of those classnames. jQuery UI provides loads of classnames per widget for the sake of flexibility and granular styling, which is fine, but there’s really no need to over complicate things by using them.
Offline
Re: skip-to link
philwareham wrote:
What I mean is, I won’t be defining CSS rules specifically for every one of those classnames. jQuery UI provides loads of classnames per widget for the sake of flexibility and granular styling, which is fine, but there’s really no need to over complicate things by using them.
Simplifying things is absolutely fine, but keep in mind that the theme should support any use of jQuery UI, covering the whole specification of it. For instance jQuery plugins that depend on jQuery UI should be well supported and display correctly.
Offline
Re: skip-to link
Aye, I’ve got a long way to go, but all the widgets/interactions are thrown into my design patterns doc ready for me to style up
Offline
Re: skip-to link
philwareham wrote:
To be honest, personally I think jQuery UI is pretty shit and there are much better accessible menus available,
Out of curiosity, what is your favourite menu system at the moment?
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
Offline
Re: skip-to link
phiw13 wrote:
Out of curiosity, what is your favourite menu system at the moment?
I’ve used a variation of this on a site recently. That site also has some other valuable accessibility resources.
I’ve also built my own test based on the functionality they suggest above, but I’m not too hot at JavaScript (jQuery) myself, it’s attached as a zip here – if you want to make any improvements to that then I’d be happy to learn.
Offline
Pages: 1