その時、私はCSSなしでウェブを閲覧しようとしました

CSSは、すべてのWebサイトにデザインを提供するものです。ウェブサイトはそれなしではあまり楽しくてフレンドリーではありません！私はJavaScriptなしで1週間行く人について、そして経験がより速いWebサイトをどのように生じたかについて読んだことがありますが、それらの特定の側面は期待どおりに機能しません。

しかし、CSS。 Webを閲覧しながらCSSをオフにしても、Webの使いやすさがはるかに少なくなりません…そうですか？または、JavaScriptのように、いくつかの機能は期待どおりに機能しないでしょうか？好奇心から、私はそれに渦巻きを与え、いくつかのサイトを閲覧しながらHTMLスケルトンからCSSの肉を引き裂くことにしました。

なぜ、あなたは尋ねるかもしれませんか？ CSSをオフにするという非分類の理由はありますか？ Heydon Pickeringは、CSSを無効にすることはいくつかのアクセシビリティ基準をチェックする良い方法であるとツイートしたことがあります。

1. 見出し、リスト、フォームコントロールなどの一般的な要素はセマンティックであり、それでも見栄えがします。
2. 視覚的な階層は、デフォルトのスタイルでまだ確立されています。
3. コンテンツは引き続き論理的な順序で読み取ることができます。
4. 画像は、CSSの背景として迷子になるのではなく、タグとしてまだ存在します。

2018年のWebAim調査では、あらゆる種類の支援テクノロジーに依存しているユーザーの12.5％が、サイト全体のすべてのCSS宣言を廃止することを含めることができるカスタムスタイルシートでWebを閲覧することが報告されています。また、インターネット接続が遅いことについて話している場合、CSSを捨てることは、コンテンツをより速く消費する1つの方法です。また、サーバーが資産のロードに失敗した場合のように、当社の即時制御外の理由でCSSが無効になる可能性もあります。

実験として、私は5つのWebサイトとCSSのないWebアプリを使用しました。この投稿では、私の経験をカバーしています。それは私にとって個人的にはかなり目を見張るような冒険であることになりましたが、また、私もあなたが見ることを望んでいる方法で開発者として専門的に私に知らせてくれました。

しかし、最初に、CSSを無効にする方法は次のとおりです

あなたはこの投稿の形で私を通して代弁的に住むことを絶対に歓迎します。しかし、タスクを感じていて、スタイルのないWebを体験したい人のために、さまざまなブラウザでCSSを無効にする方法は次のとおりです。

• Chrome： CROMEにCSSを無効にする設定は実際にはないため、Disable-HTMLなどの拡張機能に頼る必要があります。
• Firefox：表示>ページスタイル>スタイルなし
• Safari： Safari >設定... >メニューバーのメニューの開発を表示します。次に、ドロップダウンの開発に移動し、「スタイルを無効にする」オプションを選択します。
• Opera： Chromeと同様に、拡張機能が必要であり、Web開発者が法案に適合します。
• インターネットエクスプローラー11：ビュー>スタイル>スタイルなし

EdgeでCSSを無効にする文書化された方法を見つけることができませんでしたが、DevToolsコンソールのCSSオブジェクトモデルAPIを介してプログラムでCSSを削除できます。

 var d = document;

for（s = d.stylesheetsのvar）
    s [s] .disabled = true;

for（i = d.queryselectorall（ "[style]"）のvar i
    i [i] .style = "";

最初のループでは、すべての外部スタイルと内部スタイル（および

 （f = function（）{
    // CSSを削除します
    ...

    setimeout（f、20）;
}）（）;

あるいは、古代のオオヤマネコなどのテキストのみのブラウザがありますが、ビデオ、画像（SVGを含む）、JavaScriptなしで生活することを期待しています。

スタイルのないグラスを通して…

各サイトについて、Amazon、Duckduckgo、Github、Stack Overflow、Wikipedia、Contrast Checkerと呼ばれるCSSなしでサーフィンしました。

物事が少し…恐ろしくなるかもしれないので、準備をしてください。 ？

ウェブサイト1：Amazon.com

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 カートに追加

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

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

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

？サイトがうまくいくこと	？サイトが改善できるもの
カルーセルはスタイリングがなくても機能的です。	ロゴは背景画像に依存しており、家に戻った道を隠しています。
コンテンツの階層は、私たちがページのどこにいるかを知るのに一般的に役立ちます。	多くのリンクとアンカーはJavaScriptに依存しており、インタラクティブではないようです。
要素の順序は大まかに引き続き残ります。	多くの場合、リンクは互いにぶつかります。または、関連性のある場所に外側に配置されます。
背景画像に依存する製品評価のためのフォールバックの大いに使用してください。	ボタンラベルは、誤解を招くまたは反復的です。
	フォーム要素は適切に整列できません。
	チェックアウトする大まかな旅があります。

ウェブサイト2：Duckduckgo

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

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

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

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

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

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

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

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

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

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

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

最初の

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

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

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

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

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

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

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

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

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

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

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

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

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

