A better HTML input experience (custom elements and the AOM) (2017)

robdodson.me

20 points·BostonFern··6 comments

Lion web components is a good starting point for anyone who's interested in building a UI framework that comes with a lot of these accessibility features built-in.

https://lion-web.netlify.app/

For webmasters removing `outline` on `:focus` elements, a special cauldron in hell is prepared.

This article is from a long time ago and the spec changed substantially.

It's now all done with properties on ElementInternals:

https://developer.mozilla.org/en-US/docs/Web/API/ElementInte...

They also decided not to ship AccessibleNode's which is unfortunate because it removed the clearest path for canvas+wasm based UIs.

https://github.com/WICG/aom/blob/gh-pages/explainer.md

Having inputs look consistent between applications is a core plank of usability. Rolling your own custom widgets is just spending a lot of time and effort making the UI worse.

FE engineering is about making everything look like a printed pamphlet.

showing native elements is fine and safer. and browser should just plug the backdoors they found over the years to style them, since they are all technically click jacking attacks.

and all FEv will hate this comment because they don't even know what's a click jacking attack.

Unfortunately, this approach leaves out the human element.

If you don't give companies the tools to style their frontends like a printed pamphlet, they will seek out other solutions.

Remember that many of these features were added to remove the need to use Flash for UIs. Don't assume HTML is so embedded a technology that if we were to roll it back to the utility of HTML 1.0 for style, people wouldn't jump ship to an alternate stack (mobile apps, for instance).

Reply on news.ycombinator.com