Heydon Pickering writes Inclusive Components, a guide to building accessible web interface components, and co-authors Every Layout.
Commenters recommend him as a great resource, crediting him with the lobotomized owl selector and pointing to Inclusive Components and Every Layout for building proper components.
True! And Mozilla is one of the good guys.
What I should've said in my hastily written comment should have been: "and other implementations of the same (or other) functionality isn't divs and spans?"
I think my only true criticisms for Tailwind example would be:
- should've probably used h2/h3 for card titles. Though this is dependent on where and how the card is used
- should've done more with the meta (number / date). But in a real world these would probably still be spans (for example, to mark them in different colors etc.)
HTML doesn't have a card element. So when you create one, you... use whatever's available. And divs and spans in HTML+CSS literally exist to manipulate layout and text.
BTW, my favorite accessible card is this one: https://inclusive-components.design/cards/ And it's probably even more weird. Demo: https://heydon.github.io/Inclusive-Components/cards-redundant-click-read-more/ (check the CSS also)
The inclusive components approach is rather beautiful. No frameworks (so it works in all frameworks that are standards compliant), and it is accessible and semantic:
- https://inclusive-components.design/collapsible-sections/.
Github's elements collection (custom elements/web components) includes several beautifully implemented `details` based approaches to UI problem:
- https://github.com/github/github-elements
Doing this stuff in React is really quite over-complicating it (and making it practically less accessible/reusable). React is uniquely bad for the web among the most popular frameworks:
- https://custom-elements-everywhere.com/
One of my pet peeves with the HTML title attribute is that it requires “hover and wait” to view the content as a tooltip. MDN [1] links to a wonderful guide [2] on how to avoid tooltips whenever possible and make them accessible if needed. For some reason, the accessible tooltips require custom implementation and is not the default browser behavior for the title attribute.
[1]: https://developer.mozilla.org/docs/Web/HTML/Global_attributes/title
[2]: https://inclusive-components.design/tooltips-toggletips/
- Every Layout: https://every-layout.dev Explains the whys and the hows.
- Inclusive Components: https://inclusive-components.design (one of the co-authors of Every Layout). Explains the whys and the hows of building proper components
Additionaly:
- BBC Gel: https://bbc.github.io/gel/ (one of the co-authors of Every Layout) also explains a lot of the whys in design of specific components
- Gov.uk is also great: https://design-system.service.gov.uk/get-started/
The term was coined by Heydon Pickering [0]. He's great, also responsible for the useful site Inclusive Components [1] and one of the authors of Every Layout [2].
[0] https://alistapart.com/article/axiomatic-css-and-lobotomized-owls/
[1] https://inclusive-components.design
[2] https://every-layout.dev
You may be surprise to know who is Heydon who co-author in the article.
https://inclusive-components.design/
IE11 is meant for supporting legacy sites and Microsoft doesn’t recommend consumers to use it. It make sense to work on Grid and Flexbox for new sites.