ここには紹介の本當(dāng)の必要はありません。 Amazonは私たちの多くの家庭用主食であるだけでなく、彼らのユビキタスなAmazon Web Servicesプラットフォームのおかげで、Webの膨大な部分を駆り立てています。

ここでは膨大な數(shù)のことが起こっているので、製品を見つけて購入するふりをしながら、自分の道に入るスタイルのないものを探ります。

ホームページでは、すぐにサイトで使用されているスプライトシートが表示されます。それは本當(dāng)にロゴがどこにあるかの代わりにあるため、それらの畫像がそこにあることを意図しているかどうかを知るのが難しいです。各スプライトにはロゴの複數(shù)のバージョンが含まれており、「Amazon」という単語マークが表示されたとしても、驚くべきことに、グローバルホームリンクではないことです。ホームリンクが実際にどこにあるのか興味があるなら、ロゴが背景畫像として提供されるこのスパンの構(gòu)造です... CSS：

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

次に発生する問題は、「メインコンテンツへのスキップ」リンクが典型的なスキップリンクのようには見えないが、1つのように機(jī)能することです。 HREFのない要素であることが判明し、JavaScript（はい、私はその有効化を殘しました）は、アンカー機(jī)能を模倣するために使用されます。

検索を開始すると、「開始」リンクの下をさらに見て、提案を確認(rèn)する必要があります。 「リスト」と「アカウント」項(xiàng)目の下では、リンクを區(qū)別することが困難になります。それらはすべて、1つの非常に長いメガリンクであるかのようにまとめられているように見えます。このシナリオでセマンティックな順序付けリストを使用して、階層の感覚を維持する方がより効果的だったと思います。

ただし、これらすべての検索提案の下で、アカウントとナビゲーションリンクは、一部のスペースで區(qū)切られているため、読みやすくなります。

興味深いことに、ページの下のカルーセルはまだ多少機(jī)能的です。 「前のページ」または「次のページ」オプションをクリックすると、畫像の順序が変更されます。ただし、これらのオプションの間にホップするには、スクロールする必要がありました。

もう少しスキップして、広告要素があります。 「メインコンテンツへのスキップ」リンクで見たものと同じように靜的に見える「広告フィードバック」文字列が含まれています。とにかくクリックして、広告の関連性に関するフィードバックを共有するためのフォームを明らかにしました。

見逃したかもしれませんが、フォームラベルの2つのグループの上に空白のボタンがあり、ラジオボタンは場違いです。どのラジオボタンに屬しているかわからないため、構(gòu)造は混亂しています。つまり、最初のラベルは最初のラジオ入力に伴うと仮定できると思いますが、それはまさにそれが推測です。

また、混亂しているのは、フォームの下部にある「近くのウィンドウ」、「キャンセル」、「フィードバックの送信」オプションの間にボタンを送信することです。これらのいずれかを押すと、広告に戻ります。さて、私が盲目で、スクリーンリーダーを使用して、CSSが存在していても、この同じ部分をナビゲートしたとします。 2つのボタンに「送信、ボタン」と言われます。したがって、推測せずに何をすべきかがゼロになります。マークアップ（この場合はボタンラベル）を処理する際のセマンティクスの重要性と、WebデフォルトをオーバーライドするためにJavaScriptにどれだけの信頼が置かれるかに注意することについてのもう1つの良いリマインダーです。

「Mac Minis」については、検索を行うと、星の代わりに（他の方法ではツールチップの代わりに）テキストとして表示されるため、製品評価にアクセスして理解できます。これは、畫像が視覚コンテンツとして使用されているが、CSSの背景畫像として提供されるときに、固體のテキストフォールバックを使用する良い例です。

Intel Core i3でMac Miniを選択したので、選択した製品の上の他のMac製品に迎えられ、購入する數(shù)量を選択するためにそれらを超えて航行する必要があります。

下にスクロールすると、同じコンテンツが付いたラベルの橫に「カートに追加」ボタンが表示されます。 A 要素は獨(dú)自のラベルを保持できるため、それは冗長であり、おそらく不要です。

 カートに追加

