![]() ![]() Select an option from the dropdown for each.Scroll to the bottom of the Rendering panel to locate the features.Select Rendering the Rendering panel appears in the sub-panel (next to Console if no others are present).Select the “…” menu button in the toolbar.In Chrome browser, open the Developer Tools.Unfortunately, they are quite difficult to discover/locate, so here’s where to find them: Emulate CSS media feature prefers-reduced motion.Emulate CSS media feature prefers-color-scheme.These are great for testing the implementation of your accessible design! The features include: There are a few great simulation tools in Chrome which invoke rendering of a couple CSS media queries and simulate several types of color blindness. accessible-slick – the last (accessible) carousel you’ll ever need, by Accessible360.Scaling accessibility with a design system by Geri Reid.Style Guides – What’s the Difference? by UXPin Website Style Guide Resources – long list of real life pattern libraries, code standards documents and content style guides.Creating A Living Style Guide: A Case Study by Steven Lambert.Style Guide Best Practices by Brad Frost.Design Patterns for Government Services UXPA 2016 (Slideshare) by Caroline Jarrett.Inclusive Components article series by Heydon Pickering.W3C WAI-ARIA Authoring Practices – Design Patterns and Widgets. ![]() Web Experience Toolkit (WET) by Government of Canada.Chakra – React component library by Segun Adebayo.Lion Web Components by ING Bank Lion on GitHub.Rivet Design System by Indiana University. ![]() Vuetensils – A reportedly accessible component library for Vue.js.A11Y Style Guide by Accessible design patterns by Demos by Web Overhauls by Web Axe author Modern Web Accessibility Demos by Accessible Solutions by Simply Accessible Examples – training and workshop examples by Simply Accessible.Tenon-UI accessible React components library. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |