一覧WB-15-3 · アクセシビリティと操作性

文字の拡大と動きの抑制

同じ案内カードを640pxから320pxへ狭め、文字サイズを倍にします。固定幅を直して折返しを確認し、文字色のコントラストとボタンの寸法を測ります。最後に動きの低減設定を読み取り、ページ内でも動きを止められる形へ変更します。文字サイズの変更はブラウザ全体のズームとは分けて扱います。

説明

文字を大きくしたり表示幅を狭くしたりすると、固定幅や固定高さが原因で内容が隠れる場合があります。また、文字の読みやすさ、操作対象の大きさ、動きの量は別々に確認する必要があります。

同じ案内カードを640pxから320pxへ狭め、文字サイズを倍にします。固定幅を直して折返しを確認し、文字色のコントラストとボタンの寸法を測ります。最後に動きの低減設定を読み取り、ページ内でも動きを止められる形へ変更します。文字サイズの変更はブラウザ全体のズームとは分けて扱います。

1640pxで固定幅カードを表示する

案内カードのHTML（cardHTML）を開き、文書とカードの幅を測ります。

(globalThis.doc=createDocument(cardHTML)用意したHTMLから文書を作る,{viewport:doc.defaultView.innerWidth,card:dimensions("#card")カードの寸法,document:{scroll:doc.documentElement.scrollWidth文書内容の幅,client:doc.documentElement.clientWidth}})

カード自体の600px幅は収まりますが、長いURLが折り返されず、文書内容の幅は695pxになっています。箱と内容の幅を別々に確かめます。次は表示幅を狭め、箱そのものも収まらなくなる状態を確認します。

2320pxでは横にはみ出す

表示領域を320pxへ変更します。

(setWidth(320)表示幅だけを狭める,{viewport:doc.defaultView.innerWidth,card:dimensions("#card"),document:内容幅と表示幅を比較{scroll:doc.documentElement.scrollWidth,client:doc.documentElement.clientWidth}})

600pxの固定幅は狭い表示領域からはみ出します。本文を読むたびに左右へ動かす必要があると、行の流れを追いにくくなります。

3カードを利用可能な幅へ合わせる

カード幅を100%にし、長いURLの折返しも許可します。

(doc.getElementById("card").style.width="100%"親の利用可能幅へ合わせる,doc.getElementById("url").style.overflowWrap="anywhere"長い文字列も折返す,{card:dimensions("#card"),document:{scroll:doc.documentElement.scrollWidth,client:doc.documentElement.clientWidth}})

カードが表示領域内へ収まります。長いURLには通常の改行機会が少ないため、箱の幅だけを縮めても文字がはみ出す場合があります。内容の折返しも合わせて指定します。

4文字を倍の大きさにする

bodyのfont-sizeを32pxにします。

(globalThis.beforeHeight=dimensions("#card").height,doc.body.style.fontSize="32px"文字サイズを倍へ,{font:styleOf("body","font-size"),beforeHeight,after:dimensions("#card")拡大後の高さと幅,document:{scroll:doc.documentElement.scrollWidth,client:doc.documentElement.clientWidth}})

文字とカードの高さが増えます。固定高さで切り取らず、文章の増えた行数を収められることを確認します。この操作は文字サイズの拡大で、ブラウザのズームによる表示領域全体の変化とは別です。

5文字色のコントラストを計算する

sRGBの文字色と背景色から相対輝度比を計算します。

(globalThis.luminance=hex=>{const c=hex.match(/../g).map(x=>parseInt(x,16)/255).map(v=>v<=0.04045sRGBから線形値への変換?v/12.92:((v+0.055)/1.055)**2.4);return 0.2126*c[0]+0.7152*c[1]+0.0722*c[2]相対輝度},globalThis.contrast=(a,b)=>{const x=luminance(a),y=luminance(b);return Math.round((Math.max(x,y)+0.05明るい側の補正輝度)/(Math.min(x,y)+0.05)*100)/100},{foreground:"#555555",background:"#111111",ratio:contrast("555555","111111")二色の比率})

暗い灰色の文字は背景との差が小さくなります。相対輝度はsRGB値を線形化して求め、明るい側+0.05を暗い側+0.05で割ります。通常サイズの文字ではWCAG 2.2の最低コントラスト基準として4.5:1が使われます。大きい文字などは条件が異なります。

6明るい文字色へ変更する

文字を#dddへ変更し、比率を再計算します。

(doc.getElementById("text").style.color="#ddd"文字色を明るくする,{color:styleOf("#text","color"),ratio:contrast("dddddd","111111")修正後の比率})

比率が上がり、背景から文字を判別しやすくなります。コントラスト比は読みやすさの一つの条件で、文字サイズ・行間・文の長さなども合わせて調整します。

7操作対象の寸法を確認する

確定ボタンの幅と高さを測ります。

({button:dimensions("#send")操作対象の寸法,name:doc.getElementById("send").getAttribute("aria-label")記号だけのボタンの名前})

ボタンは24×24pxです。文字を大きくしても固定寸法の操作対象が小さいままでは押しにくさが残ります。WCAG 2.2の対象サイズには24pxや44pxの基準と例外条件があり、適合レベルと周囲の間隔を含めて判断します。

8操作対象を広げる

幅と高さを44pxへ増やします。

