⛔ Properties & States 🚫

👈 return to the index page

aria-haspopup

Popup as a descendant in the DOM

          <ul role="menu">
            <li role="menuitem" aria-haspopup="true" aria-labelledby="fileLabel-1">
              <span id="fileLabel-1">File</span>
              <ul role="menu">
                <li role="menuitem">New</li>
                <li role="menuitem">Open</li>
                <li role="menuitem">Close</li>
              </ul>
            </li>
          </ul>

aria-expanded

Toggle Bar

          <button aria-expanded="true" id="TLink1" onclick="toggle('navbar', 'TLink1')">
            Toggle Navigation Bar
          </button>

          <ul id="navbar">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
          </ul>

aria-hidden

Icon tick ignored by screen readers

          <button>
            <span class="icon" aria-hidden="true">✅</span>
            Great job!
          </button>

aria-disabled

Disabled button

            <button aria-disabled="true">Mute 🔕</button>

aria-invalid

Form validation

          <label for="name">Add name</label>
          <input
            name="name"
            id="name"
            aria-required="true"
            aria-invalid="false"
            placeholder="Enter your name"/>

          <label for="email">Add email</label>
          <input
            name="email"
            id="email"
            aria-required="true"
            aria-invalid="true"
            placeholder="Enter e-mail"/>

aria-checked & aria-pressed

Aria-pressed️

          <button aria-pressed="false">
            Toggle
          </button>

Checkbox behavior ☑️

          <span
            role="checkbox"
            aria-checked="false"
            tabindex="0"
            aria-labelledby="chk1-label"
          >
          </span>
          <label id="chk1-label" class="linline">Remember login </label>
          <br />
          <input type="checkbox" id="chk2-label" />
          <label for="chk2-label" class="inline"
            >Remember password</label
          >

aria-selected

Tab navigation

          <ul class="tablist" role="tablist">
            <li
              id="tab1"
              class="tab"
              aria-selected="true"
              role="tab"
              tabindex="0">
              Prices
            </li>
            <li
              id="tab2"
              class="tab"
              role="tab"
              aria-selected="false"
              tabindex="0">
              Features
            </li>
          </ul>

aria-orientation

Custom slider

          <div
            tabindex="0"
            role="progressbar"
            aria-valuemin="0"
            aria-valuemax="100"
            aria-valuenow="10"
            aria-orientation="vertical"
            class="custom-slider">
            Custom slider implementation
          </div>
Custom slider implementation