ウェブアクセシビリティについて

ウェブアクセシビリティ方針

WINTICKETでは誰もが公営競技を楽しむことができるよう「JIS X 8341-3:2016 高齢者・障害者等配慮設計指針－情報通信における機器、ソフトウェア及びサービス－第3部：ウェブコンテンツ」に対応することを目標とし、アクセシビリティの向上に取り組んでいます。

対象範囲

WINTICKETサービス
https://www.winticket.jp 以下

目標とするレベル

JIS X 8341-3:2016のレベルAに準拠

本方針、また試験結果における「準拠」という表記は、情報通信アクセス協議会のウェブアクセシビリティ基盤委員会による 「ウェブコンテンツのJIS X 8341-3:2016対応度表記ガイドライン2016年3月版」で定められた表記によるものです。

追加する達成基準

  • 1.4.3 コントラスト（最低限レベル）の達成基準（AA）
  • 2.4.7 フォーカスの可視化の達成基準（AA）

例外事項

  • 各競輪場から提供されているレースのダイジェスト動画における、
    • 1.2.2 キャプション (収録済)
    • 1.2.3 音声解説、又はメディアに対する代替 (収録済)
    の2つの達成基準は、音声コンテンツのキャプションや代替コンテンツが提供されずサービスでの作成も難しいため、現時点では達成できません。

ウェブアクセシビリティ試験結果

2019年4月から6月に実施した JIS X 8341-3:2016「附属書 JB（参考）試験方法」に基づいた試験結果です。

WINTICKETでは今後もアクセシビリティの向上に取り組んでいきます。

試験の結果、及び実施方法

表明日
規格の規格番号及び改正年JIS X 8341-3:2016
満たしている適合レベル及び対応度適合レベルA一部準拠
対象となるウェブページに関する簡潔な説明WINTICKET(ウィンチケット)の主要なページ
依存したウェブコンテンツ技術 HTML5, CSS, JavaScript
試験をおこなったウェブページのURL末尾に試験をおこなったウェブページのURLを記載
試験実施期間〜

達成基準チェックリスト

達成基準に該当するコンテンツが対象範囲内にある場合は「適用」、ない場合は「-」と表記しています。 適用かつ達成基準を満たしている場合は「適合」、満たしていない場合は「不適合」と表記しています。

達成基準適合レベル適用適合
1.1.1 非テキストコンテンツの達成基準A適用不適合
1.2.1 音声だけ及び映像だけ（収録済み）の達成基準A--
1.2.2 キャプション（収録済み）の達成基準A適用不適合
1.2.3 音声解説又はメディアに対する代替コンテンツ（収録済み）の達成基準A適用不適合
1.3.1 情報及び関係性の達成基準A適用不適合
1.3.2 意味のある順序の達成基準A適用適合
1.3.3 感覚的な特徴の達成基準A適用適合
1.4.1 色の使用の達成基準A適用適合
1.4.2 音声の制御の達成基準A--
1.4.3 コントラスト（最低限レベル）の達成基準AA適用不適合
2.1.1 キーボードの達成基準A適用適合
2.1.2 キーボードトラップなしの達成基準A適用適合
2.2.1 タイミング調整可能の達成基準A適用不適合
2.2.2 一時停止，停止及び非表示の達成基準A適用適合
2.3.1 3回のせん（閃）光，又はしきい（閾）値以下の達成基準A適用適合
2.4.1 ブロックスキップの達成基準A適用適合
2.4.2 ページタイトルの達成基準A適用適合
2.4.3 フォーカス順序の達成基準A適用不適合
2.4.4 リンクの目的（コンテキスト内）の達成基準A適用適合
2.4.7 フォーカスの可視化の達成基準AA適用適合
3.1.1 ページの言語の達成基準A適用適合
3.2.1 フォーカス時の達成基準A適用適合
3.2.2 入力時の達成基準A適用適合
3.3.1 エラーの特定の達成基準A適用不適合
3.3.2 ラベル又は説明の達成基準A適用適合
4.1.1 構文解析の達成基準A適用適合
4.1.2 名前（name），役割（role）及び値（value）の達成基準A適用不適合

満たしていない達成基準の事例と対応策

2019年4月から6月に実施した試験において、達成基準を満たしていない箇所について、代表的な事例の具体的な内容とその対応策を示します。

1.1.1 非テキストコンテンツの達成基準

1.1.1 事例1: 代替テキストの漏れ

登録完了で1,000円分必ずもらえる→ポイントで投票→払戻金は現金！というフローチャートが掲載された画像

対象ページhttps://www.winticket.jp
内容意味のある画像に対して代替テキストが付与されていなかった
原因A/Bテストツールによる画像入稿時のテキスト設定漏れ
対応画像入稿時のテキスト入稿の徹底 ※現在は取り下げられてます

1.3.1 情報及び関係性の達成基準

1.3.1 事例1: 表構造をリストで表現

歴代記念経験者の年/優勝者/登録地が列挙されている表のbefore, afterを図示した画像。beforeは列方向に赤い矢印が描かれているのに対し、afterは行方向に矢印が描かれている

