Difference between revisions of "ARIA Pressed State"

From Level Access Web Labs
Jump to navigation Jump to search
 
(One intermediate revision by the same user not shown)
Line 12: Line 12:
 
<body>
 
<body>
 
   <p>With button element</p>
 
   <p>With button element</p>
 +
  <div>
 +
    <button id="b1" onclick="toggle('b1');" aria-pressed="true"> Bold
 +
    </button>
 +
  </div>
 +
 +
  <div>
 +
    <button aria-label="bold button my aria-label" id="b2" onclick="toggle('b2');" aria-pressed="true"> Bold (with aria-label) </button>
 +
  </div>
  
  <button id="b1" onclick="toggle('b1');" aria-pressed="true"> Bold </button>
 
  <button aria-label="bold button my aria-label" id="b2" onclick="toggle('b2');" aria-pressed="true"> Bold (with aria-label) </button>
 
 
   <p id="p1">Some label</p>
 
   <p id="p1">Some label</p>
 
   <button aria-labelledby="p1" id="b2" onclick="toggle('b2');" aria-pressed="true"> Bold (with aria-labelledby) </button>
 
   <button aria-labelledby="p1" id="b2" onclick="toggle('b2');" aria-pressed="true"> Bold (with aria-labelledby) </button>

Latest revision as of 17:14, 21 October 2015

Each control can be toggled to pressed or not pressed.

With button element

Some label

Div element with aria-pressed and role button

Italics

Anchor element with aria-pressed and role button

Underline