What Does It Really Mean For A Site To Be Keyboard Navigable — Smashing Magazine

Links Around the Web
1

Been dealing with this sort of thing at my day job.

4 Likes
2

Do you think its something a small web site should be worrying about?

1 Like
3

I’d say yes. Unless you are not planning on sharing your website or don’t want other people to visit, accessibility is pretty important. I remember reading a blog post someone made about how many small websites aren’t mobile friendly, and how they dont try to be, nor do they try to be accessible. If you want to share your site, its important to think about people who might face some difficulties while web surfing.

2 Likes
4

Worrying? No. Considering? Definitely.

In my experience, the people behind motherfuckingwebsite.com have a point. Web pages are generally accessible by default.

As long as you start with the following…

<html lang="en">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- more meta tags here -->
    <!-- body here -->
</html>

… and use a hierarchical heading structure, most of the work is done for you. They’re even mobile-friendly, to boot. Just remember to add alt text to your images, too, and you’re most of the way there.

Things get complicated when you add CSS and JavaScript into the mix – especially JavaScript. And as long as you aren’t doing anything silly like misusing the tabindex attribute or using JS to intercept keystrokes, web pages are also generally keyboard-friendly by default.

2 Likes
5

Yeah, this article covers many good basics like making sure you don’t remove focus indicators.

Another thing I’d add is making sure you use links (for going somewhere) and buttons (for activating something), not divs plus JavaScript. It’s much easier to make the former accessible, because browsers implement tabbing and keyboard activation by default.

4 Likes
6

Quite frankly, I only see people using divs and JS to emulate <a> and <button> at my day job, because they’ll hire “web developers” who only know React/Angular/Vue and thus have no idea how HTML works. It’s cheaper than paying guys like me, since most such developers aren’t also lazy mofos who just want to work 40 hours/week and spend their nights/weekends writing bad sf.

Then I have to come in to do accessibility testing and remediation – because management has decided that I’m some kind of expert even though I just use the WAVE extension, read Mozilla’s documentation and follow Adrian Rosselli’s blog – and none of the project leads want to hear that the app is inaccessible because the so-called web developers have no demon-ridden idea how to do standards-compliant web development.

They think Bootstrap is a standard. And if I had a hundred bucks for every time I emailed some manager a link to Rosselli’s #accessiBe Will Get You Sued in response to them asking why we can’t just use an overlay, I’d already own my house outright.

4 Likes
7

aaalright that sounds doable i suppose

8

You can test individual pages for common accessibility problems by running them through WAVE, the web accessibility evaluation tool. WebAIM also provides WAVE as a browser extension. I use it on my own websites and at my day job.

Also, try tabbing through your own pages yourself. I’ve found that if I – as somebody who doesn’t need assistive technologies – can’t easily navigate a website with only a keyboard, then somebody who needs such tech definitely can’t do it.

2 Likes