Inclusive Development: Using Style Guides to Improve Website Accessibility

A presentation at MidCamp in in Chicago, IL, USA by Carie Fisher

Inclusive Development Using Style Guides to Improve Website Accessibility

Inclusive Development Using Style Guides to Improve Website Accessibility

What Is the Role of a Front-end Developer?

What Is the Role of a Front-end Developer?

Front-end Devs Wear a Lot of Hats

Front-end Devs Wear a Lot of Hats

What, Who, and Why of Website Accessibility

What, Who, and Why of Website Accessibility

What is website accessibility?

What is website accessibility?

Who is website accessibility for?

Who is website accessibility for?

Why should I care about website accessibility?

Why should I care about website accessibility?

We Are All Temporarily Able-Bodied

We Are All Temporarily Able-Bodied

Accessibility Roadmap

Accessibility Roadmap

Awareness and Education

Awareness and Education

Build It in from the Beginning

Build It in from the Beginning

Remediation

Remediation

Content

Content

Run Automatic & Manual Tests

Run Automatic & Manual Tests

Ongoing Process

Ongoing Process

Inclusive Design and Development Workflow

Inclusive Design and Development Workflow

Inclusive Design to Development

Inclusive Design to Development

Choosing an Inclusive Font

Choosing an Inclusive Font

Accessibility First Approach

Accessibility First Approach

Component Driven Development

Component Driven Development

Accessibility (A11Y) Style Guide

Accessibility (A11Y) Style Guide

How Can I Use the A11Y Style Guide?

How Can I Use the A11Y Style Guide?

Thank You!

Thank You!

Note: I could only find the newer presentation style of this talk. Visually it is different from the presentation in the video, but it is the same content.

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 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.

In the spring of 2017, I developed an open-source KSS node style guide demonstrating good accessibility practices. The style guide comes with pre-populated accessible components that include helpful links to related tools and articles to make your site more inclusive. 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

  • What exactly is the role of a Front-end developer?
  • What, Who, and Why of Website Accessibility
  • What is Inclusive Development?
  • Why use Component Driven Development for Accessibility?
  • Demonstration of KSS node-based accessible style guide - http://a11y-style-guide.com/style-guide

Video