alavkx/Banner.tsx

Last active January 27, 2021 17:57

Star () You must be signed in to star a gist
Fork () You must be signed in to fork a gist

Learn more about clone URLs
Clone this repository at <script src="https://gist.github.com/alavkx/c914bf373630ac35f357377d57600580.js"></script>
Save alavkx/c914bf373630ac35f357377d57600580 to your computer and use it in GitHub Desktop.

Download ZIP

A11y: Which labeling method is more semantically "correct"?

Raw

	// 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