優れたウェブフロントエンドデザインの指標

Web ページのアクセシビリティは、フロントエンドでのみ評価および実装できるもののようです。ユーザビリティの一部であるアクセシビリティが、技術者によってのみ制御できるというのは、非常に残念なことです。これは私が見たくないものです。しかし一方で、これはフロントエンド開発エンジニアに新たな責任を追加すると同時に、優秀なフロントエンドエンジニアを見分けるための指標を追加します。その理由は、2週間前に北京行きの飛行機に乗って、Baiduでフロントエンド開発者として働いている友人に会ったからです。この男は過去1年間、私を彼の邪悪な仲間に引き入れようとしてきました。もちろん、彼らに会った後、面と向かって彼らを邪悪な会社と呼ぶことはできなかったので、言い訳を見つけて、あなたの「百度の盲道」はゴミだと言いました。もちろん彼は謙虚に私に理由を尋ねました。それで私は罪悪感から嘘をつき、上海に戻ってから詳細を話すと言いました。
その理由は、2週間前に北京行きの飛行機に乗って、Baiduでフロントエンド開発者として働いている友人に会ったからです。この男は過去1年間、私を彼の邪悪な仲間に引き入れようとしてきました。もちろん、彼らに会った後、面と向かって彼らを邪悪な会社と呼ぶことはできなかったので、言い訳を見つけて、あなたの「百度の盲道」はゴミだと言いました。もちろん彼は謙虚に私に理由を尋ねました。それで私は罪悪感から嘘をつき、上海に戻ってから詳細を話すと言いました。
帰国後、私は謙虚に古い電子書籍「Dive Into Accessibility」を取り出して、じっくりと読みました。
すると、次のことに驚きました。
1. 私はこの本を読んでいませんが、そこに書かれていることのほとんどを日常生活で実践しています。確かに、良い習慣を続けることは賞賛に値します。
2. Web ページのアクセシビリティは、フロントエンドでのみ評価および実装できるもののようです。ユーザビリティの一部であるアクセシビリティが、技術者によってのみ制御できるというのは、非常に残念なことです。これは私が見たくないものです。しかし一方で、これはフロントエンド開発エンジニアに新たな責任を追加し、優れたフロントエンドを見分けるための指標を追加します。
さて、「Dive Into Accessibility」の内容を要約し、アクセシビリティに関してどのような問題に注意を払うべきかを見てみましょう。
1. 言語の特定
これは、次のような lang 属性を追加することを意味します。セクションの 1 つが別の言語である場合は、そのセクションのタグに lang 属性を追加します。この問題はあまりうまくできなかったので、後で覚えておきます。
2. 意味のあるページタイトルを作成する
言及する価値のあるいくつかの点:
a) ページを作成するときは、タイトルを書くことを忘れないでください。「無題のドキュメント」や「新しいページ」というタイトルのページをたくさん見てきました。恥ずかしいです。
b) タイトルは「サブタイトル」と「メインタイトル」のどちらを先にすべきでしょうか?現在は、「オーディオとビデオのエンターテイメントホームページ_Sina.com」のように、「サブタイトル」を最初に置くのが慣例となっているようです。しかし、個人的には、ビッグタイトルを先に出した方が良いのではないかという意見があります。このように、「Sina.com_Video and Entertainment Home Page」と「Sina.com_News Center Home Page」をお気に入りに追加すると、アルファベット順になっているため、あちこちに散らばることなく、一緒に表示されます。もちろん、これは必ずしもそうとは限りません。あくまで参考値です。
c) 英語のタイトルの場合、タイトルの前に「The」を付けないようにしてください。そうしないと、ブックマークで Web ページが「T」の先頭にランク付けされます。
3. 追加のナビゲーション支援の提供
これは、<link rel=”home” title=”Home” href=”http://url/of/home/page” />を追加するように書かれています。実は私はこれを知っています。しかし、ページ上の多数のリンクに rel 属性と rev 属性を追加するのは少し難しいようです。
4. 最初にメインコンテンツを提示する
さて、これは典型的な「優れた CSS を期待する」アクセシビリティ原則です。 <div class=”main”> を <div class=”side”> の前に置くと、実際に CSS スキルがテストされます。よく聞かれる質問は、サイドバーの幅を固定し、メイン列の幅を適応型にすると同時に、メイン列の HTML をサイドバーの前に配置する方法です。ぜひ面接の質問にこれを含めたいのですが、難しすぎるかもしれません。しかし、この質問はとにかく非常に重要です!
5. ナビゲーションリンクをスキップする
とても重要です!これについては、ハードコア Web 標準チュートリアル「Web サイトの再構築」で説明されています。ただ一つ疑問に思うことがあります。スキップリンクをdisplay:noneに設定すると、読者に無視されてしまうのではと心配ではないでしょうか？
6. 色を安全に使用する
この記事では実際にいくつかの重要なポイントについて説明しています。
a) 色のコントラストは十分でなければなりません。そうでないと、視力の弱い人は画像を見るのが難しくなります。
b) リンクの色は青が望ましいです（私は #09c を好みます）
c) リンクには下線を付ける
7. 実際のリンクを使用する
つまり、このリンクが Ajax をトリガーするために使用される場合でも、検索エンジンやブラウザなどがクロールできるように、Ajax コードスニペットの URL を href に配置する必要があります。この記事に関しては、Tudou.comのホームページの「ジャガイモ掘り」セクションを参照してください。
8. リンクにタイトルを追加する
言うまでもなく、ユーザビリティの焦点となる主な要素は 2 つあります。a のタイトルと img の alt です。
ふう〜まずはこの第1ラウンドを終わらせましょう。アクセシビリティに興味がある場合は、「Dive Into Accessibility」という本、特に最初の 5 つのセクションを詳しく読んでみてください。それでは、憎むべき「百度の盲道」をご覧ください。私は特別な記事を使って、障害者を騙すこの悪徳で心の黒い製品を呪います。

