1

Do I need aria-label attributes when I'm using h-card (this is for company contact information in a page footer)?

<div class="h-card">
  <a class="u-url" href="http://example.com">
    <img src="http://example.com/static/logo.svg" alt="Example Logo">
    <span class="p-name sr-only">Example Corp.</span>
  </a>
  <div aria-label="Address" class="p-adr h-adr">
    <span class="p-locality">Eugene</span>
    <span class="p-region">OR</span>
    <span class="p-postal-code">97403</span>
  </div>
  <a aria-label="Telephone" class="p-tel" href="tel:12345678">(12) 345-678</a>
</div>

Are the aria-labels superflous here or do they provide some value? Ought there be more detailed aria- attributes? (And if so, which?)

unor
  • 92,415
  • 26
  • 211
  • 360
thebjorn
  • 26,297
  • 11
  • 96
  • 138

2 Answers2

3

WAI-ARIA and Microformats don’t "compete":

  • WAI-ARIA is a framework to enhance the accessibility of your web content.

  • Microformats are a convention for marking up structured data on your HTML pages.

They have different goals, and consumers of WAI-ARIA don’t necessarily support Microformats, and consumers of Microformats don’t necessarily support WAI-ARIA.

So when deciding if you need the WAI-ARIA attribute aria-label in your example, ignore if or how you use the Microformat h-card, and vice-versa. They don’t interact with each other.

unor
  • 92,415
  • 26
  • 211
  • 360
  • 1
    (I did not expand on if you *should* use `aria-label` in this example, as I think this is a different question that is best answered in a separate question post. However, asking which WAI-ARIA attributes you could use for your content might be too broad for Stack Overflow, unless you come up with a starting point and a question about it.) – unor Feb 16 '15 at 05:32
2

Best not to use aria-label here; at worst, a screenreader will end up reading out the aria-label instead of your content, making it less accessible.

As spec'd, the aria-label value, if present, is used instead of the element content (simplifying somewhat); but in practice, behavior varies quite depending on element type and on the specific screenreader/browser used;

As it turns out, in the case or aria-label being used on SPAN,

  • VoiceOver on Mac reads out the label instead of the content

  • NVDA and JAWS on Windows ignore the aria-label outright and just read out the div/span content. (This behavior could change in some future update to these tools...)

So at best, it's ignored; at worst, it replaces your actual content. Best to not use it in your case then.

ARIA can be pretty useful when used carefully; but browser compat issues mean it's unfortunately full of pitfalls; if you're going to use it at all, recommend checking out the specs, and also ensure that you test with real-world screenreaders so you can ensure that using aria doesn't have the unintended consequence of making your content less accessible!

BrendanMcK
  • 14,252
  • 45
  • 54
  • 1
    I know we're not supposed to use the comments to say thanks, but Thanks! That was very useful. – thebjorn Feb 19 '15 at 00:42
  • Do you know if this is also true for `labelledby`? As in the W3C doc the following is stated: "If the label text is visible on screen, authors SHOULD use aria-labelledby and SHOULD NOT use aria-label. Use aria-label only if the interface is such that it is not possible to have a visible label on the screen." – Marian Sep 06 '16 at 23:53
  • My take would be to only use aria-label or aria-labelledby on things that would naturally have a LABEL - notably text input controls, radio buttons, checkboxes, selects and the like - and even in those cases, plain LABEL is usually preferable. Otherwise, as in the case above, you can end up with inconsistencies with whether the label vs the content gets read out. – BrendanMcK Sep 07 '16 at 00:18