Tailwindcss Aria Plugin

A plugin that provides aria label variants that can apply utilities when aria-label existed.

Installation

Install the plugin from npm:

  npm install -D tailwindcss-aria-plugin

Then add the plugin to your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require("tailwindcss-aria-plugin"),
    // ...
  ],
};

Usage

<!-- aria-[name]-[value] -->
<input type="checkbox" id="chk1-label" class="aria-checked:bg-blue-500" />
<label for="chk1-label">Remember my preferences</label>

Widget Attributes

aria-autocomplete

• none: aria-autocomplete-none
• inline: aria-autocomplete-inline
• list: aria-autocomplete-list
• both: aria-autocomplete-both

aria-checked

• true: aria-checked
• false: aria-!checked
• mixed: aria-checked-mixed

aria-disabled

• true: aria-disabled
• false: aria-!disabled

aria-errormessage

• id: aria-errormessage

aria-expanded

• true: aria-expanded
• false: aria-!expanded

aria-haspopup

• true: aria-haspopup
• false: aria-!haspopup
• menu: aria-haspopup-menu
• listbox: aria-haspopup-listbox
• tree: aria-haspopup-tree
• grid: aria-haspopup-grid
• dialog: aria-haspopup-dialog

aria-hidden

• true: aria-hidden
• false: aria-!hidden

aria-invalid

• true: aria-invalid
• false: aria-!invalid
• grammar: aria-invalid-grammar
• spelling: aria-invalid-spelling

aria-label

• <string>: aria-label

aria-level

• <integer>: aria-level

aria-modal

• true: aria-modal
• false: aria-!modal

aria-multiline

• true: aria-multiline
• false: aria-!multiline

aria-multiselectable

• true: aria-multiselectable
• false: aria-!multiselectable

aria-orientation

• horizontal: aria-orientation-horizontal
• vertical: aria-orientation-vertical

aria-placeholder

• <string>: aria-placeholder

aria-pressed

• true: aria-pressed
• false: aria-!pressed
• mixed: aria-pressed-mixed

aria-readonly

• true: aria-readonly
• false: aria-!readonly

aria-required

• true: aria-required
• false: aria-!required

aria-selected

• true: aria-selected
• false: aria-!selected

aria-sort

• none: aria-sort-none
• ascending: aria-sort-ascending
• descending: aria-sort-descending
• other: aria-sort-other

aria-valuemax

• <number>: aria-valuemax

aria-valuemin

• <number>: aria-valuemin

aria-valuenow

• <number>: aria-valuenow

aria-valuetext

• <string>: aria-valuetext