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("tailwind-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

MDN Test

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

aria-checked

MDN Test

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

aria-disabled

MDN Test

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

aria-errormessage

MDN Test

  • id: aria-errormessage

aria-expanded

MDN Test

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

aria-haspopup

MDN Test

  • 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

MDN Test

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

aria-invalid

MDN Test

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

aria-label

MDN Test

  • <string>: aria-label

aria-level

MDN Test

  • <integer>: aria-level

aria-modal

MDN Test

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

aria-multiline

MDN Test

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

aria-multiselectable

MDN Test

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

aria-orientation

MDN Test

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

aria-placeholder

MDN Test

  • <string>: aria-placeholder

aria-pressed

MDN Test

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

aria-readonly

MDN Test

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

aria-required

MDN Test

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

aria-selected

MDN Test

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

aria-sort

MDN Test

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

aria-valuemax

MDN Test

  • <number>: aria-valuemax

aria-valuemin

MDN Test

  • <number>: aria-valuemin

aria-valuenow

MDN Test

  • <number>: aria-valuenow

aria-valuetext

MDN Test

  • <string>: aria-valuetext

GitHub

View Github