Einige Indikatoren für exzellentes Web-Frontend-Design
|
Die Barrierefreiheit von Webseiten scheint etwas zu sein, was nur durch das Frontend bewertet und umgesetzt werden kann. Es ist ziemlich traurig, dass die Zugänglichkeit als Teil der Benutzerfreundlichkeit nur von technischem Personal kontrolliert werden kann. Das ist, was ich nicht sehen möchte. Auf der anderen Seite bedeutet dies jedoch eine neue Verantwortung für Front-End-Entwicklungsingenieure und stellt gleichzeitig einen Indikator dafür dar, wie man hervorragende Front-End-Ingenieure auszeichnet. Der Grund dafür ist, dass ich vor zwei Wochen nach Peking geflogen bin und dort einen Freund getroffen habe, der als Front-End-Entwickler bei Baidu arbeitet. Im vergangenen Jahr hat dieser Typ versucht, mich dazu zu bringen, seiner bösen Firma beizutreten. Natürlich konnte ich ihnen nach meinem Treffen nicht ins Gesicht sagen, dass es sich bei dem Unternehmen um ein böses Unternehmen handelte, also fand ich eine Ausrede und sagte, dass Ihre „Baidu Blind Road“ Blödsinn sei. Natürlich fragte er mich bescheiden nach dem Grund. Ich konnte also nur mit schlechtem Gewissen lügen und sagte, ich würde ihm die Einzelheiten nach meiner Rückkehr nach Shanghai erzählen. Der Grund dafür war, dass ich vor zwei Wochen einen Flug nach Peking nahm und dort einen Freund traf, der als Frontend-Entwickler bei Baidu arbeitet. Im vergangenen Jahr hat dieser Typ versucht, mich dazu zu bringen, seiner bösen Firma beizutreten. Natürlich konnte ich ihnen nach meinem Treffen nicht ins Gesicht sagen, dass es sich bei dem Unternehmen um ein böses Unternehmen handelte, also fand ich eine Ausrede und sagte, dass Ihre „Baidu Blind Road“ Blödsinn sei. Natürlich fragte er mich bescheiden nach dem Grund. Ich konnte also nur mit schlechtem Gewissen lügen und sagte, ich würde ihm die Einzelheiten nach meiner Rückkehr nach Shanghai erzählen. Nach meiner Rückkehr holte ich in aller Bescheidenheit ein altes E-Book hervor – „Dive Into Accessibility“ – und las es sorgfältig durch. Dann war ich überrascht, Folgendes herauszufinden: 1. Obwohl ich das Buch nicht gelesen habe, setze ich die meisten Dinge, die darin stehen, in meinem täglichen Leben um. Sicherlich ist es lobenswert, an guten Gewohnheiten festzuhalten. 2. Die Zugänglichkeit von Webseiten scheint etwas zu sein, das nur vom Frontend bewertet und implementiert werden kann. Es ist ziemlich traurig, dass die Zugänglichkeit als Teil der Benutzerfreundlichkeit nur von technischem Personal kontrolliert werden kann. Das ist, was ich nicht sehen möchte. Auf der anderen Seite bedeutet dies jedoch eine neue Verantwortung für die Front-End-Entwicklungsingenieure und bietet einen Anhaltspunkt dafür, wie sich hervorragende Front-Ends erkennen lassen. Lassen Sie mich den Inhalt von Dive Into Accessibility zusammenfassen und sehen, auf welche Aspekte bei der Barrierefreiheit geachtet werden sollte: 1. Identifizieren Sie Ihre Sprache Dies bedeutet, dass das Attribut „lang“ hinzugefügt werden muss, beispielsweise: Wenn einer der Abschnitte in einer anderen Sprache ist, fügen Sie dem Tag dieses Abschnitts das Attribut „lang“ hinzu. Das ist mir nicht gut gelungen, ich werde es mir für später merken. 2. Aussagekräftige Seitentitel konstruieren Einige erwähnenswerte Punkte: a) Vergessen Sie beim Erstellen einer Seite nie, einen Titel zu schreiben. Ich habe viele Seiten mit dem Titel „Unbenanntes Dokument“ oder „Neue Seite“ gesehen. Das ist peinlich. b) Soll der Titel zuerst kommen, der „Untertitel“ oder der „Haupttitel“? Die aktuelle Praxis scheint darin zu bestehen, den „Untertitel“ an den Anfang zu setzen, z. B. „Homepage für Audio- und Video-Unterhaltung_Sina.com“. Ich persönlich bin jedoch der Meinung, dass es vielleicht besser ist, den großen Titel an den Anfang zu stellen. Wenn ich beispielsweise „Sina.com_Video and Entertainment Home Page“ und „Sina.com_News Center Home Page“ zu meinen Favoriten hinzufüge, bleiben die Seiten aufgrund der alphabetischen Reihenfolge zusammen und werden nicht überall verstreut angezeigt. Dies muss natürlich nicht zwangsläufig der Fall sein und dient lediglich als Referenz. c) Achten Sie bei englischen Titeln darauf, kein „The“ vor den Titel zu setzen, da Ihre Webseite sonst in den Bookmarks immer am Anfang von „T“ gerankt wird. 3. Bereitstellung zusätzlicher Navigationshilfen Hier steht, dass Sie <link rel=”home” title=”Home” href=”http://url/of/home/page” /> hinzufügen sollen. Das weiß ich tatsächlich. Allerdings scheint es etwas schwierig zu sein, so vielen Links auf der Seite die Attribute „rel“ und „rev“ hinzuzufügen. 4. Präsentieren Sie zuerst Ihren Hauptinhalt OK, dies ist ein klassisches „Hoffnung auf gutes CSS“-Zugänglichkeitsprinzip. Das Platzieren von <div class=”main”> vor <div class=”side”> testet tatsächlich die CSS-Kenntnisse. Eine häufig gestellte Frage lautet: Wie kann man eine feste Breite der Seitenleiste und eine adaptive Breite der Hauptspalte erreichen und gleichzeitig sicherstellen, dass das HTML der Hauptspalte vor der Seitenleiste steht? Ich möchte dies wirklich in meine Interviewfragen aufnehmen, aber ich denke, es könnte zu schwierig sein. Allerdings ist diese Frage trotzdem sehr wichtig! 5. Überspringen von Navigationslinks Sehr wichtig! Dies wird im Hardcore-Webstandard-Tutorial „Website-Rekonstruktion“ erwähnt. Nur eines ist mir verdächtig. Wenn Sie den Skip-Link auf display:none setzen, haben Sie dann keine Angst, dass er vom Leser ignoriert wird? 6. Farbe sicher verwenden In diesem Artikel werden tatsächlich mehrere wichtige Punkte angesprochen: a) Der Farbkontrast sollte ausreichend sein, da sonst Menschen mit Sehschwäche das Bild nur schwer erkennen können b) Die Linkfarbe ist vorzugsweise blau (ich bevorzuge #09c) c) Links sollten unterstrichen sein 7. Echte Links verwenden Dies bedeutet, dass selbst wenn dieser Link zum Auslösen von Ajax verwendet wird, die URL des Ajax-Codeausschnitts im href platziert werden sollte, damit Suchmaschinen, Browser usw. es crawlen können. Informationen zu diesem Artikel finden Sie im Abschnitt „Kartoffeln graben“ auf der Homepage von Tudou.com. 8. Titel zu Links hinzufügen Es erübrigt sich zu erwähnen, dass es bei der Benutzerfreundlichkeit zwei große Schwerpunkte gibt: den Titel und das Alt-Bild. Puh~ Lasst uns erstmal diese erste Runde beenden. Wenn Sie sich für das Thema Barrierefreiheit interessieren, können Sie das Buch „Dive Into Accessibility“ im Detail lesen, insbesondere die ersten 5 Abschnitte. Dann können Sie einen Blick auf die hasserfüllte „Baidu Blind Road“ werfen. Ich werde in einem speziellen Artikel dieses skrupellose und schwarzherzige Produkt verfluchen, das Menschen mit Behinderungen täuscht. Die Barrierefreiheit von Webseiten scheint etwas zu sein, was nur durch das Frontend bewertet und umgesetzt werden kann. Es ist ziemlich traurig, dass die Zugänglichkeit als Teil der Benutzerfreundlichkeit nur von technischem Personal kontrolliert werden kann. Das ist, was ich nicht sehen möchte. Dies wiederum bringt für die Front-End-Entwicklungsingenieure eine neue Verantwortung mit sich und liefert einen Anhaltspunkt dafür, wie sich hervorragende Front-Ends erkennen lassen. 9. Tastaturkürzel definieren Dies bedeutet, dass das Accesskey-Attribut definiert werden muss. Das ist einfach. Entscheidend ist die Verwendung im Browser. Im IE ist es „alt+“ und verschiebt nur den Fokus. Wenn Sie klicken möchten, müssen Sie die Eingabetaste drücken; im Firefox ist es „shift+alt+“ und das Klickereignis wird direkt nach dem Drücken ausgelöst. Ich habe Opera, Chrome oder Safari nicht ausprobiert. Wenn also jemand Bescheid weiß, lassen Sie es mich bitte wissen. Danke an aoao für die Bereitstellung: Safari 4/Mac Strg+Alt+Taste | /Win Alt+Taste Opera Umschalt+Esc-Auswahltaste Chrome 3 Alt+Taste Zusätzlich zum Zugriffsschlüssel gibt es noch einen wichtigeren: den Tabindex. Manchmal müssen Sie die Standardreihenfolge des Tabindex ändern, um ein bequemeres Erlebnis zu erhalten. Das Anmeldefeld sieht beispielsweise wie folgt aus: Benutzername Mein Passwort merken Passwort vergessen? In der Standardreihenfolge drücken Sie die Tabulatortaste und der Fokus wandert nacheinander durch „Benutzername“, „Angemeldet bleiben“ und „Passwort“. Es scheint jedoch praktischer, „Angemeldet bleiben“ nach „Passwort“ zu setzen. Schließlich muss nicht jeder die Schaltfläche „Angemeldet bleiben“ verwenden, insbesondere nicht diejenigen, die dieses Anmeldefeld häufig verwenden. Sie mögen „Angemeldet bleiben“ offensichtlich nicht. Daher sollte mittels tabindex folgende Reihenfolge angegeben werden: „Benutzername“, „Passwort“, „Angemeldet bleiben“. 10. Keine neuen Fenster öffnen Der Text bedeutet, dass dadurch der „Verlaufs“-Datensatz des Browsers zerstört wird und die „Zurück-Taste“ des Browsers ungültig wird. Ich verstehe endlich, warum ausländische Websites selten neue Fenster öffnen, und ich verstehe endlich, warum der XHTML-Standard das Zielattribut des a-Tags aufhebt. Dies scheint allerdings nicht den Gewohnheiten chinesischer Nutzer zu entsprechen und ist diskussionswürdig. Es gibt jedoch einige Problemumgehungen, die in Betracht gezogen werden können: a) Stelle auf der Seite eine Checkbox bereit. Nach dem Auswählen wird das target-Attribut im a-Tag automatisch entfernt, sodass alle Links auf dieser Seite geöffnet werden. b) Das neu geöffnete Fenster geht nicht nach „_blank“, sondern in ein Fenster mit einem angegebenen Namen, beispielsweise „neu“. Auf diese Weise werden alle neu geöffneten Seiten im selben Fenster geöffnet. Zumindest in diesem Fenster können Sie noch die „Zurück-Taste“ des Browsers verwenden. (Übrigens sind alle Videos auf Tudou.com so und werden im selben neuen Fenster geöffnet). 11. Definition von Akronymen Lassen Sie mich zunächst erklären, dass der Autor das Wort Akronym hier falsch versteht. Ein Akronym ist ein Wort, dessen Anfangsbuchstaben zu einem neuen, lesbaren Wort kombiniert werden, wobei nicht alle Buchstaben groß geschrieben werden müssen, wie z. B. Nato (North Atlantic Treaty Organization). HTML oder CSS ist also kein Akronym, sondern Es zählen nur DOS und BASIC. Wie bei HTML oder CSS sollte dies „Abkürzung“ heißen und das entsprechende Tag ist das Tag <abbr>, aber leider ist dieses Tag bei IE6 ungültig. 12. Geben Sie Ihrem Kalender eine echte Überschrift 13. Echte Tabellenüberschriften verwenden 14. Bereitstellung einer Zusammenfassung für Tabellen Die Kombination dieser drei Punkte bedeutet, Tabellen richtig zu verwenden. Tatsächlich gibt es für Tabellen noch viel mehr Verwendungsmöglichkeiten als diese drei. Es wird empfohlen, den HTML Authoritative Guide sorgfältig zu lesen. Die Barrierefreiheit von Webseiten scheint etwas zu sein, was nur durch das Frontend bewertet und umgesetzt werden kann. Es ist ziemlich traurig, dass die Zugänglichkeit als Teil der Benutzerfreundlichkeit nur von technischem Personal kontrolliert werden kann. Das ist, was ich nicht sehen möchte. Dies wiederum bringt für die Front-End-Entwicklungsingenieure eine neue Verantwortung mit sich und liefert einen Anhaltspunkt dafür, wie sich hervorragende Front-Ends erkennen lassen. 15. Abstandsbilder ignorieren Denken Sie immer daran, Ihren Bildern ein Alt-Attribut hinzuzufügen, auch wenn es leer ist. Der Grund hierfür ist, dass manche Reader den Dateinamen oder die URL direkt vorlesen, wenn „alt“ nicht angegeben wird. Das erinnert mich an etwas, das ich als Kind gelesen habe. Darin hieß es, dass die Menschen vor der Erfindung der Zahl 0 leere Stellen zur Darstellung von Zahlen verwendeten. Das ist sehr unpraktisch. Alt="" entspricht also der großen Erfindung der Zahl 0. 16. Verwenden Sie echte Listen (oder verschleiern Sie sie richtig) Dieser Artikel bedeutet eigentlich auch, dass Sie am besten CSS verwenden, wenn Sie ein Bild als Symbol vor einer Liste verwenden möchten. Es wird jedoch nicht erwähnt, warum <ul> verwendet wird. Tatsächlich ist dies auch ein Problem, mit dem ich zu kämpfen hatte: Derzeit scheint es keinen besseren Grund für die Verwendung von <ul> oder <ol> zu geben, außer dem fundamentalistischen Glauben an die „Tag-Semantik“. Ich hoffe, dass diejenigen, die mit der Situation vertraut sind, mich informieren können. 17. Bereitstellung von Textäquivalenten für Bilder 18. Bereitstellung von Textäquivalenten für Imagemaps Diese beiden Elemente sind identisch mit 15. Ich möchte hier nur zwei Anmerkungen machen, die nicht zum Thema gehören: a) Ist das <map>-Tag heutzutage noch nützlich? Das Gleiche erinnert mich an das <applet>-Tag. b) Zusätzlich zu alt gibt es zwei weitere Attribute: lowsrc und longdesc. Wenn ich Zeit habe, werde ich mir die aktuelle Browserunterstützung für diese beiden Eigenschaften ansehen. 19. Verwendung echter horizontaler Regeln Dort heißt es, dass die Verwendung von <hr> besser sei als die Verwendung eines dekorativen Bildes. (P.S.: Es stellt sich heraus, dass hr die Abkürzung für „Horizontal Rule“ (horizontale Linie) ist, hoho) Aber es scheint besser, <hr> nicht zu verwenden. 20. Relative Schriftgrößen verwenden Ich möchte diese Regel wirklich befolgen, aber das verdammte Microsoft hat die Schriftart Songti bei Schriftgrößen unter 12 Pixel unlesbar gemacht. Da mittlerweile jedoch alle Browser über eine Zoomfunktion verfügen, ist die relative Schriftgröße möglicherweise nicht mehr so wichtig wie früher. Wie auch immer, die Schuld liegt beim Internet Explorer! 21. Echte Header verwenden Zusätzlich zur Suchmaschinenoptimierung erwähnt der Artikel, dass einige Browser die Titel im Artikel gezielt erfassen können, um eine bequeme Navigation im Text zu ermöglichen. Diese Funktion ähnelt der Methode zum automatischen Erstellen eines Inhaltsverzeichnisses in Word. Eines ist jedoch bemerkenswert: die Verwendung des <h1>-Tags. Es bezieht sich tatsächlich auf den Text, der den Inhalt der Seite am besten zusammenfasst, und nicht auf den Text, der scheinbar an der Titelposition steht (wie beispielsweise das LOGO oben auf der Website). Ich habe früher immer den Fehler gemacht, das Logo der Website als H1 zu verwenden. Tatsächlich ist es beispielsweise auf der Suchergebnisseite offensichtlich, dass als h1-Titel „Suche XXX, insgesamt XXX Ergebnisse“ verwendet werden sollte. 22. Beschriftung von Formularelementen Ich möchte nur eines mit Ihnen besprechen: Sollen wir „id“ und „for“ zum Verbinden verwenden oder direkt Label-Tags zum Einrahmen der Formularelemente und des Textes verwenden? Was sind Ihre Gewohnheiten? 23. Alles durchsuchbar machen Dies ist ein relativ umfassendes Problem auf Produktebene und wird hier nicht erläutert. 24. Erstellen einer Erklärung zur Barrierefreiheit Das ist ziemlich gut, aber ich empfehle, den Originaltext zu lesen, um Einzelheiten zu erfahren. Ich werde es tun, wenn ich Zeit habe. |
<<: Detaillierte Erklärung der Socket (TCP)-Bindung aus dem Linux-Quellcode
Artikel empfehlen
MySQL-Datenbankterminal – allgemeine Befehlscodes für Vorgänge
Inhaltsverzeichnis 1. Benutzer hinzufügen 2. Ände...
SVG+CSS3 zum Erzielen eines dynamischen Welleneffekts
Eine Vektorwelle <svg viewBox="0 0 560 20...
Beispiele für MySQL-Batch-Hinzufügungs- und Speichermethoden
Beim Anmelden am Stresstest sind viele verschiede...
Codebeispiele für allgemeine Docker-Datenvolumenvorgänge
Wenn der Entwickler Dockerfile zum Erstellen des ...
So verwenden Sie Xtrabackup zum Sichern und Wiederherstellen von MySQL
Inhaltsverzeichnis 1. Sicherung 1.1 Vollständig v...
Tutorial zur Installation von Linux-JDK und zur Konfiguration von Umgebungsvariablen (jdk-8u144-linux-x64.tar.gz)
Es wird empfohlen, zunächst mit dem Befehl sudo s...
Mobiles Internet-Zeitalter: Responsive Webdesign ist zum allgemeinen Trend geworden
Wir befinden uns in einer Ära der rasanten Entwick...
So stellen Sie MongoDB-Container mit Docker bereit
Inhaltsverzeichnis Was ist Docker einsetzen 1. Zi...
Implementierung einer geplanten Sicherung in Mysql5.7
1. Suchen Sie mysqldump.exe im MySQL-Installation...
Fallstudie zur Implementierung eines jQuery Ajax-Chatbots
Chatbots können viel manuelle Arbeit sparen und i...
Grafisches Beispiel für die Verwaltung von Datenträgerkontingenten unter Linux
Das Datenträgerkontingent ist die Speichergrenze ...
Der gesamte Prozess der Verwendung von node.js Express zum automatischen Erstellen des Projekts
1. Installieren Sie die Express-Bibliothek und de...
Müssen Designer das Programmieren lernen?
Oftmals wird nach der Fertigstellung eines Webdes...
Detaillierte Erklärung des Inline-Formats von HTML-Tabellen
Inline-Format <colgroup>…</colgroup> ...
So erstellen Sie Ihren eigenen nativen JavaScript-Router
Inhaltsverzeichnis Vorwort Einführung JavaScript ...