ARIA Attributes, Part One

A presentation at Internal in January 2022 in by Todd Libby

Slide 1

ARIA aria-label, aria-labelledby, aria-describedby

Slide 2

ARIA ACCESSIBLE RICH INTERNET APPLICATIONS

Slide 3

ARIA FIGHT CLUB

Slide 4

DON’T USE ARIA

UNLESS YOU REALLY, REALLY, REALLY, REALLY, REALLY NEED TO.

Slide 5

ARIA NO ARIA > GOOD ARIA > BAD ARIA

Slide 6

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

Slide 7

ARIA-LABEL OVERRIDES AN ELEMENT’S NAME, REPLACING IT WITH TEXT YOU SPECIFY

Slide 8

/ < <Button aria label=“Close”> * button>

Slide 9

ARIA-LABELLEDBY OVERRIDES AN ELEMENT’S NAME, REPLACING IT WITH ANOTHER ELEMENT

Slide 10

/ < / / < <

<section aria labelledby=“intro masthead”> <h2 id=“intro masthead”> Introduction h2> <aside>… aside> section>

Slide 11

ARIA-DESCRIBEDBY SETS AN ELEMENT’S DESCRIPTION TO THE CONTENT OF ANOTHER ELEMENT

Slide 12

/

/ < / / < <

<form> <label for=“password”>Password label> <input id=“password” type=“text” aria describedby=“format” <p id=“format”> * Password may contain alphanumeric characters. p> form>

Slide 13

MULTIPLE IDs YES YOU CAN!

Slide 14

/

/ < / / / < < <

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

Slide 15

HIDDEN LABELS & DESCRIPTIONS WHAT ARE YOU TRYING TO HIDE?

Slide 16

/ <

/ < / < / < / / / /

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

Slide 17

THANKS! @TODDLIBBY - TODD LIBBY