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.
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
<div>. Ariato helps choosing better options.
This documentation serves as a reference of HTML snippets to copy for all elements and components.
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:
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.
CSS custom properties for design attributes, to avoid hard-coded values and improve consistency.
Styles for classless semantic HTML 5 elements to go beyond div and span.
WAI-ARIA widgets and custom elements frequently used in web applications.
Thanks to modern properties like
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.
- On focus:
- Space or ↲ enter to toggle the menu.
- ↓ and ↑ to select an item in the menu.
- ↲ enter to open the menu item.