Tags: semantics

91

sparkline

Wednesday, May 9th, 2018

CodePen Challenge - May 2018 - HTML Buddies

I really like this month’s CodePen challenge, all about HTML elements that go well together. First up: del and ins.

Monday, April 16th, 2018

inessential: The View-Source Web

Lesson learned: the discoverable and understandable web is still do-able — it’s there waiting to be discovered. It just needs some commitment from the people who make websites.

Sunday, January 21st, 2018

Small Tweaks That Can Make a Huge Impact on Your Website’s Accessibility | CSS-Tricks

What it says on the tin—a few suggestions to ensure the accessibility of your site.

Friday, December 29th, 2017

The Trials and Tribulations of the Title Attribute - 24 Accessibility

Everything you ever wanted to know about the title attribute in HTML.

What’s hot: using title on inputs, abbrs, and iframes.

What’s not: using title on anything else.

Thursday, December 7th, 2017

SA Labs | Just a Developer

I like this distinction between coders and developers.

The Coder is characterized by his proficiency in a narrow range of chosen skills.

By contrast the Developer’s single greatest skill is in being an applied learner.

I’m definitely not a coder. Alas, by this criterion, I’m also not a developer (because I do not pick things up fast):

Quite simply the Developer has a knack for grokking new [languages|frameworks|platforms] and becoming proficient very quickly.

I prefer Charlie’s framing. It’s not about speed, it’s about priorities:

I’m not a “developer” in that I’m obsessed with code and frameworks. I’m a “developer” as in I develop the users experience for the better.

Thursday, October 5th, 2017

Creating accessible menus-Part 1

James has been tweaking the accessibility of his site navigation. I’m looking forward to the sequel.

Tuesday, July 4th, 2017

Let small include subheadings? · Issue #929 · w3c/html

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.

Sunday, June 18th, 2017

Microformats : Meaningful HTML

A great one-page intro to microformats (h-card in particular), complete with a parser that exports JSON. Bookmark this for future reference.

Monday, February 20th, 2017

Do we need a new heading element? We don’t know - JakeArchibald.com

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?”

(I added a small historical note in the comments pointing to the first occurrence of this proposal way back in 1991.)

Monday, January 2nd, 2017

Mercury by Postlight

Readability is back, but now it’s called Mercury.

Sunday, September 25th, 2016

Responses To The Screen Reader Strategy Survey | HeydonWorks

Heydon asked screen readers some questions about their everyday interactions with websites. The answers quite revealing: if you’re using headings and forms correctly, you’re already making life a lot easier for them.

Thursday, May 26th, 2016

Semantic CSS - Snook.ca

Snook has been on a roll lately, sharing lots of great insights into front-end development. This is a particularly astute post about that perennial issue of naming things.

Sunday, April 24th, 2016

Conversational interfaces

Psst… Jeremy! Right now you’re getting notified every time something is posted to Slack. That’s great at first, but now that activity is increasing you’ll probably prefer dialing that down.

Slackbot, 2015

What’s happening?

Twitter, 2009

Why does everyone always look at me? I know I’m a chalkboard and that’s my job, I just wish people would ask before staring at me. Sometimes I don’t have anything to say.

Existentialist chalkboard, 2007

I’m Little MOO - the bit of software that will be managing your order with us. It will shortly be sent to Big MOO, our print machine who will print it for you in the next few days. I’ll let you know when it’s done and on it’s way to you.

Little MOO, 2006

It looks like you’re writing a letter.

Clippy, 1997

Your quest is to find the Warlock’s treasure, hidden deep within a dungeon populated with a multitude of terrifying monsters. You will need courage, determination and a fair amount of luck if you are to survive all the traps and battles, and reach your goal — the innermost chambers of the Warlock’s domain.

The Warlock Of Firetop Mountain, 1982

Welcome to Adventure!! Would you like instructions?

Colossal Cave, 1976

I am a lead pencil—the ordinary wooden pencil familiar to all boys and girls and adults who can read and write.

I, Pencil, 1958

ÆLFRED MECH HET GEWYRCAN
Ælfred ordered me to be made

Ashmolean Museum, Oxford

The Ælfred Jewel, ~880

Technical note

I have marked up the protagonist of each conversation using the cite element. There is a long-running dispute over the use of this element. In HTML 4.01 it was perfectly fine to use cite to mark up a person being quoted. In the HTML Living Standard, usage has been narrowed:

The cite element represents the title of a work (e.g. a book, a paper, an essay, a poem, a score, a song, a script, a film, a TV show, a game, a sculpture, a painting, a theatre production, a play, an opera, a musical, an exhibition, a legal case report, a computer program, etc). This can be a work that is being quoted or referenced in detail (i.e. a citation), or it can just be a work that is mentioned in passing.

A person’s name is not the title of a work — even if people call that person a piece of work — and the element must therefore not be used to mark up people’s names.

I disagree.

In the examples above, it’s pretty clear that I, Pencil and Warlock Of Firetop Mountain are valid use cases for the cite element according to the HTML5 definition; they are titles of works. But what about Clippy or Little Moo or Slackbot? They’re not people …but they’re not exactly titles of works either.

If I were to mark up a dialogue between Eliza and a human being, should I only mark up Eliza’s remarks with cite? In text transcripts of conversations with Alexa, Siri, or Cortana, should only their side of the conversation get attributed as a source? Or should they also be written without the cite element because it must not be used to mark up people’s names …even though they are not people, according to conventional definition.

It’s downright botist.

Wednesday, March 2nd, 2016

Atomic Classification | Trent Walton

There is one truism that has been constant throughout my career on the web, and it’s this: naming things is hard.

Trent talks about the strategies out there for naming things. He makes specific mention of Atomic Design, which as Brad is always at pains to point out, is just one way of naming things: atoms, molecules, organisms, etc.

In some situations, having that pre-made vocabulary is perfect. In other situations, I’ve seen it cause all sorts of problems. It all depends on the project and the people.

Personally, I like the vocabulary to emerge from the domain knowledge of the people on the project. Building a newspaper website? Use journalism-related terms. Making a website about bicycles? Use bike-related terms.

Most importantly, make the naming process a collaborative exercise, as outlined by Alla and Charlotte.

Wednesday, December 9th, 2015

HTML Developers: Please Consider | HTML5 Doctor

The best ARIA role is the one you don’t need to use.

Saturday, November 7th, 2015

Aural UI of HTML elements

This is such an incredibly useful resource by Steve and Léonie: documenting how multiple screen readers handle each and every element in HTML.

It’s a work in progress, but it’s definitely one to remember the next time you’re thinking “I wonder how screen readers treat this markup…”

Wednesday, September 9th, 2015

The Web is Ruined and I Ruined it by David Siegel

Here’s a classic. David Siegel—of Creating Killer Websites fame—outlines exactly why he turned his back on that 1×1 spacer .gif trick he invented.

Tuesday, March 31st, 2015

Let Links Be Links · An A List Apart Article

A superb piece by Ross Penman on the importance of being true to the spirit of the web.

Tuesday, December 9th, 2014

Saturday, November 22nd, 2014

Accessibility of Web Components

A great presentation on web components by Marcy, with an emphasis on keeping them accessible.