designers into crafting interfaces that
would prevent those bad practices.”
Part of the reason for this is that when
new tools come along, we tend to focus
on how they enable us to create more
polished sites, with their impact on
accessibility being a later consideration.
“When we develop a new web application,
we often put a lot of work on the design,
making it beautiful and usable,” says
Adrián Bolonio, web team lead and front-
end developer at willhaben tech. “In
other words, we want it to be effective,
efficient and satisfying for the user. But a
lot of times we don’t think about the user
experience for people with disabilities.”
Fortunately, HTML5 certainly made
big moves to better ‘bake’ accessibility
in but this still hinges on how those
markup innovations are utilised. “The
fact is that the web standards and HTML
already provide us with the tools to makeany website accessible,” Bolonio insists.
“A c c e s s i b l e R i c h I n t e r n e t A p p l i c a t i o n s
(ARIA), for example, is a set of attributes
that defines ways to make web content
and web applications more accessible
to people with disabilities. It’s included
within HTML and ready to be used.”
While Tom Miller, front-end developer
at HeX Productions, acknowledges ARIA’s
impact on assistive technology, he thinks
it is also important to note that the buck
still stops with developers in ensuring
they’re using the code correctly. “The
ability to have semantic elements within
HTML5 has been a significant move
forward for accessibility,” he says. “This
allows assistive technology to digest
specific context in the content that it is
consuming. With this, though, comes a
higher demand on developers to ensure
they are using mark-up correctly.”In-depth:
HTML / ARIA
example
Can you think of any particular tags,
markup, classes or code constructs
that have been – and continue to
prove – influential when it comes to
accessible development?James Hall, creative director,
HeX Productions
“In response to that question, on
a practical level, I’d say that every
website is different but I would
highly recommend reviewing ARIA.
Below are some examples and
reasons why:<a href=”...” aria-label=”Read more
about Accessibility”>Read More</a>The aria-label definition will help
screen readers read out a longer
form of the ‘Read More’ link. If this
was not used then a screen reader
will only read “Read More” and
this would be a non-descriptive
link. Aside from that, the aria-live
definition is one of my favourites and
enables you to tell the user of any
changes that may have happened:<div role=”status” aria-
live=”polite”>You have 2 items in your
basket totalling £5.00</div>For example adding something to
a shopping basket, viewing results
from an autocomplete or seeing
live results of a sports game. You
can have this as polite, which will
announce when there is a break in
interaction or assertive, which will
announce as soon as something has
changed. This can make a world of
difference when you have content
being loaded by AJAX or any other
interactive method. So overall I’d
emplore developers to please think
about ARIA when building forms and
aside from the two items highlighted
here you should also include
aria-required, aria-labelledby, aria-
checked and aria-describedby .”FEATURES
The new frontier of accessibility
“WEB STANDARDS AND HTML ALREADY
PROVIDE US WITH THE TOOLS TO MAKE
ANY WEBSITE ACCESSIBLE”
Above James Hall, creative director,
HeX Productions.Left Nicolas Garnier (http://nico.computer/),
freelance creative developer specialising in
React/Vue, GSAP and WebGL