CSSでスタイルを切り替える

テキスト サイズ変更ウィジェットを提供するかどうかに関する議論は、2007 年末にかけて多くのブログで話題になりました。 その一方で、自分たちはインターネットから永久に追放されるべきであり、Web 専門家である私たちはテクノロジーの使い方をユーザーに教育することに集中すべきだと考える人もいます。

スペクトルの対極では、そのようなウィジェットを正当化する状況は十分にあり、ユーザーの教育は登るには高すぎる山であるという議論もありました。

ユーザーを教育することの妥当性を見てみましょう。 本質的には、それが最も現実的で倫理的な選択のように思えます。 地球上の誰もがブラウザを使用してテキストのサイズを変更する方法を知っていると想像してください。 至福！ ただし、これが 100% 実行可能であることを妨げる重大な落とし穴がいくつかあります。

まず、教育を必要とする人がたくさんいます。 成果を上げるためには、国際的な広告キャンペーンが必要になるだろう。 人々はテキストのサイズを変更する方法についての知識が不足しているだけでなく、それが可能であることさえ知らないため、「方法」情報を探しません。

教えられない、または教えられないユーザーもいます。 これらのユーザーには、学習障害や認知障害のあるユーザーだけでなく、使用頻度が低いユーザーやテクノロジーに怯えているユーザーも含まれます。

私たちが現在目の当たりにしているブラウザ戦争は勢いを増しています。 その結果、ブラウザ オプションの必然的な再配置とともに、新しいブラウザ バージョンがリリースされています。 これには、多くのヘルプ ビデオやオンライン ドキュメントが必要になる可能性があります。今後数年のうちに、ユーザーにブラウザのバージョンを尋ねることがなくなるとは誰にも言えません。

また、テキスト サイズ変更ウィジェットは、そのようなウィジェットがサイトに存在する場合にのみこの機能が利用できるとユーザーに誤解させる可能性があるとも主張されています。 しかし、私の個人的な経験では、彼らは実際に会話のきっかけを通じて教育に役立ちます。

「おお、素敵なテキストのサイズ変更機能が付いていますね！」

「はい、お母さん、最近ではどのウェブサイトでもそれができるようになりました。その方法を教えていただけますか?」

現時点では実装が貧弱であったり、一貫性がなかったりする傾向がありますが、それがコンセプトを損なうものではありません。 よくある誤解は、テキスト サイズ変更ウィジェットが Javascript に依存しているというものですが、そうではありません。 さらに、このタイプのウィジェットをサイトに追加するだけでは、魔法のようにサイトがアクセス可能になったり、使用可能になったり、標準に準拠したりするわけではありません。 それは、サイト全体がどのように実装されているかによって決まります。

全体像

実際のところ、テキストのサイズを変更するウィジェットが登場し、人気が高まっているようです。 また、これまで以上にビデオやオンライン ドキュメントを使用してユーザーを教育しようとしている人が増えています。 しかし、それはテキストのサイズだけではありません。問題はさらに根深いものです。 レイアウト オプションとカラー スイッチャーは、アクセシビリティの観点からはテキスト サイズと同じくらい重要ですが、ブラウザ側からは簡単に変更できないため、議論に含めるべきです。

読書にはハイコントラストの配色を好む人もいます。 Mac のアクセシビリティ オプションを使用するものもあれば、ブラウザベースのウィジェットを使用して Web サイトにダーク スキームを適用するものもあります。 また、おそらく愛用のターミナル ウィンドウに合わせて、テキスト エディターをこの方法でカスタマイズしている何人かの超技術者とも話をしました。 多くの高齢の弱視ユーザーや失読症のあるユーザーも、テキストが真っ白な背景に表示されていない方が読みやすいと感じています（「 www.lighthouse.org/accessibility/legible).

レイアウト オプションに関しては、フォントを拡張するための十分なスペースを備えた「リラックスした」レイアウトに切り替えると、視覚に問題があるユーザーにとって特に役立ちます。 Nomensa は、2005 年の @media カンファレンスで Joe Clark が設定した課題に基づいて、ズーム レイアウトを適用する効果について調査を実施しました。

私たちの 研究 複数列のレイアウトの方が操作が速く、ズーム レイアウトの方が読みやすいことがわかりました。 2 列のハイブリッド バージョンは、両方の長所を提供するために提案されました。 スタイルスイッチャーとして実装すると、サイトの視覚的なアイデンティティを維持することもできます。

誰の責任ですか？

では、誰がこの件について責任を負うべきなのでしょうか？ オペレーティング システムを放っておいても、私たちは次のような責任を負わなければなりません。

• ユーザーは
• ブラウザ
• サイト開発者

まず、ユーザーです。 人々は自分のテクノロジーの使用方法を知ることにある程度の責任を負わなければなりません。 ただし、ユーザーにはガイダンスが必要であるため、ユーザーがどの程度の責任を負うべきかはグレーゾーンです。 ブラウザのインターフェイスの使いやすさは、「テキスト サイズ」や「印刷ページ」など、必要なオプションを確実に見つけられるようにするために非常に重要です。

一方、ブラウザが責任を負えるのは、サイト上のレイアウト オプションや配色の変更に関してのみです。 使用されているスタイリング方法の量に対処することは期待できません。

