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