Accessibility
The accessibility aspect of icon design, ie the
use of meaningful alt tags is also often overlooked
simply because they’re such a visual element of
the page and, for most users, easy to understand.
Ultimately, extensive user testing and prototyping
helped us build quickly, test what we had built and
iterate our work based on regular feedback.
We defined ‘decorative icons’ during the initial
development phase and only used them for visual
reinforcement. We implemented a simple test by
removing the icon and verifying if users could still
understand and use the page. If they could, then to
a degree the icon would be considered decorative.
COMPLIANT ALT TEXT
All developers should know about ‘image alt tags’,
which are used to describe an image to someone
who may not be able to see it. However, in the
context of icons it isn’t always possible to use ‘alt
tags’, so we took further steps to ensure all our users
have an equally simple experience.
A good example of this with NHS Leeds CCG is
mobile navigation menus. We are accustomed to
the ‘hamburger’ menu but that doesn’t provide
any description or instructions other than what
is implied by the design pattern and is difficult to
use if you cannot see it. Put simply, we followed
the Web Content Accessibility Guidelines (WCAG)
recommendation, using empty alt tags for icons
considered decorative and ensuring the primary
semantics of elements were not reliant on
understanding what an icon means – ie there should
always be a text description associated with an icon.
UNDERSTANDING WEB
ACCESSIBILITY
There is a legal requirement to make websites
accessible to all and understanding these
accessibility requirements is a vital skill for
content editors. This is why we dedicate time to
educate content editors and administrators on the
importance of accessibility.
For example, do your content editors understand
how disabled people use computers? The more you
understand the types of disabilities that affect web
and computer use, the challenges faced by those
with them and the types of software and hardware
they use, the easier it is to design for them.
We also found that for the majority of our NHS
clients, the WCAG are really overwhelming and
difficult to follow. It is all too easy to assume that
all users can see and use a pointer interface like a
mouse. Yet, with clear guidance and support, we can
help all users access the content on a site.TOOLS AND SYSTEMS
Our accessibility audits assess conformance to
each of the WCAG guidelines using a heuristic
and qualitative review with accessibility and code
validation tools to pinpoint specific errors. One
of the automated tools we used for the Leeds
CCG project is Lighthouse by Google. Lighthouse
dictates that, when writing code, it is vital it is
clean, lightweight and optimised. In this case, we
used Lighthouse as a way of indicating that what we
developed was performing to the highest standards.
Once we completed our development, tests showed
that the scores for Accessibility and Search Engine
Optimisation (SEO) were exceptional (100 per cent).
We also use the accessibility checklist created by
18F (the US government’s digital agency) to help test
for common accessibility problems, including:O Keyboard accessibility
O Verifying link text is descriptive (for example
‘click here’ links)
O Colour contrast for text and important graphics
and controls
O Client uploaded images not having meaningful alt
text (where alt text is needed)
O Online forms not being marked up correctlyACCESSIBILITY FIRST, ALWAYS
However, a big concern while developing accessible
websites is that automated tools only test a
small portion of the WCAG specifications, so it’s
important you strive to improve in a number of
ways. Firstly, it’s worth taking your knowledge of
UX and applying it to accessibility; the site may
technically be compliant with the latest WCAG
guidelines and recommendations but none of that
matters if the user experience is poor.
Secondly, always try to include a bigger, more
diverse group of users in an initial discovery
phase. It sounds obvious but it is crucial that you
understand the needs of those users and what
common issues they struggle with while browsing
the internet. Ultimately, you aren’t doing this to
meet some arbitrary government requirements;
you’re doing this because information is for
everyone and access to that information should be
as simple as it can be.P
ROFI
LE Shackleton is the co-founder of Mixd, a web-design agency based in
Platform, a tech hub in Leeds, UK and has worked in the tech industry
since 1998.
w: mixd.co.uk