The Strong tag, <strong>, and the Emphasis tag, <em>, are considered Semantic Markup that allows for added meaning to your content. It serves as an indication to a screen reader of how something should be understood.
Whenever I read “some browsers” or “some screenreaders”, I always ask “but which ones?”, as did Ilya Streltsyn, who asked me “what is the current state of the text-level semantics in HTML reality?”
Léonie Watson to the rescue! Over Twitter, Watters wrote
Most are capable of reporting these things on demand, but do not as standard. So you don’t hear the text/font characteristics being announced as you read, but you can query a character/word etc. to discover its characteristics. This is based on the visual presentation of the text though, rather than through any recognition of the elements themselves (which as @SelenIT2 notes, are not mapped to the acc API).
Ilya (@SelenIT2) noted that “almost no text-level semantic element has a direct mapping to any accessible object”, linking to HTML Accessibility API Mappings 1.0 to demonstrate. This means that even if a screenreader vendor wanted to pass that information to a user, they can’t, because the browsers don’t expose the information to the Accessibility Tree that assistive technology hooks into.
Ilya also pointed my to a GitHub issue on the NVDA screenreader “Semantic support (not just style support) for del and ins on web pages”, in which the developers pose an interesting usability conundrum:
While I normally push for semantics over style, I’ve always found elements like this to be tricky. Strong and em, for example, don’t really mean anything to most people, even though they have more semantic meaning than bold or italic. That said, I think ins and del would mean more to most users semantically speaking…
It’s worth noting that we do support strike, super and sub. We just don’t report them by default. Also, while you make valid points, the reality is that we must always consider the concerns of our users over those of authors. If users find that it causes excessive verbosity, that is reason enough for this not to be a default…
Having emphasis reported by default has been extremely unpopular with users and resulted in a lot of complaints about NVDA 2015.4. The unfortunate reality is that emphasis is very much over-used in the wild. I had serious misgivings that this would be the result when we implemented this and it seems these unfortunately turned out to be quite warranted. As such, we’ve now disabled this by default, though the option is still there for those that want it.
So, should we stop using text-level semantics? Well, <strong>no</strong>. They continue to add meaning to sighted users, and as Watters says, some AT users can benefit from them. But don’t over-use them. Like adding title attributes to all your links, there’s such a thing as too much accessibility.
Update March 2020:Watters reports “The latest Jaws update adds support for content marked up in the del and ins elements in Firefox and the Chromium browsers (though not Edge original or IE)”
A (usually) weekly round-up of interesting links I’ve tweeted. Sponsored by Smashing Magazine who slip banknotes into my underwear so I can spend time reading stuff.
Free live transcripts – website listens to you and transcribes in real time. Uses Chrome-only experimental Web Speech Recognition API. Did pretty well on my Brit accent.
A Very Informal Look at Gutenberg Accessibility – “my clientsasked to switchDrupal to WordPress because of WP’s UI advantages. updates to the upcoming WP 5.0 release, specifically the new Gutenberg editor, appears to be undoing these advantages.”
CSS Grid Posters – “An exploration into the world of possibilities with CSS grid.
modalzmodalzmodalz – “We use too many damn modals”, with lots of suggestions for better UX patterns
Building a video editor on the web. Part 0. – “I am going to start the long process of working out what is and isn’t available on the platform and seeing how far we can get today” by Paul Kinlan
MeasureOSS – a “contributor relationship management system”, to help you see how engaged contributors are in your public project on GitHub, by @sil et al
Google unshackles Android-device firms – Manufacturers are not required to ship Chrome and Search if they pre-install YouTube, Maps etc. Good for ecosystem. Thanks, EU! I really hope Mozilla can do some OEM deal to get Firefox pre-installed on some Android devices rather than Chrome. We really need more browser diversity.
A (usually) weekly round-up of interesting links I’ve tweeted. Sponsored by Smashing Magazine who slip banknotes into my underwear so I can spend time reading stuff.
Link o’ the Week: Inclusive Design 24 – YouTube videos of free 24-hour online event about inclusive design for the global community. Thank you to all organisers, hosts and sponsors for this fabulous service.
Context, Culture And Service Design – Marc Fonteijn interviews Diego Mazo about the need for deeply understanding local culture in service design. (30 min YouTube video).
Pornography, Rape, and the Internet (PDF) – “the arrival of the internet was associated with a reduction in rape”, especially in men aged 15-19. So why is the UK government censoring porn, when evidence suggests that will lead to more sexual assaults?
Now, before people start to think “but colour isn’t content, it’s presentation!”, Sara was talking of pages showing colour swatches. In this case, the colours are the content. It seems like a good candidate for a semantic element, because it has meaning.
In my capacity as Ancient Old Fogey Of The Web, I sat and thought about this.
HTML: The mis-spent youth
The first iteration of HTML was a small set of tags noted down by in an email from Sir Uncle Timbo in October 1991, and added to in November 1992. By the time HTML2 came around, some tags had changed names, and a few tags added that showed HTML’s primary use as a language for mathematics and computer geeks: <var>, <samp>, <code>, <pre>, <kbd> as well as the now-defunct <xmp>, <dir> and <listing>.
At this point, we only had three presentational elements: <tt>, <b> and <i> (and arguably, <i> isn’t presentationalthe spec says “If a specific rendering is necessary — for example, when referring to a specific text attribute as in “The italic parts are mandatory” — a typographic element can be used to ensure that the intended typography is used where possible.”)
Further generations of HTML reflected the changing uses of the Web; it was no longer the read/write medium that Sir Uncle Timbo had envisaged, so we needed a way of sending information back to sites – thus, a whole form-related markup evolved, which subsequently has served eCommerce brilliantly. Tables were added to show data, extending the web’s original use-case of showing and sharing mathematical papers. This had the side-effect of allowing creative people to (mis)-use tables to make great-looking sites, which meant ever more consumer-friendly sites (and a menagerie of presentational markup which is deprecated now we have CSS).
By the time HTML5 came around, we added a whole slew of elements to demarcate landmarks in common web page designs – <nav>, <header>, <article>, <main> and the like, which has improved the experience for assistive technology users.
By my count, we now have 124 HTML elements, many of which are unknown to many web authors, or regularly confused with each otherfor example, the difference between <article> and <section>. This suggests to me that the cognitive load of learning all these different elements is getting too much.
HTML: comfortable middle-age
There’s loads of stuff we don’t have elements for in HTML. For ages I wanted a <location> element for geo information and a <person> element (<person givenname="Bruce" familyname="Lawson" nickname="Awesome" honorific="Mr."> etc.)
But here are some of the main reasons why we probably won’t get these (or Sara’s <color> element):
The 80/20 rule
The Web exists to share all possible human knowledge. Thus, the list of possible things that we could have a semantic for is infinite. We’re already getting overload on learning or remembering our current list of elements, their semantics and their attributes. So we (hopefully) have a set of elements that express the most commonly-used semantics (ignoring historical artefacts which browsers must continue to support because we can’t break the web).
The more complex a markup language, the fewer people understand it, the less conformant the average article will be, so the less useful the Web’s semantics will be.
Testing
Browsers are sophisticated beasts. I’d wager it’s the most complex software running on your device right now. As someone who used to work for a browser vendor, I know there’s a lot of resistance to adding new elements to the language – it adds even more testing to be done and boosts the chances of regressions. As Mat Marquis wrote in his recent history of Responsive Images,
Most important of all, though, it meant we didn’t have to recreate all of the features of img on a brand-new element: because picture didn’t render anything in and of itself
What’s the use-case?
The most important question: if there were a <person>, <location> or <color> element, what would the browser do with it?
Matthew Thomas suggested that new elements need to have some form of User Interface to make them easier for authors to choose the right one:
One way of improving this situation would be to reduce the number of new elements — forget about <article> and <footer>, for example.
Another way would be to recommend more distinct default presentation for each of the elements — for example, default <article> to having a drop cap, default <sidebar> to floating right, default <header>, <footer>, and <navigation> to having a slightly darker background than their parent element, and default <header>…<li> and <footer>…</li> to inline presentation. This would make authors more likely to choose the appropriate element.
Pretty much everyone in the Web community agrees that “semantics are yummy, and will get you cookies, and that’s probably true. But once you start digging a little bit further, it becomes clear that very few people can actually articulate a reason why.
So before we all go another round on this, I have to ask: what’s it you wanna do with them darn semantics?
The general answer is “to repurpose content. That’s fine on the surface, but you quickly reach a point where you have to ask “repurpose to what?. For instance, if you want to render pages to a small screen (a form of repurposing) then <nav> or <footer> tell you that those bits aren’t content, and can be folded away; but if you’re looking into legal issues digging inside <footer> with some heuristics won’t help much.
I think HTML should add only elements that either expose functionality that would be pretty much meaningless otherwise (e.g. <canvas>) or that provide semantics that help repurpose *for Web browsing uses*.
So what can we do?
Luckily, HTML already has a little-known element you can use to wrap data to make it machine readable: the <data> element:
The element can be used for several purposes.
When combined with microformats or microdata, the element serves to provide both a machine-readable value for the purposes of data processors, and a human-readable value for the purposes of rendering in a Web browser. In this case, the format to be used in the value attribute is determined by the microformats or microdata vocabulary in use.
You can add additional schema.org structured data elements to your pages to help Google understand the purpose and content of the page. Structured data can help Google properly classify your page in search results, and also make your page eligible for future search result features.
This is pretty vague (Google secret algorithms, etc) but I don’t believe it can hurt. What’s that you say? It adds dozens of extra bytes of markup to your page? Go and check your kilobytes of jQuery and React, and your hero images before you start to worry about the download overhead of nourishing semantics.
What about Custom Elements?
Custom elephants are Coming Soon™ in Edge, behind a flag in Gecko and already in Blink. These allow you to make your own new tags, which must contain a hyphen – e.g., <lovely-bruce>. However, they’re primarily a way of composing and sharing discrete lumps of functionality (“Components”) and don’t add any semantics.
Conclusion
So that’s why we don’t include lots of new semantics into HTML (but feel free to propose some if there’s a real use case). However, you can do a lot using existing semantics, generic containers like <data> and extensibility hooks. Happy marking-up!
A (usually) weekly round-up of interesting links I’ve tweeted. Sponsored by Smashing Magazine who slip banknotes into my underwear so I can spend time reading stuff.
Unbuttoning Buttons – how to stop a <button> looking buttony without losing its accessibility semantics
The way we talk about CSS – “I do not think we help our cause by talking about CSS as this whacky, quirky language. CSS is unlike anything else, because it exists to serve an environment that is unlike anything else.” preaches Rachel Andrew, most righteously.
Netflix viewing eats up world’s data – consuming 15% of global net traffic. Video accounts for 58% of the total volume of downstream traffic on the internet, followed by web browsing (17%), gaming (7.8%) and social media (5.1%)
How The First Ever Telecoms Scam Worked – In 1834, the French telegraph was hacked to steal stock market data using a backspace character to cover their tracks. (YouTube video)
When I was in Thailand recently, I was wondering whether the ever-popular Maslow’s hierarchy of needs triangle had ever been tested against Asian cultures, in which the emphasis is on family and community rather than individualism.
Self-actualisation, the idea of people becoming the best they can be is a very individualistic idea. Asian cultures are about the community and family that is collectivist in focus. Placing this very individual goal at the top highlights Maslow’s background, a man living in the individualistic USA.
There is also little evidence that the model is the same for men and women.
It is the basic line of the Islamic approach to strike a balance between material and spiritual needs in any situation of human existence, in times of saturation and need, stability and change, health and illness, happiness and distress. A model of a hierarchy of the different needs like Abraham Maslow’s can therefore not give credit to the reality of the interaction between material and spiritual aspects of the human being in different life situations, even if the spiritual aspect was to be named first.
It’s said that Maslow was influenced by the Blackfoot tribe of native Americans, but misunderstood them. In Maslow’s hierarchy connected to Blackfoot beliefs, Karen Lincoln Michel writes up a lecture presented by University of Alberta professor Cathy Blackstock at the 2014 conference of the National Indian Child Welfare Association.
“First of all, the triangle is not a triangle. It’s a tipi, Blackstock said. “And the tipis in the Blackfoot (tradition) always went up and reached up to the skies, she said.
Another difference noted by Blackstock is that self-actualization is at the base of the tipi, not at the top where Maslow placed it. In the Blackfoot belief, self-actualization is the foundation on which community actualization is built. The highest form that a Blackfoot can attain is called “cultural perpetuity.
So it looks as if a white academic male in hyper-individualist America thought that everyone in the world is like him. What a surprise. I hereby rename his over-exposed diagram as Maslow’s hierarchy of me me me and forbid you from ever using it again.
Friday was my last day of funemployment – I spent the summer showing El Son the charms of Krakow, then travelling alone with my portable music studio to finish my album on an island in Thailand (it’s still unfinished), and now it’s time to get earning again. The three Cs of life (champagne, caviar and cocaine) don’t buy themselves, you know.
So today I began work with a group of old friends who put together the best resources for web developers. I’ve edited articles for them, written for them, tech reviewed a book of theirs and presented at their conference. Now they need my help with their biggest challenge their wardrobes.
I’m bringing my experience with web standards, conference MCing and unique fashion sense to my friends at Smashing Magazine to be their in-house “Smashion Advisor”. It’s going to be a tough gig and it won’t be easy, but I’m looking forward to it.
I’ve always liked the Smashing folks. They’ve always tried to make their living the right way, with quality products at fair prices that aim to better the web, while respecting standards, audience, speakers, authors, sponsors and staff. And many Smashing staffers are old friends of mine, from even before they joined the gang.
The nice Ricardo has made me two Smashing avatars, one with a green mohawk and one with silver-flecked normal hair for when my coiffure is having a George Clooney Interlude.
