Link tags: focus
Buttons, links, and focus – tempertemper
This is a handy guideline to remember, even if there exceptions:
When a keyboard user follows a link, their focus should be taken to the new place; when a keyboard user presses a button, focus should remain on that button.
Bring Focus to the First Form Field with an Error :: Aaron Gustafson
A handy little script from Aaron to improve the form validation experience.
No, Apple Did Not Crowdfund :focus-visible in Safari – Eric’s Archived Thoughts
Eric has a written a clear and measured explanation that I hope Alex and Jake will read, given their petty snarky reactions to Webkit shipping a feature (reactions that do more harm than good to their cause—refuting their bullshit has taken time and energy away from the legitimate criticisms of Apple’s rendering engine monopoly on iOS; this whole debacle has been one big distraction from far more important browser bugs).
Many of us are mad at Apple for a lot of good reasons, but please don’t let the process of venting that anger tar the goals and achievements of Open Prioritization.
An opinionated guide to accessibility testing /// Iain Bean
- First impressions
- The Tab key
- Automated testing tools
- Screen reader testing
- Next steps
Top 5 things to review in an Accessible Design Review - Hassell Inclusion
Considering how much accessibility work happens “under the hood”, it’s interesting that all five of these considerations are visibly testable.
- Think about accessible copy
- Don’t forget about the focus indicator
- Check your colour contrast
- Don’t just use colour to convey meaning
- Design in anticipation of text resizing
Where did the focus go? | Amber’s Website
Amber documents a very handy bit of DOM scripting when it comes to debugging focus management:
Optimizing keyboard navigation using tabindex and ARIA — Sara Soueidan
Smart thinking from Sara to improve usability for keyboard users by using
aria-hidden="true" tabindex="-1" to skip duplicate links:
A good rule of thumb for similar cases is that if you have multiple consecutive links to the same page, there is probably a chance to improve keyboard navigation by skipping some of those links to reduce the number of tab stops to one. The less tab stops, the better, as long as it does not worsen or compromise on other aspects of usability.
I’ve cautiously implemented this pattern now over on The Session where snippets of comments had both a title link and a “more” link going to the same destination.
Chromium Blog: Updates to form controls and focus
Chromium browsers—Chrome, Edge, et al.—are getting a much-needed update to some interface elements like the
progess element, the
meter element, and the
color input types.
How to build a bad design system | CSS-Tricks
Working in a big organization is shocking to newcomers because of this, as suddenly everyone has to be consulted to make the smallest decision. And the more people you have to consult to get something done, the more bureaucracy exists within that company. In short: design systems cannot be effective in bureaucratic organizations. Trust me, I’ve tried.
Who hurt you, Robin?
What I’ve learned about accessibility in SPAs
Nolan writes up what he learned making accessibiity improvements to a single page app. The two big takeways involve letting the browser do the work for you:
Here’s the best piece of accessibility advice for newbies: if something is a button, make it a
<button>. If something is an input, make it an
<input>. Don’t try to reinvent everything from scratch using
And then there are all the issues that crop up when you take over the task of handling navigations:
- You need to manage focus yourself.
- You need to manage scroll position yourself.
For classic server-rendered pages, most browser engines give you this functionality for free. You don’t have to code anything. But in an SPA, since you’re overriding the normal navigation behavior, you have to handle the focus yourself.
Designing a focus style | Zell Liew
A deep dive info focus styles with this conclusion:
The default focus ring works. There are problems with it, but it can be good enough, especially if you can’t dedicate time and energy to create a custom focus ring.
Design process for the messy in-between » cog & sprocket
Designing your design process:
- Know your strengths and focus resources on your weaknesses.
- Learn to identify the immovable objects.
- What has to be perfect now and what can be fixed later?
:focus-visible and backwards compatibility
Patrick is thinking through a way to implement
:focus-visible that’s forwards and backwards compatible.
Focusing on Focus Styles | CSS-Tricks
A deep dive into the
:focus pseudo-class and why it’s important.
Nobody Said CSS Is Easy
Happier HTML5 Form Validation - daverupert.com
Instead of being prescriptive about error messaging, we use what the browser natively gives us.
Mutating the active element - ally.js
Rodney has done some great research into how different browsers respond to a focusable element becoming inactive (by being made disabled, hidden, or removed).
Start Building Accessible Web Applications Today - Course by @marcysutton @eggheadio
A great series of short videos from Marcy on web accessibility.
Chris Shiflett ▪ Lessons from Brooklyn Beta
Thoughtful points from Chris, delivered on the closing day of this year’s Brooklyn Beta.
So, the next time you feel like you’re missing out, stop it. Zoom out a little bit and give yourself some space and some perspective, so you can focus on what matters.