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

From Level Access Web Labs
Jump to navigation Jump to search
Line 7: Line 7:
  
 
<h3>
 
<h3>
<button id="1">Native heading element encloses native button element here</button>
+
<button id="1">Native h3 heading element encloses native button element here</button>
 
</h3>
 
</h3>
 
<br>
 
<br>
<div role="heading" aria-level="3" aria=labelledby="1">
+
<div role="heading" aria-level="3">
<button id="1">ARIA heading 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" aria=labelledby="2">
+
<h3 role="heading" aria-level="3">
<button id="2">Native heading element with fully-redundant ARIA heading here</button>
+
<button aria-expanded="false">Native heading element with fully-redundant ARIA heading and level here</button>
 
</h3>
 
</h3>
 
<br>
 
<br>
The following button is after, not within, that plain heading:  
+
<h3 aria-level="3">
 +
<button aria-expanded="false">Native heading element with redundant ARIA level but not role here</button>
 +
</h3>
 +
<br>
 +
The following button stands alone, not within a heading at all:  
 
<br>
 
<br>
<button>Hello World</button>
+
<button aria-expanded="false">Hello World</button>
 
<br>
 
<br>
<h3>This is a plain-text heading</h3>
+
<h3>This is a plain-text heading as a control case</h3>
 
that's it!
 
that's it!
  

Revision as of 20:41, 15 May 2019

Accordion variants related to headings, enclosed buttons, etc.





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

This is a plain-text heading as a control case

that's it!