Web ページのアクセシビリティは、フロントエンドでのみ評価および実装できるもののようです。ユーザビリティの一部であるアクセシビリティが、技術者によってのみ制御できるというのは、非常に残念なことです。これは私が見たくないものです。しかし、これにより、フロントエンド開発エンジニアに新たな責任が追加され、優れたフロントエンドを見分けるための指標が追加されます。
9. キーボードショートカットの定義
これは、accesskey 属性を定義することを意味します。それは簡単です。重要なのはブラウザでどのように使用するかです。 IE では「alt+」で、フォーカスを移動するだけです。クリックしたい場合は Enter キーを押す必要があります。Firefox では「shift+alt+」で、押すとクリックイベントが直接トリガーされます。 Opera、Chrome、Safari は試していないので、知っている方がいたら教えてください。
提供していただいたaoaoに感謝します: Safari 4/mac control+alt+key | /win alt+key
Opera Shift+Esc 選択キー
Chrome 3 alt+キー
accesskey に加えて、実際にはもっと重要なものがあります。それは tabindex です。より便利なエクスペリエンスを実現するために、デフォルトの tabindex の順序を変更する必要がある場合があります。たとえば、ログインボックスは次のようになります。
ユーザー名
パスワードを記憶する
パスワードを忘れましたか? デフォルトの順序では、Tab キーを押すと、フォーカスが「ユーザー名」、「次回から入力を記憶する」、「パスワード」の順に切り替わります。しかし、「パスワード」の後に「ログイン情報を記憶する」を置く方が便利なようです。結局のところ、誰もが「ログイン情報を記憶する」ボタンを使用する必要はありません。特に、このログインボックスを何度も使用する人はそうです。明らかに、彼らは「ログイン情報を記憶する」を好みません。したがって、tabindex を使用して次の順序を指定する必要があります: 「ユーザー名」、「パスワード」、「ログイン情報を記憶する」。
10. 新しいウィンドウを開かない
このテキストの意味は、ブラウザの「履歴」記録が破壊され、ブラウザの「戻るキー」が無効になるということです。海外のウェブサイトが新しいウィンドウをめったに開かない理由と、XHTML 標準が a タグの target 属性をキャンセルする理由がようやく分かりました。しかし、これは中国のユーザーの習慣に適合していないようで、議論する価値があります。ただし、検討できる回避策がいくつかあります。
a) ページにチェックボックスを用意します。チェックボックスを選択すると、a タグのターゲット属性が自動的に削除され、すべてのリンクがこのページで開かれるようになります。
b) 新しく開いたウィンドウは「_blank」ではなく、「new」などの指定された名前のウィンドウに移動します。この方法では、新しく開いたページはすべて同じウィンドウで開かれます。少なくともこのウィンドウでは、ブラウザの「戻るキー」を引き続き使用できます。（ちなみに、Tudou.com の動画はすべてこのように、同じ新しいウィンドウで開かれます）。
11. 頭字語の定義
まず最初に、著者がここで「頭字語」という言葉について理解していることが間違っていることを説明させてください。頭字語とは、単語の最初の文字を組み合わせて新しい読みやすい単語を作ることです。Nato (North Atlantic Treaty Organization) のように、必ずしもすべての文字を大文字にする必要はありません。 HTMLやCSSは頭字語ではありませんが、
DOS と BASIC のみが対象です。 HTML や CSS と同様に、これは省略形と呼ばれるべきもので、対応するタグは <abbr> タグですが、残念ながらこのタグは IE6 では無効です。
12. カレンダーに本物のキャプションをつける
13. 実際のテーブルヘッダーの使用
14. 表の要約を提供する
これら 3 つのポイントを組み合わせると、テーブルを正しく使用できるようになります。実際、テーブルにはこれら 3 つ以外にも多くの用途があります。HTML 権威ガイドを注意深く読むことをお勧めします。

