Amanda Unvarnished
Written by
in
#ID24 @yatil: ARIA stands for accessible rich internet applications, emphasis on internet applications.
#ID24 @yatil: Not originally intended for websites. Interesting historical tidbit.
#ID24 @yatil: First rule of ARIA: If you can use native HTML element, do that instead of repurposing another element and adding ARIA.
#ID24 @yatil: Second rule: Don’t change native semantics unless you have to.
#ID24 @yatil: Third rule: All interactive controls must be keyboard accessible, and there are specific rules.
#ID24 @yatil: If role=button, element must be able to receive focus, and enter and space should both activate.
#ID24 @yatil: Fourth rule: Don’t use role=presentation or aria-hidden on a focusable element.
#ID24 @yatil: If aria-hidden=true or role=presentation are used incorrectly, things can go very wrong.
#ID24 @yatil: ARIA support varries across browsers and screen readers.
#ID24 @yatil: ARIA is a complicated spec to implement for browsers and assistive tech, which means it’s also complicated for devs.
#ID24 @yatil: Now showing an example of using th as a button. See rule one above for why this isn’t good.
#ID24 @yatil: aria-label will override an already-existing accessible name.
Comments
11 responses to “”
#ID24 @yatil: Not originally intended for websites. Interesting historical tidbit.
#ID24 @yatil: First rule of ARIA: If you can use native HTML element, do that instead of repurposing another element and adding ARIA.
#ID24 @yatil: Second rule: Don’t change native semantics unless you have to.
#ID24 @yatil: Third rule: All interactive controls must be keyboard accessible, and there are specific rules.
#ID24 @yatil: If role=button, element must be able to receive focus, and enter and space should both activate.
#ID24 @yatil: Fourth rule: Don’t use role=presentation or aria-hidden on a focusable element.
#ID24 @yatil: If aria-hidden=true or role=presentation are used incorrectly, things can go very wrong.
#ID24 @yatil: ARIA support varries across browsers and screen readers.
#ID24 @yatil: ARIA is a complicated spec to implement for browsers and assistive tech, which means it’s also complicated for devs.
#ID24 @yatil: Now showing an example of using th as a button. See rule one above for why this isn’t good.
#ID24 @yatil: aria-label will override an already-existing accessible name.