# #1 ymg.a11y サイトのアクセシビリティチェックをしてみよう

## クリエイティブハント山口2018のサイトのアクセシビリティ

### 対象
https://creative-hunt.org/
（2019/7/11以降は　https://creative-hunt.org/2018/）

### 確認方法
* 目視（目で見て分かるもの、デザイン的な視点）
* Colour Contrast Analyser / Googleの検証ツール（コントラスト）
* Google Chrome Audits（総合的な判断）
* Voice Over（iPhone・音声デバイスでのアクセシビリティ）
* ソース（コードレビュー）

### 気づき
#### 目視・コントラストチェッカーによる確認
1. 「入場無料/要申し込み」がボタンに見える
2. 全体的にボタンが画像
SNSアイコン画像→cssとFontAwsomeでいける
4. レポート・トピックサイトに入ると迷う（本家サイトと感じが違う）
5. レポート・トピックサイトのロゴのジャンプ先がトピックのトップ（creative-hunt.org にジャンプして欲しい）
6. メニューがない。スクロール中にタイムテーブルをみたくなってもみられない
7. 上に戻るボタンがあったらいいかも。
8. タイムテーブル（スマホ幅）のアコーディオン
9. タイムテーブル（スマホ幅）の文字（時間）のコントラストが低い
10. 最下部「お問い合わせ」の下線のデザイン、押せそうで押せない

#### Audits（Chromeのデバッグツール）による確認

* SNSアイコンidの重複
* img#fb
* img#tw
* img#inst
* GoogleMapの＜iframe＞にタイトル属性がない
* [H64: frame 要素及び iframe 要素の title 属性を使用する](https://waic.jp/docs/WCAG-TECHS/H64.html)
* スマホ幅の時のメイン画像（svg object）にaltがない
* ただ、PC幅もaltがないのにAuditsでは指摘されなかった

#### VoiceOverによる確認
* ヒーローイメージのあたりで、いろんなものにフォーカスが当たって読まれる。
* 新着情報などのサムネイルはファイル名が読まれる
* スライダーになっている画像ゾーン、右フリックで抜けづらい

#### その他
外部リンクを別タブで開く？開かない？
→ 基本的にはユーザーが選択できることが大事
* ＜a＞の説明のなかに入れたらいいかも
* テスト・検証して挙動を決める