An introduction to understanding accessibility

Marcus Ioane

18 October 2017

Last year, we were commissioned by the Victorian Electoral Commission (VEC) to build a solution to assist voters with communication issues at the ballot box. Being a government agency, VEC is required under the Disability Discrimination Act 1992 to provide information and services in a non-discriminatory and accessible manner. Accessibility is the inclusive practice of ensuring that the web is equally accessible for all people, whatever their hardware, software, language, culture, location, or physical or mental ability. As an experience designer, this was a great opportunity to see firsthand the careful consideration required when building accessible products.

Accessible design is good design

Steve Ballmer

Accessibility itself is not a new concept. W3C (a consortium that manages standards for the world wide web) first introduced the Web Accessibility Initiative in 1997. Since then, their Web Content Accessibility Guidelines (WCAG) have helped businesses and agencies meet the accessibility needs of many people with disabilities.

Despite these guidelines, many websites today still lack even the most basic accessibility features. So why, after 20 years, is accessibility still being neglected? Deep-rooted misconceptions, a lack of awareness, and a lack of understanding about accessibility and it’s importance can cause businesses to disregard accessible design entirely.

Our latest journal entry all about understanding #accessibility.

A post shared by Conduct (@conduct.hq) on


Common Misconceptions

There are many pervasive misconceptions that often hold back businesses and organisations from considering accessibility when building their websites or apps. Let’s take a closer look at a handful of accessibility myths.

1. Accessibility only benefits those with disabilities

The reality is that accessibility benefits everyone – and yes, that includes you.

You might not have a disability, but chances are you’ve been inconvenienced by a temporary impairment of some sort and have benefitted from features on a site, put in place to aid those with disabilities. This can be any type of impairment (physical, mental, or technological) that limits or alters your ability to surf the web or consume content as you normally would.

Closed captioning, subtitles and transcripts, for example, are traditionally used to help the hearing impaired access video and audio content however, in many scenarios, these features can also help those with regular hearing.

Consider a person in a public setting that wants to check out video or audio content without disturbing others. That person may have left their earphones at home or may be in a public setting like a doctor’s waiting room or a gym. This person’s ability to hear is impaired, albeit not physically or permanently, but they are experiencing a limitation that deaf or hard of hearing people face everyday.

In a purely self-serving mindset, we could even consider accessibility as an investment in ourselves. If people have the good fortune of living a long, healthy life, one thing is certain, we grow old. With old age our eyesight, hearing, and motor skills may be limited. Accessibility, at one point or another, either now or in the distant future, benefits everyone.

2. Accessible websites put limitations on design and development

This misconception likely stems from the early days of the internet, when designers and developers were ill-equipped to build accessible websites. Technological limitations meant that text-only websites were often considered the best method of achieving accessibility.

Today, websites can be content-rich, interactive, beautifully designed and highly accessible. It’s often misunderstood that the process behind building accessible websites is drastically different from building regular websites. In reality, the process is virtually the same, albeit with a little more care and attention to detail.

3. It’s a barrier for innovation

I’m currently reading “The Practitioner’s Guide to User Experience Design” by Luke Miller of General Assembly. In chapter two, “Creativity Loves Constraints”, Miller explores the constraints often faced by designers and how to overcome them. He writes:

Don’t think of the constraints of a system or the requirements you have to work with as limitations; think of them as a foundation for building a creative design

Luke Miller

Let’s put this kind of thinking into practice. I like to use the example of designing a phone that is easier and safer to interact with (legally of course) while operating a vehicle. Studying how blind or low vision people interact with their phones can provide a good foundation to begin ideating solutions for the problem.

By reframing the limitations of building for blind or low vision users into an opportunity, we are able to explore solutions that benefit everyone.


Great, but where do I start?

To get you started, here’s a short checklist you can use to perform an accessibility audit on websites you frequently use, or your own website. This is in no way an all-inclusive checklist, but it will hopefully give you an idea of the kind of considerations that we must take to build an accessible website.


