Difference between revisions of "Accordion with heading-button variants"

From Level Access Web Labs
Jump to navigation Jump to search
Line 2: Line 2:
 
<body>
 
<body>
  
<h2>Accordion variants related to headings, enclosed buttons, etc.</h2>
+
<h2>Accordion variants related to headings enclosing expandable buttons</h2>
  
 
<div>
 
<div>
  
 
<h3>
 
<h3>
<button id="1">Native h3 heading element encloses native button element here</button>
+
<button aria-expanded="false">Native h3 heading element encloses native button element here</button>
 
</h3>
 
</h3>
 
<br>
 
<br>
 +
 
<div role="heading" aria-level="3">
 
<div role="heading" aria-level="3">
 
<button aria-expanded="false">ARIA heading and level encloses native button here</button>
 
<button aria-expanded="false">ARIA heading and level encloses native button here</button>
 
</div>
 
</div>
 
<br>
 
<br>
 +
 
<h3 role="heading" aria-level="3">
 
<h3 role="heading" aria-level="3">
 
<button aria-expanded="false">Native heading element with fully-redundant ARIA heading and level here</button>
 
<button aria-expanded="false">Native heading element with fully-redundant ARIA heading and level here</button>
 
</h3>
 
</h3>
 
<br>
 
<br>
 +
 
<h3 aria-level="3">
 
<h3 aria-level="3">
 
<button aria-expanded="false">Native heading element with redundant ARIA level but not role here</button>
 
<button aria-expanded="false">Native heading element with redundant ARIA level but not role here</button>
 
</h3>
 
</h3>
 
<br>
 
<br>
 +
 
The following button stands alone, not within a heading at all:  
 
The following button stands alone, not within a heading at all:  
 
<br>
 
<br>
 
<button aria-expanded="false">Hello World</button>
 
<button aria-expanded="false">Hello World</button>
 
<br>
 
<br>
 +
 
<h3>This is a plain-text heading as a control case</h3>
 
<h3>This is a plain-text heading as a control case</h3>
 
that's it!
 
that's it!

Revision as of 20:47, 15 May 2019

Accordion variants related to headings enclosing expandable buttons





The following button stands alone, not within a heading at all:

This is a plain-text heading as a control case

that's it!