WebAIM - Web Accessibility In Mind

E-mail List Archives

Heading structure (h1-h6) in <details>

for

From: Rabab Gomaa
Date: Mar 28, 2013 9:22AM

Hello,

I am looking for some guides on how to structure headings (h1-h6) in
the <details> element.
We use <details> to include long description of images (e.g. <img>
<details> inside <figure>) and sometimes the long description content
includes headings.

Looking at the example below, what would be the <h??> tag level ?
—--------
page content...
<h2>Power sources</h2>
<h3>Electrical Power Sources</h3>
<figure role="group">
<figcapion> Non-Functioning Lamps</figcaption>
<img src="flowchart.gif" alt="A flowchart process - Dealing with
non-functioning Fluorescent lamp and Discharge lamp.">
<details>
<summary><strong>Dealing with non-functioning Fluorescent lamp and
Discharge lamp</strong> </summary>
<h??> Fluorescent lamp</h??>
<p><strong>If the lamp doesn't work:</strong></p>
<ol>
<li>Check if it's plugged in, if not, plug it in.</li>
<li>If it still doesn't work; check if the bulb is burned out.
If it is, replace the bulb.</li>
<li>If it still doesn't work; buy a new lamp.</li>
</ol>
<h??> Discharge lamp</h??>
<p><strong>If the lamp doesn't work:</strong></p>
<ol>
<li>Check if it's plugged in, if not, plug it in.</li>
<li>If it still doesn't work; check if the bulb is burned out.
If it is, replace the bulb.</li>
<li>If it still doesn't work; buy a new lamp.</li>
</ol>

</details>
</figure>
<h2>Natural power sources</h2>
..rest of the page