ImagesWhy?
If your website contains images, ensure that they have alt descriptions (also known as alt text, alt attributes, or alt tags). These are attributes that specify descriptive text in the event that the user is unable to see an image. Try to refrain from using images of text, unless it is part of a logo or brand name, and if an image is purely for decoration (a border or pattern) – the alt text should be left empty or null. The Longdesc (Long Description) attribute should be used for long descriptions. For example, a complex chart or graph.Blind and low vision people may use a screen reader to listen to alt text to hear what the image represents.
ImagesIf your website contains images, ensure that they have alt descriptions (also known as alt text, alt attributes, or alt tags). These are attributes that specify descriptive text in the event that the user is unable to see an image. Try to refrain from using images of text, unless it is part of a logo or brand name, and if an image is purely for decoration (a border or pattern) – the alt text should be left empty or null. The Longdesc (Long Description) attribute should be used for long descriptions. For example, a complex chart or graph.
Why?Blind and low vision people may use a screen reader to listen to alt text to hear what the image represents.
Audio & VideoWhy?
Audio and video content should have captions, subtitles, or transcripts. This is difficult to enforce for content that is not your own i.e content sources from other parts of the internet that you cannot control or change. If your website has auto playing audio content, ensure that there is a way to play and pause.Users with hearing impairments use captions, subtitles, and transcripts to read what is being heard. Sound that plays automatically with no option to play or pause can make navigating your website confusing for people using screen readers (blind or low vision users).
Audio & VideoAudio and video content should have captions, subtitles, or transcripts. This is difficult to enforce for content that is not your own i.e content sources from other parts of the internet that you cannot control or change. If your website has auto playing audio content, ensure that there is a way to play and pause.
Why?Users with hearing impairments use captions, subtitles, and transcripts to read what is being heard. Sound that plays automatically with no option to play or pause can make navigating your website confusing for people using screen readers (blind or low vision users).
TextWhy?
Specify your text in emunits so that browsers are able to scale your text effectively. Ensure that your text has sufficient contrast with it’s background to aid in visibility. Initialisms/acronyms on your website should be either punctuated correctly or defined using abbr (abbreviation) and title attributes.Users with low vision may need to enlarge the text to view the information clearly. Screen readers will try to pronounce initialisms and acronyms if there are sufficient vowels or consonants to be pronounceable, otherwise they spell out the letters. For example a screen reader would pronounce NASA as a word, SQL would be pronounced “Sequel” even though some people say S.Q.L and NSF would be pronounced N-S-F.
TextSpecify your text in emunits so that browsers are able to scale your text effectively. Ensure that your text has sufficient contrast with it’s background to aid in visibility. Initialisms/acronyms on your website should be either punctuated correctly or defined using abbr (abbreviation) and title attributes.
Why?Users with low vision may need to enlarge the text to view the information clearly. Screen readers will try to pronounce initialisms and acronyms if there are sufficient vowels or consonants to be pronounceable, otherwise they spell out the letters. For example a screen reader would pronounce NASA as a word, SQL would be pronounced “Sequel” even though some people say S.Q.L and NSF would be pronounced N-S-F.

Putting it into Practice

Taking these things into account is a great entry point into accessible design. By educating yourself and your team, you’re arming yourself with the tools and knowledge needed to make an equally accessible web a reality.

After a review of our own website, we discovered areas in which we could improve accessibility. We had discovered that some of our images were lacking alternative descriptions and some of our more complex images (graphs) were missing long descriptions. We’ve updated these now.

A quick and easy way of checking your website against accessibility guidelines is to use a web accessibility checker such as AChecker. Accessibility checkers can help make the process of finding possible issues much simpler, so even without a complete understanding of Web Content Accessibility Guidelines, you have a clear starting point in which you can begin addressing accessibility issues on your website.

Conduct strives to ensure accessible design is considered in everything we do, starting first with our own website. We realise that our website as it stands has areas in which we could improve. Our plan going forward is to address and learn from the current issues and maintain a high standard of accessibility as we grow.

next up Rapid App Development With React Native & Xamarin

Bassem Farah