Design With Accessibility in Mind

Most designers don’t think about accessibility, but it affects branding, design, documents and websites. It’s a great way to differentiate yourself from other designers while helping your clients reach more people and legally protecting them.

I’ve been creating accessible InDesign and PDF files and websites for the past 3 years, when I was trained in InDesign and PDF accessibility by a colleague who is one of the top accessibility consultants to the U.S. govt. I also provided InDesign accessibility training at the U.S. Dept. of the Interior in May, and I have an upcoming website accessibility course. So I’ve been doing a lot of this work for the past three years.

What Is Accessibility?

So let’s talk about what accessibility even is. First, accessibility is inclusive of everyone. “Accessible” means an individual with a disability can access the same information and have a similar experience as someone without a disability.

Accessibility also pertains to construction, such as wheelchairs ramps and curb cuts (where the sidewalk dips, to allow for your shopping cart to easily go from the store to the parking lot). But for the purpose of this episode, I’m focusing on how accessibility applies to the types of work that designers do.

The Numbers

So how many people have a disability? I mean, a lot of people think that number is very small. Let’s get into some facts.

6.4 million people in the United States have a visual disability such as:

• Color blindness
• Low vision
• Blindness
• Cataracts

10.5 million have an auditory disability such as:

• Deafness
• Hearing loss

20.9 million have an ambulatory disability such as:

• Lost limb
• Chronic arthritis
• Broken arm (a temporary disability)

14.8 million have a neurological or cognitive disability such as:

• Dyslexia
• Stroke
• Cerebral palsy
• Multiple sclerosis

Worldwide, that percentage is at 15% or about 1 billion people.

Now, a disability could affect someone of any age or race. Most people seem to associate disability with blind people or older people. Many of the ones I just mentioned are not vision related and are not obvious when looking at someone. A disability could be permanent such as the result of a birth defect or stroke, or it could be temporary, like I mentioned, a broken arm.

Most people don’t think about accessibility at all or think it doesn’t apply to them, unless they know somebody with a disability.

Just think if one day you weren’t able to use a mouse. What would you do? You could use a lefthand mouse. You could use the keyboard. But most websites are not set up properly for keyboard navigation or an assistive device. So you may no longer be able to access a lot of the content on your favorite websites. And wouldn’t that make you mad?

Assistive Technology

So let’s talk about assistive technology. Some people with a disability may use an assistive device or software. That could be:

• A screen reading device and software,
• Alternative keyboard,
• A sip-and-puff system,
• A joystick,
• Trackball,
• Wand and stick,
• Hands-free electronic pointing device,
• Touch screen.

Someone may have a disability and not use an assistive device or assistive software.

When Accessibility Is Ignored or an Afterthought

Branding

It can actually become a branding issue. Colors in the brand color palette may need to be modified (either lightened or darkened) or different ones chosen all together.

I see this a lot when I’m remediating InDesign files. I’ve had to modify color palettes, which, obviously, client’s not thrilled about, and there can be a lot of back and forth presenting some different options for them: “OK, we can change this color to this one, or we can darken it some or we can make this text larger in order to meet contrast requirements.”

It can be a lot of work. When this is brought up earlier on in the process, the better because otherwise it could end up in extra work but what if they end up having to go back and redo previous documents and all these other things with a new color palette. That’s a lot of work.

Documents

When it comes to documents, users of screen reading software or devices cannot access some or all of the content, or the content may be presented in the wrong order. The order you see is not necessarily the order a screen reader would read it.

Websites

When it comes to websites:

• Assistive devices may not be able to determine what’s navigation, a header, footer or a heading, and then the user has no idea where they are on the page or what the page is even about.
• Keyboard users or those using an assistive device cannot access the site navigation, so they can’t get around the site or can only get to certain pages.
• Someone using a screen reader may have to hear all the menu items on every single page before they get to the page content. Someone using a keyboard would have to tab through all the menu items on every page before getting to the actual page content. That’s a huge nuisance.
• Colorblind users or somebody with low vision might not be able to make out hyperlinks that are only distinguishable by color, instead of those that have an underline or a color with sufficient contrast from the body text.
• A user might not be able to submit forms or tell what the error is on a form and how to fix it when they go to submit a form.

Why You and Your Clients Should Care

Negative Impressions

Clients should care because people with a disability are three times as likely to avoid a business or organization and twice as likely to dissuade others from them because of a negative diversity reputation, according to the Australian Human Rights Commission.

Lost Sales or Donations

According to a UK study, 71% of disabled users leave a website that is not accessible. Think of how many lost sales or donations that could be for a client if you’ve potentially got like 15% to 20% that is leaving your website.

Potential Legal Issues

There are potential legal issues. A lot of lawsuits have been occurring in the United States, especially in New York and Florida, where lawyers have been going around looking for websites that aren’t accessible, whether or not that business needs to comply with an accessibility law. It ends up costing the client a hefty fine, and someone could come along and sue them again while they are in the process of trying to fix their site.

The number of website-related lawsuits in the United States that have been filed under the Americans With Disabilities Act Title III almost tripled from 2017 to 2018, and, this year — 2019 — has been showing an increase. The number is expected to get to over 2,400.

Now that’s just in the United States. But accessibility is a worldwide issue.

I’ve heard of a few cases where designers and developers of websites have actually been sued after their client gots sued, where the client’s trying to go after that designer or developer to recoup the fees they just had to pay.

Remediation

When something is not accessible, it needs to be remediated. That means that the document or the website is being made accessible after it’s been created.

