#keyboard navigation

A Closer Look at Web Accessibility in 2024

I saw a link to a Medium post on Twitter today that Wikipedia started enabling link previews on hover states, showing a little overlay with more information about the linked page. This is nice because users can decide whether they want to click a link before doing so. It reminds me of Steve Krug's "Don't Make Me Think" philosophy by providing users with more helpful information before choosing whether to leave the page.

However, seeing the hover feature made me ask out loud: "does it work on keyboard focus, too?" So I went over to a wiki page and started tabbing around. I was pleased to learn that they did in fact make link previews work on keyboard focus! It might be a little sad that I'm so excited about such a simple thing...but it's awesome.

One question I had was about a preview settings button inside the overlay; there doesn't seem to be a way to reach it with the keyboard. To fix it, they could potentially enable another key command to reach the overlay (like a down arrow), or maybe they could inject it into the tab order right after the link. Amazingly, the team already took note of my comment on Medium and reached out to say they'll address it!

Additionally, the overlay isn't announced in screen readers. I couldn't seem to trigger it with the devtools open to inspect the markup, but I suspect they could pair the link with the overlay by using aria-describedby. I've passed that idea along to the team as well.

From Chip Cullen:

PBS has a long history of wanting to make content inclusive for as wide of an audience as possible (fun fact: PBS invented closed captioning).

The team working on the main PBS website has worked very hard to provide a better and better experience, and have tried to improve the accessibility overall.

Key features:

Keyboard-friendly modals for our localization process

Keyboard-friendly navigation and focus state

When on a video playback page, tabbing through the page will bring up controls that work with a keyboard, and will then stay present on subsequent page views

Captions on almost all videos, which are able to be toggled with the above controls

Is it perfect? No. But we hope our users find the experience a lot better than in the past.

I love the bright, easy-to-use design with clear focus outlines! The content has alt text and closed captioning, showing how PBS does a great job of considering people with disabilities in their content production. The hover menu needs keyboard support, but the “station changer” toggle button in the global header works great: keyboard users can open it and skip by when its closed. But, as Chip mentioned, they're continuing to make progress. The site looks and works great so far!

In my Intro to Web Accessibility class for Girl Develop It Seattle this week, we talked about providing alternate paths for navigating webpages. As an example, our awesome TA Jack Nicolai pointed out the keyboard skip links on Starbucks.com. Keyboard navigation in general is delightful on this website, and so it is the recipient of an Accessibility Win!

As you tab through Starbucks pages, early in the tab order you'll find three links allowing you to skip to the navigation, main content and footer areas. The browser's default focus style has been kept intact and guess what: it's super usable! The mega-menu can also be navigated using the keyboard and users aren't forced through hidden menus. It's nicely done!

"Reaction" interfaces are all the rage these days: following Slack's lead, both Facebook and Github have now implemented their own versions of reacting to a post. After some initial iterations, these interfaces are now accessible to keyboard and screen reader users (way more so than Slack itself!).

I like how Github's reaction interface works: an initial button includes the text "Add your reaction", where each button is reachable and announced, and the escape key exits the popup. I wish the overall tab order was more intuitive, but it's absolutely usable as-is.

I am curious to hear how screen reader users have found Facebook reactions, as they work well with the arrow keys but are not immediately announced as options. Each one has to be discovered with the arrow keys. Still, these interfaces being reachable and operable are big wins for how many people use these sites!

I saw reactions (sorry, couldn't help the pun) from engineers at Github and Facebook when issues were brought to their attention. They calmly and kindly responded to criticism with fixes and improvements in the works. It just goes to show: if you find a problem–especially in accessibility–try reporting it first before ripping peoples' heads off. The fix could be just one kind message away.

From Joe Watkins:

Great overall accessibility here! The “Dyslexia” link in the header I thought was super cool. It injects the OpenDyslexic web font when triggered :) Bonus points for a Tim Berners Lee’s quote on the Help & Accessibility page.

http://www.pasdecalais.fr