GitHub’s Accessibility Team Tackles Challenges in Creating Accessible Drag-and-Drop Lists

Drag-and-drop
functionality
is
a
staple
in
modern
web
interfaces,
used
for
tasks
such
as
uploading
files,
reordering
bookmarks,
and
organizing
content.
However,
making
this
feature
accessible
to
all
users,
including
those
with
disabilities,
presents
significant
challenges.
According
to

The
GitHub
Blog,
the
GitHub
Accessibility
team
has
been
working
diligently
to
address
these
issues.

Challenge:
Screen
Reader
Navigation

Screen
readers
typically
use
arrow
keys
for
navigation,
which
conflicts
with
the
drag-and-drop
functionality
that
also
relies
on
these
keys.
To
address
this,
the
team
implemented
the

role='application'
attribute
to
override
default
screen
reader
behavior.
This
change
allowed
the
arrow
keys
to
be
used
for
drag-and-drop
actions,
though
it
required
careful
implementation
to
avoid
negatively
impacting
overall
accessibility.

Challenge:
NVDA
Screen
Reader
Compatibility

Another
hurdle
was
ensuring
compatibility
with
NVDA,
a
popular
screen
reader
that
simulates
mouse
events
when
users
press
the
Enter
or
Space
keys.
This
simulation
conflicted
with
the
drag-and-drop
functionality,
which
expects
different
behaviors
for
mouse
and
keyboard
interactions.
The
team
resolved
this
by
separating
keyboard
and
mouse
functionalities
into
distinct
HTML
elements,
ensuring
smooth
operation
for
all
users.

Challenge:
Announcing
Rapid
Movements

Announcing
item
movements
in
real-time
proved
difficult,
especially
when
users
moved
items
quickly.
The
team
added
a
100ms
debounce
to
the
announcements,
using
the

aria-live='assertive'
attribute
to
ensure
timely
updates.
This
approach
minimized
lag
and
kept
users
informed
without
overwhelming
them
with
outdated
information.

Challenge:
First-Time
User
Experience

Many
users
with
disabilities
are
unfamiliar
with
drag-and-drop
due
to
its
inaccessibility
in
many
applications.
To
ease
the
learning
curve,
GitHub
added
an
instructional
dialog
that
appears
when
users
activate
drag-and-drop
via
the
keyboard.
This
dialog
can
be
disabled
by
users
who
no
longer
need
the
guidance,
balancing
accessibility
with
user
convenience.

Challenge:
Voice
Control
Assistive
Technology

Voice
control
poses
unique
challenges,
especially
when
dealing
with
scrollable
lists.
The
team
introduced
a
move
dialog
as
an
alternative
to
traditional
drag-and-drop.
This
dialog
allows
users
to
specify
actions
and
positions
for
moving
items,
providing
a
preview
announced
via

aria-live.
This
feature
not
only
benefits
voice
control
users
but
also
those
who
prefer
a
more
controlled
interaction.

In
summary,
creating
an
accessible
drag-and-drop
interface
involves
overcoming
numerous
technical
and
user
experience
challenges.
The
GitHub
Accessibility
team’s
innovative
solutions
highlight
the
importance
of
user
feedback
and
iterative
testing
in
developing
inclusive
web
features.

Image
source:
Shutterstock