Accessibility Work

Explore my work promoting accessibility and inclusion.

Accessibility guideline main demo.

Accessibility Guidelines

This project focuses on creating comprehensive fundamental guidelines for digital accessibility, providing learning professionals with essential resources to design inclusive content.

  • My Role: Instructional Designer, eLearning Developer, SME
  • Tools Used: Articulate Rise 360, screen readers

What this project is about

The Accessibility Guidelines cover key topics like color contrast, alternative text, accessible text, tables, links, and screen readers. Created for learning professionals, this guide helps them understand how to design content that meets accessibility standards and ensures a better experience for all users.

Design process

To create this training, I first researched WCAG guidelines and worked closely with other subject matter experts (SMEs) to ensure the content was accurate and relevant. I then broke down the content into clear, easy-to-understand sections to make it simple for learners to apply the concepts.. Throughout the design process, I kept a user-centered approach and regularly gathered feedback to improve the content and make it even more accessible for all users.

Explore the Project
Button system main demo.

Mock UI Button System

This project showcases the design of a button system for a tech platform, with a strong emphasis on accessibility and usability.

  • My Role: UI Designer
  • Tools Used: Figma

What this project is about

For this design brief, I created a button system for a fictional tech platform, focusing on prioritizing button types and states. I ensured the buttons were designed to meet WCAG accessibility standards, including color contrast, clarity, and user-friendly navigation. The system includes primary, secondary, and tertiary buttons, along with their hover, active, and disabled states, all optimized for an inclusive and accessible user experience.

The following image carousel features a total of seven images showcasing different aspects of the design.

Design choice. Image 1 of 7. Button types. Image 2 of 7. Button states. Image 3 of 7. Button states-dark mode. Image 4 of 7. Button size. Image 5 of 7. Accessibility. Image 6 of 7. Use cases. Image 7 of 7

Design process

Design choice (platform): I chose an LMS for this button system design because it offers diverse functionalities for both learners and admins. With various button types needed for different user actions, the LMS was an ideal platform for practicing button types and interactions, allowing me to apply my knowledge in a practical, real-world context.

Button types: Clear visual hierarchies are essential for creating an intuitive, user-friendly interface. I defined four main button types: primary, secondary, tertiary, and destructive. These button types effectively guide users through various actions and workflows, ensuring a seamless interaction experience.

Button states: Defining different visual states for buttons—such as hover, active, and disabled—is crucial for providing clear feedback to users. By changing a button’s appearance depending on its state, I reinforce user actions and clarify available interactions at any given moment, improving usability.

Button states - dark mode: Incorporating dark mode into the button design is important for delivering an optimal user experience across various interface styles. This ensures consistent accessibility, legibility, and visual appeal, regardless of whether users prefer light or dark mode.

Button sizes: I provided three button sizes—small, medium, and large—to ensure usability across devices. The smallest button uses a 16px font size, adhering to accessibility standards while maintaining readability and interaction comfort on all screen sizes.

Accessibility: Accessibility played a key role in my design choices. I followed WCAG AAA conformance for light mode and AA conformance for dark mode to ensure that all buttons meet accessibility standards, allowing every user to perceive, understand, and interact with the interface effectively.

Carrie W.

Let's connect! I'm passionate about creating engaging and inclusive design solutions.