There’s a lot of neat tricks in this video by Rob Dodson where he focuses on accessibility tricks in Chrome’s DevTools. A few notes:
- Chrome DevTools has an experimental feature to help with accessibility testing that you can unlock if you head to
chrome://flags/and turn on in the DevTools settings. - Wrapping an
<input type="checkbox">in a<label>gives the input a name of the text in the label, even without aforattribute. - The
aria-labelledbyattribute overrides the name of the element with the text taken from a different element, referenced by ID. It can even compose a name together from multiple elements, including itself. - Adding
tabindex='0'to an element will make it focusable.