ariato
Accessible UI library
Ariato is a starting point to build accessible websites, originaly made for RoRvsWild, our Ruby on Rails application monitoring service.
It separates concerns and lets good old vanilla HTML, CSS and Javascript play their own roles.
It provides style and interactivity, including keyboard navigation, to semantic HTML elements and components, following WCAG and WAI-ARIA recommendations.
We want to believe «best practices» can work. We are trying to figure out what good Aria is. We want to make better websites.
We are a small team and we need simple solutions. We're more inspired by the poor man's styleguide than the grand unification.
Ariato is young and needs to mature. You are welcome to contribute.
HTML
Ariato starts with the desire to write better, accessible HTML.
HTML should contain the content of the document and describe properly its structure with semantic markup and Aria roles.
With more than 110 available HTML tags, there might sometimes be something more meaningful than <span> or <div>. Ariato helps choosing better options.
This documentation serves as a reference of HTML snippets to copy for all elements and components.
CSS
Ariato brings accessible and coherent style to HTML elements and components, without requiring to add dozens of CSS classes.
Ariato cares about color, contrast, typography, spacing and rythm and sets sensible design constraints. It uses modern CSS to provide features such as dark mode.
CSS styles are first targeting classless HTML elements, aria roles and states.
When nothing fits, a css class is added (ex: .card).
We then use the context (ex: .card > header), or modifier classes (ex: .is-something) to style variants.
stylesheets/ariato.css is the css manifest file used to import all the stylesheets.
-
Design tokens
CSS custom properties for design attributes, to avoid hard-coded values and improve consistency.
-
Elements
Styles for classless semantic HTML 5 elements to go beyond div and span.
-
Components
WAI-ARIA widgets and custom elements frequently used in web applications.
Thanks to modern properties like grid, flex or clamp, most page layouts can be done in just a few lines of CSS. Ariato doesn't include a complex 12 columns layout system or all variants a component could have. An external directory will provide a collection of components and templates.
Javascript
Ariato comes with a small, dependency-free vanilla Javascript library powering the components marked with JS. It targets aria roles and states if available, or relies on data attributes. It also supports keyboard navigation.
menubutton keyboard navigation
- On focus:
- Space or ↲ enter to toggle the menu.
- ↓ and ↑ to select an item in the menu.
- ↲ enter to open the menu item.
javascript/ariato.js is the js manifest file used for the javascript library.