Design for Performance & Accessibility

By Jen Strickland

When do you think about performance and accessibility?

Accessibility & Performance? Really?

Accessibility & Performance? Really?

TL;DR

Accessibility & Performance? Really?

Bonus: it’s more efficient and cost-effective to have accessibility figured out before development or launch, opposed to hacking add-ons or addressing a lawsuit.

A great experience is performant, usable, and ought to be so for all.

Shift Left: Prioritize Performance & Accessibility from the Start

graphic showing five stages of a project process, idea, design, development, QA, and launch - with performance and accessibility as priorities in design phase

Shift Left: A Process

This talk outlines a design process prioritizing performance and accessibility from the beginning of your project, including:

  • “Design in the browser” methodology
  • QA for accessibility and performance throughout
  • Specs provided for design and accessibility
  • Test constantly — can’t stress this enough

Shift Left: Getting Started

“Design in the browser” methodology

  • Semantic hierarchy for content
    <h1>First Level Heading</h1>
     <h2>Second Level Heading</h2>
      <p>Admittedly, a simplistic example.</p>
                    

Shift Left: Getting Started

“Design in the browser” methodology

  • Include accessibility in the code
    (within designer’s ability — always keep learning)
    <form>
     <label for="sample">Label</label>
     <input type="text" id="sample" name="sample" />
    </form>
                    
  • Native elements for interaction

Shift Left: Getting Started

QA for accessibility and performance throughout

  • Validate design using accessibility tools
  • Weigh the aesthetic and performance value
  • Test constantly, on many devices, using a variety of connections
  • Use tools to evaluate design decision impact

Shift Left: Testing Tools

Shift Left: Accessibility Resources

  • screenshot of a WCAG compliance checklist WCAG Checklist
  • screenshot of disability considerations from Deque Disability Considerations
  • screenshot of user stories for users with disabilities User Stories

Shift Left: Accessibility Resources

Shift Left: Deliverables

  • Responsive Prototype in HTML/CSS/JS [sample #1, sample #2] If time permits, show the testing tools for speed, a11y, etc.
  • Red line design specs screenshot of a small piece of sample project design specifications
  • Blue line accessibility specs screenshot of sample project accessibility specifications