Adobe Creative Cloud

May 6, 2015 /

Intro to Coding and Designing For Accessibility

People use the web in a variety of different ways, but a mistake that designers and developers sometimes make is to assume everyone uses the web in the same way as we do. This is why, especially over the past 12 months, people have started talking about accessibility on the web. Making websites as accessible as possible to everyone including people who are partially or fully blind, people who rely on screen readers, and people who navigate using only a keyboard, is not only becoming a more important conversation among creators, but in many countries it’s now the law.

We sat down with Avery Swartz, a web designer and founder of Camp Tech, to talk about accessibility and why it should be on the forefront of every web designer and developer’s mind.

Three Arguments For Web Accessibility

Swartz lives in Toronto, Canada where making public websites accessible is mandatory by law. But that’s not the only reason why she makes a case for it when she’s pitching accessible design to her clients.

1) Good Accessibility is Good Business

“Be a nice person,” Swartz says, naming this as her number one reason for selling accessibility. “Making your website more accessible for everyone feels like the morally right thing to do. It’s nice, it’s inclusive, and odds are it’s in your client’s best interest to make their website as accessible as possible. It opens up the potential customer base. Good accessibility is good business and it’s being a good human to other humans.”

2) In Many Countries, It’s the Law

While it isn’t yet a law for public websites in the United States, web accessibility is becoming the standard in countries across the world. Multiple provinces in Canada now require public websites to abide to what’s called the Web Content Accessibility Guidelines (WCAG) 2.0, as does Norway, Australia, Ireland, Italy, to some extent the United Kingdom, and various other countries.

Federal websites in the United States are required to meet these guidelines.

3) Google Likes It

Google has hundreds of factors that go into determining how high a website ranks in its search engine, one of which they’re revealed is clean semantic code. This happens to align nicely with writing code for accessibility.

“Accessible code and semantic code is a great way to future-proof your code,” Swartz says. “If you do everything according to standards, odds are it’s going to last a little longer for your clients and they’re not going to have to redesign or rebuild their website every two years.”

Where to Start When Designing For Accessibility

Designing for accessibility requires a whole new way of thinking, but luckily designers and developers can begin making their websites more accessible by implementing a few small changes and paying attention to constraints.

“The big ones people are talking about are color, contrast, font weight and forms,” Swartz says. “Those are the gateway drugs into accessibility.”

Font Color

One in 12 men, roughly eight per cent of the population, are colorblind. Whether it’s full colorblindness, red/green colorblindness, or another form, designers have a lot to think about when it comes to choosing the right font color.

“People tend to think you’re either fully sighted or you’re totally blind, but there’s a lot in the middle,” Swartz says. “When designers are choosing color palettes, one of the constraints that I think a lot of web designers need to be considering are color palettes that are satisfactory to people with all different levels of vision.”

Thankfully, there are tools for testing color on websites and generating accessible color palettes. Swartz recommends ColorSafe and WebAIM.

Typography

Similar to color, contrast in typography is also important. “Make sure you have enough contrast between your font weightings and font color so they don’t blend together into one,” Swartz says.

Forms

When you’re using a form to communicate—either through a login form, a signup form, or a checkout form—you want to ensure that form is accessible. This could be your client’s point of sale, and you want to ensure this transaction is as frictionless as possible or you risk losing potential customers.

“For example, if you have an area on a form where somebody didn’t complete it properly, if that area turns red to communicate something’s wrong, for some people that’s not good enough, they can’t see that it turned red, so they get confused. So maybe use a little icon and then also have it red so at least people can see the icon,” Swartz recommends.

Taking It to The Next Level

These are just starter points. You can really dig deep and get into accessibility so a user is fully able to navigate a website without having to use a mouse. “It can be a very humbling experience to try to navigate a website using only your keyboard,” Swartz says. She notes that well-designed accessible websites factor physical disabilities into the designs and codes as well. “You should be able to navigate through a website by using the tab button to jump between forms, then using the up and down buttons to navigate through and to move and scroll.”

Testing The Accessibility of Your Sites

Curious to see how accessible your sites are? Swartz recommends the following resources to test your site against WCAG 2.0 guidelines:

Making Websites Accessible For Everyone

“Just remember that we’re not designing for ourselves, we’re not building something for just this small percentage of the population that is lucky enough to be on high speed internet in a first world country without any disabilities at all,” Swartz says. “We want to make the web a wonderful experience for everyone. At the end of the day that’s being a good person, and it is also totally good business.”

Adobe is committed to helping designers create accessible web products. For more information, visit adobe.com/accessibility.

Join the discussion

  • By Steve Evans - 10:44 AM on October 4, 2016  

    well, I love the message on this page – I’ll share it with my web-development students as their intro. I just wish your link-colours were stronger!