Eine Alternative zu <div class='text'> fällt mir nicht ein. Da sehe ich kein Potential, irgend etwas zu verschlanken. Die Klasse kommt mehrmals vor, auch innerhalb einer Section. Bis auf die Artnamen soll damit jeglicher Text ausgeblendet werden können.
die text-Klasse kannst du auch direkt den auszublendenden Elementen (dl und h3) geben, ein extra div drumrum braucht es da nicht.
Die Links, die auf das Menü verweisen sollen keine Beschriftung haben; das Symbol dafür, soll zu zurückhaltend wie möglich gehalten sein, um vom Inhalt nicht abzulenken.
Du hast das Problem nicht verstanden. Es geht darum was Screenreader an der Stelle vorlesen und bei deinem aktuellen jump2menu-Links wird da nichts sinnvolles vorgelesen werden. Du musst für die "normalen" Besucher auch keinen Text einblenden,
vorhanden sein sollte er trotzdem, kann aber ausgeblendet sein. Siehe auch die Seite
Sichtbarkeit von Elementen (ist leider noch nicht ganz fertig, beschreibt aber das Problem).
Zu den Hinweisen zum Code bin ich noch nicht gekommen. Der Tag geht dem Ende zu und morgen muss ich früh raus.
Falsches Bundesland? ;-) Aber kein Stress, du musst nicht alles auf einmal und sofort umsetzen …
Was die Fehlermeldungen zu fehlenden Bildern betrifft: Die helfen mir sehr bei der Fehlersuche.
Auch hier hast du das Problem nicht verstanden. Der falsche alt-Text ist keine Fehlermeldung (die gibt es im Errorlog des Servers bzw. in der Console in den Entwicklertools des Browsers) sondern einfach nur Unsinn. Der Text ist nicht für dich zur Fehlersuche sondern für (u.a.) Sehbehinderte damit die wissen was auf dem Bild zu sehen ist. Merke: Internetseiten sind nie für den Ersteller gemacht sondern immer für die späteren Besucher der Seite (ja, Ausnahmen gibt es, sind aber eher die Ausnahme) - was der Programmierer also will ist hier völlig egal.
Nach dem der Validator über meinen Tag-Eigenbau <nicht-nord> meckerte (erst weil der offen war, als </dd> schloss, danach weil ich den selber schloss <nicht-nord/>, was ihm auch missfiel.
Benutzerdefinierte Elemente müssen immer geschlossen werden, richtig wäre also <nicht-nord></nicht-nord>, aber: du missbrauchst diese Elemente statt einfach class-Attribute zu verwenden. Das Element art-ausblenden ist Unsinn bzw. falsch, hier es völlig dem Link ein class="art-ausblenden" zu spendieren, nicht interaktive Elemente dürfen ohnehin nicht per JS klickbar gemacht werden da sie bei Tastaturbedienung nicht erreichbar sind. Wobei bei dem Link noch etwas dazu kommt: ein Link mit href="#" ist ein deutlicher Hinweis darauf dass an der Stelle ein <button> das richtige Element wäre, so auch hier - vergiss aber die Beschriftung (siehe oben) nicht!
Analog das Element wiki-link: hier reicht ein class="wikilink" in dem enthaltenen a völlig aus - und wirf bei der Gelegenheit gleich das target=_blank raus.
Hier habe ich nicht ganz verstanden, was Du meinst. Wie soll ich das umsetzen?
siehe
Selfhtml. Übrigens: ausblenden von einzelnen Elementen ginge auch über das
hidden-Attribut (lässt sich auch per JS setzen) - bei (potentiell) mehreren Elementen ist es m.E. aber sinnvoller mit einer Schalterklasse zu arbeiten.
Mir ist übrigens neben dem bereits genannten noch was aufgefallen:
- onclick-Attribute haben im Quelltext nichts zu suchen, hänge die click-Events per addEventListener an die jeweiligen Elemente (bzw. ein gemeinsames Elternelement, das geht auch). Wobei z.B. für die input-Elemente in nav eine Funktion reicht: die per Klick aufgerufene Funktion schaut nach welche ID das geklickte Element hat und reagiert entsprechend
- du hast ja die divs mit Zahlen als id - aus denen würde ich ggf. ein article-Element machen. Die ganzen HTML-Kommentare sind dann im Grunde überflüssig da klar ist was mit </article> bzw. </section> beendet wird
- im CSS wird bei .nicht-nord per content Text eingefügt - das solltest du vermeiden, der wird nicht vorgelesen, schreibe den Text (wie aktuell ja geschehen) direkt in den Code
- für h3 wird die Schriftgröße auf "smaller" gesetzt - da sich das auf die Standardmäßig vom Benutzer als gut lesbare Größe im Browser bezieht, wird die Schrift hier zu klein (dito für figcaption)
- der Text-Checkbox im Menü fehlt noch eine Beschriftung (bzw. der Beschriftung ein for-Attribut) und bei den anderen Beschriftungen könntest du <input> und <label> ohne Leerzeichen direkt hintereinander stellen, dann kann man nicht in der Lücke zwischen den Elementen ins Leere klicken
- Der Seite fehlt eine Viewportangabe
