Skip to content

Instantly share code, notes, and snippets.

@alavkx

alavkx/Banner.tsx

Last active January 27, 2021 17:57
Show Gist options
  • Save alavkx/c914bf373630ac35f357377d57600580 to your computer and use it in GitHub Desktop.
Save alavkx/c914bf373630ac35f357377d57600580 to your computer and use it in GitHub Desktop.
Download ZIP
A11y: Which labeling method is more semantically "correct"?
Raw
Banner.tsx
// Option A: associate the label directly and hide the redundant DOM node
<div role="status" aria-label={title}>
<div aria-hidden>{title}</div>
</div>
// Option B: associate the label with an id
<div role="status" aria-labelledby="banner-title">
<div id="banner-title">{title}</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment