aria-label, h-card, or both?

Question

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

Answer 1

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.

Answer 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!