Es gibt hier keine wirkliche Notwendigkeit einer Einführung. Amazon ist nicht nur ein Haushaltsnot für so viele von uns, sondern führt dank ihrer allgegenw?rtigen Amazon Web Services -Plattform auch einen riesigen Teil des Webs.

Hier gibt es eine gro?e Anzahl von Dingen, also werde ich die stillosen Dinge erkunden, die mir in den Weg gehen, w?hrend ich ein Produkt findet und vorgibt, es zu kaufen.

Auf der Homepage sehe ich sofort ein Sprite -Blatt, das von der Website verwendet wird. Es ist wirklich anstelle dessen, wo das Logo sein k?nnte, und macht es schwierig zu wissen, ob diese Bilder dort sein sollen oder nicht. Jedes Sprite enth?lt mehrere Versionen des Logos, und selbst wenn ich das ?Amazon“ -Wordmarken darin sehen konnte, ist es überraschend, dass es nicht die globale Heimatverbindung ist. Wenn Sie neugierig sind, wo sich die Heimlink wirklich befindet, ist diese Struktur von Spannweiten, in denen das Logo als Hintergrundbild serviert wird… in CSS:

 <a href="/ref%20=%20nav_logo" aria-label="Amazon" tabindex="6">
  <span> </span>
  <span> </span>
  <span> </span>
</a>

Das n?chste Problem, das auftritt, ist, dass der Link ?zum Hauptinhalt überspringen“ nicht wie ein typischer Skip -Link aussieht, aber er funktioniert wie einer. Es stellt sich heraus, dass es sich um ein Elements ohne HREF handelt, und JavaScript (ja, ich habe das aktiviert gelassen) wird verwendet, um die Verankerungsfunktionalit?t nachzuahmen.

Wenn ich eine Suche beginne, muss ich weiter unter dem Link ?Erste Schritte“ schauen, um die Vorschl?ge zu sehen. Unter den Artikeln ?Ihre Listen“ und ?Ihr Konto“ wird es schwierig, die Links auseinander zu unterscheiden. Sie erscheinen alle zusammen, als w?ren sie ein super langer Mega -Link. Ich glaube, es w?re effektiver gewesen, in diesem Szenario eine semantische ungeordnete Liste zu verwenden, um ein Gefühl der Hierarchie aufrechtzuerhalten.

Unter all diesen Suchvorschl?gen sind die Konto- und Navigationslinks jedoch leichter zu lesen, da sie durch einen Platz getrennt werden.

Interessanterweise ist das Karussell niedriger auf der Seite immer noch etwas funktional. Wenn ich auf die Optionen "Vorherige Seite" oder "n?chste Seite" klicke, wird die Reihenfolge der Bilder ge?ndert. Wenn ich zwischen diesen Optionen hüpfte, mussten ich scrollen.

Wenn Sie etwas weiter nach unten überspringen, gibt es ein Werbeelement. Es enth?lt eine "Anzeigen -Feedback" -Szge, die so statisch aussieht wie das, was wir früher mit dem Link ?zum Hauptinhalt überspringen“ gesehen haben. Nun, ich habe es trotzdem angeklickt und es enthüllte ein Formular zum Teilen von Feedback zur Werbung.

Sie haben es vielleicht übersehen, aber über den beiden Gruppen von Formularbeetikeln befindet sich eine leere Taste und die Funkger?te sind fehl am Platz. Die Struktur ist verwirrend, weil ich nicht wei?, welche Etiketten zu welchen Optionsfeldern geh?ren. Ich meine, ich denke, ich k?nnte davon ausgehen, dass das erste Label mit der ersten Funkeingabe passt, aber genau das ist es: eine Vermutung.

