Użycie <li></li> do pokazania/ukrycia menu

Question

Witam, mam takie pytanie, a mianowicie posiadam taki kod:

<header class="header">
	<h1 class="header-logo logo"><img src="" alt=""></h1>
		
	<nav class="header-nav nav">
		<ul class="header-nav-ul ul">
			<li class="menu-toggle">Menu</li> <!-- Pokaż/ukryj menu -->
				
			<li class="menu"><a href="#">Home</a></li>
			<li class="menu"><a href="#">Blog</a></li>
			<li class="menu"><a href="#">Portfolio</a></li>
			<li class="menu"><a href="#">O Mnie</a></li>
			<li class="menu"><a href="#">Kontakt</a></li>
		</ul>
	</nav>
</header>

I zastanawiałem się, czy można umieścić przycisk do pokazania/ukrywania menu na urządzeniach mobilnych za pomocą <li></li>. Wyglądałoby to mniej więcej tak, jak powyżej, a konkretnie:

<li class="menu-toggle">Menu</li>

Czy taki zapis jest niepoprawny?

Pozdrawiam

Answer 1

Niepoprawny.

Po pierwsze, jest to przycisk. Dlaczego zatem nie oznaczyłeś go przy pomocy elementu button? 

Po drugie, przycisk ten nie powinien być zamieszczony jako pierwszy element w liście zawierającej linki menu, moim zdaniem z punktu widzenia struktury treści to nie ma sensu. Ja bym proponowała coś takiego:

 <nav class="header-nav nav">
    <button class="menu-toggle">Menu</button>     
    <ul class="header-nav-ul ul">
       <li class="menu"><a href="#">Home</a></li>
       <li class="menu"><a href="#">Blog</a></li>
       <li class="menu"><a href="#">Portfolio</a></li>
       <li class="menu"><a href="#">O Mnie</a></li>
       <li class="menu"><a href="#">Kontakt</a></li>
    </ul>
</nav>

Nie zapomnij też dodać odpowiednie atrybuty ARIA (aria-expanded, aria-controls, ewentualnie aria-pressed).

I jeszcze przy okazji:

 <h1 class="header-logo logo"><img src="" alt=""></h1>

Z punktu widzenia osób korzystających z czytników ekranu nagłówek ten jest pusty; nie posiada ani tekstu, ani alternatywnego opisu dla logo.

Comments

Dziekuje

Answer 2

Radziłbym ci użyć do tego np. Buttona i na nim wywołać funkcję odpowiedzialną za pokazywanie lub ukrywanie menu. Oczywiscie możesz zrobić to samo na li ale jest to bardzo dziwne i raczej niepoprawne.