ブラウザは状況を解決するのではなく、むしろ邪魔であると主張することもできます。 一部のブラウザ ベンダーは、その規模により、ユーザーがブラウザをどのように操作するかを決定する強力な立場にあります。 おそらくブラウザ ベンダーは、テキスト サイズ変更機能をデフォルトですべてのユーザーにわかりやすく表示し、オンラインでの社会的責任をもっと真剣に受け止めるべきでしょう。

サイト開発者としての私たちの責任は、全体像を理解し、事実を提供し、できる限り最善を尽くしてクライアントにアドバイスすることです。 Web コンテンツの最新バージョンだけでなく、Web 標準に準拠した Web サイトを構築する必要があります。 アクセシビリティ ガイドライン (WCAG) v1.0、ただし、次の場合にはこれらの推奨事項を超えるように努めることができます。 可能。 これにより、Web がさらに進歩し、よりアクセスしやすく使いやすいオンライン エクスペリエンスが実現する可能性があります。 これにより、最終的にはより多くの人がオンラインでより多くのことを行えるようになります。 これがイノベーションだ！
現在どのようなブラウザ テクノロジが存在するか、または将来存在するかに関係なく、サイトの視覚的な強化に最適なシナリオが常に存在すると考えるのが合理的です。 これらには、代替の配色やレイアウトが含まれます。 テキスト サイズは、ユーザーが意識していなくても、ブラウザのデフォルト機能によって適切に処理されます。 テキスト サイズ変更ウィジェットの実装を検討している場合は、考えを変えて、代わりに便利で効果的なスタイル スイッチャーを提供することが賢明です。

WCAG v2.0 のドラフトには、「テキスト (テキストの画像は除く)」というレベル AA 要件が含まれています。 支援技術を使用せずに、コンテンツを失うことなく最大 200% までサイズを変更できます。 機能性』。 私は十分な数の Web サイトを監査してきましたが、多くの Web サイトがこの新しい達成基準を満たしていないことがわかりました。既存の Web サイトは合格基準を満たしますか?

スタイルスイッチャーを構築する

何かを構築するとき、最初に行うことは要件を整理することです。 これまで説明した内容に基づいて、スタイルスイッチャーの要件は次のとおりです。

• JavaScriptに依存してはいけません
• シンプルで一貫したユーザーインターフェイスを使用する必要があります
• デフォルトと同様に、堅牢かつ流動的な 2 列レイアウトを提供する必要があります。
• 2 列レイアウトのポジティブおよびネガティブのカラー スキームを提供する必要があります。
• 2 列レイアウトを使用する場合は、ブラウザのデフォルトのテキスト サイズを使用する必要があります。
• 使用される技術は現在のブラウザ機能と互換性がある必要があります
• デザイン作業の量を最小限に抑えるために、ネガティブ カラー スキームを使用して 2 列のレイアウトをデザインするだけで済みます。
• コーディングに関しては、暗い配色はデフォルトのレイアウトで機能し、その逆も同様です。 ライトカラムスキームは 2 カラムレイアウトで機能します。

HTMLとCSSのコーディング

デザイン面が整理されたので、HTML と CSS のコーディングに進むことができます。 コーディングを最初から始めるほうが常に簡単です。 可能ではありますが、既存のサイトにスタイル スイッチャーを後付けすることはより困難で、より多くの時間がかかる可能性があります。 コードを整理し、途中でどのように切り替えるかを考え、一般的な色とレイアウト スタイルを分けておくことを忘れないでください。

このスタイル スイッチャーのサンプルのファイルは CD にあります。 template と live という名前の 2 つのフォルダーがあります。 テンプレート フォルダーには、開発用 HTML と CSS が含まれています。 ライブ フォルダーには、サンプルの実行に必要な最適化された CSS および PHP コードが含まれています。

テンプレート フォルダー内には、style-switcher.html という HTML ファイルと多数のスタイル シートがあります。 メイン スタイル シート main.css には、すべての共通スタイルとデフォルトのレイアウト スタイルが含まれています。 また、レイアウト オプションのスタイルを提供するすべてのレイアウト バリアント CSS ファイルもあります。 たとえば、light.css には、光の配色の追加スタイルがすべて含まれています。

/* LIGHT COLOURS AND CUSTOMISATIONS */ /*= Colours and fluffyness for layout =*/ #header, #related {background: #f0f0f0} #content {background: #fffeff;} …

先ほど不適切な実装について触れましたが、私たちの要件の 1 つは、スタイル スイッチャーが JavaScript に依存してはならないということでした。 この例では PHP コードが使用されています (コメント付きで CD に収録されています) が、サーバー側のスクリプトであれば何でも使用できます。 JavaScript を使用してスイッチを強化したい場合は、次の場所から始めるとよいでしょう。 24ways.org/2005/introducing-udass.

少し注意して、効果的な方法でコードを構造化し、便利なスタイルスイッチャーを構築するために必要なすべてのスタイルを提供することができます。 最小限のコードと労力で 4 つのレイアウトと色のバリエーションを提供できます。 あなたも試してみませんか？ ユーザーはきっと気に入ってくれるでしょう。 ライブ スタイル スイッチャーのサンプルは、次の場所にあります。 style-switcher.nomensa.com.