次に、Amazon Primeメンバーシップのオファーがあります。それはすべて大丈夫でダンディですが、購入している製品と「今すぐ購入」ボタンの間に挿入されていることに注意してください。 「今すぐ購入」をクリックすると、Mac Miniをチェックアウトして追加するのか、代わりにAmazon Primeを購入しているのかを知るのは本當(dāng)に苦労しています。

私も少し遊んだことを望んでいたので、それを追加する方法を見つけたら、カートからMac Miniを取り外してみました。カートを見つけるのに10秒ほどかかりました。そうすれば、編集できました。 「チェックアウトに進(jìn)む（1アイテム）」リンクのすぐ隣にあったことが判明しましたが、ラムズはすぐに上にあるため、すべてが単一のリンクのように見えます。

全體として、製品を見つけることは困難ではありませんでした。一方、チェックアウトへの道は、私が進(jìn)むにつれて頭痛の種になりました?；靵yを引き起こしたセマンティックおよびアクセシビリティ関連の貧弱なプラクティスがいくつかあり、重要なボタンとリンクを見つけるのがより困難になりました。

以前にDuckduckgoを使用したことがありますか？ CSS-Tricksを読んでいる多くの人が持っていると思いますが、初めてそれを聞いているかもしれない人にとっては、ユーザーのプライバシーに重點(diǎn)を置いてGoogle検索に代わるものです。

したがって、Duckduckgoのホームページは非常に簡単なので、これを始めることは少し誤解を招くものです。あまりうまくいかないでしょうよね？検索結(jié)果、コンテンツの階層、および検索クエリを作成することになったら、それよりも少し複雑です。

すぐに、私が迎えているのは、このような単純なランダーに期待していたよりもはるかに多くのコンテンツです。では、これがWebサイトをスキャンすることで、これがどのウェブサイトであるかを完全に明確にしていません。製品名の最初の言及は、最初の順序のないリストの4番目の項(xiàng)目であり、「Duckduckgoを広める」ための行動(dòng)への呼びかけです。ロゴは完全に欠落しています。これは明らかに、CSSでバックグラウンドとして使用されていることを意味します。

その順序のないリストといえば、私が見ているものがヘッダーに屬していると仮定し、スキップナビゲーションはありません。トリプルアローアイコン（モバイルメニューまたは最も重要なアイテムを非表示にするメニュー、または他の何かを非表示にしますか？）があり、その後にプライバシー関連のコンテンツ、ソーシャルメディアリンク、1つのリンクのように見えますが、実際には「Duckduckgoについて」と「詳細(xì)を?qū)Wぶ」の2つのリンクです。

最後に、最下部に向かって、サイトの主要なユースケースが実際に登場します：検索バー。 「S」ラベルは「検索」を意味し、「X」ラベルは検索フィールドをクリアする速記であると思います。

さて、検索の実行に。私はまだ自動(dòng)提案を見て、上下の矢印キーを使用してそれぞれを強(qiáng)調(diào)することができるのは非常にクールです。ただし、フィールドをクリアすると、ページを更新するまで提案は消えません。

設(shè)定メニューのすべては、「設(shè)定」、「プライバシーエッセンシャル」、「プライバシーの理由」、「私たちは誰ですか」、「連絡(luò)を取り続ける」など、見出しが必要なものを含むリストのアイテムです。これらは、CSSが有効になった場合、モバイルメンの一部であり、おそらく上部のトリプルアローリンクによってトリガーされます。そのメニューには、「設(shè)定」と「その他のテーマ」の間に4つの空白の箇條書きが表示されます。

新しいユーザーとしてここに來て、私はそれらの空のリスト項(xiàng)目が何であるかわかりませんが、上記のスクリーンショットで強(qiáng)調(diào)した弾丸は実際にはテーマボタンです。意図を明確にするために、いくつかのフォールバックテキストが役立ち、これらはリスト項(xiàng)目の代わりにラジオまたは通常のボタンである必要があります（機(jī)能を考慮して）。

「x」を含むコンテンツのすべてのブロック（「設(shè)定」を含む）は卻下することはできません。ただし、ハイカー畫像の畫像の上に「X」をクリックすると、コンテンツの塊が畫面からクリアされます。私が本當(dāng)に厄介だと思うのは、「Duckduckgoへの切り替え」の下で、順序付けられたリストの冗長な數(shù)値です。これは次のとおりです。

 1。1私たちはあなたの個(gè)人情報(bào)を保存しません
