CSSは一般的なスタイリング言語であり、聴覚マークアップのプロパティも含まれています。これはいずれも主流のブラウザでは実装されていませんが、スクリーンリーダーには役立つかもしれません(ただし、聴覚のマークアップが「一般に」一般的でないことを考えると、実装するかどうかはわかりません)。
私は、見る人として、CSSを少しフィードバックループで作成し、CSSを少し変更してから、ページがどのように変化するかを観察します。このフィードバックが不可能または非常に困難である場合、設計原則にフォールバックし、それらがすべてうまくいくことを願っています。
ページをグリッドと考えると、割合の管理が容易になります。一般的な区分は、ナビゲーションと見出しに一番上の行を使用し、関連コンテンツに右の列を使用することです。左の列はメインコンテンツに使用され、右の列の約2〜3倍の幅です。これは、大まかにStack Exchangeサイトがレンダリングされる方法です。CSSでは、これはで実現することができるdisplay: table
の表示スタイルと関連するtable-row
とtable-cell
、以降フレックスボックスモデルと。正確な比率は驚くほど重要ではありません。
ページは、水平方向の中央に配置すると見やすくなります。
多くの色を使用する必要はありません。背景色(通常は明るく不飽和なもの)とテキスト色(通常は暗く飽和したもの)があります。明るさのコントラストを下げて、脚注、署名欄、その他の詳細などのテキストを強調しないようにすることができます。HSVカラーモデルを使用する方が、RGBよりもはるかに簡単です。プレーングレーが退屈すぎる場合に使用できる多くのカラーパレットが存在します。色を使用する必要がありますが、控えめです。
フォントサイズを使用して重要度を示すこともできます。2ptのステップで9ptを下回ることはありません。通常のテキストの場合、14ptのフォントサイズを超えることはできません。一緒に、テキストのフォントサイズとコントラストは、音声のボリュームに似ています。
CSSの提供だけでなく、同様の測定値の絶対単位px
またはcm
だけでなく、相対単位のようなem
キーワードのようなthin
かmedium
。多くの場合、相対測定値とこれらのキーワードを使用する方が簡単です。
テキストはを超えることはできません40em
。
ブラウザにはデフォルトのスタイルシートが付属しています。きれいではありませんが、すべてをオーバーライドする必要はありません。シンプルなWebフォントを選択し、テキスト要素の最大幅を設定することが2つの最も重要なことです。セマンティックHTMLの記述は、デフォルトのスタイルが機能するために重要です。
これにより、シンプルなブログなどをスタイルすることが可能になります。しかしながら:
コードのデバッグはさらに難しく、自分が何をしているのかわからない場合はなおさらです。私は最初の試行で物事を正しく取得できません。しかし、どのように物事が「正しい」ように見えるかをどのように知るでしょうか?
いくつかの要素は、ポップアップメニューなどで要素を正確に配置する必要があります。
画像とアイコンはデザインに深みを与えますが、選択するのは難しいでしょう。
CSSボックスモデルは恐ろしく、多くの場合、頭の中でシミュレートするのは困難です。
私はあなたが少しのCSSを書くことができると思いますが、それは信じられないほどイライラするでしょう。どの支援技術が存在するのかわかりませんが、触覚フィードバックにより一般的なレイアウトを設計できると思います。おそらく、視力のある人とのペアプログラミングは、細かい部分の良い解決策かもしれません。