Web ページのアクセシビリティは、フロントエンドでのみ評価および実装できるもののようです。ユーザビリティの一部であるアクセシビリティが、技術者によってのみ制御できるというのは、非常に残念なことです。これは私が見たくないものです。しかし、これにより、フロントエンド開発エンジニアに新たな責任が追加され、優れたフロントエンドを見分けるための指標が追加されます。
15. スペーサー画像を無視する
空の場合でも、必ず画像に alt 属性を追加してください。理由は、alt が書かれていない場合、一部のリーダーはファイル名または URL を直接読み上げてしまうからです。
これは私が子供の頃に読んだ本を思い出させます。それは、0 という数字が発明される前は、人々は数字を表すために空白を使用していた、というものでした。これは非常に不便です。つまり、alt="" は数字 0 という偉大な発明に相当します。
16. 実際のリストを使用する（または適切に偽装する）
この記事は実際には、リストの前に画像をアイコンとして使用したい場合は、CSS を使用するのが最適であるという意味でもあります。しかし、<ul> が使用される理由については言及されていません。実際、これは私が苦労してきた問題でもあります。現時点では、「タグセマンティクス」に対する原理主義的な信念を除いて、<ul> または <ol> を使用するより良い理由はないようです。状況を知っている人が私に知らせてくれることを願っています。
17. 画像にテキストを付加する
18. イメージマップにテキストを代用する
これら 2 つの項目は 15 と同じです。
ここで、話題から外れたコメントを 2 つ述べたいと思います。
a) <map> タグは今でも役に立ちますか?同じことが <applet> タグにも当てはまります。
b) alt に加えて、lowsrc と longdesc という 2 つの属性があります。時間があれば、これら 2 つのプロパティに対する現在のブラウザサポートを確認します。
19. 実際の水平線を使用する
装飾的な画像を使用するよりも、<hr> を使用する方がよいと言われています。（追記：hrはhorizontal ruleの略だそうです、ほほ）でも、<hr>は使わない方が良いようです。
20. 相対的なフォントサイズの使用
私は本当にこのルールに従いたいのですが、Microsoft は Songti フォントを 12 ピクセル未満のフォントサイズでは判読できないようにしました。しかし、現在ではすべてのブラウザにズーム機能が搭載されているため、相対的なフォントサイズは以前ほど重要ではなくなるかもしれません。とにかく、IE のせいだ!
21. 実際のヘッダーの使用
SEO に加えて、一部のブラウザでは記事内のタイトルを具体的にキャプチャして、便利なテキスト内ナビゲーションを提供できると記事では言及されています。この機能は、Word で目次を自動的に生成する方法に似ています。
ただし、<h1> タグの使用については注目に値します。これは実際には、タイトルの位置に表示されるテキスト (Web サイトの上部にあるロゴなど) ではなく、ページのコンテンツを最もよく要約するテキストを指します。以前、私はいつもウェブサイトのロゴを H1 として使用するという間違いを犯していました。実際、たとえば検索結果ページでは、「XXX を検索、合計 XXX 件の結果」を h1 タイトルとして使用する必要があることは明らかです。
22. フォーム要素のラベル付け
皆さんと議論したいことが 1 つだけあります。接続には id と for を使用するべきか、それともラベルタグを直接使用してフォーム要素とテキストをフレーム化すべきかということです。あなたの習慣は何ですか？
23. すべてを検索可能にする
これは比較的広範な製品レベルの問題なので、ここでは説明しません。
24. アクセシビリティステートメントの作成
これはかなり良いですが、詳細については原文を読むことをお勧めします。時間があるときにやります。

<<: Linux ソースコードからのソケット (TCP) バインドの詳細な説明

>>: この記事は、JQueryの基本的な操作を理解し、始めるのに役立ちます。