@@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 verwendet werden, sondern für die jeweilige *Seiten*-Überschrift. 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)

@@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)