Der kürzliche Beitrag über die Kennzeichnung von Navigation in Listen (oder auch nicht) hat fast 200 Kommentare mit meist großartigen Diskussionen zu diesem Thema hervorgebracht. Ich dachte, es wäre nützlich, die wichtigsten Punkte zusammenzufassen.
"Gegen" Navigation in Listen
- Mindestens ein Screenreader-Benutzer bevorzugt Navigation ohne Listen, was der Ursprung des ursprünglichen Artikels war.
- Einfacheres Markup.
nav > aist einfacher/weniger alsnav > ul > li > a. - Divs und Spans können genauso gut sein, besonders mit ARIA-Rollen
"Für" Navigation in Listen
- Die Ankündigung der Anzahl der Elemente in der Liste kann hilfreich sein
- Vorteil für die Struktur in Nicht-CSS-Browsern (Lynx-Screenshot)
- Langjähriges Muster, das sich nicht allgemein als großes Problem erwiesen hat
- Listen sind ein "Hook" für Screenreader (z.B. L für Listen drücken) und zeigen die Hierarchie gut an
- Sicherheit: In Listen dürfen nur Listenelemente enthalten sein, nicht so für Nav
Unentschieden
- Das zusätzliche Markup kann für das Styling hilfreich sein. Ich nenne das ein Unentschieden, weil es stimmt, aber weit hergeholt ist. Ich könnte jeden Div auf einer Seite in einen anderen Div einpacken, und das könnte eines Tages für das Styling hilfreich sein.
- Sie können
role=navigationnicht auf ein<ul>anwenden ("Erlaubte Rollenwerte sind directory, listbox, menu, menubar, tablist, toolbar, tree und presentation."). Ich nenne das ein Unentschieden, da Sie in jedem Fall die Navigation in eine<nav role="navigation">einpacken sollten. - Die "Ausführlichkeit" von Screenreadern ist eine Wahl. Listen sind ausführlicher, aber das kann angepasst werden.
- VoiceOver behandelt es genau gleich
- Dem Standard ist es egal, in welche Richtung
Relevant
- Barrierefreiheit ist mehr als nur Screenreader
Ein "Gewinner"?
Persönlich denke ich, dass die Kennzeichnung von Navigation als Listen die beste Wahl zu sein scheint. Sie können sich die Fakten ansehen und selbst entscheiden.
"Barrierefreiheit den Experten überlassen"
Dennis Lembree denkt, ich sollte nicht über solche Dinge sprechen, da ich kein Experte bin. Ich hatte das Gefühl, die Quintessenz sei, dass ich mich entschieden hätte, dass Listen im ursprünglichen Beitrag schlecht seien, und mein Aufruhr das Internet schädigen werde. Das sehe ich nicht so. Ich sah es so, dass ich einen neuen Satz von Fakten habe, die eine alte bewährte Methode in Frage stellen, und ich werde eine Diskussion darüber beginnen. Diskussionen zu schließen, bevor sie beginnen, schadet dem Internet meiner Meinung nach noch mehr. Dennoch ermutige ich zu jeglicher konstruktiver Kritik an diesem Blog, an dem, was ich schreibe, und an mir selbst jederzeit.
Danke für die Zusammenfassung, Chris! Ich habe es nie durch diese Kommentare geschafft =)
Das Hinterfragen dessen, was wir tun und warum wir es tun, ist großartig zum Lernen,
Wenn wir nichts Neues versucht hätten, würden wir immer noch Text verstecken, indem wir ihn um <—– 9999px nach dort verschieben.
Und wenn ich einige der Kommentare lese, frage ich mich nach einigen Markup-Tags, wie z.B. den UL- vs. OL-Tags, die möglicherweise einfach in ein Listen-Tag aufgenommen und entweder durch CSS oder als Attribut spezifiziert werden könnten, ob sie nummeriert, buchstabenmäßig oder mit Stichpunkten oder Quadraten formatiert werden sollen.
Ja, wer würde das tun!?
Also gehe ich davon aus, Sie meinen diese Methode: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/ – leider bleibe ich bei -99999px, da der Text sichtbar wird, wenn Sie Strg+F drücken und den mit text-indent:100% versteckten Text eingeben.
Sehen Sie dieses Fiddle: http://jsfiddle.net/4d5H6/ , drücken Sie STRG+F und geben Sie "Hallo" ein, drücken Sie ein paar Mal Enter in Webkit.
Es mangelt sicherlich nicht an Meinungen zu diesem Thema. Aber wie Sie wissen, sind Meinungen wie @#%^&*$, jeder hat eine. Ich habe es durch etwa 5 % der Antworten geschafft. Würde gerne ul-lose Lösungen für Dropdown-Menüs in Aktion sehen, nicht nur in der Theorie. Nochmals vielen Dank für das Thema.
Für Dropdown-Menüs gibt es menu type=”toolbar”.
Es ist semantisch keine "Navigation", aber wenn Sie Ihre Toolbar mit Nav umwickeln können.
Der Unterschied zwischen ul- und menu-Markup ist gering – beide können nur li-Elemente enthalten und sind im Grunde dasselbe (zumindest im Moment).
Aber das menu type=”toolbar”-Markup hat eine bessere Semantik – es wird als „interaktiver Inhalt“ behandelt, während ul-Elemente dazu gedacht waren, Daten anzuzeigen (ohne Interaktion).
Sehen Sie, was Sie davon halten. Ich bin ein paar Tage im Rückstand, da ich gerade beide Beiträge zu dem Thema gelesen habe und diese Feder nach dem Lesen des ersten gemacht habe.
http://codepen.io/bkbillma/pen/mKkEv
Danke für die Zusammenfassung, Chris – toll, die Ergebnisse einer konstruktiven Diskussion zu sehen.
Interessant zu sehen, dass die Debatte Ihre Meinung geändert zu haben schien, welche die bessere Lösung sei – so etwas hilft unserer Branche voranzukommen, um den besten Weg zu finden, Dinge als Gruppe zu tun.
Wenn wir nicht diskutieren würden, könnten wir nicht voneinander lernen, und diese spezielle Diskussion hat meiner Meinung nach viele Punkte über die reine Zugänglichkeit hinaus aufgeworfen.
Tolle Zusammenfassung, Chris. Was es wert ist, ich habe diese spezielle Diskussion und die Ansichten und Perspektiven anderer Leute zu diesem Thema sehr genossen.
Man wird Experte, indem man lernt, und man lernt, indem man Ideen mit anderen diskutiert. Die Diskussion zu meiden bringt uns nirgendwohin.
Zunächst einmal denke ich, dass es gut war, dass Sie diese Konversation begonnen haben, und wir sollten alle offen dafür sein, zumindest neue Wege zu diskutieren, um unsere Inhalte zu markieren, aber vielleicht sollten Leute wie Sie (Chris), die aufgrund ihrer starken Präsenz im Web und ihrer vielen Stunden, die sie ihr Wissen mit der breiten Öffentlichkeit teilen, großen Einfluss auf viele Webentwickler haben, ein wenig vorsichtig sein, wenn sie Techniken verbreiten, die möglicherweise nicht die besten Techniken für Webdesigner/Entwickler sind.
Dies ist eine zusätzliche Belastung für Sie, das ist mir bewusst, aber ich denke, dies ist eine der Dinge, die mit einer großen Rolle in der Webdesign-Community einhergehen... Ihr Einfluss ist aufgrund Ihrer über 5-jährigen Blogbeiträge und der Weitergabe Ihrer Einblicke in die Webentwicklung wohlverdient... und dafür sollten Sie applaudiert werden.... Ich denke nur, man sollte vorsichtig sein, was man veröffentlicht, wenn man in einer solchen Position ist.
Unabhängig davon... teilen Sie bitte weiterhin Ihr Wissen..., da ich mich darauf freue, es zu lesen, ob ich zustimme oder nicht...
Meine obigen Kommentare haben mich nicht ganz zufriedengestellt... denken Sie einfach weiter über Blog-Beiträge nach... und wir Leser werden Ihnen auf die eine oder andere Weise unsere Meinung mitteilen... offene Diskussion und Offenheit für alle Ideen und die Bereitschaft, mögliche neue Techniken zu diskutieren, ist eine gute Sache...
Posten Sie einfach weiter... und wir Leser werden Feedback geben...
Dies ist ein großartiger Blog und ich kann nicht zählen, wie oft ich ihn sowohl für die Arbeit als auch zur reinen Leseunterhaltung genutzt habe...
Wir müssen uns nicht auf Experten verlassen, aber wir sollten uns auf Fachwissen verlassen. Jim Allans Kommentar hat es am besten ausgedrückt
Danke für die Zusammenfassung, Chris! Es muss mühsam gewesen sein, diese 200 Kommentare durchzugehen... Nichtsdestotrotz denke ich auch, dass das Markieren von Navigation als Listen die beste Wahl zu sein scheint.
Chris, das ist genau der Grund, warum ich aufgehört habe, vielen 'Experten' zu folgen, weil sie Kommentare komplett deaktiviert haben, sie nach ein paar Tagen schließen, oder sie Twitter oder Disqus usw. zum Kommentieren benötigen (beides ist an meinem Arbeitsplatz blockiert), oder aus anderen Gründen.
Ich muss wissen, ob die Inhalte eines Artikels fundiert sind, was andere Leute davon halten und ob es sich um einen alten Artikel handelt, ob die Inhalte noch relevant sind. Die Kommentare sind das A und O. Ich nehme die Ergebnisse keines Experten als gültig an, es sei denn, sie halten einer Prüfung durch das Publikum, durch einen anderen anerkannten Experten oder anderweitig stand. Oft ist es unerheblich, ob die Person, die die Diskussion begonnen hat, ein Experte auf dem Gebiet ist oder nicht.
Alles "den Experten zu überlassen" birgt die Gefahr, es komplett zu vernachlässigen, es könnte genauso gut komplett versteckt und von der Masse ignoriert werden.
Ich denke, eine ziemlich große Leserschaft rechtfertigt die gelegentliche Diversifizierung, es ist nicht so, als wäre es völlig irrelevant (ist es überhaupt nicht). Für mich sind alle Ihre Artikel interessant, weil ich Ihre Entwicklung als Mit-Webentwickler gerne verfolge und sie leicht verständlich sind. Wenn Sie nur über die CSS-Teile schreiben würden, denke ich, das wäre ein unvollständiger Bericht über das, was Sie tun, und worum es Ihnen geht.
Genau. Ich habe mich immer gefragt, warum Leute so eifrig sind, Kommentare zu ihren Artikeln zu schließen (z.B. "Kommentare zu diesem Eintrag werden automatisch nach zwei Wochen geschlossen."). Für mich macht das das Internet wertloser und vergänglicher. Es ist, als ob Sie sagen, dass Ihre Inhalte keinen besonderen Wert mehr haben.
Toller Artikel, Chris. Ich denke, die beste Taktik wäre das, was für das jeweilige Projekt zu diesem Zeitpunkt funktioniert.
Großartige Einblicke in das Thema, Chris. Auch wenn ich immer noch denke, dass die Verwendung von ul's der richtige Weg ist, schätze ich dennoch die Diskussion, die um Ihren Blogbeitrag entstanden ist.
Was Dennis betrifft, so hat er einen langen Kommentar gepostet, der mit "bitte kreuzigen Sie mich nicht für meine Gedanken" endete, was angesichts seines Blogbeitrags etwas heuchlerisch schien.
Ein Freund von mir hat vor ein paar Wochen mit mir darüber gesprochen, ich habe versucht, Listen in ein Nav-Element einzufügen, aber für mich passte es strukturell einfach nicht, obwohl ich glaube, dass das eher eine persönliche Präferenz ist. Ich habe mich dann bei einem Projekt für nav > span > a für die Navigation entschieden, was gut seinen Zweck erfüllte.
Listen sind der beste Weg.
Es gibt einen Grund, warum fast jeder es für Navigation verwendet.
Chris, Sie sind so etwas wie ein Experte im Web wie jeder andere auch. Ich bin nicht davon überzeugt, dass Listen entweder richtig oder falsch sind, aber ich weiß, dass Sie qualifizierter sind, über *irgendetwas*, das mit dem Web zu tun hat, zu schreiben als die meisten.
Danke für alles, was Sie tun!
Ich habe eine Sammlung von Glückskeksen. Einer davon besagt
Ich bemühe mich, wann immer es mir möglich ist, wenn es mehr als eine Möglichkeit gibt, etwas zu tun, mich der Forschung, der Kontemplation und der Diskussion zu widmen, bis ich überzeugt bin, welche Methode die beste ist, unter den bereits bekannten Wahlmöglichkeiten, auch wenn es nur um ein kleines Maß besser ist.
Während dieses Prozesses berücksichtige ich alles als Entscheidungsfaktor, sogar subjektive Beweise wie Meinung, Gefühle, Intuition usw. Ich versuche jedoch, jedem Faktor nicht mehr und nicht weniger Gewicht zu geben, als er verdient.
Der Gedankengang, der zur Schlussfolgerung führt, ist genauso wertvoll, vielleicht sogar mehr, als die Schlussfolgerung selbst, denn der Gedankengang validiert und unterstützt die Schlussfolgerung. Zu oft scheint der Gedankengang nicht existent, verloren oder voller Lücken zu sein. Ich betrachte es als Triumph, wenn ein Gedankengang zu seinem Abschluss findet, und sehe eine Schlussfolgerung, die vollständig durch einen vollständigen und korrekten Gedankengang gestützt wird.
Lassen Sie uns also weitermachen, in der "Perfektionierung der kleinen Details", in unserem Verständnis, unserem Wissen, unserem Handwerk, und lassen Sie "Experten" uns nicht im Wege stehen.
Chris, ich unterstütze Ihre Haltung voll und ganz. Ich denke, dass Leute, die die Werkzeuge benutzen, die das Web erschaffen (HTML/CSS/JS/was auch immer), diejenigen sind, die Debatten beginnen müssen, die den "Status quo" herausfordern, und dass diese öffentlich und für Experten und "Nicht-Experten" gleichermaßen offen sein sollten. Keine Elfenbeintürme, bitte.
Ihr Artikel hat viele Reaktionen ausgelöst (einschließlich Dennis' Beitrag), die vielen bescheidenen Praktikern (mich eingeschlossen) geholfen haben, die Zugänglichkeitsprobleme hinter einigen unserer gängigen Praktiken zu verstehen. Ich denke, das Internet hat dieses Mal funktioniert!
Hallo. Ich habe darüber geschlafen. Die bloße Vorstellung, dass ein CSS-Experte nichts über Barrierefreiheit schreiben darf, ist reine abstoßende, widerliche Unsinnigkeit.
Wie ich Mitglieder meines Entwicklungsteams hin und wieder erinnern muss. CSS ist keine Magie. Man kann keinen Müll in sein HTML werfen und erwarten, dass das wiederverwendbare Unternehmens-CSS ihn richtig rendert. Die HTML-Struktur muss vorgegeben und eingehalten werden.
Daher ist es sinnvoll, dem HTML viel Vordenken zu widmen, bevor man überhaupt mit dem Schreiben von CSS beginnen kann. Die gebührende Berücksichtigung der Barrierefreiheit wäre das Verantwortungsbewusste.
Sie sind kein Experte?! Ok. Für mich gehen die Listen weiter.
Chris,
Ich stimme Ihren Artikeln zu und widerspreche Dennis' Perspektive, Barrierefreiheit den "Experten" zu überlassen. Es ist nichts falsch daran, einen aktuellen Prozess oder eine Reihe von Prozessen in Frage zu stellen und die Community einzubeziehen. Jeder Prozess kann immer verbessert werden.
Dennis bringt berechtigte Punkte vor, dass das UL-Thema unermüdlich debattiert wurde, aber der Unterschied hier war, dass Sie nicht predigten, der Experte für das Thema zu sein, sondern stattdessen ein Forum schufen, in dem andere Leute diskutieren konnten, wie sie darüber denken. Das ist nicht, wie Sie mit erhobenem Finger allen sagen, es auf Ihre Weise zu tun, sondern Sie sagen "fordert dieses Thema heraus". Echte Experten begrüßen Herausforderung und Widrigkeiten. Obwohl dies ein etwas extremer Vergleich sein mag, wie glauben Sie, dass Medizin und medizinische Praxis verbessert werden? Wir haben eine grundlegende Formel für Erfolg und verbessern sie dann.
Es gibt ein Zitat, nach dem ich lebe, das ich geprägt habe, und das lautet: "Ich bin kein Experte, ich habe nur alles falsch gemacht, was es gibt." In meinen Augen ist ein Experte nur dann ein Experte, wenn er so viele Dinge wie möglich herausgefordert hat.
Dieser Teil 2 Artikel zeigte sogar, dass Sie zugestanden haben, dass Listen tatsächlich die bessere Wahl waren. Sie haben also nicht nur das Forum mit einer bestimmten Überzeugung/einem bestimmten Verständnis angesprochen, sondern auch Ihr eigenes Verständnis des Themas angepasst.
Ich habe die Artikel genossen. Fordern Sie weiterhin die Community und die Arbeit heraus, mit der wir als Entwickler/Front-End-Entwickler täglich konfrontiert sind. Ich freue mich darauf.
Hallo! Vor langer Zeit, als ich etwa 9 oder 10 Jahre alt war und in die Welt der Barrierefreiheit eintrat, hatte ich keine Menüs mit Listen bewertet, die Links nacheinander gesetzt und das konnte wirklich einen fatalen Fehler verursachen, da Screenreader nur den ersten Link lesen und den Rest, damit das nicht passiert, mussten aufeinanderfolgende Links mit einem druckbaren Zeichen getrennt werden, die Tatsache bleibt, dass zusätzliche Zeichen eingefügt werden, die Rauschen in die Website bringen, so dass die beste Lösung für dieses Problem darin bestand, Listen zu verwenden. Wie auch immer, nur um einen Absatz, eine Überschrift usw. zu wählen... Sollten wir eine Liste erstellen, wenn es sich um eine Sammlung von zusammenhängenden Elementen handelt?
Ich spüre mein Englisch...
Können wir also einen weiteren Zusammenfassungs-Post erwarten, der die hier in den Kommentaren diskutierten Dinge zusammenfasst?
Zuerst sagt er: "Bis ich solide Forschung sehe, die vorschlägt, dass das dumm ist, bleibe ich dabei."
Dann sagt er: "Persönlich denke ich, dass das Markieren von Navigation als Listen die beste Wahl zu sein scheint."
…
...und ich sage: "Was auch immer!"
Danke für die Zusammenfassung, Chris, und dafür, dass Sie die Zugänglichkeitsdiskussion auf einem Mainstream-Webdev-Blog angestoßen haben!
Der letzte Beitrag hat mich wirklich zum Nachdenken gebracht. Ich dachte, weniger Schreiben wäre von großem Wert, aber ich denke, die Navigation in Listen ist einfach ein bisschen besser, nur wegen des Stylings. Ich denke, Sie können mit li und a zusammen mehr machen als nur einen Hyperlink zu stylen.
Außerdem ist es eine Menge an Code, diese Art von Navigation in Joomla! oder jede generierte Navigation mit einem CMS zu verwenden.
Ich bleibe bei der altmodischen Methode. ul > li > a.
Danke für das tolle Thema!
Danke Chris für Ihren vorherigen Beitrag, der mich fast überzeugt hätte. Es erschien mir seltsam, dass Listen der De-facto-Standard für Navigation sind, aber ohne wirklichen Bedarf oder Nutzen. Ich bin froh, dass Ihre Schlussfolgerung lautet, dass es trotzdem in Ordnung ist, sie zu verwenden ;-)
Danke für diese Zusammenfassung. Sie ist sehr hilfreich und sehr geschätzt.
Gut gesagt, Chris! Danke für die ausgezeichnete Zusammenfassung!
Tolle Zusammenfassung, Chris .... Danke!!!
Ich stimme Ihrem Ergebnis zu, Chris, rein aus semantischen Gründen. Jedes Element, das als Liste definiert werden kann (z.B. eine Liste von Links), sollte meiner Meinung nach so markiert werden. Ich akzeptiere, dass es mehr Code ist, Navigation auf diese Weise zu markieren, aber wenn man Stylesheets ausschaltet, um das HTML in seiner reinsten Form zu betrachten, liest sich eine Linkliste eher wie ein Inhaltsverzeichnis eines Dokuments. Eine Liste ergibt mehr Sinn.
stimme Ihren Haltungen zu:-)
Das ist eine ziemlich kleine Angelegenheit, über die Sie reden.
Ich weiß, oder?! Warum diskutieren wir über ein Markup-Muster für fast jede einzelne Website im gesamten Internet, wenn BEYONCES KLEID HÄTTE EINE ECHSE DRAUF HABEN KÖNNEN.
Der wichtigste "Für"-Punkt wurde im ursprünglichen Beitrag nicht aufgenommen, obwohl viele Kommentare zum ursprünglichen Artikel ihn erwähnten, nämlich dass eine Liste von Links immer noch eine Liste ist, unabhängig vom Vorhandensein oder Fehlen des NAV-Elements. Eine Liste ist eine Liste. Das NAV-Element charakterisiert den gesamten Block, den es im DOM bewohnt. Es gibt einen Hinweis darauf, was sich darin befinden wird, aber das bedeutet nicht, dass das, was sich darin befindet, keine Struktur mehr haben kann. Wie ich bereits sagte, kann es immer noch eine beliebige Anzahl von Möglichkeiten geben, Inhalte und Links innerhalb einer NAV zu handhaben; denken Sie nur nicht, dass eine Liste plötzlich keine Liste mehr ist, nur weil HTML5 uns die NAV gegeben hat.
Sehr erfrischende Einstellung. Hier werden Prinzipien diskutiert, keine Personen, und die Diskussion war nicht falsch.
Wenn es sich um eine einfache Seite handelt, verwende ich eine klassische Liste in einem . Wenn die Seite komplex ist und etwas Durchsuchen erfordert, kategorisiere ich die Listen im Wesentlichen in Divs mit Links, die sich in Dropdowns verwandeln. Das macht das Design minimal, aber wichtiger ist, dass ein blinder Benutzer oder Screenreader nicht bei jedem Seitenaufruf die gesamte Navigationsleiste durchsuchen muss.
In einer Nav, meinte ich.
Ich denke, es ist einfacher, eine Liste zu verwenden. Dann haben Sie Mittel für Websites mit CMS-Editoren, dann können Sie leicht eine Aufzählung für die Navigation erstellen.
Jahrelang haben Banken und Finanzinstitute uns gesagt, wir sollen Bank- und Finanzfragen ihnen überlassen. Sehen Sie, wohin das kürzlich geführt hat. Gleiches gilt für die Lebensmittelindustrie. Monsanto, jemand? Ja, die Dinge "Experten" zu überlassen hat sich in der Vergangenheit wirklich sehr gut für uns erwiesen...
Ich bin Teil dieser Barrierefreiheits-Community und persönlich finde ich es großartig, dass Barrierefreiheitsfragen beginnen, außerhalb des üblichen Kreises sogenannter "Barrierefreiheits-Experten" diskutiert und debattiert zu werden. Dieser Blog ist einer dieser schönen Orte, der viel positive Aufmerksamkeit von Webentwicklern erhält, so dass die Behandlung von Barrierefreiheitsfragen hier eine gute Sache für die digitale Inklusion im Allgemeinen ist. Je mehr Webentwickler diesen Fragen ausgesetzt sind, desto wahrscheinlicher ist es, dass sie einige davon in ihre Arbeit integrieren.
Natürlich machen sie am Anfang nicht immer alles richtig, aber mit ein wenig Anleitung können wir hoffen, dass sie sich im Laufe der Zeit anpassen, genau wie bei jedem anderen Aspekt der Webentwicklung.
Wie bei allem anderen können auch hier von Zeit zu Zeit falsche Annahmen getroffen werden, und ich denke, die hier aufgeworfenen Fragen zu Listen und Navigation waren ein Beispiel dafür, das leider außer Kontrolle geriet. Aber ich denke, selbst die Top-Experten sind nicht vor Fehlern gefeit.
Ich möchte keine Ausreden für irgendjemanden finden, denn das ist nicht meine Rolle, aber viele Menschen aus der Barrierefreiheits-Community – mich eingeschlossen – sind sehr leidenschaftlich, was das Thema angeht, weil es die menschliche Natur und Ausgrenzung anspricht. Manchmal regt das Emotionen auf, die Reaktionen hervorrufen, die größer sind als beabsichtigt.
Ich habe das Gefühl, dass dies alles Teil einer positiven Lernkurve für alle ist: für einige, neue Fähigkeiten zu erwerben, und für andere, loszulassen zu lernen.
Daher ermutige ich Sie trotz dessen, was im Blogbeitrag über die Überlassung der Barrierefreiheit an Experten geschrieben wurde, dazu, den Blickwinkel der Barrierefreiheit weiterhin als etwas Betrachterwürdiges zu sehen. Erstens wird jeder hier durch das Nachdenken darüber etwas mehr über das Thema nachdenken und zweitens zwingt es jeden, sich zur Abwechslung einmal außerhalb der gewohnten Bahnen zu bewegen.
Schließlich wollen wir alle dasselbe, nämlich Web-Browsing-Erlebnisse schaffen, die für ein möglichst breites Publikum und eine möglichst große Anzahl von Plattformen funktionieren. Erkunden Sie also bitte weiterhin neue Wege und behalten Sie die Barrierefreiheit im Blick. Sie leisten großartige Arbeit. Und wie Sie sich inzwischen vielleicht gedacht haben, werden auch einige Leute aus dem Barrierefreiheitsbereich zuschauen! ;p
Hoffentlich können wir gemeinsam alle auf positive und konstruktive Weise zum Wohl dieses Webs beitragen, das uns allen so sehr am Herzen liegt.
Chris, vielen Dank, dass Sie bereit sind zu lernen, dass eine Person selten (jemals?) für alle spricht. Wie ich bereits in den Kommentaren zum ersten Artikel schrieb, ermutige ich jeden, sicherzustellen, dass er zumindest ein gewisses Gespür für die Qualifikationen eines Referenten hat. Würden wir das auch tun, wenn die Person keine Behinderung hätte, oder etwa nicht?
Ich möchte auch diejenigen ermutigen, die daran interessiert sind, mehr über Barrierefreiheit zu erfahren und ihr zu folgen, regelmäßig den WebAxe-Blog unter http://www.webaxe.org zu lesen. Dennis hat viel dazu beigetragen, das Web zu einem besseren Ort zu machen, wie Sie sicher zustimmen werden, wenn Sie mehr lesen.
Obwohl die Diskussion interessant war, sind aktuelle Navigation-Markup-Techniken weder veraltet noch kaputt. Ich betrachte das Problem als einfach: Wenn Sie eine Liste von Elementen definieren, dann kennzeichnen Sie sie als Liste. Zu behaupten, ein traditionelles Navigationsschema sei keine Liste von Elementen, um ein paar Sekunden für das Hinzufügen von zusätzlichem Markup zu sparen, erinnert an die Zeiten des Tabellenlayouts und das Weglassen von schließenden Tags. Wenn jedoch die Navigation einer Website eindeutig keine Liste ist, verwenden Sie das HTML5-NAV-Tag mit dem richtigen semantischen Markup. Der größte Fehler, den ich sehe, wenn keine Liste verwendet wird, ist, wenn eine Navigation Dutzende von Elementen enthält und kein Link zum Überspringen von Inhalten für Screenreader bereitgestellt wird. Die Website meines Colleges ist ein Paradebeispiel (tccd.edu; schauen Sie sie sich in Lynx an) und zeigt, wie lächerlich es ist, eine ordnungsgemäße Struktur aufzugeben.
Genau.
Barrierefreiheit ist in der Tat mehr als nur Screenreader. Was ich in der Zusammenfassung noch nicht sehe, ist, dass Links standardmäßig Inline-Elemente sind, während Sie für jedes neue Navigationselement eine Block-Level-Trennung benötigen, so dass die bloße Verwendung eines a-Tags nicht ausreicht.
Auch könnte ich mich irren, aber ich habe immer angenommen, dass ARIA-Rollen an zweiter Stelle hinter gutem HTML stehen. Eine Lösung für den Fall, dass die Standard-HTML-Struktur/Semantik einfach nicht ausreicht.
Dies ist leicht tangential und leicht relevant für die Diskussion, aber einer der Punkte, die wir hier ignorieren, ist, dass Webseiten idealerweise zuerst in HTML erstellt werden sollten, wobei der Inhalt von richtigen und logischen Tags umgeben ist („Ist das eine Liste? Dann kennzeichnen wir sie als Liste. Ist das ein Absatz? Dann kennzeichnen wir ihn als Absatz. Ist das eine Überschrift? Dann kennzeichnen wir sie als Überschrift.“) Diese Überlegungen sollen kommen, bevor „wie es im Browser aussieht“ berücksichtigt wird. Darum geht es beim CSS Naked Day. Nachdem Sie Ihren Inhalt korrekt markiert haben, ist es Zeit, das Styling anzuwenden. Wir könnten sogar sagen, markieren Sie Ihren Inhalt und prüfen Sie ihn dann in einem Browser mit nur angewendeten UA-Stylesheets und wenden Sie dann Ihr eigenes Styling an. Wenn Sie UL > LI in Ihrer Navigation jetzt aufgeben, weil Sie glauben, dass Ihre Linkliste keine Liste mehr ist, erscheint Ihre Seite dann zumindest logisch, wenn sie in einem Browser ohne Ihr eigenes Styling betrachtet wird?
Ich bin irgendwie nicht überzeugt von einem selbsternannten Experten, der dem Rest von uns sagt, wir sollen im Grunde die Klappe halten, als ob wir besorgt wären, wir könnten zu einem anderen Schluss kommen als dem, den er bereits entschieden hat. Wahr ist, Experten sind überall. Echte Innovation kann aus einer Vielzahl von Perspektiven kommen, die in einer Diskussion unter Gleichgesinnten zusammengeführt werden, anstatt aus einer einzigen, selbstsicheren Perspektive.
Nachdem ich die eingereichten Pro- und Kontra-Argumente gelesen habe, fällt mir auf, wie wenig es wirklich ausmacht. Das finde ich befreiend. Jeder sollte es beide Wege ausprobieren, nur um zu sehen, wie es für seine semantische Ausrichtung funktioniert.
Im Fall einer geordneten Inhaltsverzeichnis-Navigation (wie Sprunglinks zu Hauptüberschriften in Wikipedia-Einträgen) würde ich dazu neigen, eine geordnete Liste für eine schnelle visuelle Kennzeichnung von Unterabschnitten zu verwenden. Aber alles andere ist meiner Meinung nach für Experimente offen.
Trotz dessen, was Dennis und andere behaupten, ist eine „Liste“ sehr leicht in ihrer semantischen Bedeutung, grenzend an Bedeutungsleere in diesem Fall. „Nav“ hingegen ist sehr aussagekräftig. Aber eine „Liste“ von Elementen, die zusammen gruppiert sind – zu welchem Zweck? Navigation.
Eine Liste von Dingen, die Sie benötigen, um dieses Projekt abzuschließen? Ganz klar eine Liste.
Eine Liste von Dingen, auf die Sie klicken können, um durch diese Seite zu navigieren? Nicht so sehr. Es ist einfach nicht das, was wir als Liste bezeichnen. – Es ist keine To-Do-Liste, keine Wunschliste, keine David Letterman Top 10 Liste. Es ist nur eine Ansammlung von Navigationselementen, die gruppiert sind. Sie können dies als Liste betrachten oder nicht.
Danke, dass Sie uns die Möglichkeit geben, dies neu zu bewerten.
Liste oder keine Liste ist gleichermaßen gültig, und ich werde einen Mit-Webentwickler für seine/ihre Wahl nicht kritisieren. Aber die Diskussion zuzulassen ist wichtig. Danke, Matth
Christian's Punkt oben ist ein sehr überzeugender Grund, warum man eine Navigationsliste als Liste betrachten sollte. Dennoch kann ich nicht umhin zu bemerken, dass der Grund vollständig darauf basiert, wie es visuell in einem Browser erscheinen wird, wenn auch ohne CSS, wie am Naked Day.
Ist das die Art und Weise, wie wir Semantik definieren? Nein, das ist es nicht. Aber YMMV.
„Dennoch kann ich nicht umhin zu bemerken, dass der Grund vollständig darauf basiert, wie es visuell in einem Browser erscheinen wird, wenn auch ohne CSS, wie am Naked Day.“
Nicht ganz, was ich gesagt habe. Mein Punkt war, dass die erste Überlegung darin bestehen sollte, Ihren Inhalt richtig zu markieren, bevor Sie überlegen, wie er in einem Browser aussieht. Chris Coyier's ursprünglicher Beitrag schlug vor: „Vielleicht können wir die gängige Verwendung von
DIV#nav > UL > LI >AinNAV > Aändern“, aberNAVist nur dazu gedacht,DIV#navzu ersetzen, nichtDIV#nav > UL > LI.Wenn etwas also vorher eine Linkliste war, dann ist es wahrscheinlich immer noch eine Liste, oder mehr als wahrscheinlich. Wenn wir jetzt zu
NAV > Awechseln würden (und der Trend scheint nicht dorthin zu gehen), warum hätten wir dann nicht aus genau demselben Grund vorher nurDIV#nav > Abenutzt? Meine vielen Beiträge hier zeigen, dass eine Gruppe von Links etwas anderes als eine Liste sein kann, aber dass eine Liste von Links immer noch eine Liste ist. Das war der Hauptpunkt (Betonung auf „Haupt“).Der sekundäre Punkt (Betonung auf „sekundär“) war, ob nach dem Markieren Ihres Inhalts und dem Betrachten in einem Browser, bevor Sie Ihre eigenen Stile anwenden, dieser für SIE logisch erscheint? Ich habe nie angedeutet, dass Leute alle ihre Links in Listenelementen markieren, damit ich vorbeikommen und eine hübsche, eingerückte, aufzählende Linkliste auf ihrer Maschine sehen kann, oder sogar auf meiner eigenen Maschine am CSS Naked Day.
Ich hoffe, diese Klarstellung hilft.
Ich schreibe das nicht, um einfach nur kontrovers zu sein, sondern – Warum sollten Links in der Navigation eher als „Liste“ denn als Gruppe oder Sammlung betrachtet werden? Was ist, wenn es nur zwei Elemente gibt, gilt das als Liste? Ich verstehe den Zweck, aber es scheint, dass wir sowieso über Semantik diskutieren, sowohl über Code als auch über Bedeutung.
Wir haben Listen verwendet, da dies als semantisch galt UND Screenreader damit umgehen konnten. Ich weise darauf hin, dass die zusätzlichen Elemente zu dieser Zeit einige Browserprobleme verursachten und Navigationslisten schwieriger waren, aber wir haben uns alle daran gewöhnt und Browser sind besser geworden.
Die Semantik dieser Diskussion ist nicht wirklich von Wert, es sei denn, die Nuancen Ihrer gewählten Methode oder Vorliebe können von verschiedenen Geräten entweder jetzt oder in Zukunft interpretiert werden (die Vergangenheit ist Geschichte).
Obwohl vieles von dem, was diskutiert wird, in der Praxis akzeptabel ist, scheinen mir die neueren Tags besser zu beschreiben, was die Links im Container sind, als ob sie eine Liste sind oder nicht. Nur die Zeit wird zeigen, ob Geräte diese Tags verwenden, um die darin enthaltenen Links zu verstehen.
Ja, es geht definitiv um Semantik. Ja, zwei Elemente bilden eine Liste… vorausgesetzt, es ist überhaupt eine Liste. Wenn es eine Liste ist, spielt die Anzahl der Elemente keine Rolle.
Einkaufsliste
Milch
Eier
Nein, Links in der Navigation müssen nicht als Liste betrachtet werden. Die Frage ist nicht, ob sie so betrachtet werden müssen. Die Frage ist: Wenn Ihre Links in Ihrer Navigation eine Linkliste sind, dann ist es eine Liste. Wenn es etwas anderes ist, dann ist es etwas anderes. Wenn Sie sie eher als Gruppe oder Sammlung betrachten, haben Sie dann
GROUP- oderCOLLECTION-Tags, um diese Elemente zu umschließen?Und denken Sie daran, dass
NAVnur dazu dient,DIV#navzu ersetzen, nichtDIV#nav > UL > LI.Mach weiter so, Chris.
Beide Methoden sind in Ordnung, und es ist gut, dass Sie sich mit der Community darüber ausgetauscht haben.
Ich ärgere mich langsam darüber, dass Leute, die sich als Experten für UI, UX und Semantik betrachten, Ihnen vorschreiben, wie Sie Ihre Seite markieren sollen, als ob es „nur einen Weg“ gibt, dies zu tun.
Best Practices diktieren nicht immer, wie die Seite markiert werden sollte. Haben Sie etwas kreative Freiheit bei Ihren Markups und Designs, wer weiß, vielleicht wird Ihr Ansatz eines Tages zu einer Best Practice. Andernfalls wird alles anfangen, gleich auszusehen.
Besonders jetzt mit der Einführung von HTML5 ist vieles, was als Best Practice im Markup gilt, nicht mehr haltbar.
Lose
A-Elemente in einNAV-Element zu legen, ist etwas, das Sie tun können, aber es ist sehr ähnlich wie lose Eier in einen Eierkarton zu legen, der keine einzelnen Fächer für jedes Ei hat. Ja, es enthält sie. Enthält es sie gut? Nein.Ich bin kein Experte für Barrierefreiheit, aber aus den aufgeführten Ergebnissen ist der Kontext mal wieder König. Ich kann sehen, wenn eine Vielzahl von Navigationsoptionen vorhanden ist, könnte die Hauptnavigation eine Liste sein, während die Unternavigation auf die Auflistung verzichtet, oder sogar umgekehrt, wenn Sie mit der Taste „L“ schnell zu Unterlisten/Navigationsoptionen navigieren möchten.
Für kleinere Websites sehe ich keine große Bedeutung, unabhängig davon, welche Methode Sie verwenden. Es hängt wirklich von der Anwendung und dem Kontext ab, wie bei den meisten Dingen.
Ich finde, es sollte mehr Wert auf Sitemaps, accesskey und tab-index-Implementierung gelegt werden als auf das Navigation-Markup selbst.