ARIA
For designers though, this is where things become
a little tricky and where they need to consider using
a UI design tool that facilities voice (ie can emulate a
screen reader).
Adobe XD actually offers voice prototyping features
(read more about this at https://theblog.adobe.com/
introducing-voice-prototyping-in-adobe-xd/) but is the
only UI design tool to do so. Judging by the current
state of the market, I suspect that others will catch
up very soon.
Meanwhile, design handoff comments still work
well enough.
Note: aria-live=”assertive” is the same thing as
role=”alert” – more details about this, along with some
interesting use-cases can be found over at the W3C
site (https://www.w3.org/TR/WCAG20-TECHS/ARIA19.
html).STEP 3: HIDE DECORATIVE ELEMENTS
Sometimes, we might want to omit an element from
the accessibility tree using aria-hidden=”true” – this
ARIA attribute and value combination ensures that
said element won’t be dictated to screen reader
users when hovered. It’s typically used on decorative
images with zero functionality. Generally speaking,
though, focusable elements shouldn’t be using
aria-hidden=”true”.
This is a fairly simple one but it’s easy to neglect,
so it’s still worth mentioning to developers during
the design handoff.STEP 4: DESIGN CLEAR CUSTOM
CONTROLS
Web browsers have their own native design for
controls such as select boxes, checkboxes and radio
buttons. However, designers often want to redesign
them so that they ‘fit in’ with the rest of the visual
aesthetic, which is somewhat understandable.
But that being said, web browsers are incredibly
stubborn and don’t always allow this, which web
developers know all too well!
This moves web developers to build their own
custom controls, but to make these controls work
in the same way as their native counterparts, web
developers need to implement a variety of ARIA
attributes. It is tricky but designers can make the
task easier.
Designers: don’t try to innovate. Make checkboxes
look like checkboxes, make radios look like radios
and so on. This makes them recognisable to users,
and also means that web developers know exactly
what ARIA attributes and ARIA role value to use.
Personally though, I think it’s better to leave
stubborn controls in their native state, for usability
and convenience.Top Communicate non-
visual content during design
handoff
Above Apple VoiceOver
dictating added context to
the user’s action
change and as a result, the browser will listen for
these changes and then dictate them. Instead, we
can leverage aria-label once more in order to define a
custom message.
Depending on which button was clicked, aria-label
will dictate either ‘Chapters are now ordered by
recency’ or ‘Chapters are now ordered sequentially’.
A JavaScript event handler (onclick) would be required
to handle the user’s interaction).<!-- aria-label is defined dynamically -->
<div aria-live=”assertive” aria-label=”Articles are now
ordered by recency”>
<button aria-label=”Order items
sequentially”>Sequentially</button>
<button aria-label=”Order items by recency”>Recency</
button>
</div>