Inclusive Development: Using Styleguides to Improve Website Accessibility

We wear a lot of hats as front-end developers. Depending on the client or company you work for, you may be the designer, UX/UI specialist, site-builder, QA tester, and developer all rolled into one. How can we possibly add the accessibility hat on top of all that? What accessible pieces should we even include? Which pieces are easy wins vs. impossible juggernauts? How do we implement inclusive design and development when a project does not have a lot of time or budget to include that piece? One way we can tackle these issues is by using an accessible component driven approach. By thinking about inclusiveness from the start, we can get a head start on accessibility while still building the required site components.

At Mediacurrent, we have developed an open-source theme generator complete with a KSS node styleguide option. The styleguide comes with pre-populated accessible components that include helpful links to related tools and articles. These components also serve as a guide for both HTML markup and SCSS/CSS code, to inform designers, front-end and back-end developers at every stage of the website’s creation.

Session Outline

• Inclusive development: a better way to approach accessibility

• Making a component driven approach accessible: how can it save time, increase inclusivity and improve the development process, while also benefiting the client  

• Demonstration of Mediacurrent’s accessible styleguide

About the Presenter
Carie Fisher - Accessibility Lead & Senior Front-end Developer

Carie has been focused professionally on 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. She is passionate about website accessibility and is a STEM advocate.