ARIA
3D physics engines
For those that would rather their user interface not animate,
there’s a media query that web developers can use to unset
animations and transitions:@media(prefers-reduced-motion) {
* {
animation: unset !important;
transition: none !important;
}
}Designers: never rely on a singular method of communication.
Similar to how we shouldn’t solely use colour to communicate
because some users are colour blind, the same concept applies to
those who would rather less motion. Use words and visuals too.Remove inessential links
Mouse-users can click where they want and when they want;
however, keyboard users often tab through every interactive
element that comes before the one they want. This means that an
abundance of links on a web page can be incredibly tiresome.
Designers should convey to web developers when a link can be
left out of the tabbing order, in which case the web developer can
implement the tabindex=”-1” attribute, assuming though that said
link doesn’t look like a link.Enable ‘skip to main content’
For non-mouse users, ‘skip to main content’ enables users to
bypass the header and navigation UI. Assistive technologies
enable this behaviour when developers implement the <main> tag
(which is why an HTML document can never have two of these
tags); however, those that navigate using the keyboard are reliant
on ‘skip to main content’. Designing this is easy. Ensure the first
focusable element (which can be hidden until focused upon) is a
link that scrolls to the main content. To see this in action, simply hit
tab on Google!ACCESSIBILITY
BEYOND ARIA
IN-DEPTH‘Skip to main content’ has been a feature on Google for yearsSTEP 1: RETHINK FORM LABELS
Placeholders aren’t suitable alternatives to labels.
Placeholders display example input for extra
clarity, whereas labels describe what type of input
is expected. Placeholders disappear when the form
field is focused upon to allow room for the user to
type their own input; however, users are forgetful,
so labels that disappear on focus might then result in
more errors.
PLACEHOLDER VS LABEL
An exception can be made in a scenario where there’s
only one form field in the form (eg a subscribe form).
However, since screen readers (a type of assistive
technology that dictates UIs to low-sight users) rely
on these labels, we’ll need to find another way to
communicate what type of input the field expects.
Enter the aria-label attribute.
In the following example, the value of aria-label
is dictated to those using screen readers while
remaining invisible to those with optimal vision.
That can infer the type of input that the form
field expects using surrounding visual context (eg
headings, button text, layout and so on).
<input aria-label=”Email address” placeholder=”e@mail.
com”>
A note for designers: get in the habit of either
designing visual labels or writing UX copy for