WebインスペクタでWebコンテンツを検証する

(音楽)

SafariとWebKitチームの ジョナサン･デーヴィスです セッションへようこそ Webコンテンツには 確認事項が多くあります 例えば CSSの命名規則が 守られているか などです 細かすぎてイラつくかもしれません チェックリストが最適です 自動テストを組み込んでいる チームもあります 例えば Safari向けの WebDriverです WebDriverは 有害なコード変更を検知してくれます コーディング規約を満たすか 確認したい場合は Audit機能が利用できる Webインスペクタがお勧めです 簡単にWebコンテンツの確認ができます

このビデオではAuditの使い方と テスト方法などを紹介します また カスタムAuditの作り方も話します まずは Webインスペクタの 設定が必要です

Safariの環境設定の “詳細”をクリック “開発メニューを表示”を有効化します

では ページを開き 開発メニューから Webインスペクタを開きます

WebKitのページを見てみましょう Auditタブをクリック

左側に Auditの一覧が出ます 左の矢印ボタンで展開すると テストグループとテストが現れます テストグループは 個々のテストをまとめているだけです Startボタンで すべてのAuditを実行できます コンテクストメニューからも 実行可能です 単体で実行する時は 右クリックか― 右側でホバーすると実行ボタンが出ます スペースキーでも実行可能です 実行結果はすぐに更新されます

Auditを編集するには サイドバー下部の Editボタンをクリックします

すると 各項目の横に チェックボックスが表示されるので Auditの有効･無効を選択します

Doneボタンを押して完了です

すべての結果は Resultsフォルダの中にある― Runフォルダに集約されます

結果を見るには Runフォルダを展開します ページをリロードしても結果は残ります なので 修正後にAuditを再実行して 合格率の比較も可能です 画面を閉じるとクリアされます

結果をクリックすると Result LevelsとResult Dataが 表示されます

左の３つは よく知っているでしょう “Passed”はコードの合格を意味します “Warning”は改善点はあっても おおむね合格です “Failed”は不合格です

右の２つは Audit特有の結果です “Error”はJavaScript側のエラーです “Unsupported”は特殊で データがサポートされていないことを 意味します

テスト結果には DOMのノードなども含まれます

Webインスペクタには デフォルトのAuditがあります そのうちの１つが アクセシビリティを 確認できるテストです

では テスト結果を 詳しく見てみましょう

総合スコアは良好ですが 改善の余地があります

不合格のケースには 不合格が検知された DOMツリーが表示されます 展開すると 子ノードにアクセスでき― ホバーで該当の要素を強調できます 要素タグと同じです

これで コードの改善場所が 簡単に分かります

要素タグの右側の矢印をクリックすると 修正できます 必要なrole属性を 付与していないことが問題のようです そこで“menuitem”を “menu”の子要素 すべてに付与します

他の要素にも属性を付与します

あと少しです

では Auditタブに戻り 再実行しましょう 新しい結果を確認します

すべてのテストに合格しました この変更を実際のコードに組み込みます

Webインスペクタの簡単さが 分かったでしょう Auditと結果はエクスポートが可能で JSONファイルに保存できます Webインスペクタに再インポートすれば DOMノードを含む 古い結果にもアクセスできます

デフォルトのAuditも エクスポートが可能です コードの目的は様々です カスタムAuditを書けることは 最も効果的な点でしょう

JSONフォーマットも有効です JavaScriptのstringifyを使えば 便利なフレームワークを より簡単に利用できます JSONファイルなら テストの共有も簡単です WebKitのサイトから ESLintのサンプルを入手できます カスタムAuditの書き方や フレームワークの説明も載っています サンプルをダウンロードしたら ドラッグ＆ドロップで インポートできます

Auditは迅速で便利です アクセシビリティのAuditを 試してみてください

独自のAuditを作成して 作業中のコードも検証してみてください バグや問題があった場合の 問い合わせも歓迎します この内容に関する情報や資料は ページのリンクをご活用ください