Accessibility is More Than Code: Takeaways from the Future of Web Design SF Conference 2015
At the end of October I attended the Future of Web Design conference in San Francisco, Future Insight’s first time hosting this event in the Bay Area. As a popular and well-known conference for those in the digital industry, I was excited to see what they would bring to the table in this West Coast expansion. Over two full days I had the opportunity to immerse myself in the realities of being a designer in such a fast paced industry — where our use of the medium changes so quickly. After two days I walked away with new knowledge, networks and couldn’t wait to put everything I learned to use.
There were many talks that struck chords with me, but none so much as Jennison Asuncion’s talk about digital accessibility. I have to say sheepishly, that before this talk, digital accessibility was not something that I ever prioritized or even designed specifically for, nor has it been something a client has ever mentioned as a priority… But as someone who strives to be a thoughtful, considerate, inclusive person and designer I thought “Man, why haven’t I been thinking about this?!” I think that it all boils down to not knowing where to start. In this blog post I want to give some quick information bytes about digital accessibility and easy ways to start becoming more inclusive with our work, some things that we may already do but not realize their impact on accessibility!
As the senior staff technical program manager handling digital accessibility efforts at LinkedIn, Jennison is a major force in the digital accessibility movement. As the co-founder of Global Accessibility Awareness Day, the founder of the Bay Area Accessibility and Inclusive Design meet up, and the co-director of the Adaptech Research Network, he is leading the way people approach accessibility on many levels. I also have a feeling that he was the only other Canadian at this event, so there was a little home-country connection too.
What is digital accessibility??
The first and most important thing is to define what we are really trying to accomplish. Jennison uses the W3C definition of “Designing and developing UX that everyone can independently consume.” The everyone refers to: people with mobility problems, cognitive disabilities, sensory disabilities, even aging adults, people with short-term disabilities and people who simply only use keyboards.
A key principle of web accessibility is that the designs, in the end, should be flexible and meet many different user needs, situations and preferences. This is a more familiar concept to us as designers and developers, but in my case and I’m sure many others, the question is: where do we start?
Who is this meant for?
As described above, accessibility means that everyone benefits. According to the Board of Internet Accessibility, building a website that is inclusive can improve SEO, protect and improve your brand image as well as expand your reach in growing markets (eg. the senior population). More than a numbers game, accessibility is a way of empowering people and making sure that everyone has the same access to information, shopping experiences and whatever else they use technology for. A question we should ask ourselves, as designers and developers, is “How many people’s UX can we positively impact?” I think the answer is obvious.
Fun fact: most blind people use Windows PCs and Internet Explorer as their browser. This is because it is the most compatible for many programs and softwares meant for disabled people.
What does this mean?
While Jennison set up a live demo of JAWS, the screen reading software that helps him, as someone who is blind, navigate the internet and use his computer, he challenged us to book plane tickets on the United website using only our keyboards. To be honest, I didn’t even know where to start. I stared at my computer for a few minutes and then pressed some keys and made zero headway before the challenge was over. It had been so long since I had not had access to a mouse or trackpad that I didn’t even know how to get going.
This was my first time seeing how a screen reader actually worked, as seemed to be the case for many others in the audience. For those also unfamiliar: it is a software that reads out what is on your screen. Using your keyboard, you navigate through links and text, buttons and images. It’s surfing the web, just through words and keyboard clicks. When you use a screenreader to browse a website, you end up searching and navigating through different lists (such as lists of all the links, buttons, form fields or first words in paragraphs). On the United website, we saw that because of the fake drop down menus and the nested selectors within them, a person using a screen reader would not be able to buy a ticket for more than one person and would only be able to fly economy. From there, they would not even be able to choose a flight or continue purchasing at all as the selection process is not navigable for screen readers or by keyboard. The greatest takeaway was that intentional form-follows-function design decisions are essential to accessible design.
Where do I start? Best Practices to keep in mind.
I think it’s important to state that making a separate accessible version of a website is the opposite of inclusivity. Why should someone’s UX be inferior?
While creating something totally and completely accessible is an involved process that really needs to start from the top, there are many little things that you can start doing to immediately work towards building inclusively. If anything, you’ll be surprised at how much these principles actually already apply to good web design.
- Make sure there is enough contrast between the foreground and background. This includes text on top of images, buttons and gradients in the background.
- Don’t rely on colour to convey information.
- Be deliberate and consistent with your naming. This refers to buttons, links, titles etc. A person using a screen reader will most likely pull up the list of links to quickly navigate, this means a link saying “CLICK HERE” means nothing without context.
- Keep your navigation consistent and clear through your website, including naming, positioning and styling. You need to make sure your users understand where they are on your website. Offer more than one method of navigating your website, this can include having a site-wide search function or a site map.
- Interactive elements, such as links and buttons, should be easily identifiable. This can be as basic as creating unique styles for different link states. The key thing is that styles and their respective names should be consistent throughout the whole site.
- Keep proper hierarchy with proper use of headlines and body copy. Text size and line height should be at appropriate and readable sizes. This means using responsive font sizes that scale, not set point sizes that won’t zoom in older browsers. This also should reflect in the code, meaning that logical reading order should be taken into consideration when placing content.
- Forms should have clearly associated labels. Descriptors for text fields are usually found on the left or above the input field and then on the right for radio buttons and checkboxes. You should also associate labels for every form control. To help avoid user mistakes you can include examples or suggest corrections.
- Alt text in images is not only good for when the image doesn’t load but lets people who use screen readers to experience them as well. This also means that we should not use images to convey too much important information.
Image Source: Phase 2
- If you have an autoplay slideshow, you should include a way of controlling it: to turn it off and on, and buttons to go forward and back.
I hope that everyone realizes just how easy it is to start building or even retrofitting existing sites for inclusiveness after reading this list. The great thing is that we most likely already think about many of these things in one way or another in our design/development processes. It is simply a matter of being deliberate and intentional with our actions. Digital accessibility is not as intimidating as it sounds like! I’ll leave you with a few wise words from Jennison : “Nothing builds better than empathy.”
Resources:
Web Accessibility Initiative — A great place to get information, user studies, project plans and more regarding digital accessibility.
Easy Checks, a First Review — Also from W3C, a quick checklist on how your website holds up to some basic points.
BAD: Before and Afters — Again, from W3C, an example of retrofitting a website with accessibility and just how little actually ends up changing.
#A11Y — The hashtag that is used for anything related to accessibility, The Accessibility Project is a great resource with patterns, how-to’s, checklists and more.
Screen Reader Demo — This is a great video walking through how someone uses JAWS, the most popular screen reading software, to navigate the internet. It’s very useful to hear the order in which things are read, described, and taken in, as well as how links are accessed. The creator of the demo also really speaks to what should be considered when making a website for people that need to use this kind of software on a daily basis.