2。2私たちは広告であなたを追いかけません
3。3私たちはあなたを追跡しません。これまで。

リスト項(xiàng)目番號(hào)を表示する他の方法を備えたセマンティックマークアップの複雑なユースケースのように見えます。

最初の

要素まで、ハイカー畫像の下には巨大な量の空白があります。それらがリンクまたはボタンのいずれかであると仮定すると、「[ブラウザー]にduckduckgoを追加する」のすべてのインスタンスをクリックすると何もしません。各セクションの図は、不必要な水平スクロールを引き起こします。これは、他のサイトで見られる一般的な問題です。

これらのセクションの後、空白の箱があり、それが何であるかわかりません。

私は開いたdevtoolsを割ったが、それは

それに続いて、「デフォルトの検索エンジンとして設(shè)定」の2つの繰り返しインスタンスが「ホームページとしてセット」セクションに巻き付けられています。

これらは、「duckduckgoを追加する」アクションをクリックしたときにポップアップした指示であったに違いありませんが、ストレートマークアップを扱っているときにインパクトの隠れや表示が得られる可能性があることを示しています。コンテンツを繰り返す代わりに、対応するリンクまたはボタンは1つのインスタンスを指す必要があります。それはここで冗長性を削減するでしょう。

OK、最終的に検索する時(shí)間です。検索結(jié)果で最初に表示されるのは、ボックスを無視するための指示がある空の箱です。その後、okey-dokey。

先に進(jìn)み、そのduckduckgoリンクを見ましたか？それがロゴであるに違いありません。なぜこれがホームページになかったのだろうか。改善のための低い果物のようです。

検索バーは、ホームページにある場所から場所を交換した「S」および「X」ボタンを除き、通常は機(jī)能します。

検索結(jié)果に。ある結(jié)果を別の結(jié)果と簡単に區(qū)別できます。私が非常に不必要であると感じたのは、「あなたのブラウザがこのリンクにアクセスしたかどうかを示している」というメッセージングが各ページのタイトルの最後にあるということです。それは、畫面の読みの観點(diǎn)から非常に迷惑です。すべてのページタイトルの最後に繰り返されるのを聞いて想像してみてください。そのメッセージは、そのメッセージングを保持するツールチップを含むチェックマークとともに表示されるべきです。ただし、CSSが無効になっている場合、チェックマークもツールチップもありません。その結(jié)果、私が得るのは非常に長い見出しだけです。

通常、さまざまなタイプの結(jié)果（例：畫像）でフィルタリングするタブとして表示されるナビゲーションバーは、スタイリングのないフィルターであることを知るのが難しいため、この時(shí)點(diǎn)では何もしないようです。ただし、畫像フィルターをクリックすると、畫像の結(jié)果が実際にページに下下にロードされ、Web結(jié)果の上に積み上げられ、結(jié)果としてページは長くなります。ああ、そしてあなたはずっと戻って（そしてそれは長い道のりです）、たとえばビデオをクリックすると畫像を置き換えると思うかもしれませんが、それは単に畫像の下にビデオサムネイル畫像を挿入し、すでに巨大なページを作ってスーパーメガロングページを作成します。これらすべての資産のページ重量を想像してください！

まあ、あなたはそうする必要はありません。 DevToolsによると、畫像だけで831のリクエストと総重量が23.7 MBを占めています。重い！

最後のいくつかのアイテムは注目に値します。 「フィードバックの送信」リンクをクリックすると、明らかに何もしません。たぶんそれはCSSでモーダルを引き起こしましたか？そして、「すべての地域」リンクはリンクに似ていないので、簡単に無視できたかもしれませんが、私はそれをクリックするのに十分興味があり、國のリストのアンカーポイントに連れて行かれました。最後の2つのリンクにより、対応するコンテンツがリストカントリーオプションの下に表示されました。

ここでは多くのことが起こっており、明らかに改善の機(jī)會(huì)があります。たとえば、代わりにリンクまたはボタンである必要がある通常のテキストとして表示する行動(dòng)呼びかけがあります。また、CSSが無効になると、サイトのパフォーマンスが改善されると思いますが、検索結(jié)果にこれらのロードされた資産はすべて法外にあります。とはいえ、検索エクスペリエンスはまったく痛いものではありません。つまり、それを行っている間に畫像やビデオを掘り下げていない限りです。

