Yale Digital Conference 2019: Enhancing Accessibility with UI Component Library
In the realm of digital accessibility, the Yale Digital Conference 2019 showcased the journey of Michael Harris, an Accessibility Engineer, towards creating the Yale UI Component Library. This innovative project aims to provide a high-quality, consistent, and accessible user experience across Yale's digital platforms. By extending Bootstrap and implementing SASS color contrast functions, the project ensures accessible color contrast and Yale-specific styling while speeding up development time. Join us on this path of innovation and inclusivity at Yale!
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
You are allowed to download the files provided on this website for personal or commercial use, subject to the condition that they are used lawfully. All files are the property of their respective owners.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.
E N D
Presentation Transcript
Yale Digital Conference 2019 Michael Harris Accessibility Engineer
Introducing the Yale UI Component Library Michael Harris Accessibility Engineer
Extra Special Thanks! Sarah Lynch, Accessibility Engineer Chris Mongillo, Digital Accessibility Coordinator Adomous Wright, ITS, Early Career Development Intern
Motivation 1. A high quality, consistent, accessible User Experience throughout Yale 2. Consistent, up-to-date Yale branding 3. Speed up development time for custom projects
Current Milestones 1. Begin the project (early 2019) 2. Get the UI Component Library to a stable version (Jun 2019) 3. Get community feedback and engagement (Summer 2019) 4. Launch V1.0.0 (2nd Half 2019)
Yale Bootstrap Base Extends Bootstrap 4.3 Fixes and re-implementations to Bootstrap Force accessible color contrast No particular Yale branding Can be used as the basis for any Bootstrap project
Yale UI Component Library Extends Yale Bootstrap Base Adds Yale-specific styling, colors, fonts, etc to Bootstrap Inherits accessible Color Contrast Can be used as the base of a Yale-branded project
Accessibility Wins: Color Contrast Bootstrap by default does not have accessible color contrast Developers can set custom colors that may not be accessible
Accessibility Wins: Color Contrast We implemented SASS color contrast functions to automatically calculate color contrast, and lighten or darken colors until they meet WCAG 2 requirements
Lets have a look! https://git.yale.edu/pages/yale-ui/ui-component-library/
Using the Library There are two ways to use the Yale UI Component Library 1. Drop it into a project 2. Provide custom variables and recompile it
Get involved! 1. Check out the Git repo: https://git.yale.edu/yale-ui/ui- component-library 2. Email us to collaborate: accessibility@yale.edu
