James has been tweaking the accessibility of his site navigation. I’m looking forward to the sequel.
One of the things we’d hoped to enable via Web Components was a return to ctrl-r web development. At some level of complexity and scale we all need tools to help cope with code size, application structure, and more. But the tender, loving maintainance of babel and webpack and NPM configurations that represents a huge part of “front end development” today seems…punitive. None of this should be necessary when developing one (or a few) components and composing things shouldn’t be this hard. The sophistication of the tools needs to get back to being proportional with the complexity of the problem at hand.
I completely agree with Alex here. But that’s also why I was surprised and disheartened when I linked to Monica’s excellent introduction to web components that a package manager seemed to be a minimum requirement.
Occasionally, people e-mail me to say something along the lines of “I’ve come up with something to replace HTML!”.
Five years ago, Hixie outlined the five metrics that a competitor to the web would have to score well in:
- Be completely devoid of any licensing requirements.
- Be vendor-neutral.
- Be device-neutral and media-neutral.
- Be content-neutral.
- Be radically better than the existing Web.
You come at the king, you best not miss.
Here’s a great free curriculum for teaching HTML and CSS.
I quite like this proposal for
geo element in HTML, especially that it has a fallback built in (like
video). I’m guessing the next step is to file an issue and create a web component to demonstrate how this could work.
That brings up another question: what do you name a custom element that you’d like to eventually become part of the spec? You can’t simply name it
geo because you have to include a hyphen.
- Do not depend on color
- Do not block zoom
- Rediscover the alt attribute
- Add subtitles and captions to your videos
- Semantics = accessibility
- Use the right mark-up
- Use roles when necessary
- On hiding elements
- Follow web accessibility standards
- Audit and review
Another great deep dive by Heydon into a single interface pattern. This time it’s the tooltip, and its cousin, the toggletip.
There’s some great accessibility advice in here.
Dave explains how Jekyll Includes are starting to convert him to web components. The encapsulation is nice and neat. And he answers the inevitable “but why not use React?” question:
I like that Web Components are an entirely client-side technology but can be rendered server-side in existing tech stacks whether it’s Jekyll, Rails, or even some Enterprise Java system.
Here’s an interesting proposal to slightly amend the semantics of the
small element so it could apply to the use-case that
hgroup was trying to cover.
This is an excellent proposal from Emil. If we can apply
display: contents to fieldsets, then we would finally have a way of undoing the byzantine browser styles that have hindered adoption of this element. This proposal also ensures backwards compatibility so there’d be no breakage of older sites:
The legacy appearance of fieldsets probably needs to be preserved for compatibility reasons. But
display: contentsis not supported in any old browsers, and is most likely used on exactly zero sites using the legacy look of fieldsets.
Whaddya say, browser makers?
A great one-page intro to microformats (h-card in particular), complete with a parser that exports JSON. Bookmark this for future reference.
Comparing different ways to hide content accessibly:
There are three reasons behind hiding content in an interface, and it’s important to identify what those reasons are, as they will correlate with the appropriate technique needed to hide such content.
- Temporarily Hidden Content
- Purposefully Visually Hidden Content
- Purposefully Visual-Only Content
There’s a lot of great knowledge in here that can be applied to plenty of other interface elements too.
Following on from Ire’s post about linting HTML with CSS, here’s an older post from Ebay about how being specific with your CSS selectors can help avoid inaccessible markup getting into production.
Jason revisits responsive images. On the whole, things are looking good when it comes to browser support, but he points out that
scrset’s precursor in CSS—
image-set seems to have dropped off the radar of most browser makers, which is a real shame.
Jake is absolutely spot-on here. There’s been a lot of excited talk about adding an
h element to HTML but it all seems to miss the question of why the currently-specced outline algorithm hasn’t been implemented.
This is a common mistake in standards discussion — a mistake I’ve made many times before. You cannot compare the current state of things, beholden to reality, with a utopian implementation of some currently non-existent thing.
If you’re proposing something almost identical to something that failed, you better know why your proposal will succeed where the other didn’t.
Jake rightly points out that the first step isn’t to propose a whole new element; it’s to ask “Why haven’t browsers implemented the outline for sectioned headings?”
Ever wondered what the most commonly used HTML elements are?
Some great thoughts here from Francis on how crafting solid HTML is information architecture.