ねえ、ここに私たちの多くがよく知っているサイトがあります！まあ、私たちの多くは常にログインしていることに慣れていますが、ログアウト中にサーフィンするつもりです。

すでに、スキップリンク（Yay）があります。モバイルナビゲーションアイコンもあります。

いくつかのナビゲーション項(xiàng)目の間には、不必要に巨大なギャップがあります。これらをクリックすると、ドロップダウンメニューとして機(jī)能します。それらは

フィールドに何かを入力する前に、「すべてのgithubを検索」と「ジャンプ」リンクの3つのインスタンスが表示されます。どちらをクリックするかはわかりませんが、検索を行うと、キーワードが3番目のグループに表示されます。

ホームページ上の他のすべては、窓を水平にオーバーフローする多數(shù)の非常に大きな畫像を除いて、問題ないようです。

検索バーに戻り、見つけることができる任意のリポジトリに移動(dòng)しましょう。検索ボタンのすぐ下には、リポジトリカウント、コード、コミット、およびその他のメタを返す2つのほぼ同一のセカンダリナビゲーションバーがあります。ソースを見ることなく、これらの2つを持っていることの目的が何であるかはわかりません。

リポジトリページには、まだわかりやすい構(gòu)造と論理的な階層があります。ログアウトして、來る前にキャッシュをクリアしている間、「github today」ブロックの「卻下」ボタンは、予想通りパフォーマンスを発揮します。 Amazonで以前に見たように、タグリンクは単一の行として一緒に走るので、區(qū)別するのが困難です。

次の2つのボタン（「JavaScript」と「新しいプルリクエスト」）は、クリックしても何もしないようです。最初にユーザーをログイン畫面に連れて行くことを意図していない限り、ゲストとしての[プルリクエスト]ボタンを無効にする必要があると思いますが、それでも正しいとは感じません。ただし、CSSがアクティブな場合、ボタンは実際に無効になっていることがわかりました。その後、ページの殘りの部分はかなり簡単に理解できます。

主にリポジトリの管理、貢獻(xiàn)、またはチェックアウトのためにここにいる場合、階層がうまく機(jī)能しているため、摩擦が大きく直面することはありません。プルリクエスト、問題、または個(gè)々のファイルを検討しているかどうかにかかわらず、他の場所でほぼ同じことが発生します。ほとんどのハードルは、サイト上のあまり目立たないページに住んでいます。

？サイトがうまくいくこと	？サイトが改善できるもの
多くのページの階層と構(gòu)造は、非常に簡単に従うことができ、論理的に意味があります。	要素とSVGの高さと幅の屬性を使用して、それらが爆発するのを防ぎます。
ページに埋め込まれたSVGアイコンのほとんどは、適切なサイズです。	空のリスト項(xiàng)目に注意してください。
ヘッダーのスキップリンクをうまく使用します。	ボタンラベルが完全な単語を使用していることを確認(rèn)してください。
	ランオンを防ぐために、リンクがそれらの間に空間またはラインが切れていることを確認(rèn)してください。

この次のサイトは、アクセシビリティの色のコントラストを確認(rèn)するために頻繁に使用するオンラインツールです。そして、色が非常に大きいサイトの場合、おそらくCSSでここで起こっているので、面白くなるはずです。

すぐにナビゲーションの上に大量のスペースがあり、スキップリンクはありません。テストする各色の橫にあるモバイルレイアウトのハンバーガーとクローズボタンと「X」ボタンは特大です。

ああ、「テスト色」ボタンとコンテンツの次のセクションの間のこの巨大なギャップをチェックしてください。

このサイトの多くの優(yōu)れた機(jī)能の1つは、テストされたすべての色を表示するのではなく、テストに合格した色のみを表示できるチェックボックスです。殘念ながら、そのボタンはCSSを無効にしても何もしません。ただし、どの色が機(jī)能しているかを確認(rèn)し、結(jié)果表に直接コントラスト比、大きなテキスト、小さなテキストの定義を取得できます。

用語を隠して表示することは、おそらくボタンがCSSで行うことです。殘念ながら、テーブルヘッダーの後にそれらの単一文字（sとr）の目的がわからないということです。また、テーブルの後にすべての失敗した色に対するそのメッセージを見るのは皮肉であり、混亂することもあります。できることは、デフォルトでそれを非表示にすることですが、単一のテストのすべての色が失敗した場合、後で條件付きで挿入します。

devtoolsを引き出すと、上部の空白の一部はSVGファイルとしての16進(jìn)數(shù)のロゴです。上記のスペースは、ページに使用される他のSVG記號(hào)に関連付けられています。ロゴに黒のデフォルトの色を使用することにより、これはスペースの一部を減らすのに役立ちます。 DevToolsでその迅速な変更を加えましたが、顕著な違いが生じます。

空間の2番目のギャップは、色のコントラストの計(jì)算中に表示されるSVGローダーによって引き起こされます。これは、モバイルメニューと「X」アイコンとまったく同じで、はるかに小さいが比例した幅と高さを指定することで役立ちます。

各SVGに初期幅と高さを追加すると、スクロールする必要性が確実に減少します。これは、GitHubのナビゲーションでも見たギャップを修正するためにできることでもあります。

最終的には、CSSがなければHEX NAWは非常に有用なままです。色をテストし、色の結(jié)果を渡して失敗し、ページの周りをナビゲートすることができます。私は実際の色で作業(yè)することができず、それらの余分な大きなSVGアイコンを回避する必要がありました。

Githubのように、Stack Overflowは、誰かがすでに開発の質(zhì)問と彼らに答えを求めているかどうかを見つけるのに役立つため、私たちの多く（ほとんどではないにしても）をバックポケットに保持するリソースの1つです。

ページに質(zhì)問するために、メイン要素の上にたくさんの空白の箇條書きが表示されます。なぜこれらの空のリストアイテムがそこにあるのか分かりません。フォーマットボタンも表示されませんが、少し混亂した後、それらはたまたま空白のリストアイテムにすぎないことがわかりました。おそらく、各アイテムのフォールバックテキストまたはSVGアイコンは、これらが何であるかを特定するのに役立ちます。それらは実際のボタンにも変えるべきです。

また、タイトルフィールドにテキストを入力する際に??、同様の質(zhì)問のリストを取得することも可能です。ここでは予想通りに機(jī)能しますが、これはいいことです。ただし、提案された各質(zhì)問の投票が2回表示されることは奇妙です。タイトルの上に1回、リンクとしてタイトルの隣に再び登場することはありません。

スタックオーバーフローの質(zhì)問ページに著陸する際に私たち全員が探している重要な要素の1つは、提出されたすべての回答から正しい答えを示す大きなグリーンチェックマークです。しかし、CSSがオフになると、リスト內(nèi)の各回答には黒いチェックマークがあるため、どの答えが受け入れられたかを知るのは困難です。受け入れられた答えが常に上にある場合でも、ページと対話することなく、まだ代替またはフォールバックの表示はありません。さらに、既に投票しているか、質(zhì)問に投票したかどうか、または答えを投票した場合、兆候はありません。

Stack Overflowでの私の経験をまとめるために、私は通常、プログラミングの問題に対する答えを見つけるためにサイトに來ることを達(dá)成することができました。とはいえ、実際に改善の機(jī)會(huì)がいくつかあり、このサイトは、この実験の質(zhì)問ページから非常に欠落していたページの階層や価値を示すために、設(shè)計(jì)が色に依存することが多い場合の代表的な例です。

Wikipedia、Webの主要な參照ポイント！それはオンラインの定番であり、その魅力的な資質(zhì)の1つは、一種のデザインの欠如です。これにより、興味深いテストができます。

いくつかのリンクがあり、実際のナビゲーションと検索のためのスキップナビゲーションオプションがあります。 Globe Imageを含むホームページヘッダーは、2つの列レイアウトを維持しています。その理由は、これがテーブルレイアウトです。それはユーザビリティの問題ではないかもしれませんが、レイアウトを作成するためにテーブルに頼ることはセマンティックではないことを知っています。それは、フロート、フレックスボックス、グリッド、またはコンテンツの配置を処理するその他の方法を持っていなかった過去の方法の遺物でした。とはいえ、ページに顕著なユーザビリティの問題や混亂する要素はありません。

