Visa göm lager på rätt sätt

Finns det nåt innehåll i diven? :)

Ur en semantisk synpunkt borde du kanske använda irrelevant="" från HTML5 så väl som, eller i stället för, class="be-hidden". I dagsläget gör det dock ingen skillnad då ingen har implementerat irrelevant="" än, vad jag vet. Däremot är det tydligen nödvändigt att ange både display:none och visibility:hidden för att vissa skärmläsare ska tycka att det verkligen är "gömt".

Vidare kanske du inte borde använda return false, då det kan vara användbart att låta elementet få "fokus" så att skärmläsare hamnar där du vill och inte är kvar vid länken (men om diven är precis efter länken så är det ok ändå). Jag är medveten om att det kan orsaka ett hopp för visuella användare; om det är ett problem kan du lägga en länk eller nåt i diven och låta ett skript focus()era den.

Ja, det är mest olika formulär och sådant som tillhör ett huvudobjekt som jag döljer för att spara utrymme i sidebar:en

Exempel:

<div id="sidebar">

<h2>Subject menu</h2>

<ul>
<li><a href="#div1" onclick="show_hide('div1'); document.getElementById('fokus1').focus();" title="div1">Div 1</a></li>
<li><a href="#div2" onclick="show_hide('div2'); return false" title="div2">Div 2</a></li>
<li><a href="#div3" onclick="show_hide('div3'); return false" title="div3">Div 3</a></li>
<li><a href="#div4" onclick="show_hide('div4'); return false" title="div4">Div 4</a></li>
</ul>

<div id="div1" irrelevant>
<form>
<p id="fokus1">
<label for="text1">Hey</label>
<input type="text" name="text1" id="text1" />
<p>
</form>
</div>
<div id="div2" irrelevant><h2>Data</h2></div>
<div id="div3" irrelevant><p>Annat</p></div>
<div id="div4" irrelevant><form></form></div>

</div>

<div id="main-content">

<h1>Subject</h1>

</div>

<script type="text/javascript"><!--//--><![CDATA[//><!--
document.getElementById('div1').className = "be-hidden";
/*
document.getElementById('div1').irrelevant = true;
*/
//--><!]]></script>

Tack för informationen :bire

Notera att om du vill att informationen ska vara synlig utan js så borde det vara skriptet som lägger till irrelevant="", och inte ha det i HTML-koden från början, precis som med class="". :)