Auch verwirrend ist, dass sich am unteren Rand des Formulars zwischen den Optionen ?Schlie?en“, "Abbrechen" und "Feedback" -Optionen "Schlie?en", "Abbrechen" und "Feedback" befinden. Wenn ich eine davon drücke, bin ich zurück zur Anzeige zurückgebracht. Nehmen wir nun an, ich war blind und benutzte einen Bildschirmleser, um denselben Teil selbst mit CSS zu navigieren. Für zwei der Tasten würde mir "Senden, Button" mitgeteilt werden und h?tte daher keine Ahnung, was ich tun soll, ohne zu erraten. Es ist eine weitere gute Erinnerung an die Bedeutung der Semantik bei der Behandlung von Markup (in diesem Fall Tastenbezeichnungen) und achten Sie darauf, wie viel Vertrauen in JavaScript platziert wird, um Web -Standardeinstellungen zu überschreiben.

Wenn Sie eine Suche durchführen - sagen wir nach ?Mac Minis“ - kann ich immer noch auf die Produktbewertungen zugreifen und verstehen, da sie anstelle von Sternen als Text angezeigt werden (anstelle der Tooltips, die sie sonst sind). Dies ist ein gutes Beispiel für die Verwendung eines soliden textuellen Fallbacks, wenn ein Bild als visueller Inhalt verwendet wird, aber als Hintergrundbild in CSS serviert wird.

Nachdem ich den Mac Mini mit Intel Core i3 ausgew?hlt habe, werde ich von anderen Mac -Produkten über dem Produkt begrü?t, das ich ausgew?hlt habe, und muss über sie hinausgehen, um die Menge, die ich kaufen m?chte, auszuw?hlen.

Scrollen Sie nach unten, und eine Schaltfl?che ?zum Warenkorb hinzufügen“ wird neben einem Etikett mit demselben Inhalt angezeigt. Das ist überflüssig und wahrscheinlich unn?tig, da ein Element in der Lage ist, ein eigenes Etikett zu halten:

 <taste> zum Warenkorb  hinzufügen</taste>

Als n?chstes haben wir ein Angebot für eine Amazon Prime -Mitgliedschaft. Das ist alles in Ordnung und Dandy, aber beachten Sie, dass es zwischen dem Produkt, das ich kaufe, und der Taste "Jetzt kaufen" eingefügt wird. Es f?llt mir sehr schwer zu wissen, ob das Klicken auf "Now Buy" den Mac Mini zum Auschecken hinzufügen wird oder ob ich stattdessen Amazon Prime kaufe.

Ich wollte auch ein bisschen herumspielen, also habe ich versucht, den Mac Mini aus meinem Wagen aus dem Wagen zu entfernen, als ich herausgefunden habe, wie man ihn hinzufügt. Ich habe zehn Sekunden gebraucht, um den Wagen zu finden, damit ich ihn bearbeiten konnte. Es stellte sich heraus, dass es direkt neben dem Link ?Weiter mit dem Checkout (1 Element)“ war, aber RAMS direkt neben ihm, so dass alles wie ein einzelner Link aussieht.

Insgesamt war es nicht schwierig, ein Produkt zu finden. Andererseits wurde der Weg zur Kasse mehr Kopfschmerzen, als ich vorging. Es gab einige schlechte semantische und barrierefreie Praktiken, die Verwirrung verursachten, und wichtige Schaltfl?chen und Verbindungen wurden schwieriger zu finden.

Hast du Duckduckgo schon einmal benutzt? Ich nehme an, dass viele Leute, die CSS-Tricks lesen, haben, aber für diejenigen, die zum ersten Mal davon h?ren, ist dies eine Alternative zur Google-Suche mit Schwerpunkt auf Benutzer des Benutzers.

Der Einstieg damit ist also ein wenig irreführend, da die Homepage der Duckduckgo super einfach ist. Nicht viel kann dort schief gehen, oder? Nun, es ist ein bisschen mehr involviert als das, da wir uns mit Suchergebnissen, Inhaltshierarchie und Relevanz befassen, sobald wir Suchanfragen vornehmen.

Mir, mit dem ich begrü?t werde, ist viel mehr Inhalt als ich für einen so einfachen Lander erwartet h?tte. Es ist nicht ganz klar, welche Website dies durch Scannen der Website ist. Die erste Erw?hnung des Produktnamens ist der vierte Artikel in der ersten ungeordneten Liste und ein Aufruf zum Handeln, um Duckduckgo zu verteilt. Das Logo fehlt v?llig, was offensichtlich bedeutet, dass es als Hintergrund verwendet wird… in CSS.

Wenn ich von dieser ungeordneten Liste spreche, gehe ich davon aus, dass das, was ich sehe, in den Header geh?rt, und es gibt keine Skip -Navigation. Wir haben ein dreifaches Pfeilsymbol (ist das ein mobiles Menü oder ein Menü, um die am wenigsten wichtigen Elemente oder etwas anderes auszublenden, gefolgt von Datenschutzinhalten, Social-Media-Links, etwas, das wie ein Link aussieht, aber tats?chlich zwei Links für "About DuckDuckgo" und "More" ist.

Nach unten kommt der prim?re Anwendungsfall für die Site tats?chlich auf: die Suchleiste. Ich gehe davon aus, dass das Etikett "S" "Such" bedeutet und das "X" -Label ist eine Abkürzung, um das Suchfeld zu l?schen.

Okay, eine Suche durchzuführen. Es ist super cool, dass ich immer noch automatische Besch?ftigungen sehen und die Auf- und Ab-Pfeil-Tasten verwenden kann, um jeden einzelnen hervorzuheben. Wenn Sie das Feld r?umen, verschwinden die Vorschl?ge erst, nachdem ich die Seite aktualisiert hatte.

Alles im Einstellungsmenü sind Elemente in einer Liste, einschlie?lich der überschriften - ?Einstellungen“, ?Privatsph?re Essentials“, ?Warum Privatsph?re“, ?wer wir sind“ und ?in Kontakt bleiben“. Dies sind sehr wahrscheinlich Teil eines Mobilfunks, wenn CSS aktiviert war, m?glicherweise von dieser dreifachen Pfeilverbindungssache an der Spitze ausgel?st. In diesem Menü sehe ich vier leere Kugelpunkte zwischen ?Einstellungen“ und ?mehr Themen“.

Als neuer Benutzer habe ich keine Ahnung, was diese leeren Listenelemente sind, aber die Kugeln, die ich im obigen Screenshot hervorgehoben habe, sind tats?chlich die Themenschaltfl?chen. Um die Absicht zu verdeutlichen, w?re ein Fallback -Text hilfreich, und dies sollten Radio- oder normale Schaltfl?chen anstelle von Listenelementen (berücksichtigt ihre Funktionalit?t) sein.

Jeder Inhaltsblock mit einem ?X“ - einschlie?lich der ?Einstellungen“ - kann nicht abgewiesen werden; Durch Klicken auf das "X" über einem Bild eines Wanderbildes wird jedoch ein Teil des Inhalts den Bildschirm gel?scht - dank JavaScript, die noch aktiviert ist. Was ich wirklich umst?ndlich finde, ist die redundante Schallt?tigkeit in der bestellten Liste unter ?Wechsel zu DuckDuckgo“. Wir sehen Folgendes:

 1. 1Wir speichern Ihre pers?nlichen Informationen nicht
2. 2Wir folge dir nicht mit Anzeigen herum
3. 3we verfolgen dich nicht. Immer.

Sieht aus wie ein gemischter Anwendungsfall von semantischem Markup mit einer anderen M?glichkeit, Listenelementnummern anzuzeigen.

Bis zum ersten

Element gibt es eine kolossale Menge an Wei?raum unter dem Wanderbild. Angenommen, es ist entweder Links oder Schaltfl?chen, wenn Sie auf jede Instanz von "DuckDuckgo hinzufügen" [Browser] hinzufügen "addieren" tut nichts. Die Abbildung jedes Abschnitts führt zu unn?tigen horizontalen Scrollen. Dies ist ein h?ufiges Problem, das wir an den anderen Websites sehen, die wir uns ansehen.

Nach diesen Abschnitten gibt es eine leere Box und ich habe keine Ahnung, was es ist.

Ich habe Devtools geknackt und es stellt sich heraus, dass es sich um ein

Hey, hier ist eine Seite, mit der viele von uns gut vertraut sind! Nun, viele von uns sind es gewohnt, die ganze Zeit darauf eingeloggt zu werden, aber ich werde es surfen, w?hrend ich mich angemeldet habe.

Es gibt bereits einen Skip -Link (yay). Es gibt auch ein mobiles Navigations -Symbol, von dem ich erwarte, dass er nichts bewirkt, und ich bin richtig bew?hrt, wenn ich es versuche.

Zwischen einigen Navigationsgegenst?nden gibt es unn?tig riesige Lücken. Wenn Sie auf diese klicken, fungieren sie immer noch als Dropdown -Menüs. Sie sind

Bevor ich etwas in das Feld eingreife, sehe ich drei Instanzen "Suchen Sie alle Github" und "Sprung zu" Links. Ich habe keine Ahnung, welche ich klicken soll, aber wenn ich eine Suche mache, wird das Schlüsselwort in der dritten Gruppe angezeigt.

Alles andere auf der Homepage scheint in Ordnung zu sein, bis auf eine Reihe überm??ig gro?er Bilder, die das Fenster horizontal überflie?en.

Kehren wir zur Suchleiste zurück und navigieren Sie zu jedem Repo, das wir finden k?nnen. Gleich unter der Suchstaste haben wir zwei nahezu identische sekund?re Navigationsleisten, die die Repository -Z?hlungen, Code, Commits und andere Meta zurückgeben. Ohne auf die Quelle zu schauen, habe ich keine Ahnung, wie viel davon der Zweck ist, zwei davon zu haben.

Repository-Seiten haben zum gr??ten Teil eine leicht zu befolgende Struktur und eine logische Hierarchie. W?hrend ich vor dem Kommen angemeldet und mein Cache gel?scht hat, tritt die Schaltfl?che ?Entlass“ für den Block ?Joy Github Today“ immer noch wie ich erwarten kann. Wie wir bereits bei Amazon gesehen haben, sind die Tag -Links schwer zu unterscheiden, da sie zusammen als einzelne Linie laufen.

Die n?chsten beiden Schaltfl?chen - "JavaScript" und "New Pull Request" - scheinen nichts zu tun, wenn ich auf sie klicke. Ich würde mir vorstellen, dass die Pull -Anfrage -Taste seitdem deaktiviert werden sollte, wenn es sich um einen Gast ansieht, es sei denn, er soll einen Benutzer zuerst zu einem Anmeldung auf dem Bildschirm bringen ... aber selbst das fühlt sich nicht richtig an. Es stellt sich jedoch heraus, dass die Taste tats?chlich deaktiviert ist, wenn CSS aktiv ist. Dann ist der Rest der Seite ziemlich leicht zu verstehen.

Wenn Sie hier haupts?chlich für das Management, den Beitrag zu Repositorys hier sind, werden Sie nicht viel Reibung ausgesetzt, da sich die Hierarchie gut abspielt. Sie werden an anderer Stelle so ziemlich gleich erleben, egal ob Sie sich mit Pull -Anfragen, Problemen oder einzelnen Dateien befassen. Die meisten Hürden leben auf weniger prominenten Seiten auf dem Gel?nde.

? Was die Website gut macht	? Was die Website verbessern kann
Die Hierarchie und Struktur vieler Seiten sind wirklich leicht zu befolgen und logisch zu machen.	Verwenden Sie die H?he und Breitenattribute für Elemente und SVGs, um zu verhindern, dass sie in die Luft jagen.
Die meisten der auf der Seite eingebetteten SVG -Symbole sind entsprechend dimensioniert.	Achten Sie auf leere Listenelemente.
Sch?ne Verwendung eines Skip -Links im Header.	Stellen Sie sicher, dass die Schaltfl?chenbezeichnungen vollst?ndige W?rter verwenden.
	Stellen Sie sicher, dass Links auf Wei?- oder Leitungsunterbrechungen zwischen ihnen sind, um Run-Ons zu verhindern.

Diese n?chste Website ist ein Online -Tool, das ich h?ufig verwende, um Farbkontraste auf Barrierefreiheit zu überprüfen. Und für eine Seite, die in der Farbe so gro? ist, dass hier wahrscheinlich viel mit CSS passiert, sollte es interessant werden.

über der Navigation befindet sich sofort eine gro?e Menge an Platz und keine überspring -Links. Die Hamburger- und Schlie?tasten für das mobile Layout und die Tasten ?X“ neben jeder zu testenden Farbe sind übergro?.

Oh, und schauen Sie sich diese riesige Lücke zwischen der Schaltfl?che ?Testfarben“ und dem n?chsten Abschnitt des Inhalts an.

Eine der vielen sch?nen Funktionen dieser Website ist ein Kontrollk?stchen, mit dem Sie nur die Farben sehen k?nnen, die den Test bestanden haben, anstatt alle getesteten Farben anzusehen. Leider macht diese Taste nichts mit deaktivierter CSS. Ich kann jedoch immer noch sehen, welche Farben funktionieren und die Definitionen für Kontrastverh?ltnisse, gro?en Text und kleinen Text direkt in der Ergebnistabelle erhalten.

Das Verstecken und Zeigen der Begriffe ist wahrscheinlich das, was die Taste mit CSS macht. Der Mist ist, dass ich den Zweck dieser einzelnen Buchstaben (z. B. und r) nach den Tischkopfzeilen nicht kennen werde. Es ist auch ironisch und verwirrend zu sehen, dass diese Nachricht für alle fehlenden Farben nach der Tabelle erfolgt, da in dieser Liste Farben vorhanden sind. Was getan werden k?nnte, ist, es standardm??ig auszublenden, aber es sp?ter bedingt injizieren, wenn alle Farben in einem einzelnen Test ausfallen.

Wenn es Devtools herauszieht, stellt sich heraus, dass ein Teil des wei?en Raums oben das Hex Naw -Logo als SVG -Datei ist. Der oben genannte Raum, der anderen SVG -Symbolen zugeordnet ist, die für die Seite verwendet werden. Durch die Verwendung einer Standardfarbe von Schwarz für das Logo würde dies dazu beitragen, einen Teil des Raums zu verringern. Ich habe diese schnelle ?nderung in Devtools vorgenommen und es macht einen merklichen Unterschied.

Die zweite Spaltung des Raums wird durch einen SVG -Lader verursacht, der w?hrend der Berechnung von Farbkontrasten erscheint. Dies k?nnte unterstützt werden, indem eine viel kleinere und dennoch proportionale Breite und H?he genau wie im mobilen Menü und ?X“ -Symbole angegeben wird.

Das Hinzufügen einer anf?nglichen Breite und H?he zu jedem SVG würde definitiv die Notwendigkeit des Scrollens verringern. Dies k?nnen wir auch tun, um die Lücken zu beheben, die wir auch in Githubs Navigation gesehen haben.

Letztendlich bleibt Hex Naw ohne CSS ziemlich nützlich. Ich kann immer noch Farben testen, Farbergebnisse verabschieden und fehlschlagen und durch die Seite navigieren. Es ist einfach schade, dass ich nicht mit tats?chlichen Farben arbeiten konnte und musste diese extra gro?en SVG -Ikonen herumarbeiten.

Wie Github ist Stack -überlauf eine dieser Ressourcen, die viele (wenn nicht die meisten) von uns in unserer Ges??tasche behalten, da es hilft, zu finden, ob jemand bereits eine Entwicklungsfrage gestellt hat und welche Antworten auf sie sind.

Auf der Seite, um eine Frage zu stellen, sehe ich eine Reihe leerer Kugelpunkte über dem Hauptelement . Ich habe keine Ahnung, warum diese leeren Listenelemente da sind. Ich sehe auch keine der Formatierungsschaltfl?chen, aber nachdem ich ein bisschen herumgemü?e, stellte ich fest, dass sie zuf?llig nichts anderes als leere Listenelemente sind. Vielleicht würde der Fallback -Text oder ein SVG -Symbol für jedes Element identifizieren, was diese sind und tun. Sie sollten auch in echte Tasten verwandelt werden.

Es ist auch noch m?glich, eine Liste ?hnlicher Fragen zu erhalten, w?hrend Sie Text in das Titelfeld eingeben. Jeder hier funktioniert wie erwartet, was sch?n ist. Obwohl es seltsam ist, dass die Stimmen für jede vorgeschlagene Frage zweimal erscheint, einmal über dem Titel als Link und erneut neben dem Titel, ohne verknüpft zu werden.

Eines der Schlüsselelemente, nach denen wir alle suchen, wenn wir auf einer Frageseite über den Stapelüberlauf landen, ist das Big Green Checkmark, das die richtige Antwort aus allen eingereichten Antworten angibt. Aber wenn CSS ausgeschaltet ist, ist es schwer zu sagen, welche Antwort angenommen wurde, da jede Antwort in der Liste ein schwarzes Checkmark enth?lt. Auch wenn die akzeptierte Antwort immer ganz oben ist, gibt es immer noch keine alternative oder Fallback -Anzeige, ohne mit der Seite interagieren zu müssen. Darüber hinaus gibt es keinen Hinweis darauf, ob Sie bereits gew?hlt oder abgeschaltet haben, die die Frage oder die Antworten gestimmt haben.

Um meine Erfahrungen mit Stack Overflow zusammenzufassen, konnte ich das erreichen, was ich normalerweise auf die Website komme: Antworten auf ein Programmierungsproblem zu finden. Trotzdem gab es in der Tat einige Verbesserungsm?glichkeiten, und diese Seite ist ein hervorragendes Beispiel dafür, wie Design h?ufig auf Farben beruht, um auf einer Seite Hierarchie oder Wert anzuzeigen, was auf den Fragenseiten in diesem Experiment schmerzlich fehlte.

Wikipedia, der prim?re Bezugspunkt des Webs! Es ist ein Online -Grundnahrungsmittel und eine seiner ansprechenden Eigenschaften ist eine Art Mangel an Design. Dies sollte für einen interessanten Test sorgen.

Ein paar Links down, wir haben eine Skip -Navigation -Option für die reale Navigation und Suche. Der Homepage -Header, der das Globe -Bild enth?lt, beh?lt sein zwei S?ulenlayout bei, und Sie haben m?glicherweise vermutet, warum: Dies ist ein Tischlayout. Obwohl es sich m?glicherweise nicht um ein Usability -Problem handelt, wissen wir, dass es nicht semantisch ist, sich auf Tische zu verlassen, um ein Layout zu erstellen. Das war ein Relikt des Weges, als wir keine Schwimmer, Flexbox, Raster oder eine andere M?glichkeit hatten, die Platzierung von Inhalten zu bew?ltigen. Trotzdem gibt es auf der Seite keine spürbaren Usability -Probleme oder verwirrenden Elemente.

Lassen Sie uns zu dem übergehen, was viele von uns in Wikipedia die meiste Zeit verbringen: einen Artikeleintrag. Dies ist oft der Einstiegspunkt zu Wikipedia, insbesondere für diejenigen von uns, die zun?chst etwas in eine Suchmaschine eingeben, und dann auf das Suchergebnis von Wikipedia klicken.

Das Fazit ist, dass diese Seite immer noch ?u?erst nutzbar und hierarchisch ist, wobei CSS deaktiviert ist. Das Layout geht auf eine einzelne Spalte ab, aber der Inhalt flie?t immer noch in einer logischen Reihenfolge und h?lt sogar Styling -Teile. Nochmals danken Sie eine Abh?ngigkeit von Tabellen und Inline -Tabelleneigenschaften.

Ein Problem, gegen das ich mich gesto?en habe, ist die Navigation. In dem Header gibt es einen Link ?Sprung zur Navigation“, der mich tats?chlich zur Navigation fallen l?sst, wenn ich darauf klicke. Für den Fall, dass Sie sich fragen, ist die Navigation im Fu?zeilen enthalten, was der Grund dafür ist, dass sie darauf springen müssen.

Es gibt scheinbar zuf?llige Kontrollk?stchen über einigen der Navigationsüberschriften (insbesondere für ?Varianten“ und ?mehr“) und sie scheinen keinen Zweck zu erfüllen, obwohl das Kontrollk?stchen über ?mehr“ bei aktivierter CSS in einer bestimmten Ansichtsfenster -Breite angezeigt wird.

Es gibt tats?chlich eine seltsame Sache in der Navigation, und es handelt sich um eine Schaltfl?che ohne Etikett zwischen den überschriften ?in anderen Projekten“ und ?Sprachen“.

Wenn ich auf diese Schaltfl?che klicke, kann ich immer noch auf die Spracheinstellungen zugreifen, und es funktioniert haupts?chlich wie erwartet. Das Layout führt beispielsweise ein Layout von Registerkarten bei, das super funktional ist.

Auf der Registerkarte "Anzeige" tun jedoch die Schaltfl?chen "Sprache" und "Schriftarten" nichts. Sie sind wahrscheinlich auch Registerkarten, aber zumindest kann ich sehen, was sie anbieten. Neben diesen Schaltfl?chen befinden sich zwei leere ausgew?hlte Menüs, die absolut nichts tun (der erste wird mit Comicneue-, OpendySlexic- und System -Schriftoptionen besiedelt, wenn Sie das Kontrollk?stchen überprüfen). Wenn Sie sich die Registerkarte "Eingabe" ansehen, fungieren die Schaltfl?chen für Schreibsprachen immer noch als Registerkarten. Ich kann immer noch andere Optionen als Englisch, Spanisch und Chinesisch ausw?hlen.

Ohne CSS sind die Artikel nicht schwer zu lesen, und das liegt daran, dass fast jedes Element semantisch korrekt ist und einer konsistenten Dokumenthierarchie folgt. Eine Sache, die ich mich gefragt habe, war, wo der "Show/Hide" -Button, der normalerweise im Inhaltsverzeichnis liegt,. Es stellt sich heraus, dass es sich um ein einsames Kontrollk?stchen handelt, und das Etikett ist gef?lscht-es verwendet die Inhaltseigenschaft auf einem Pseudo-Element in CSS, um das Etikett anzuzeigen.

Ein weiteres Thema in Artikeln ist, dass Sie Zeit damit verbringen müssen, Bilder zu jagen, wenn Sie sie vorschauten. Normalerweise l?st das Klicken auf ein Bild im Artikel-Seitenleiste ein Vollbildmodal aus, das ein Karussell von Bildern enth?lt. Ohne CSS ist dieses Karussell verschwunden und an seiner Stelle das Bild mit einer Reihe von nicht markierten Schaltfl?chen darüber. Das ist ein Mist, aber es w?re vollkommen in Ordnung, wenn das Karussell nicht ganz auf der Seite w?re, gegenüber dem, wo sich das geklickte Bild oben auf der Seite befindet, ohne darauf zu springen.

Ich w?re nachl?ssig, wenn ich nicht erw?hnen würde, dass das Wikipedia -Logo nirgends in dem Artikel zu finden war! Es ist nicht einmal ein wei?es SVG auf Wei?. Der Link enth?lt eigentlich nichts:

 <a href="/wiki/main_page" title="Besuchen Sie die Hauptseite"> </a>

Zum Glück ist der Link "Hauptseite" unter "Navigation" der andere Weg nach Hause, ohne den Browser zurück zu drücken. Aber es fühlt sich immer noch seltsam an, kein Branding auf der Seite zu haben, wenn es auf der Homepage so eine gro?artige Arbeit leistet.

Die HTML -Probleme von Wikipedia bestehen haupts?chlich in Funktionen, die ich erwarte, weniger h?ufig als Artikel verwendet zu werden. Sie haben meine Leseerfahrung auf lange Sicht nie behindert.

Ein versteckter Link zum überspringen der Navigation ist ein Muss. Notice how most of the sites we looked at contained navigation links directly in the header. With CSS turned off, those navigations became long lists of links that would be so hard to tab or scroll through for any user. Having a link to skip that would make that experience much better.

The most basic HTML example I've seen is an anchor link that targets an ID where the main content begins.

 <a href="#main">Skip to main content</a>
<!-- etc. -->
<main></main>

And, of course, we can throw a class name on that link to hide it visually so it is not displayed in the UI but still available for both keyboard users and when CSS happens to be off.

 .skip-navigation {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  padding: 0;
  Position: absolut;
  height: 1px;
  width: 1px;
}

/* Bonus points for adding :focus styles */

Another pain point we saw in a few cases were text links running together. Whether it was in the navigation, tags, or other linked up meta, we often saw links that were “glued together” in such a way that several individual links appeared to be one giant link. That's either the result of hand-coding the links like that or an automated build task that compresses HTML and removes whitespaces in the process. Either way, the HTML winds up like this:

 <a href="#">CSS</a><a href="#">JavaScript</a><a href="#">Python</a><a href="#">Swift</a>

We can keep the freedom to use spaces or line breaks though, even with CSS disabled. One idea is to lean on flexbox for positioning list elements when CSS is enabled. When CSS is disabled, the list items should stack vertically and display as list items by default.

If the items are tags and should still be separated, then traditional spacing methods like margins and padding are still great and we can rely on natural line breaks in the HTML to help with the style-less formatting. For example, here are line breaks in the HTML used to separate items, flexbox to remove spaces, then styled up in CSS to re-separated the items:

The biggest nuisance in this experiment may have been images exploding on the screen to the point that they dominate the content, take up an inordinate amount of space, and result in a hefty amount of scrolling for all users.

The fix here is rather straightforward because we have HTML attributes waiting for us to define them. Both images and SVG have methods for explicitly defining their width and height.

 <img  src="/static/imghw/default1.png" data-src="/path/to-image.jpg" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="Dieses Mal habe ich versucht, das Web ohne CSS zu durchsuchen" >

<svg width="40px" height="40px" viewbox="0 0 200 200">
  <polygon points="80,0 120,0 120,80 200,80 200,120 120,120 120,200 80,200 80,120 0,120 0,80 80,80"></polygon>
</svg>

Many of the large gaps on the sites we looked at looked like empty space, but they were really white SVGs that blew up to full size and blended into the white background.

So, yes, using the proper width and height attributes is a good idea to prevent monstrous icons, but we can also do something about that white-on-white situation. Using properties like fill and fill-rule as attributes will work here.

 <!-- Icon will be red by default -->
<svg viewbox="-241 243 16 16" width="100px" fill="#ff0000">
  <path d="M-229.2,244c-1.7,0-3.1,1.4-3.8,2.8c-0.7-1.4-2.1-2.8-3.8-2.8c-2.3,0-4.2,1.9-4.2,4.2c0,4.7,4.8,6,8,10.6 c3.1-4.6,8-6.1,8-10.6C-225,245.9-226.9,244-229.2,244L-229.2,244z"></path>
</svg>

 /* ...and it's still red when CSS is enabled */
svg {
  fill: #ff0000;
} 

Lastly, if buttons are initially empty, they need to have visible fallback content. If they use a background image and a title for what the do, use a span containing the title text then add aria-hidden="true" so it doesn't sound like the screen reader is reading the button label twice (eg VoiceOver says, “Add button Add” instead).

 <button title="Add">
  <span aria-hidden="true">Add</span>
</button>

Then the CSS can be something like this:

 .btn-icon {
  background: url(path/to/icon.svg) 0 0 / 100% 100%;
  height: 40px;
  width: 40px;
}

.btn-label {
  Anzeige: Block;
  overflow: hidden;
  H?he: 0;
}

If there are

 <button>
  <svg width="40px" height="40px" viewbox="0 0 200 200" aria-labelledby="btn-title">
    <title>Add</title>
    <polygon points="80,0 120,0 120,80 200,80 200,120 120,120 120,200 80,200 80,120 0,120 0,80 80,80"></polygon>
  </svg>
</button>