In Web Design, Accessibility Shouldn’t Be an Afterthought

Spread the love

ᕦ( ͡° ͜ʖ ͡°)ᕤ The ultimate flex: a full set of EoD Mag on your bookshelf ᕦ( ͡° ͜ʖ ͡°)ᕤ

In Web Design, Accessibility Shouldn’t Be an Afterthought

In Web Design, Accessibility Shouldn’t Be an Afterthought

More disability-led teams and semantically-rich markup, less needless decoration

“It isn’t hard to lose sight of the bigger picture for the things we help build: How could it be abused? Who does our work support? What are the potential costs, and who would bear them?” These are some of the questions web developer Mat Marquis says designers should ask themselves at the very beginning of any design process. Marquis specializes in inclusive design on the web, and he advocates for thinking about accessibility not as an afterthought or an add-on, but as something to consider through every step of building a website. This is because, even when we have the best intentions, our unconscious biases often still dictate the design decisions we make—leading to an end product that is inaccessible to the very users we’re trying to design for in the first place.

Examples of this paradox are everywhere. Take Instagram’s algorithmically-generated alt-text feature: In 2018, Instagram implemented an AI-generated alternative text feature so that users can hear descriptions of photos through their screen reader while scrolling through the platform. The feature makes use of an object recognition technology that relies on AI to create alt-text automatically upon upload, and it was released specifically for people who are blind or have low vision. Alex Haagaard, Director of Research at The Disabled List, a disability-led self advocacy organization for creatives, says while the idea is well-meaning, the end result is not very effective. When reviewing the AI-generated alt-text for the Mona Lisa, Haagaard found the description to only read, “Image may contain: one or more persons.” Another painting, David Hockney’s “Mr and Mrs Clark and Percy” contained slightly more descriptive alt-text: “Image May Contain: one or more people, people standing and shoes.”

Released eight years after Instagram was originally designed, the alt-text feature was an update, or an “improvement,” applied only after the company came to the realization that its platform isn’t accessible for the 285 million people with vision impairment. And while it may look like a clever technological solution to this problem, the AI-generated alt texts don’t actually work for the community they are meant to serve. “It doesn’t create an inclusive experience for screen reader users. It doesn’t provide any call to action for content creators to make their posts more accessible,” says Haagaard. “It means well, but the intentions are kind of all there is to it.”

So how can designers improve the functionality of digital experiences for disabled users without allowing their own biases to define the wrong problems and create the wrong solutions? How can designing for accessibility be built into the entirety of the design process, not just slapped on at the end? We spoke with accessibility experts and activists to get advice on some key guide points to keep in mind while embarking on any design project.

Bias is unavoidable, but one crucial way to mitigate it is to ensure that the community you’re designing for is involved in the design process from the beginning. At the very least, consult with disabled users during the research phase and test accessibility with the actual human beings who will be using your product. “Automated testing tools only pick up about 30% of accessibility issues, and are no substitute for human beings,” says content designer Amy Hupe, who worked on the Gov.uk design system and advocates for inclusive design. She urges website designers to not rely on automated testing for accessibility checks, which allow for a series of scripts to test code for the conditions dictated by the Web Content Accessibility Guidelines (WCAG). Test your products with disabled users.

But involving disabled people in the design process is just a start, as Haagaard and Liz Jackson, design strategist and founder of the Disabled List, point out. Their work is focused on building more pathways into design for disabled people. “I think the key thing that we advocate for is that there needs to not just be disabled inclusion, but disabled leadership in these processes,” Haagaard says. Often disabled people aren’t seen as experts in disability, even though, as stated on the Disabled List’s website, “disabled people are the original lifehackers. Our lives are spent cultivating an intuitive creativity, because we navigate a world that isn’t built for our bodies.”

“There needs to not just be disabled inclusion, but disabled leadership in these processes.”

Rather than bringing in a disabled consultant on a project-by-project basis or late into the design process, Jackson and Haagaard are seeking to build long-term relationships between creative organizations and disabled consultants and designers. “Digital spaces, and in particular social media, can be so hugely important because they create social and professional access for disabled people who are otherwise physically and geographically isolated, and whose perspectives are not traditionally represented,” Haagaard says. Considering accessibility doesn’t start with testing an end product, it starts with team building, so consult The Disabled List for finding people to work with, or encourage your company or boss to do so if you’re able.

Avoid design buzzwords and seek out expertise—then pay for that expertise

On the one hand, the notion of “inclusive design” has been gaining some real and valuable steam in the past few years; designers are becoming more aware of the importance of designing for different abilities. Yet on the other hand, as the usage of terms like inclusive design, “universal design,” or “design for all” increase, their meanings have become more abstracted and less specific, thereby reducing their power. As Jackson puts it, designers and brands need to recognize that the language and ideas we’ve been using to define design in the context of disability are not, in fact, accurate. “Nothing we design is going to work for everybody,” she says.

