A presentation at Internal by Todd Libby
ARIA aria-label, aria-labelledby, aria-describedby
ARIA ACCESSIBLE RICH INTERNET APPLICATIONS
ARIA FIGHT CLUB
DON’T USE ARIA
ARIA NO ARIA > GOOD ARIA > BAD ARIA
WHAT ARE THEY? A WAY TO MAKE WEB CONTENT AND WEB APPLICATIONS MORE ACCESSIBLE TO PEOPLE WITH DISABILITIES IT HELPS WITH DYNAMIC CONTENT AND ADVANCED USER INTERFACE CONTROLS DEVELOPED WITH HTML, JAVASCRIPT, AND RELATED TECHNOLOGIES
ARIA-LABEL OVERRIDES AN ELEMENT’S NAME, REPLACING IT WITH TEXT YOU SPECIFY
/ < <Button aria label=“Close”> * button>
ARIA-LABELLEDBY OVERRIDES AN ELEMENT’S NAME, REPLACING IT WITH ANOTHER ELEMENT
/ < / / < <
<section aria labelledby=“intro masthead”> <h2 id=“intro masthead”> Introduction h2> <aside>… aside> section>ARIA-DESCRIBEDBY SETS AN ELEMENT’S DESCRIPTION TO THE CONTENT OF ANOTHER ELEMENT
/ < / / < <
<form> <label for=“password”>Password label> <input id=“password” type=“text” aria describedby=“format” <p id=“format”> * Password may contain alphanumeric characters. p> form>MULTIPLE IDs YES YOU CAN!
/ < / / / < < <
<form> <label for=“password”>Password label> <input id=“password” type=“text” aria describedby=“format length” <p id=“format”> Password may contain alphanumeric characters. p> <p id=“length”> Password must be 8 characters or more. p> form>HIDDEN LABELS & DESCRIPTIONS WHAT ARE YOU TRYING TO HIDE?
/ < / < / < / / / /
<p id=”sort description” hidden>Sort this table alphabetically by name. / < < < < < <table> <thead> <tr> <th role=“column head” scope=”col” aria sort=“none”> <button aria describedby=“sort description”> <svg>… svg> Name button> th> <th>… th> tr> thead> <tbody>… tbody> table> p>THANKS! @TODDLIBBY - TODD LIBBY
Internal presentation on aria-label, aria-labelledby, aria-describedby
for free. You
can too.