PROJECTS
ARIA
ARIA
ARIA for designers isn’t about knowing the code.
Some ARIA implementations are avoidable when the
design offers a decent user experience by default
and the ARIA implementations that are unavoidable
often require the input of a UI designer.
Developers aren’t user experience designers and
yet they’re oftentimes left with some of the role’s
responsibilities (eg writing UX copy when no visual
label has been designed or when visual context is lost
on low-sight users) because UI design has historically
been thought of as just a visual discipline.
The worst-case scenario (although very common)
is that accessibility is totally forgotten about due to
lack of input from UI designers.
In this tutorial, we’ll talk about some of these
ARIA attributes, learn how developers implement
them and also how (and why) these implementations
should really be spearheaded by designers either
during UI design or during design handoff.ARIA ACCESSIBILIT Y
FOR WEB DESIGNERS
Daniel Schwarz explains the importance of ARIA in web development
and which areas of it concern designers
We know that the structure of a website is
defined by its multiple HTML tags. However,
these tags (<div>s especially) sometimes require a
little bit more context in order for the device and
browser to completely understand their meaning.
This context is communicated via the
implementation of what web developers call
Accessibility Rich Internet Application attributes (or
ARIA attributes for short).
As implied in the name, ARIA attributes help to
improve web accessibility. Specifically, they help
assistive technologies such as screens readers to
correctly dictate what’s happening on the screen for
those that can’t see very well and they also assist
non-mouse users to navigate websites efficiently. As
with all HTML attributes, they’re added to HTML tags
like so:<input type=”text” aria-label=”Email address”>ABOUT THE AUTHOR
DANIEL SCHWARZ
w: https://uxtricks.design/
t: @mrdanielschwarz
job: Creator of UX Tricks
areas of expertise:
Product design, UX,
design tools