私たちの多くがウィキペディアで最も多くの時(shí)間を費(fèi)やしているものに進(jìn)みましょう：記事のエントリ。これは多くの場合、Wikipediaへのエントリポイントです。特に、検索エンジンに何かを入力することから始まる私たちにとって、ウィキペディアの検索結(jié)果をクリックします。

一番下の行は、このページはまだ非常に使用可能であり、CSSが無効になっているため、階層的です。レイアウトは単一の列に下がりますが、コンテンツは依然として論理的な順序で流れ、テーブルとインラインテーブルのプロパティに依存していることに感謝します。

私がぶつかった問題の1つは、ナビゲーションです。ヘッダーには「ナビゲーションへのジャンプ」リンクがあり、クリックするとナビゲーションに実際にドロップダウンします。あなたが疑問に思っている場合、ナビゲーションはフッターに含まれています。これがジャンプする必要がある理由です。

いくつかのナビゲーション見出し（特に「バリエーション」と「モア」専用）の上には一見ランダムなチェックボックスがあり、それらは目的を果たさないように見えますが、上記のチェックボックスはCSSが有効になっているときに特定のビューポート幅で表示されます。

実際にはナビゲーションには奇妙なものが1つあり、「他のプロジェクト」と「言語」見出しの間のラベルのないボタンです。

そのボタンをクリックすると、言語設(shè)定にアクセスすることができますが、ほとんどの場合、期待どおりに機(jī)能します。たとえば、レイアウトは、非常に機(jī)能的なタブ付きレイアウトを維持します。

ただし、[表示]タブでは、「言語」と「フォント」ボタンは何もしません。彼らはおそらくタブでもありますが、少なくとも彼らが提供するものを見ることができます。これらのボタンの橫には、2つの空の選択メニューが絶対にありません（最初のものは、チェックボックスをチェックするときにComicneue、Opendyslexic、およびシステムフォントオプションが入力されます）。 「入力」タブを見ると、ライティング言語ボタンはまだタブとして機(jī)能します。英語、スペイン語、中國語以外のオプションを選択することはできます。

記事はCSSなしではまったく読むのが難しくありません。これは、ほぼすべての要素が意味的に正しいものであり、一貫したドキュメント階層に従うためです。私が疑問に思ったことの1つは、通常、目次にある「表示/非表示」ボタンがどこにあるのかということです。唯一のチェックボックスであることが判明し、ラベルは偽物です。CSSの擬似要素でコンテンツプロパティを使用してラベルを表示します。

記事のもう1つの問題は、畫像をプレビューするときに畫像を狩るのに時(shí)間を費(fèi)やさなければならないことです。通常、記事のサイドバーで畫像をクリックすると、畫像のカルーセルを含むフルスクリーンモーダルがトリガーされます。 CSSがなければ、そのカルーセルはなくなり、その代わりに、その上にラベル付けされていないボタンの列がある畫像です。それは殘念ですが、カルーセルがページを下っていない場合は完全に大丈夫でしょう。

Wikipediaのロゴが記事にどこにも見つからなかったと言わなかったら、私は不注意になります！白の白いSVGでさえありません。リンクには実際には何も含まれていません：

 <a href="/wiki/main_page" title="メインページにアクセス"> </a>

ありがたいことに、「ナビゲーション」の下の「メインページ」リンクは、ブラウザのバックボタンを押さずに家に帰るもう1つの方法です。しかし、ホームページで非常に素晴らしい仕事をしているとき、ページにブランディングがないのはまだ奇妙に感じます。

ウィキペディアのHTML問題は、主に記事ではなく頻繁に使用されると予想される機(jī)能に存在します。彼らは長期的に私の読書體験を妨げませんでした。

Having a hidden link to skip the navigation is a must. 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 {
  ボーダー：0;
  clip: rect(1px, 1px, 1px, 1px);
  オーバーフロー：隠し;
  padding: 0;
  位置：絶対;
  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="その時(shí)、私はCSSなしでウェブを閲覧しようとしました" >

<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 {
  表示：ブロック;
  オーバーフロー：隠し;
  高さ：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>