It’s usually costly, definitely more so than when it’s addressed early on.

Remediating from source files (by that, I mean InDesign, QuarkXPress, Word, PowerPoint, etc.) is easier and less costly than trying to remediate a PDF. I actually had a project that cost the client double what it should have cost because it wasn’t set up properly in InDesign. I had to redo everything with the layout and then address the additional accessibility portion of the work.

Benefits of Accessibility

Let’s talk about the benefits of accessibility, and by the way, these make for really good talking points with clients.

The Right Thing to Do

It’s the right thing to do and it’s good business. It leaves a positive impression. It results in more sales or donations because the site is usable by more people.

Better Experience

Another reason is that it results in a better experience for all users:

• Faster page load times on websites;
• The ability to easily visually scan a page to find the information they need;
• Enhanced readability, as opposed to tiny light-colored text that some designers think is stylish;
• Clearly distinguishable hyperlinks;
• Ability to read captions along with audio or video, which is great for when you’re in a crowded coffee shop trying to listen to a video, or somebody who is not a native speaker of a language.

Enhanced SEO

What’s good for accessibility is good for SEO — search engine optimization. Accessible sites have leaner website code, which results in faster page load times, and faster page load times help sites rank higher in Google. But you also get enhanced SEO from properly formatted content, and that means that search engines will find it and understand it.

Potential Legal Protection

Another benefit is that addressing accessibility prevents potential legal issues. Here are some examples of laws.

In the United States, we’ve got:

• Section 508 of the Rehabilitation Act of 1973, which outlines accessibility standards for the federal sector. That means federal agencies, contractors and employers, and nonprofits or schools who receive funding from the federal government.
• Americans With Disabilities Act Title III that requires certain private and public entities to comply with its regulations.

In Australia, they have the Disability Discrimination Act of 1992, and the UK has the Equality Act of 2010.

Some laws are vague, some are ambiguous, and some are stricter than others. In some cases, a client may be required to comply with not only a country-wide law but a state law as well.

Key Differentiator

Now a huge benefit for you — like I mentioned in the beginning — accessibility can be what differentiates you from other designers and developers because most of them are not bringing up this topic. If you bring it up, you set yourself apart, even not knowing everything about it. There is so much to know in the first place.

Things to Consider

So now that you have a better understanding of accessibility, let’s talk about some things to consider when designing.

Color

The number 1 rule of accessibility is that color alone cannot be used to convey meaning. So you distinguish body text, headings, lists, etc., with tags and differences in size, font weight, styling and so forth. Then you must ensure sufficient color contrast.

So when working on a document or website:

• Use a color contrast checker such as WebAIM to check the contrast ratio between foreground text and background colors.
• If you’ve got, say, a line graph, you could use different symbols at various data points or ensure sufficient contrast between colors to distinguish the lines from one another.
• If you’ve got a pie chart, you can use patterns or sufficient contrast to distinguish the various pieces of a pie.
• Use a color-blindness simulator to check images such as maps and pie charts to make sure they can be understood where there are colors adjacent to one another. Those colors might blend together to somebody with a vision issue.

Structure

Documents must be able to be exported to a tagged PDF, and websites need an accessible structure as well. Certain semantic HTML tags are used for both. By semantic, I mean they don’t use div tags where semantic ones should be used. Semantic tags convey meaning, and div tags do not. Accessibility-ready WordPress themes use semantic HTML tags.

Text

When it comes to text-based content, you want to format headings and body text properly. For instance, you don’t style text as a heading for cosmetic reasons or format them in the wrong sequence.

Headings are helpful for people who want to scan a page before reading more. They help search engines find your content and they help people using screen readers to understand the page content (what’s a page title vs what’s a heading, body text or a lists.).

Images

When it comes to images, search engines and screen readers cannot see text that is part of an image and they can’t see images. Alt-text is needed to convey that information on meaningful images. By “meaningful images,” I mean logos and infographics and some photos. So Alt-text should be added to them in documents, on websites and now you can even do so on many social media sites when you upload an image.

Decorative elements, on the other hand, should be ignored, and that means you would have empty Alt-text.

Audio and Video

When it comes to audio and video content, captions and transcripts not only help people with a disability but those are also useful for:

• those who are not native speakers or
• those who are trying to listen in a crowded place or
• someone who may have to mute the volume so they don’t disturb someone in the same room.

Transcripts are great for accessibility and SEO too. They allow someone to read if they prefer to do that. I know, with my podcast audience, some people prefer to read than listen. When they go to the episode page, they can listen right there or just read, or they can read along with the audio. It gives people another way to consume the content.

Motion

When it comes to motion, you don’t want to avoid any flashing or movement faster than 3 times per second. This can actually induce a seizure in some individuals. So when you have issues convincing a client not to go with a slider or an ugly flashing design element, you can say, “Maybe that’s not accessible.”

So there. I just gave you an out if you don’t want to use a slider.

Guidelines

There are guidelines for accessibility, and those are called Web Content Accessibility Guidelines (WCAG and pronounced “wi-cag”). You can find those at webaim.org/standards/wcag.

You can use checkers to look for some of the issues that I’ve mentioned.

• For PDFs, you can use the Acrobat accessibility checker, but it does not check for everything.
• For websites, you can use a site checker such as wave.webaim.org or browser extensions such as Tota11y, Wave, axe, SiteImprove.

There’s much more work than this to achieve accessibility, but these are a good start.

Originally published as a podcast and transcript at https://creative-boost.com/design-with-accessibility-in-mind/