？サイトがうまくいくこと	？サイトが改善できるもの
検索は一貫しており、CSSの有無にかかわらず機能します。	「スキップ」リンクは、キーボードブラウジングに役立ちます。
コンテンツの階層により、コンテンツは読みやすくなり、結果を検索してきれいな体験になります。	「設定」メニューの非リンクアイテムは、オプションのグループ化方法について明確な階層があるため、個別の順序付けられていないリストの見出しにする必要があります。
検索結果ページの上部にあるホームページリンクの使用。	一部のコンテンツは、コンテンツを条件に表示および隠すことに依存しているため、重複または繰り返されます。
	すべてのアクションへの呼び出しが、プレーンテキストの代わりにリンクとしてレンダリングされることを確認してください。
	フォールバックソリューションを使用して、検索結果の種類をフィルタリングして、アイテムの積み重ねを防ぎ、多額のページの重量を制御します。

ウェブサイト3：Github

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

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

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

および

要素です...しかし、何かが意味的に間違っていると感じます。メニュー項目が実際には順序付けられていないリスト項目であり、セマンティックな方法を使用してコンテンツを拡張することで、ネイティブブラウザー機能を実行できるのは素晴らしいことです。しかし、そのSVGアイコンは私を台無しにします。

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

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

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

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

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

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

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

ウェブサイト4：HEX NAW

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

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

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

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

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

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

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

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

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

？サイトがうまくいくこと	？サイトが改善できるもの
このサイトは、サイト全体で優れたコンテンツ階層を維持しています。	SVGは、フォールバックの塗りつぶしの色を使用し、高さと幅の属性を使用する必要があります。
すべての要素は意味的に書かれています。	すべての失敗した色のフィードバックを動的に追加して削除して、厄介なメッセージングを防ぐことができます。
テスト自体は、情報を表示または非表示にできることを除いて、適切に機能します。	背景色の属性を持つテーブルセルのように、テストされている値の色を表示する代替方法を検討してください。

ウェブサイト5：スタックオーバーフロー

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

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

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

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

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

？サイトがうまくいくこと	？サイトが改善できるもの
ほぼすべての要素が意味的に書かれています。	クリアコントロールを使用して、質問をしたり回答したりしながら、編集ツールを識別します。
SVGアイコンは、幅と高さの属性を使用します。	視覚アイコンを検討して、受け入れられた答えを質問に対する他の答えと区別してください。
回答のリストは明確でスキャンが簡単です。	別の方法を検討して、色だけでなく、UP投票またはダウン投票を示してください。

ウェブサイト6：ウィキペディア

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

？サイトがうまくいくこと	？サイトが改善できるもの
このサイトは、きれいな構造と階層を維持しています。	ロゴの配置は、CSSの背景画像なしでページの上部に移動する（または追加される）ことができます。
スキップリンクは、検索とナビゲーションに効果的に使用されます。	ボタンにはラベルを含める必要があります。
記事の内容はセマンティックで読みやすいです。	ページ上の画像カルーセルは、トリガーが発生する場所でロードし、コントロールに適切なボタンラベルを使用できます。

CSSレスをより良い体験にする方法

CSSは、最新のWebの重要なコンポーネントです。この時点まで見たように、それなしでは使用できないものの隣になるサイトがいくつかあります。そして、そのミックスで最も認識可能な使用済みサイトのいくつかを数えています。私たちが見たのは、せいぜいサイトの主な目的を達成できるということですが、途中でハードルがあります。次のようなもの：

• スキップリンクがありません
• 一緒に実行されるリンク
• 追加のスクロールが必要な特大の画像
• リストアイテムやボタンラベルなどの空の要素

これらをベストプラクティスの一種のリストにまとめて、CSSが無効になっている場合や利用できない状況を考慮することができるかどうかを見てみましょう。

ドキュメントの上部にスキップナビゲーションリンクを含める

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 */

Leave whitespaces where they make sense

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:

Use width and height attributes liberally

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/imghwm/default1.png" data-src="/path/to-image.jpg" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="その時、私は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>

Prepare SVGs for a white background

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;
} 

Label those buttons!

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

elements acting as buttons, they can remain, but they should be static, and the contents should be placed in a button.

Now, if the icon is an SVG, we can ensure the title tooltip can still be seen by using aria-labelledby and assigning the id to the title.

 <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>

結論

It can be easy to either forget or be afraid to check how a site appears when CSS isn't available to make the UI look as good as intended. After a brief tour of the Non-CSS Web™, we saw just how important CSS is to the overall design and experience of sites, both small and large.

And, like any tool we have in our set, leaning too heavily on CSS to handle the functionality and behavior of elements can lead to poor experiences when it's not around to do its magic. We've seen the same be true of sites that lean too heavily on JavaScript. This isn't to say that we should not use them and rely on them, but to remember that they are not bulletproof on their own and need proper fallbacks to ensure an optimal experience is still available with or without our tooling.

Seen in that light, CSS is really a layer of progressive enhancement. The hierarchy, form controls, and other elements should also remain intact under their user agent styles. The look and feel, while important, is second when it comes to making sure elements are functional at their core.

以上がその時、私はCSSなしでウェブを閲覧しようとしましたの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。