Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Inclusive Development: Using Style Guides to Improve Website Accessibility

199 views

Published on

The A11Y style guide comes with pre-populated accessible components that include helpful links to related tools, articles, and WCAG guidelines to make your site more inclusive.

By using a reusable, accessible, component driven approach and thinking about inclusiveness from the start, we can get a head start on building accessible websites. So ultimately you and your clients save time and money, plus your site is a little more inclusive…what’s not to love?

http://a11y-style-guide.com/style-guide

Published in: Technology
  • Be the first to comment

Inclusive Development: Using Style Guides to Improve Website Accessibility

  1. 1. Inclusive Development Using Style Guides to Improve Website Accessibility
  2. 2. Carie Fisher @cariefisher slideshare.net/CarieFisher Carie has been building websites since 2005 and has been exclusively working with Drupal since 2009. As the Accessibility Lead, she works with the Mediacurrent team and clients to make sites more inclusive to others. In her role as a Senior Front-End Developer at Mediacurrent, she thrives on the challenge of turning a static mock-up into a responsive, live site that is both beautiful and functional. Accessibility Lead & Sr. Front-End Developer cehfisher
  3. 3. What exactly is the role of a Front-end developer?
  4. 4. Mr. Smeds & Mr. Spats Mr. Spats Had twenty-one hats, And none of them were the same And Mr. Smeds Had twenty-one heads And only one hat to his name. Now, when Mr. Smeds Met Mr. Spats, They talked of the Buying and selling of hats. And Mr. Spats Bought Mr. Smeds’ hat! Did you ever hear anything Crazier than that? Shel Silverstein (A Light In The Attic)
  5. 5. • Website/Component Designer • UX/UI specialist • CSS/SASS creator • HTML/TWIG builder • JS/jQuery writer • Site-builder/Themer • QA bowser tester • Accessibility expert?? Front-end Devs Wear a Lot of Hats
  6. 6. What, Who, and Why of Website Accessibility
  7. 7. What is website accessibility anyway? Web accessibility means that people with disabilities can use the Web. More specifically, Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web. - Web Accessibility Initiative (WAI)
  8. 8. EVERYONE!!! 57 million Americans (~20%) have some type of DISABILITY • Visual impairments • Hearing impairments • Cognitive impairments • Mobility impairments • Temporary Disabilities • Seizure Disorders • Aging/ESL population • Many more… Who is website accessibility for?
  9. 9. Why should I care about website accessibility? Right Thing to Do - Everyone should have full access to all the wonders of the web…as well as all the useful information Smart Thing to Do - Opens your site to a wider audience (potential 20%+ increase users), good for SEO/search bots/Google ranking, etc Lawful Thing to Do - Government-funded programs/schools, airlines, non-profits are required, the rest hope they won’t get sued
  10. 10. What is Inclusive Development?
  11. 11. It is a way of rethinking development, where we go beyond just the base level of access to information. Inclusive development means making something valuable, not just accessible, to as many people as we can. It is about putting “Accessibility First.” Inclusive Design -> Development
  12. 12. “By choosing a typeface that we feel the average user could read we’d be consciously alienating a section of our users. Instead, by selecting a typeface which is workable for those who struggle to read, we arrive at a choice that works for everyone. This is efficient and effective inclusive design.” Heydon Pickering (Inclusive Design Patterns) Choosing an Inclusive Font serif sans-serif
  13. 13. Back in 2009, the “Mobile First” approach appeared, where we design/develop for smaller screens first, then add more features and content for larger screens. Now in 2017, “Accessibility First” may seem just as daunting and impossible…but it isn’t if you have the right tools and attitude. Accessibility First Approach
  14. 14. Why use Component Driven Development?
  15. 15. Component Driven Development • Breaks the site down into manageable components • Less development time with reusable components • Front-end and Back-end developers can work simultaneously • Clients get preview of build process and can use living style guide as reference
  16. 16. The purpose of KSS is to help you produce a HTML style guide tied to CSS documentation that is easy to read, yet structured enough to be automatically extracted and processed. http://warpspire.com/kss Knyle Style Sheets (KSS) Node
  17. 17. FE Devs + Accessibility + Inclusive Dev + Components =
  18. 18. The A11Y style guide comes with pre-populated accessible components that include helpful links to related tools, articles, and WCAG guidelines to make your site more inclusive. http://a11y-style-guide.com/style-guide A11Y Style Guide
  19. 19. • As a reference. • As a base for your own style guide. • As a base for creating your own accessible components. • As a base for a new accessible theme. • Contribute to the guide and make it better. • Fork it and give your own spin to it. How Can I Use the A11Y Style Guide?
  20. 20. Feedback Joind.in: https://joind.in/talk/454c9 Twitter: @cariefisher
  21. 21. @Mediacurrent Mediacurrent.com Thank you! facebook.com/mediacurrent

×