Enduring CSS 06

状態を扱う

-- WIP --

ウェブアプリケーションの大部分は状態に対処する必要があります。

最初に、単に「状態」を意味するものを結晶化しましょう。例を考えてみましょう：

ユーザーがボタンをクリックします。

インタフェースの値が更新されます。

インタフェースの領域が無効になります。

インタフェースのウィジェットがビジーです。

入力値が許容値を超えています。

アプリケーションのセクションがライブデータを含むようになります。

これらのすべての事象は、状態変更がDOMで伝達されることを必要とするため、必要なスタイルの変更をアプリケーションのフロントエンドにも適用することができます。

Webアプリケーション自体は、実際に状態を追跡するためにDOMを変更する必要はほとんどありません。たとえば、クライアント側のJavaScriptアプリケーションでは、通常、状態を処理してそれを追跡する内部的な手段があります。したがって、これまではDOMを変更するだけで、CSSを使った美的変化（スタイリングの目的）に影響を与えてきました。

ECSSがどのように状態変化を扱うのか

第3章に戻って、SMACSSの通信状態がどのくらい気に入っているかを関連づけました。例えば：

.has-MiniCartActive {}

このノードの上またはその下のどこかに「ミニカート」がアクティブであることを示します。

もう一つの例：

.is-ShowingValue {}

これは、コンポーネントまたはコンポーネント内に1つの値（以前は非表示だった）が表示されていることを伝えます。

歴史的に、それはECSSを適用するときに私がどのように状態を伝えたかでした。私は、この状態を伝えるために、ノード上の既存のクラスに加えて、マイクロ名前空間クラスを使用しました。例えば：

code:ecss06_01.css

.is-Suspended {}

.is-Live {}

.is-Selected {}

.is-Busy {}

DOMでこれらのクラスを使用するノードは、次のようになります。

code:ecss06_01.html

<button class="co-Button is-Selected">Old Skool Button</button>

WAI-ARIAへの切り替え

しかし、もしこの情報が単にスタイリングフックのためにDOM内になければならない場合、それがそこにある間にもう少し重量を持ち上げるかもしれません。

これらのセマンティクスは、作成者がドキュメントレベルのマークアップでユーザインタフェースの動作（構造）と構造情報を支援技術に適切に伝えることができるように設計されています

この仕様は、障害を持つユーザ（状態支援技術を介して）に状態やプロパティを伝えるのを助けることを目的としていますが、Webアプリケーションプロジェクトアーキテクチャの必要性に美しく対応します。このアプローチを採用することで、（勝手に言えば）勝利状況と呼ばれるものがもたらされます。私たちは、Webアプリケーションのアクセシビリティを向上させると同時に、アプリケーションロジックで必要な状態を伝達するために明確に定義された、よく考慮されたレキシコンを取得します。状態を伝えるためにアリアで書き直された先の例があります：

code:ecss06_02.html

<button class="co-Button" aria-selected="true">Old Skool Button</button>

button.setAttribute("aria-selected", "true");

CSSセレクタとしてのARIA属性

推奨されるCSS構文では、その変更を単一の中カッコ内に記述すると、次のようになります。

code:ecss_06_02.css

.co-Button {

background-color: $color-button-passive;

background-color: $color-button-selected;

}

}

このように規則内で状態変化を入れ子にする能力は、開発者の人間工学の向上をもたらす。ルールは、アプリケーションスタイル全体で一度だけルートレベルで定義されます。これは、そのクラスに関連するすべての可能性のある事実を定義する真実の単一の情報源を提供する。詳細については、第8章「正気なスタイルシートの十戒」を必ず読んでください。

code:ecss06_03.css

.co-Button {

background-color: $color-button-passive;

background-color: $color-button-selected;

}

}

これにより、属性の大文字と小文字のどちらかの値が渡されます（デフォルトでは大文字と小文字が区別されます）

州と財産、ARIAでやり直す

セクション6.5.1。WAI-ARIA仕様の「ウィジェット属性」について説明しています。これらには、Webアプリケーションの操作やデータの急速な変更に必要な多くの一般的な状態が含まれています。

この章の冒頭で与えられた例は、ARIAを使って書き直したものです：

さらに多くがあり、仕様はW3C仕様標準によって分かりやすくなっています。

ARIAを使用できない場合

何らかの理由で、aria- *属性を使用してサイトまたはアプリケーションの状態を伝えることができない場合。私は現在、状態を指定するために名前空間を使用せずに命名セレクタに傾く傾向があります。たとえば、次の代わりに：

code:ecss06_01.html

<button class="co-Button is-Selected">Old Skool Button</button>

代わりにこのようなセレクタのバリアント版を使用することをお勧めします：

code:ecss06_01-re.html

<button class="co-Button co-Button-selected">Old Skool Button</button>

これは、モジュールのコンテキストをそのまま維持し、単にこの同じクラスの変形が適用されていることを示します。

あなたは、状態を伝えるために属性セレクタを使用する軟膏に特に大きなフライがあることに注意する必要があります。特定の旧バージョンのAndroid（例としてAndroid 4.0.3のストックブラウザ）は、属性値が変更されたときにスタイルの再計算を強制しません。これは、属性に依存するスタイルは動的には機能しません（JavaScriptを使用して切り替えた場合など）。考えられる回避策は2つあります。

まず、属性を変更すると同時に、DOMのどこかでクラスを切り替えることができます。

まとめ

DOMの変更を伝えるためにWAI-ARIA状態を使用すると、HTMLクラスと同様に便利で使いやすいスタイリングフックが提供されます。純粋に好みではありますが、私はスタイルシートで状態を伝えるために全く異なるセレクタが使用されているという事実のファンです。ルール内で見つけるのが簡単です。

これらの先行する要素のどれもあなたに新しいものをもたらしません。事実上無料でWAI-ARIA州を利用することは、Webアプリケーションの状態を支援技術のユーザーに伝える良い手段を提供することです。お金が出る場合は、WAI-ARIAを使用することで、より多くのユーザーに商品を広げていることも考慮してください（下記の追加情報を参照）。

そのため、WAI-ARIAの状態とプロパティを使用することは、ECSS方法論を採用しているプロジェクトで状態を伝えるための推奨手段です。

Royal National Institute of the Blind（RNIB）の追加情報および統計は

RNIBは、ここ英国で盲目の人々の数に関するデータはほとんどを供給するために親切でした。これらは、あなたのプロジェクトでARIA州を使用するケースを議論する/検討するときに役立ちます：

英国には、就労年齢の盲人および部分就労者が84,000人を超えています（推定人口は約6400万人です）。

しかし、政府の労働力調査によると、英国の就労年齢人口は185,000人にのぼる。これには、視力喪失が登録に適格ではないが、彼らの日常生活に影響を及ぼすにはまだ十分重大である人々が含まれる。また、自分自身を障害者とはみなさない人も含まれます。185,000人のうち：

113,000人は、自分自身を長期的な障害者とみなし、

72,000人は、自分自身を障害がないとみなし、「困難を見る」。

2011年に失明しているイギリスの人口の推定数 - 1,865,900

2020年に視力喪失で暮らしていると推定される英国の人口の推定数は2,269,700人

2012年の視覚障害の主な原因である糖尿病の成人の推定数 - 3,866,980

-- WIP --