あとから追加されたカード内の数字と見出しの関係がマークアップで表現できていない

[yosukedoke]

起こっている問題 / The Problem

• 「N501Y陽性例構成割合」、「変異株PCR検査実施割合」は数字に対とするラベル思われるがspanなので意図が伝わりづらい可能性がある。
• また視覚表現的に h3 と同じ見た目なので分かりにくい。

スクリーンショット / Screenshot

期待する見せ方・挙動 / Expected Behavior

• 見出しと数字の関係を示す、適切な構造にしたほうがよさそう。（dl/dt/ddなど）

起こっている問題の再現手段 / Steps to Reproduce

1. デベロッパーツールでマークアップを確認する

動作環境・ブラウザ / Environment

• すべての環境

[kaizumaki]

@yosukedoke これは共通コンポーネントで実装しているので、同様の問題がモニタリング項目(3) や モニタリング項目(4) でも起こっていると思われるのですが、どうなんでしょう...？
#6414 と関係しそうですね。

[magi1125]

@kaizumaki そうですね、これが代表例ということで、同じことが起きていると思います。
直さないと情報取得不能とまでは言えないので優先度は下げてもいいと思いますが、#6414 と合わせて直せるとベターではありますね。

[magi1125]

ここも一緒に考えられたほうがいいのかな…
#3115

[yosukedoke]

@kaizumaki @magi1125 これらはマークアップ以前に、運用を続ける中でコンテンツ設計の齟齬が起こっていると思います。

以前は見出し＝指標名だったので見出し＋数値で問題なかったが、いまは見出し＋（指標名＋数値）＊項目数　という構造なので、UIデザインとしてこれらをどういう位置づけで表現するのか、整理しないとマークアップやアクセシビリティーにおける妥当性は判断できないと思います。

• 見出し
  • 指標名
    • 指標の数値
    • 注釈（前日比など）

ツリーとしてこうあるとき、見出しが指標名を兼ね、かつ数値が1つしか無いときは指標名 を省略することができる、
見出しと指標名が別、あるいは指標が2つあるときは小見出しとして指標名が必須になる、みたいな場合分けのルールを設けるなど、設計上の見直しをしてはいかがでしょうか？

見出しと指標名が同一の場合

• 報告日別による陽性者数の推移 ： 見出し = 指標名 = <h3>
  • 502 人 ：指標の数値 = <p>
  • 2021年7月12日 日別値（前日比: -112 人）：注釈（前日比など）= <small>
    　

見出しと指標名が別の場合

• モニタリング項目(3) :見出し= <h3>
  • 新規陽性者における接触歴等不明者数 : 指標名 = <h4>
    • 466.0 人 ：指標の数値 = <p>
    • 2021年7月12日 の数値（７日間移動平均）（前日比: +12.6 人）：注釈（前日比など）= <small>
  • 増加比 : 指標名 = <h4>
    • 128.8 % ：指標の数値 = <p>
    • 2021年7月12日 の数値（７日間移動平均値をもとに算出）（前日比: +2.1 %）：注釈（前日比など）= <small>

これは一例で、注釈のカッコが2つ続いている箇所など、他にも細かい情報の扱いについて見直したほうが、アクセシビリティーの支援技術以前の問題として改善されると思いました。

[yosukedoke]

なお、見出しで対応する場合は #6404 にあるようにカードの開始の見出しレベルが変わった場合は指標名のレベルも合わせて下げるなど対応いただけると良いと思います。

[kaizumaki]

@yosukedoke 整理していただき感謝です 🙏 問題点が明確になって助かりました。
これはなかなか難しいですね...。ご指摘の通り、UIデザインとして初期の実装をなんとなくで拡張してきてしまっているので、今では指標が複数あるものについてはとても見やすい状態とは言えません。
ここは抜本的に、マークアップ的にも齟齬がないUIに変えていったほうがいいように思いました。
とはいえ、私にはパッと打開策が思い浮かばないのですけど...

[magi1125]

@kaizumaki シンプルに考えると、このキャプチャで言えば 「N501Y陽性例構成割合」、「変異株PCR検査実施割合」がspanからh4になりつつ、見出しの文字サイズがすこし小さくなる（ただし指標の数字は小さくしない）、みたいな形でイケる気がしましたが、どうでしょうか？

[kaizumaki]

@magi1125 おお、たしかにそれでよさそうです！
私としては、見た目として見づらいなと思ったんですよね。h4の文字サイズをすこし小さくすることで多少は改善できるような気がしてきました。

[kaizumaki]

#6414 と一緒に対応しますね。