How to Accessibly Rotate Contents with jQuery

Several of us here on the forums, actually. And everyone who needs to use for example Dragon Naturally Speaking, or people like Chris, an Apple-certified Final Cut Pro video editor using switch controls and the like. You may not know people using switch controls (I used to not know any), but I can assure you they exist, and they be internettin’ with the rest of us, cleverly hidden behind standard browsers. “On the internet, nobody knows you’re a dog.”

Keyboard means more than keyboard. Keyboard is generally the replacement for many other computer access methods, meaning when something isn’t keyboard-accessible, it’s often not accessible with other softwares either. And a lot of those users of other softwares can and do see, but this can go along with the “accessibility means blind people/screen readers/ARIA” fallacy which I myself have fallen into. The accessibility community has started to even worry a bit about that. The largest group of whatever we want to call “disabled” tends to be more motor and cognitive than blind or low-vision, and people who are losing their vision or just have very very bad vision tend to still use their vision as much as possible (noses pressed against the monitor with the computer resolution down to 600x800 and using high contrast settings, even if a screen reader or magnification software would be so much easier to use).

I’ll give you visually impaired/dyslexic with something like ZoomText too: you can turn on the Reader function, to also hear where you’re either mousing over or where you’re tabbing, depending on which method works best for you. It’s generally a Good Thing when what you see on the screen matches what you hear and where you are. Hearing stuff you can’t see freaks out plenty of people, because users have expectations and that’s one of them.

Lastly I’ll throw out blind colleagues who often need to be able to work with their sighted colleagues and figuratively, but I guess also literally, have to be on the same page : ) Ha ha, look, I pun. You laugh.

…no potato, okay, moving on.

It is, but usually for other reasons (though the article addresses one, focus going back to the top each time something deep in the page is activated… arg!): autofocus on inputs, lack of focus rings/styles, getting stuck in jQuery autocompletes and AddThis/ShareThis craptastic icons-links are actually way, way worse. Tabbing through an otherwise well-built site is totally doable, especially if you must (I am not limited to keyboard, but it’s usually the first thing I start with on sites). You should see what switch users do: they get a little control panel where the focus moves one thing or maybe chunk or row at a time, and you select the one you want with your switch when the focus gets there. Would be damn tedious to me as well, but if I did it every day, well. Would rather be internettin’ or mailin grandma or whatever. If you need keyboard, what’s your other option?

I agree screen readers make things nice, which is why I’m still hanging a deathgrip on my old Opera12… you can move focus by headings, and form-control focus is separate from link focus. Pretty kewl. Wish this existed today as more than yet-another-slow-your-browser-down Firefox plugin.

Just because carousels are crappy doesn’t mean anyone gets automatic exemption from Good-Devs-Try-To-Follow-WCAG (SC 2.2.2): pausing stuff that moves is a sort of requirement anyway-- no code examples should leave it out, because we all know developers copy code examples. Good or bad, it’s how it is.

(This caused a bit of a kerfluffle recently when a Google team released a polymer Gmail demo complete with pretty box shadows and stuff. Many in the community pointed out that, especially with the name Google behind it, this demo will become the basis of many other developers’ Polymer code, despite not working with keyboard.)

I didn’t read the article as anything other than trying to be helpful to devs. But here in the comments, I rather dislike the “you usually eat poop so eating dogfood is better right?” vibe I’m feeling (maybe it’s just me, I don’t want to put words in anyone’s mouth, especially not the word ‘poop’). Yeah, it’s better, but we want people-food. And when I’m duckduckgo-ing for “accessible carousels” as a conscientious developer, this article ought to turn up (being recent, and on SitePoint, and having a somewhat-well-known author to boot).

This could be a part 1 of however-many articles series for “jQuery accessible carousel” where in this one, the point is how to stop focus from being super annoying. So many people are looking for how to do this, especially with jQuery-- so I’m definitely looking forward to more articles on this. They’re not easy, but then again if we as devs are forced to build a carousel anyway, then we should take it like adults and admit that yeah, we’re going to be adding a bunch of JS-crap for manual focus management and whatnot… we do this already with our accessible modal dialogs (good god), accessible dropdown menus (ug) and accessible tab-panels (lord on a stick). They suck to code. We do it anyway. And we all want to see How Should We Do It. So write more!

4 Likes