abbr   152

« earlier    

Unusual HTML tags worth knowing
Using the right HTML elements has more importance than many of us realise. Known as Semantic HTML, it's all about bringing meaning to the page and not just presentation. A <p> element contains a paragraph, and everyone knows what that should look like. Not only does it help communicate what the page contains to search engines, it also helps screen readers do their job as efficiently as possible. This article will list some lesser known tags for you to have as many tools as possible on a daily basis.
fridayfrontend  html  cssbasics  semantics  abbr  dfn  address  cite  del  ins 
7 days ago by spaceninja
The abbreviation appreciation society
The use of the title attribute to provide the expansion for an abbreviation is not a user friendly way to provide the expanded text, it is a method that #SUX (Some User Experience).
fridayfrontend  cssbasics  html  abbr  title  accessibility 
8 weeks ago by spaceninja
Revisiting the abbr element
All of that said, here’s my attempt at enhancing the <abbr> element and creating a tooltip experience that works for touchscreen, keyboard, and mouse. This solution isn’t perfect, as I discuss below under the limitations, but I wanted to make an attempt anyway :)
fridayfrontend  cssbasics  html  abbr  accessibility 
february 2019 by spaceninja
Making the abbr element work for touchscreen, keyboard, and mouse
The <abbr> element works well enough on desktop devices as long as the user is interacting with a pointing device. However, it fails for users who are interacting with the page via the keyboard or a touchscreen device. This is because of two things: 1) The <abbr> element isn’t able to be brought into focus, e.g. by a keyboard user pressing the tab key. 2) Mobile browsers don’t display the tooltip on any interaction from the user.
fridayfrontend  css  cssbasics  html  abbr  mobile  touch 
december 2018 by spaceninja
Conversational Semantics · An A List Apart Article
Now we also have the i and b elements, which are rendered exactly the same as em and strong, respectively. In the early days of the web, that led many of us—myself included—to believe they were interchangeable. And with b and i being shorter to write, they proliferated on the web. Semantically, however, the i and b elements are quite different from their doppelgängers.
webdev  strong  em  italic  bold  abbr  a11y 
september 2018 by frankfarm
How should you markup the first instance of an acronym in body copy?
How should you markup the first instance of an acronym in body copy?
February 19, 2013 at 8:36am
This week’s Ask the Sherpas question comes from reader Trevor Brennan:

Q: How should someone markup the first instance of an acronym (within body copy) where its acronym directly proceeds its definition: eg. “Web Content Accessibility Guidelines (WCAG)”

Obviously the following would be daft for screen readers: Web Content Accessibility Guidelines <abbr title="Web Content Accessibility Guidelines">(WCAG)</abbr>

But if it's text only and not an abbr tag than it's against guidelines and likely a screen reader will try and pronounce “WCAG.” — Trevor Brennan

Sherpa Author Derek Featherstone answers:

Screen Reader Defaults

Providing abbreviation expansions in the title attribute is “what we do,” but it does rely on the some customization of settings for some screen reader users:

VoiceOver on the Mac reads title attributes by default
Screen readers like JAWS and Window Eyes don't read them by default
Whether or not people actually do change their settings is another question, but the fact that it is not a consistent default setting limits its potential.

Accessibility for All Users

But it isn't just a consideration for screen reader users. title attributes aren't readily available to keyboard users. Hiding the expansion in the title attribute does nothing for those users, which include many “groups” of sighted keyboard users — people with low vision and people with mobility or dexterity impairments, for example.

Fortunately, we can make abbreviations expansions more accessible to everyone. I'd use what you already have spelled out in your question, but reverse it. Here's an example:

When crafting accessibility legislation, many countries around the world refer to the WCAG (Web Content Accessibility Guidelines) from the W3C (World Wide Web Consortium).

It is entirely acceptable to use this method of full expansion on the page to provide the meaning of abbreviations this way. I prefer the pattern where we provide the abbreviation first and then the expanded form after, rather than the other way around as you did in your example.

If we're providing this expansion for the first occurrence on a page, the idea is that if the person consuming the page comes across another instance of the abbreviation later in the page where it isn't expanded, they can search the page for the abbreviation and come across the expanded form.