“Nothing we design is going to work for everybody.”

Instead of leaning on buzzwords, Haagaard emphasizes the importance of seeking out expertise and leadership from those that the design process tends to exclude—disabled people of color, impoverished disabled people, and disabled people living in rural areas. “When you only frame disability as a problem to be solved or a checklist of standards to meet, it just becomes a category of marginalization or impairment,” they say.

Haagaard also points out that it’s essential to compensate your collaborators who bring this expertise—including on social media. They recall a pitch competition for designing a product or service for disabled users in which one of the competing teams documented the conversations that people were having about chronic illness through hashtags in its research phase. “That was so incredibly exciting to me, from a methodological perspective,” Haagaard says. “And then I thought about how if they won, this team would be receiving several thousand dollars in seed money, and the people they’d learned from would never receive any of the money or credit or publicity. Many activists have Paypal or Kofi links, or Patreon, and most of them are living in poverty.”

Once you’ve moved from the team-building and research phase of a project to the actual design work, specific considerations for accessibility can vary from project to project. W3C’s Web Content Accessibility Guidelines offer the widely-used standards to meet in order make web content more accessible to a wider range of people, and there are many helpful guidelines to help interface designers with things like color contrast and supporting keyboard navigation. Mat Marquis emphasizes that one of the most important aspects of designing for accessible web experiences is to include semantically-rich markup.

So what exactly does this mean? In essence, semantic markup means writing and structuring HTML so that both users and machines can understand the hierarchy of your content. For example, using a heading tag () will communicate to a sighted user that something is a title, because of how it is styled on the page. It also communicates that fact to a screen reader, which people who are blind or have low vision use to “listen” to a website. Semantic tags such as , , , , and make it easier to distinguish between different types of data, and to understand the hierarchy of how a page is meant to be read. With semantic tags, people who listen to screen readers can get an overview of all of the headings, jump through the content by types of titles, or navigate directly to top-level headings

So if you’re a developer or designer working with HTML, remember to use tags not just for stylistic effect. “We need to be laser-focused on how that page’s content is meant to be understood, not how it should be presented,” Marquis says.

Remember that sometimes less really is more

Marquis also warns that some of the trends we applaud as innovative actually impede access for disabled users. He points to the “neuomorphic” trend in UI design, a term coined by UI designer and writer Michal Malewicz to describe a move from flat and minimal design to a “textureless 3D” feel seen in interface design (think buttons that look like they’re extruding from the background). “It seems so very low-contrast by definition—some of the examples I’ve seen would be exceptionally difficult for partially-sighted users to operate,” Marquis explains.

Liz Jackson says one of the best examples of a truly accessible website was actually designed seven years ago. In 2013, graphic designer Barry Smith developed Txti, a simple content publishing platform that he says was “born of the idea that the power of the internet could be muted by our desire to decorate it.” Originally created for users in the developing world whose 3G networks struggled to load large, complex websites, Smith used the design philosophy of Txti to launch the satirical project motherfuckingwebsite.com. Lightweight and efficient, MFW is essentially a naked website, existing without ornament, with an accessible and responsive layout at any screen size. To quote MFW, “this site doesn’t care if you’re on an iMac or a motherfucking Tamagotchi.”

“The power of the internet could be muted by our desire to decorate it.”

Smith wrote his f-bomb heavy design manifesto also in 2013, a time when skeuomorphic UX design was still cool and had yet to be replaced by minimalist flat design. “It was essentially a roast of all of us web designers and a reminder that beautiful things aren’t always beautiful because of how they look,” Smith says. Years later, the site that was written as a joke is still resonating with people, and could even be considered a source of inspiration for the “Brutalist web design” trend. Smith says that he designed MFW with accessibility in mind and wants people to remember that “there are just so many ways that using basic HTML correctly helps us out.”

In Web Design, Accessibility Shouldn’t Be an Afterthought

Or Filter By Your Interest

Sorry, no results were found.

In Web Design, Accessibility Shouldn’t Be an Afterthought

“It isn’t hard to lose sight of the bigger picture for the things we help build: How could it be…

Because we can read your mind, we think you’ll be into:

What Does It Mean to Code an Intimate Connection?

“Designed to be deleted” dating app Hinge is on a quest to get to know me on a level that other apps…

The Design Collective Taking on Structural Racism in the Industry

For Vanessa Newman, building communities is like second nature. Their most recent one, Design to Divest, is on a mission…

Can We Trust Digital Assistants to Keep Our Data Private?

Walking through the world, we leave a trail of bits and bytes in our wake. People generate an astonishing amount…

The Animation Studios Fostering Localized, Original Storytelling in India and Pakistan

When the animated short film Wade opens to the stillness of a Kolkata ravaged by the forces of climate change,…