Web Accessibility: How Designers and Developers Can Create a More Inclusive Internet
The past several months have forced all of us to stay home. More than ever, our interface to the outside world has been the Internet. Unfortunately, the web is not a very considerate place for millions of people.
Through negligence or naïveté, too many websites are not designed or built in a way that is accessible to individuals with limited vision, hearing, motor functions, or cognitive abilities. Only 2% of websites are fully accessible.
As UX professionals, we need to do better.
In a time when awareness for social justice and inclusivity is at an all-time high, SDXD partnered with Angela Noble and Cris Noble of Noble Intent Studio to explore the topic. Website Accessibility: Creating a more inclusive Internet through design & development was a virtual meetup sponsored by Adobe XD. In the spirit of inclusivity, SDXD also promoted to meetup groups in other cities around the US.
Here’s what we learned.
“The power of the web is in its universality. Access by everyone, regardless of disability, is an essential aspect.”
— Tim Berners-Lee, W3C Director and inventor of the World Wide Web
Making your website accessible means making it better for everyone.
- Design decisions, such as color, contrast, and size influence accessibility.
- Technological decisions that improve accessibility also have a positive impact on SEO (search engine optimization).
What is A11Y?
“A11Y” is a numeronym for accessibility. There are 11 characters between the A and the Y.
A website is accessible when its content is available to everyone and useful to anyone. Four types of impairments come into play when someone is trying to use a website: visual, cognitive, auditory, and motor. Disabilities can be temporary, permanent, or situational.
When you’re holding a baby or driving a car, you are effectively disabled. When you’ve had too much to drink, your cognitive functions are temporarily impaired. Loud environments like a concert or bright sunny days can also limit your ability to consume the content on a website.
Just like “curb cuts” on a sidewalk, affordances such as ALT text make websites more accessible.
Advocating for Accessibility
A couple of years ago, one of Noble Intent’s clients expressed concern about lawsuits for ADA compliance. Since then, Angela and Cris have been educating themselves about accessibility and advocating for accessible design and development practices.
They’ve even compiled their research into an ebook about website accessibility.
Angela suggested that accessibility advocates should reframe the conversation.
To start, say something like, “Inclusive design is about making the experience better for everyone, not about making it less good for some.”
Next, connect accessibility to business goals. Here are three points you can use to make that case.
- ADA Compliance = Legal Protection
- Accessible Design & Development = Improved SEO
- Considering All Humans = Larger Audience
One final technique you can use to get people on-board with website accessibility is to remind them that we are all subject to being disabled. When you hold a baby, break an arm, or even drink too much, you’re temporarily disabled. In these cases, assistive technology can be a big help.
“Inclusive design is about making the experience better for everyone, not about making it less good for some.”
— Cris Noble, Co-Founder at Noble Intent Studio
Assistive Technologies
Cris Noble and I both wear glasses. Glasses may be the most prolific form of assistive technology on the planet. Other types of assistive technology include canes, voice assistants, and screen readers.
It’s important to remember that people don’t just view websites anymore. They are often read aloud by Siri or a screen reader. These assistive technologies are dependent on standards-compliant code. Otherwise, the information on your site becomes unusable.
The presentation included some great examples of assistive technology. Angela and Cris demonstrated what happens when sites follow web standards and how an experience becomes unusable when people ignore accessibility.
The entire session was recorded. You can watch it here.
Low-Hanging, High-Impact Changes
Equal access means equal opportunity. Accessibility supports social inclusion for people with disabilities as well as people with varying degrees of connectivity (rural, elderly, disadvantaged, developing, etc.).
There is a lot of low-hanging fruit. Implementing quick, simple fixes can go a long way for usability. Angela and Cris covered seven opportunities.
- *Color Contrast
- *Image ALT Text
- *Skip Navigation
- Empty Links & Missing Form Labels
- Logical Outline Order
- Add an Accessibility Statement to Your Website
- User Testing
I’ve written up the details for my top three takeaways. For the full lesson, please watch the recording.
Color Contrast
WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. WCAG 2.1 requires a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders). WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.
Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.
Image Alt Text
Alternative text is an HTML attribute that describes images used by screen readers. It provides context for users who can’t see them.
These tags are also a consideration for search engines because they allow crawlers to understand (by reading the descriptions of) content. Alt tags describe the object itself and, generally, the purpose it serves on the website.
Cris explained that not every image needs an alt tag. For example, if an image is used only for decorative purposes but doesn’t meaningfully impact the intent of the page, you can leave the tag blank (alt=””).
Skip Navigation
Pause for a second and think about how you interact with web pages. Do you read every word, or do you skim?
I’d be willing to bet a bowl of phở tái from Shank & Bone that you skip around.
Unless you include a “Skip Navigation” link, people using screen readers have to listen to your main navigation items every time a new page loads. Skip navigation is such a simple affordance, but because it happens at the code level, many UX professionals don’t even know to consider it.
Now you do thanks to SDXD, Noble Intent Studio, and Adobe XD.
Keep Learning
There are many incredible resources on the Internet.
Angela and Cris were kind enough to share some of their favorites with us. Please continue to educate yourself and advocate for a better, more inclusive internet.
Helpful Resources
Even More Accessibility Content
About the Author
Hi, I’m Brent Summers. I have a deep appreciation for design, a master’s degree in ambition, and a way with words. My passion is executing strategic marketing initiatives that increase brand awareness and drive business growth.
I joined the SDXD Advisory Board in 2019 to forge new connections. San Diego has so much potential, and I want to play an active role in elevating our reputation as an innovation center.
Please connect with me on LinkedIn or subscribe to Full Stack Content, my email newsletter about the ins and outs of planning, writing, and marketing exemplary content.
About SDXD
SDXD (San Diego Experience Design) is a catalyst for a vibrant San Diego experience design community. A professional networking and education organization, they serve primarily UX research and design practitioners but welcome anyone who works in, or is simply interested by, the various experience design disciplines and techniques (UX, IxD, usability, prototyping, HCI, service design, industrial design, etc.). Find them at: http://www.sdxd.org/ http://www.meetup.com/s-d-x-d/
Volunteer, sponsor, and get involved in this community. Find out how by visiting us at: http://www.sdxd.org/
These events are made possible by great people and by the companies that put us to work. If you or your company would like to sponsor us, we’d love to talk.
Download our one-page about SDXD and the type of events we host. http://www.sdxd.org/sdxd-community/