対象ページhttps://www.winticket.jp/keirin/venues/42などの競輪場詳細ページ全体
内容表構造のデータに対して、<dt> + <dd>の構造でマークアップされ、行方向の情報のグルーピングができていなかった
対応H51: 表形式の情報を提示するために、テーブルのマークアップを使用する（修正済）

1.4.3 コントラスト（最低限レベル）の達成基準

1.4.3 事例1: 車番番号

並び予想で車番が並んでいる箇所のスクリーンショット。7番と6番に矢印が向けられている

7番、コントラスト比 3.04:1。6番、コントラスト比 4.05:1

1.4.3 事例2: 注意を促す赤

レース情報示すカードUIの中の投票締め切り時間までの残り時間を表した赤色のテキストに矢印が向けられている画像

コントラスト比 3.79:1

1.4.3 事例3: ポイントチャージのボタン

ポイントをチャージするというボタン。背景がオレンジで白の文字色

コントラスト比 3.51:1

1.4.3 事例4: ポイントを示すカードUI

ポイント残数を表すカードUI。緑のグラデーションの背景に白い文字

コントラスト比 2.66:1 （グラデーションの中の最小値）

1.4.3 事例5: 的中時の的中マークと払戻金表示

投票結果確認画面の的中マークと払戻金。的中マークは薄いオレンジの背景に濃いオレンジの文字。払戻金は白い背景にオレンジの文字

的中マーク、コントラスト比 3.02:1。払戻金、コントラスト比 3.51:1

1.4.3の対応方針

システム上重要な文言が多い箇所から順次、使用する色の見直しを図っていきます。

2.2.1 タイミング調整可能の達成基準

2.2.1 事例1: エラーを知らせる通知UI（Snackbar）
アニメーションネットワークに接続されていませんというエラーが画面上部に出現して数秒で消えるアニメーション
対象ページ全てのページ
内容オフラインになった際やサーバーエラーが起こった場合に通知する通知領域が4秒で閉じてしまう
対応フォームバリデーションなどのユーザーの操作を再度求めるエラーにSnackbarを利用しない。（その他のオフライン通知や不明なサーバーエラーに関しては継続してSnackbarを利用）

2.4.3 フォーカス順序の達成基準

2.4.3 事例1: 投票シートを記入するボタンがDOMの最後に出現する

画面の他のUIの上に被さって表示されている投票シートを記入するボタンに赤い矢印が向けられている

対象ページhttps://www.winticket.jp/keirin/cups/2019050311/schedules/2/races/1/entriesなどのレース詳細ページなど
内容画面下部に固定浮動表示している「投票シートを記入する」ボタンがDOMの一番最後に位置し、レースに関連する主たるコンテンツと隣接していない
対応レースに関連する主たるコンテンツ内部にも投票シートを記入するボタンを設置する。もしくは、DOM上の出現位置を主たるコンテンツと隣接する位置に修正（G59: コンテンツ内の順番及び関係に従った順序で、インタラクティブな要素を配置する）

3.3.1 エラー特定の達成基準

3.3.1 事例1: 口座番号入力欄

口座番号(半角数字7桁)というラベルが関連付けられた入力欄に全角数字で１２３４５６７と入力しているスクリーンショット。口座番号を確定するというボタンは操作できず、エラー内容も表示されてない

対象ページhttps://www.winticket.jp/my/bank-account/banks/0001/input?branchCode=244など払戻金登録・修正ページ
内容口座番号に半角数字7桁以外で入力されている場合、クライアントサイドバリデーションによって「口座番号を確定する」ボタンが送信できないが、バリデーションエラーの内容が表示されていない
対応「口座番号を確定する」ボタンを常に押せるようにし、押した際に適切なエラーメッセージを表示する、もしくは入力欄からフォーカスが外れたタイミングで適切なエラーメッセージを表示する（G85: 利用者の入力が要求されたフォーマット又は値の範囲外の場合に、テキストの説明を提供する）

4.1.2 名前（name），役割（role）及び値（value）の達成基準

4.1.2 事例1: 電話番号入力欄の name の提供漏れ

電話番号入力欄を示すスクリーンショット

対象ページhttps://www.winticket.jp/register/sms
内容電話番号入力欄の input に入力内容を示すname を提供していない
対応ARIA14: 可視ラベルが使用できない場所で不可視ラベルを提供するために、aria-labelを使用する 2.0 達成方法集（修正済）
4.1.2 事例2: レース選択欄の name の提供漏れ

レース詳細画面のレース選択欄のスクリーンショット。

対象ページhttps://www.winticket.jp/keirin/cups/2019050311/schedules/2/races/1/entriesなどのレース詳細ページなど
内容レースや競輪場を選択する<select> に対して選択内容を示すname を提供していない
対応H44: テキストラベルとフォームコントロールを関連付けるために、label 要素を使用する、もしくはARIA14: 可視ラベルが使用できない場所で不可視ラベルを提供するために、aria-labelを使用する（修正済）