Menü-Button für responsives HTML
bearbeitet von@@Semi1717
> Damit es anschaulicher für euch ist, hier die komplette HTML+CSS-Datei:
Was für die *Anschau*lichkeit des Ganzen zu tun wäre, hatte ich ja schon gesagt.
Hab aber schonmal das HTML angeschaut:
> ~~~HTML,bad
> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
> ~~~
Das fehlende `>` ist noch der kleinere Fehler. Der größere ist `user-scalable=no`{:.bad}. Weg damit! Nutzer sollen zoomen können, wenn sie es wollen. Oder müssen, um die Seite lesen zu können.
> ~~~HTML,bad
> <section id="menubar">
> <ul>
> <li><a class="menubutton" href="#menu"><img src="images/menu.png"></a>
> </ul>
> </section>
> ~~~
Das ist wohl keine `section`.
Und das ist wohl keine Liste.
Wie bereits verlinkt muss der Button *innerhalb* des `nav`-Elements sein.
Apropos Button: Wieso ist das ein `a`-Element und kein `button`?
Dem `img` fehlt der notwendige `alt`-Text.
> ~~~HTML
> <header>
> <h1>Microsoft</h1>
> </header>
> <nav class="nav">
> <ul>
> <li><a href="index.html">Startseite</a></li>
> <li><a href="steckbrief.html">Steckbrief</a></li>
> <li><a href="geschichte.html">Geschichte</a></li>
> <li><a href="microsoft_heute.html">Microsoft heute</a></li>
> <li><a href="quellen.html"class="active">Quellen</a></li>
> </ul>
>
> </nav>
> ~~~
`h1`sollte nicht die *Website-Kennung
Ich würde das `nav`-Element mit in den `header` setzen.
Vor `class="active"` fehlt ein Leerzeichen. Die Klasse ist überflüssig; die aktuelle Seite sollte im Menü mit `aria-current="page"` gekennzeichnet werden – das lässt sich auch zum Stylen nutzen.
Die aktuelle Seite sollte nicht verlinkt sein. Wenn ein Link, dann zum Hauptinhalt:
`<li><a tabindex="0" aria-current="page">Quellen</a></li>`{:.language-html}
bzw.
`<li><a href="#main" aria-current="page">Quellen</a></li>`{:.language-html}
> ~~~HTML,bad
> <section id="main">
> ~~~
Ein sicheres Zeichen, dass das keine `section` ist, sondern der Hauptinhalt der Seite:
`<main id="main">`{:.language-html.good}
> ~~~HTML,bad
> <article>
> <h2>Quellen</h2>
> ~~~
Nein, kein `article`. Und das wäre dann die `h1`.
> ~~~HTML,bad
> <img src="images/cortanagif.gif" alt="msgif">
> ~~~
Auch für dieses Bild fehlt ein sinnvoller Alternativtext.
LLAP 🖖
--
“When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)