Adactio: Links—Tagged with focus

When is :focus-visible visible? | bitsofcode

Has the user expressed a preference for always visible focus?

Does the focused element support keyboard input?

Is the user interacting with the focused element with a non-pointing device?

Did a script cause focus to move from a previously visibly-focused element?

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: document.activeElement.

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 range, date, and color input types.

This might encourage more people to use native form controls …but until we can more accurately tweak the styling of these elements, people are still going to reach for more bloated, less accessible JavaScript-driven options. Over-engineering is under-engineering

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 <div>s and <span>s.

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?

One thing I gained a stronger awareness of (simply from working with checkboxes) is that it’s important to progressively enhance UI components, so that a fancy custom one is able to fall back to the default browser styles and functionality. This way, a user can still access the UI if JavaScript or CSS fail.

Happier HTML5 Form Validation - daverupert.com

Dave uses just a smidgen of JavaScript to whip HTML5’s native form validation into shape.

Instead of being prescriptive about error messaging, we use what the browser natively gives us.

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.

Link tags: focus

20