There are plenty of opportunities for friction in the user experience when logging in, particularly while entering a two factor authentication code. As developers we should be building applications that support the need for account security but don’t detract from the user experience. Sometimes it can feel as though these requirements are in a battle against each other.
In this post we will look at the humble <input> element and the HTML attributes that will help speed up our users’ two factor authentication experience.
The final markup to trigger the correct keyboard and have the browser autocomplete the received SMS code is this:
Because <summary> has role="button", it eats the semantic content of elements inside it.
So that big <h1> inside of your <summary> becomes just another piece of text, sans semantics.
I especially like this part of his post too:
At the risk of being a broken record; HTML really needs <accordion>, <tabs>, <dialog>, <dropdown>, and <tooltip> elements. Not more “low-level primitives” but good ol’ fashioned, difficult-to-get-consensus-on elements. A new set of accessible controls for a modern era…
Nice find by Scott Jehl from Filament Group: Instead of fetching files over XHR and then injecting their contents, you can also use an iframe + leverage its onload event to include the contents of any other file directly into the current web page.
Good piece by Hidde on the markup one needs to use when linking to a translation of a page.
The other day I worked on some front-end code that takes users to a version of the website in a different language. Two attributes can make such links more accessible: lang and hreflang. What’s the difference?
Recently, we’d seen some articles suggest that things haven’t changed a great deal with select‘s styling limitations, but I decided to return to the problem and tinker with it myself to be sure. As it turns out, a reasonable set of styles can create a consistent and attractive select across new browsers, while remaining just fine in older ones too.
Thanks to the appearance CSS property they’ve removed the native styling and were able to inject their own, all whilst retaining the behavior and semantics of the select itself (unlike JS implementations and other attempts). The result is quite nice:
Because of the artistic nature of this project I have not concerned myself with cross-browser-compatibility, so the live preview will most likely look laughable in anything other than chrome.
However, the results in other browsers are quite viewable (and remind me of the ACID tests)
It's only designed for Chrome, but don't let that stop you from trying it in other browsers: the older, the better! Here it is in Chrome 17, Firefox 3.6, Chrome 9, and (my favorite) Internet Explorer 5.1.7 for Mac. pic.twitter.com/dFNYKi8Myf