GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → tobyzerner → inclusive-elements

tobyzerner / inclusive-elements

Licence: MIT license
Accessible, lightweight, unstyled implementations of common UI controls.

Programming Languages

typescript
32286 projects
HTML
75241 projects
javascript
184084 projects - #8 most used programming language

Labels

accessibilityweb-componentsa11ycustom-elements

Projects that are alternatives of or similar to inclusive-elements

Ebayui Core
Collection of Marko widgets; considered to be the core building blocks for all eBay components, pages & apps
Stars: ✭ 134 (+688.24%)
Mutual labels:  accessibility, web-components, a11y
dorai-ui
Accessible, unstyled, open-sourced, and fully functional react component library for building design systems
Stars: ✭ 34 (+100%)
Mutual labels:  accessibility, a11y
lit-components
Moved to https://github.com/vaadin/component-mixins
Stars: ✭ 59 (+247.06%)
Mutual labels:  web-components, custom-elements
g-emoji-element
Backports native emoji characters to browsers that don't support them by replacing the characters with fallback images.
Stars: ✭ 112 (+558.82%)
Mutual labels:  web-components, custom-elements
element
Fast and simple custom elements.
Stars: ✭ 65 (+282.35%)
Mutual labels:  web-components, custom-elements
lego
🚀 Web-components made lightweight & Future-Proof.
Stars: ✭ 69 (+305.88%)
Mutual labels:  web-components, custom-elements
accessibility-ruleset-runner
eBay Accessibility Ruleset Runner automates 20% of WCAG 2.0 AA recommendations, saving time on manual testing.
Stars: ✭ 24 (+41.18%)
Mutual labels:  accessibility, a11y
range-slider-element
🍬 <range-slider> custom element
Stars: ✭ 45 (+164.71%)
Mutual labels:  web-components, custom-elements
focus-trap
A lightweight web component that traps focus within a DOM node
Stars: ✭ 44 (+158.82%)
Mutual labels:  web-components, custom-elements
accessible-forms
A series of HTML test cases to determine how specific elements are announced in different screen reader / browser combinations.
Stars: ✭ 159 (+835.29%)
Mutual labels:  accessibility, a11y
11ty-web-component-generator
Use the power of 11ty to generate web components (custom elements).
Stars: ✭ 51 (+200%)
Mutual labels:  web-components, custom-elements
buttonbuddy
Learn about accessible button contrast then generate your own accessible button color palette
Stars: ✭ 60 (+252.94%)
Mutual labels:  accessibility, a11y
accessibility-for-teams
A ‘quick-start’ guide for embedding accessibility and inclusive design practices into your team’s workflow
Stars: ✭ 80 (+370.59%)
Mutual labels:  accessibility, a11y
react-awesome-toasts
Toast notifications for react.
Stars: ✭ 64 (+276.47%)
Mutual labels:  accessibility, a11y
file-attachment-element
Attach files via drag and drop or file input.
Stars: ✭ 97 (+470.59%)
Mutual labels:  web-components, custom-elements
a11ycolor
🌈 Generate the nearest accessible color
Stars: ✭ 29 (+70.59%)
Mutual labels:  accessibility, a11y
auto-vo
Screen reader automation tools by AccessLint, including VoiceOver.js and Auto-VO
Stars: ✭ 118 (+594.12%)
Mutual labels:  accessibility, a11y
AStack
The Missing SwiftUI Adaptive and Accessible Stacks Library.
Stars: ✭ 110 (+547.06%)
Mutual labels:  accessibility, a11y
aria-at
Assistive Technology ARIA Experience Assessment
Stars: ✭ 115 (+576.47%)
Mutual labels:  accessibility, a11y
cluse
Sketch Plugin to check and adjust color contrast accessibility with live preview and sliders. Endorsed by Sketch.
Stars: ✭ 54 (+217.65%)
Mutual labels:  accessibility, a11y
View All Similar Projects ➔

Inclusive Elements

Accessible, lightweight, unstyled implementations of common UI controls.

Demo

Basic interactive UI patterns like popup menus, tooltips, and modals are surprisingly hard to get right on the web. Component libraries tend to be weighty, opinionated, and come tightly coupled with styles you don't want. On the other hand, rolling your own components feels like you're reinventing the wheel and puts accessibility at risk.

inclusive-elements provides those basic behaviors in the form of Custom Elements, without any of the cruft. They are:

  • 🦮 Accessible. Designed following the WAI-ARIA Authoring Practices so everyone can use them.
  • 🌳 Lightweight. 3kB gzipped with minimal dependencies. Less if you tree-shake only the elements you need.
  • 🎨 Unstyled. Easily integrate with your design bottom-up without having to fight defaults.
  • 🚀 Easy to use. Simple API, works with any framework that supports Custom Elements.

Installation

npm install inclusive-elements --save

Elements

Detailed descriptions and usage instructions are contained within each element:

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

MIT

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].