Thinking in those terms, if we find the abbreviation using the browser's search/find tools, and we list the expanded form after, we create a more natural reading order. If we write it as expanded form (abbreviation) then once the person finds the abbreviation, they need to move backwards rather than forward to get the expanded form.

Meeting Guidelines

As for this part of your question:

But if it's text only and not an abbr tag than it's against guidelines and likely a screen reader will try and pronounce “WCAG.”

Well, you'll be okay with that. It's not really against guidelines — you've provided an appropriate mechanism to figure out what the abbreviation stands for. That's about all you can do, and a totally accepted solution for meeting the requirements (see the details of How to Meet Success Criterion 3.1.4 below).

The screen reader is going to do whatever it wants with the text there anyway, even if you marked it as an abbreviation without a title attribute. Besides, I've heard several different pronunciations of WCAG from real people: wuh-cag, double-you-cag, way-cag. We might as well add a screen reader's interpretation into the mix :)

Further Reading
Understanding Success Criterion 3.1.4
How to meet Success Criterion 3.1.4
accessibility  abbr  acronym  featherstone  derek  IFTTT  mantalo  GoogleReader  sigles  reference  A  List  Apart:  The  Full  Feed 
february 2018 by skeetergraphics
Screen Readers and ALL CAPS
When you type something in ALL CAPS, screen readers spell it out like: A-L-L C-A-P-S, it's super annoying if it's not an abbr, so use CSS
screenreaders  accessibility  aria  abbr  abbreviations  capitalization 
february 2018 by spaceninja
Tyriar/abbr-touch · GitHub
abbr-touch - Makes <abbr> element title attributes touch accessible
html  js  abbr 
july 2015 by Netzhoerer
Makes <abbr> element title attributes touch accessible
html  abbr  a11y  mobile  software  Javascript 
july 2015 by nilswindisch

« earlier    

related tags

2008  2012  2014  [delicious-do_not_delete]  a  a11y  aaa  abbreviation  abbreviations  accessibility  accessibilityforums  accessible  acronym  acronymns  acronyms  acronymtitle  address  ago  alist  alistapart  ampersand  apart:  archived  aria  best  best_practise  blog  bold  bookmarks_bar  caching  camera  cameras  canon  capitalization  citations  cite  ckeditor  cms  code  comment  completion  copy  css  cssbasics  culture  cymru  data  date  datetime  definition  del  delicious  dependencies  derek  design  development  dfn  dictionary  drop-down-menu  drupal  elements  elisp  em  emacs  emcs  english  excellent  expand  extension  featherstone  feed  fridayfrontend  full  geocoding  gis  googlereader  grammar  gsm  guideline  habits  haccessibility  hack  hacks  hcalendar  hierarchy  howto  html  html4  html5  htmltagsandattributes  ie  ie6  ie7  ifttt  infrastructure  ins  international  iso  issue  italic  jargon  javascript  jaws  jenit  journal  jquery  js  key  language  legend  lens  lenses  letter-spacing  linguistics  list  mail  mantalo  markdown  markup  mdn  metadata  micro  microdata  microformat  microformats  mobile  mode  natural  networks  newsletterissue  nxhtml  org  photo  photography  plugin  pop-up-window  positioning  practice  programming  projects  python  quote  readme  reference  resources  rightmobilephone  rollover  rst  schemaorg  scite  screenreaders  semantic  semantics  sherpa  sigles  sigma  slang  sms  snippet  software  spec  src  standards  stanford  states.  strong  structure  styling  tab  tabkey2  tag  technology  template  text  textmessaging  the  thislinkwastweetedorretweetedorfavoritedby@nmandautodeflectedtodelicious  time  timestamp  tips  title  tooltip  tooltips  touch  trees  tutorial  tutorials  typography  urban  us  usps  valueclasspattern  w3c  wcag  web-design  web  webdesign  webdev  webstandards  welsh  wikipedia  wireless  wordpress  words  xhtml  yas  yasnippet  yui  ~  期刊  标题  缩写 

Copy this bookmark: