Foundation Now Helps You Build Accessible Sites

wrote this on in . 571 reactions

Foundation accessibility

Last time on the blog, we told you about the new grid in Foundation for Apps. A new framework doesn't mean we've abandoned Foundation 5, which is now part of a larger Foundation family that also includes responsive emails. Today, we're excited about our latest release of Foundation for Sites — version 5.4.

This isn't just another point release. It's a step toward creating a fully-mature framework that's accessible for everyone. Yep, you heard right — accessible. Along with the usual stellar fixes and features — like multi-level off-canvas navigation — we focused on web accessibility for this release.

A lot of good people have been making the web more accessible for people with vision, hearing and motor skill impairments. More and more designers are talking about accessibility. That's because the web is maturing and becoming less of a wild, wild west. There are new guidelines, and in some cases new laws, for accessibility. And Foundation is here to help you build accessible sites and products that work across devices, from desktop to mobile.

A Site Without Accessibility is Like a Building Without a Wheelchair Ramp

For someone who can't see, hear or use their hands, inaccessible sites are frustrating experiences. The W3 has many stories of how folks with impairments use the web. In one story, an accountant, named Ms. Laitinen, uses a software that reads her screen back to her and can't use a mouse. If there's no keyboard support on a site, she won't be able to get very far. Or she'll have to go from top to bottom before she can find what she's looking for.

There's a percentage of the population that's being left out in the cold when a site isn't accessible. An estimated 56.7 million people in the United States have an impairment. There are 15 million people — 15 years or older — who can't see or hear in the US alone, according to a 2010 census report. It's another 6.9 million for folks 65 and older. And 6.9 million workers in the UK also have some sort of impairment. Worldwide, 1 billion people live with an impairment. Having your site inaccessible to this population excludes an entire audience. And that's like constructing a building without a ramp.

We're Going to Have to Design Accessible Sites

Like we said, the web is becoming less the outlaw frontier it started as. There are more regulations and laws that require sites be accessible. Canada's government has standards for accessibility on the books that was implemented last year, something they've been working on since a 2010 ruling saying that all sites must be accessible.

Therefore, we're going to have to design accessible sites. With that in mind, the Foundation Team delved deep into the WC3's ARIA guidelines.

Accessibility FTW

The most common impairments for web users are those with problems seeing, hearing or a physical inability to use a mouse. Knowing that, we added as much of the standards into the codebase without changing or breaking the existing structural markup. There's now an accessibility section to the Foundation Docs, so you can easily get started. The section also includes guidelines and best practices.

This is our first foray into accessibility so not every component may be optimized. We'd love to hear from you on what we can improve — check out the form below.

We tested again and again to ensure Foundation's accessibility. We used tools such as ChromeVox screen reader and Chrome Accessibility Dev Tools to help us out. There's also the nifty Revenge.CSS, which allowed us to scrub our code. We also made sure the components could be used with a keyboard alone.

We're also reaching out to folks with vision or hearing problem to help us make improvements, as well as those involved in the ARIA guidelines.

Help Us Make the Web More Accessible

As this our first step into the pool of accessibility, we realize this doesn't cover everything. It's a starting point. We'll continue to move forward to ensure our framework helps people build accessible sites.

You can join us and make the web better. Have you made an accessibility plugin for Foundation? Make a pull request on GitHub. Or just share your knowledge. Any way you choose to contribute helps the Foundation community and the web as a whole become better.

You can also get in touch below or on the Foundation Forum.

Be part of Foundation Accessibility:
Brutalism
17 Web Design Trends That Will Take Over 2017
Container queries 2
Foundation & CSS Grid: Think Beyond the Page
Building blocks graphic
Foundation Building Blocks: Over 100 Components to Jump Start Your Projects