CalendarWeekView.png
CalendarWeekView.png
CalendarWeekView.png
CalendarWeekView.png
Role: Design Co-lead
Role: Design Co-lead
Role: Design Co-lead
Accessibility Documentation for Engineers
Accessibility Documentation for Engineers
Accessibility Documentation for Engineers
Date: Launched Q2 2024
Date: Launched Q2 2024
Date: Launched Q2 2024
Design System Accessibility
Design System Accessibility
Design System Accessibility
Problem
Problem
Problem
Problem
Accessibility knowledge at SmartRent was siloed, inconsistent, and hard to access. Engineers wanted to do the right thing, but didn’t always have the tools or clarity to build accessible components.
Accessibility knowledge at SmartRent was siloed, inconsistent, and hard to access. Engineers wanted to do the right thing, but didn’t always have the tools or clarity to build accessible components.
Accessibility knowledge at SmartRent was siloed, inconsistent, and hard to access. Engineers wanted to do the right thing, but didn’t always have the tools or clarity to build accessible components.
Goal
Goal
Goal
Goal
Create a central hub in SmartKit (SmartRent’s design system) that documents our accessibility approach and gives engineers practical code and guidance.
Create a central hub in SmartKit (SmartRent’s design system) that documents our accessibility approach and gives engineers practical code and guidance.
Create a central hub in SmartKit (SmartRent’s design system) that documents our accessibility approach and gives engineers practical code and guidance.
Impact
Impact
Impact
Impact
The site became the go-to resource for implementing accessible UI. It reduced friction in handoffs, aligned our standards across teams, and helped elevate accessibility from an afterthought to a shared responsibility.
The site became the go-to resource for implementing accessible UI. It reduced friction in handoffs, aligned our standards across teams, and helped elevate accessibility from an afterthought to a shared responsibility.
The site became the go-to resource for implementing accessible UI. It reduced friction in handoffs, aligned our standards across teams, and helped elevate accessibility from an afterthought to a shared responsibility.
Project Summary
Project Summary
Project Summary
LowFid.png
LowFid.png
LowFid.png
LowFid.png
Wireframe Planning
Wireframe Planning
Wireframe Planning
Wireframe Planning
I wireframed the accessibility page with scanability in mind. The goal was to create a dev-friendly doc that could double as a quick reference and a how-to guide.
I wireframed the accessibility page with scanability in mind. The goal was to create a dev-friendly doc that could double as a quick reference and a how-to guide.
I wireframed the accessibility page with scanability in mind. The goal was to create a dev-friendly doc that could double as a quick reference and a how-to guide.
Vision.png
Vision.png
Vision.png
Vision.png
Visual Accessibility Foundations
Visual Accessibility Foundations
Visual Accessibility Foundations
Visual Accessibility Foundations
This section anchors the page in the basics of visual accessibility, like writing meaningful alt text and ensuring strong color contrast. I wanted to start with clear, actionable principles that improve usability for everyone, not just screen reader users.
This section anchors the page in the basics of visual accessibility, like writing meaningful alt text and ensuring strong color contrast. I wanted to start with clear, actionable principles that improve usability for everyone, not just screen reader users.
This section anchors the page in the basics of visual accessibility, like writing meaningful alt text and ensuring strong color contrast. I wanted to start with clear, actionable principles that improve usability for everyone, not just screen reader users.
Navigation.png
Navigation.png
Navigation.png
Navigation.png
Keyboard + Voice Support
Keyboard + Voice Support
Keyboard + Voice Support
Keyboard + Voice Support
I documented how to build accessible navigation using logical tab order and voice support. This section removes guesswork for developers implementing dropdowns, links, or tabbed interfaces.
I documented how to build accessible navigation using logical tab order and voice support. This section removes guesswork for developers implementing dropdowns, links, or tabbed interfaces.
I documented how to build accessible navigation using logical tab order and voice support. This section removes guesswork for developers implementing dropdowns, links, or tabbed interfaces.
CalendarView.png
CalendarView.png
CalendarView.png
CalendarView.png
Simplicity + Clarity
Simplicity + Clarity
Simplicity + Clarity
Simplicity + Clarity
Accessibility isn’t just about screen readers, it’s about reducing cognitive load. I included best practices for things like input labeling, assistive text, and writing clear banner messages.
Accessibility isn’t just about screen readers, it’s about reducing cognitive load. I included best practices for things like input labeling, assistive text, and writing clear banner messages.
Accessibility isn’t just about screen readers, it’s about reducing cognitive load. I included best practices for things like input labeling, assistive text, and writing clear banner messages.
Results
Results
Results
Results
Launched for developers everywhere on smartkit.dev. Adopted internally by front-end engineers as the accessibility source of truth, and reduced friction in handoffs with copy-ready code and UI guidelines.
Reflection
Reflection
Reflection
Reflection
This project shaped how I think about systems design and accessibility advocacy. It taught me how to break down complex WCAG guidelines into visual and verbal clarity for real world use. It’s also where I discovered how much I love building bridges between design intent and engineering execution.
This project shaped how I think about systems design and accessibility advocacy. It taught me how to break down complex WCAG guidelines into visual and verbal clarity for real world use. It’s also where I discovered how much I love building bridges between design intent and engineering execution.
This project shaped how I think about systems design and accessibility advocacy. It taught me how to break down complex WCAG guidelines into visual and verbal clarity for real world use. It’s also where I discovered how much I love building bridges between design intent and engineering execution.
Contact Me!
Contact Me!
Want to work together? Let’s talk before I pick up another side project.
Want to work together? Let’s talk before I pick up another side project.
Want to work together? Let’s talk before I pick up another side project.
Reach out via one of these methods.
Reach out via one of these methods.
Reach out via one of these methods.