(doc.getElementById("send").style.width="44px"横の操作領域,doc.getElementById("send").style.height="44px"縦の操作領域,dimensions("#send"))

見える記号だけでなく押せる領域を広げます。ほかの操作対象へ近接しすぎない余白や、フォーカスが見えることも確認します。

9動きの低減設定を取得する

prefers-reduced-motionの条件を確認します。

({reduce:doc.defaultView.matchMedia("(prefers-reduced-motion: reduce)")利用環境の希望を取得.matches,animation:styleOf("#motion","animation-name")現在の動きの指定,duration:styleOf("#motion","animation-duration")})

利用環境が動きの低減を希望しているかを取得できます。設定を読んだだけでは、このカードの動きは変わりません。メディアクエリやスクリプトの処理へ結び付け、ページ内にも停止手段を用意します。

10ページ内で動きを止める

カードへreduceを付け、animation:noneの規則を適用します。

(doc.getElementById("card").classList.add("reduce")ページ内の低減設定を適用,{animation:styleOf("#motion","animation-name")動きが解除された指定,duration:styleOf("#motion","animation-duration")})

animationはnoneになり、進行表示の動きが止まります。これはページ内の設定で、利用環境の設定自体を変更する操作ではありません。情報の意味を失わずに動きを減らし、状態は文章などでも伝えます。

まとめ

狭い幅と文字拡大の両方で、全文を読める折返しと高さを確認します。

文字のコントラストと操作対象の寸法を、それぞれ具体的な値で確認します。

動きの低減設定を読み取るだけでなく、実際の表示規則と停止手段へ結び付けます。

操作履歴と解説を振り返れます。

ブラウザ / 操作・表示

1
(globalThis.doc=createDocument(cardHTML),{viewport:doc.defaultView.innerWidth,card:dimensions("#card"),document:{scroll:doc.documentElement.scrollWidth,client:doc.documentElement.clientWidth}})
{
  "viewport": 640,
  "card": {
    "width": 600,
    "height": 324.81,
    "scroll": 678,
    "client": 598
  },
  "document": {
    "scroll": 695,
    "client": 640
  }
}
2
(setWidth(320),{viewport:doc.defaultView.innerWidth,card:dimensions("#card"),document:{scroll:doc.documentElement.scrollWidth,client:doc.documentElement.clientWidth}})
{
  "viewport": 320,
  "card": {
    "width": 600,
    "height": 324.81,
    "scroll": 678,
    "client": 598
  },
  "document": {
    "scroll": 695,
    "client": 320
  }
}
3
(doc.getElementById("card").style.width="100%",doc.getElementById("url").style.overflowWrap="anywhere",{card:dimensions("#card"),document:{scroll:doc.documentElement.scrollWidth,client:doc.documentElement.clientWidth}})
{
  "card": {
    "width": 287.97,
    "height": 401.59,
    "scroll": 286,
    "client": 286
  },
  "document": {
    "scroll": 320,
    "client": 320
  }
}
4
(globalThis.beforeHeight=dimensions("#card").height,doc.body.style.fontSize="32px",{font:styleOf("body","font-size"),beforeHeight,after:dimensions("#card"),document:{scroll:doc.documentElement.scrollWidth,client:doc.documentElement.clientWidth}})
{
  "font": "32px",
  "beforeHeight": 401.59,
  "after": {
    "width": 287.97,
    "height": 1122.86,
    "scroll": 286,
    "client": 286
  },
  "document": {
    "scroll": 320,
    "client": 320
  }
}
5
(globalThis.luminance=hex=>{const c=hex.match(/../g).map(x=>parseInt(x,16)/255).map(v=>v<=0.04045?v/12.92:((v+0.055)/1.055)**2.4);return 0.2126*c[0]+0.7152*c[1]+0.0722*c[2]},globalThis.contrast=(a,b)=>{const x=luminance(a),y=luminance(b);return Math.round((Math.max(x,y)+0.05)/(Math.min(x,y)+0.05)*100)/100},{foreground:"#555555",background:"#111111",ratio:contrast("555555","111111")})
{
  "foreground": "#555555",
  "background": "#111111",
  "ratio": 2.53
}
6
(doc.getElementById("text").style.color="#ddd",{color:styleOf("#text","color"),ratio:contrast("dddddd","111111")})
{
  "color": "rgb(221, 221, 221)",
  "ratio": 13.9
}
7
({button:dimensions("#send"),name:doc.getElementById("send").getAttribute("aria-label")})
{
  "button": {
    "width": 24,
    "height": 24,
    "scroll": 28,
    "client": 22
  },
  "name": "申込みを確定"
}
8
(doc.getElementById("send").style.width="44px",doc.getElementById("send").style.height="44px",dimensions("#send"))
{
  "width": 44,
  "height": 44,
  "scroll": 42,
  "client": 42
}
9
({reduce:doc.defaultView.matchMedia("(prefers-reduced-motion: reduce)").matches,animation:styleOf("#motion","animation-name"),duration:styleOf("#motion","animation-duration")})
{
  "reduce": false,
  "animation": "move",
  "duration": "2s"
}
10
(doc.getElementById("card").classList.add("reduce"),{animation:styleOf("#motion","animation-name"),duration:styleOf("#motion","animation-duration")})
{
  "animation": "none",
  "duration": "0s"
}

演習完了