|
1 | 1 | .. _exp-axe:
|
2 | 2 |
|
3 |
| -################################################## |
4 |
| -axe DevToolsを使用したアクセシビリティー・チェック |
5 |
| -################################################## |
| 3 | +######################################## |
| 4 | +Checking Accessibility With axe DevTools |
| 5 | +######################################## |
6 | 6 |
|
7 |
| -axe DevToolsは非常によく使われているアクセシビリティー・チェック・ツールです。 |
8 |
| -基本機能が `axe-core <https://github.com/dequelabs/axe-core>`_ として実装されているため様々な方法で使用することができますが、ここではブラウザー拡張機能として利用して、出来上がっているWebページのアクセシビリティーの対応状況をチェックする方法を紹介します。 |
| 7 | +axe DevTools is a very commonly used accessibility checking tool. |
| 8 | +Its core functionality is implemented as `axe-core <https://github.com/dequelabs/axe-core>`_ which allows it to be used in various ways. |
| 9 | +Here, we will introduce how to use it as a browser extension to check the accessibility status of existing Web pages. |
9 | 10 |
|
10 |
| -なお、axe DevToolsを用いた具体的なチェックの実施方法については、 :ref:`check-example-axe` を参照してください。 |
11 |
| -また、 :ref:`info-axe-rules` も合わせて参照してください。 |
| 11 | +For specific instructions on how to conduct checks using axe DevTools, please refer to :ref:`check-example-axe`. |
| 12 | +Also refer to :ref:`info-axe-rules` for additional information. |
12 | 13 |
|
13 | 14 | **************************************
|
14 |
| -axe DevToolsのインストールと起動の仕方 |
| 15 | +How to Install and Launch axe DevTools |
15 | 16 | **************************************
|
16 | 17 |
|
17 |
| -ChromeウェブストアからChrome拡張をインストールできます。 |
| 18 | +You can install the Chrome extension from the Chrome Web Store. |
18 | 19 |
|
19 | 20 | `axe DevTools - Web Accessibility Testing - Chrome ウェブストア <https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd>`_
|
20 | 21 |
|
21 |
| -axe DevTools拡張機能はデベロッパーツール内で使用します。 |
| 22 | +The axe DevTools extension is used within the developer tools. |
22 | 23 |
|
23 |
| -分析対象のページを開いた状態で、ツールバー右端のボタンから :menuselection:`その他のツール --> デベロッパーツール` を選択するか、ショートカットキー(Windowsでは :kbd:`Ctrl+Shift+I` 、macOSでは :kbd:`Command+Option+I` )を使用してください。 |
| 24 | +With the page you want to analyze open, select :menuselection:`More Tools --> Developer Tools` from the button at the right end of the toolbar, or use the shortcut keys (:kbd:`Ctrl+Shift+I` on Windows, :kbd:`Command+Option+I` on macOS). |
24 | 25 |
|
25 | 26 | .. image:: /img/axe/axe-1.png
|
26 |
| - :alt: スクリーン・ショット:メニューからデベロッパーツールを開こうとしている |
| 27 | + :alt: Screenshot: opening the developer tools from the menu |
27 | 28 |
|
28 |
| -デベロッパーツールのタブから「axe DevTools」を選択します。 |
| 29 | +In the developer tools, select the "axe DevTools" tab. |
29 | 30 |
|
30 | 31 | .. image:: /img/axe/axe-6.png
|
31 |
| - :alt: スクリーン・ショット:デベロッパーツールのタブバー、右端に「axe DevTools」がある |
| 32 | + :alt: Screenshot: axe DevTools at the right end of the developer tools' tab bar |
32 | 33 |
|
33 |
| -デベロッパーツールの表示領域が狭い場合は 「>>」アイコンに隠されていることがあります。 |
| 34 | +If the display area of the developer tools is narrow, the "axe DevTools" may be hidden under the ">>" icon. |
34 | 35 |
|
35 | 36 | .. image:: /img/axe/axe-2.png
|
36 |
| - :alt: スクリーン・ショット:axe DevToolsが「>>」アイコンに隠されている、アイコンをクリックしたメニュー内に「axe DevTools」がある |
| 37 | + :alt: Screenshot: axe DevTools is hidden behind the '>>' icon, within the menu that appears when the icon is clicked, there is axe DevTools |
37 | 38 |
|
38 |
| -**************** |
39 |
| -初期設定(推奨) |
40 |
| -**************** |
| 39 | +*************************** |
| 40 | +Initial Setup (Recommended) |
| 41 | +*************************** |
41 | 42 |
|
42 |
| -より多くの項目をチェックするために、以下の初期設定を行うと良いでしょう。 |
| 43 | +To check more items, it is advisable to perform the following initial setup: |
43 | 44 |
|
44 |
| -1. :menuselection:`Options --> Settings` の順にクリック |
| 45 | +1. Click :menuselection:`Options --> Settings` |
45 | 46 |
|
46 | 47 | .. image:: /img/axe/axe-settings.png
|
47 |
| - :alt: スクリーン・ショット:OptionsからSettingsを開こうとしている |
| 48 | + :alt: Screenshot: opening the Settings from the Options screen |
48 | 49 |
|
49 |
| -2. "Best Practices" で "Enable" をチェック |
| 50 | +2. Check "Enable" under "Best Practices" |
50 | 51 |
|
51 | 52 | .. image:: /img/axe/axe-settings-best-practices.png
|
52 |
| - :alt: スクリーン・ショット:Best Practicesの項目のEnableをチェックしている |
| 53 | + :alt: Screenshot: checking Enable under Best Practices |
53 | 54 |
|
54 |
| -3. 「保存」をクリック |
| 55 | +3. 「Click "Save" |
55 | 56 |
|
56 |
| -**************************************** |
57 |
| -axe DevToolsで今見ているページを分析する |
58 |
| -**************************************** |
| 57 | +******************************************** |
| 58 | +Analyzing the Current Page with axe DevTools |
| 59 | +******************************************** |
59 | 60 |
|
60 |
| -分析対象のページを開いた状態でデベロッパーツール内のaxe DevToolsのタブを開き、「SCAN ALL OF MY PAGE」ボタンをクリックします。 |
| 61 | +With the page you want to analyze open, open the axe DevTools tab within the developer tools and click the "SCAN ALL OF MY PAGE" button. |
61 | 62 |
|
62 | 63 | .. image:: /img/axe/axe-8.png
|
63 |
| - :alt: スクリーン・ショット:axe DevToolsタブ |
| 64 | + :alt: Screenshot: axe DevTools tab |
64 | 65 |
|
65 |
| -今見ているページの問題を瞬時に発見することができます。 |
| 66 | +You can instantly identify issues on the current page. |
66 | 67 |
|
67 | 68 | .. image:: /img/axe/axe-9.png
|
68 |
| - :alt: スクリーン・ショット:表示されているページの問題をaxe DevToolsで表示している |
| 69 | + :alt: Screenshot: Displaying issues on the page with axe DevTools |
69 | 70 |
|
70 |
| -************** |
71 |
| -レポートの見方 |
72 |
| -************** |
| 71 | +********************** |
| 72 | +How to Read the Report |
| 73 | +********************** |
73 | 74 |
|
74 |
| -axe DevToolsの画面には発見された問題の件数が表示されるエリアと、その問題のリストが表示されるエリアがあります。 |
| 75 | +In the axe DevTools interface, there are two main areas: one displays the number of issues found, and the other shows the list of those issues. |
75 | 76 |
|
76 |
| -発見された問題の件数が表示されるエリアには、そのページにある問題の件数が表示されます。 |
77 |
| -ここで、axe DevTools内のUser Impact(当ガイドライン内での「重篤度」などの定義とは別のものです)や、「Best Practices」などを使ってリストをフィルターすることができます。 |
| 77 | +The area that displays the number of issues found will show the count of problems on that page. |
| 78 | +Here, you can filter the list using User Impact (which is different from definitions like 'severity' within this guide) and "Best Practices" within axe DevTools. |
78 | 79 |
|
79 | 80 | .. image:: /img/axe/axe-3.png
|
80 |
| - :alt: スクリーン・ショット:発見された問題の件数が表示されるエリア |
| 81 | + :alt: Screenshot: the area that displays the number of issues |
81 | 82 |
|
82 |
| -発見された問題のリストは、クリックで開くことでその問題の詳細ビューを見ることができます。 |
| 83 | +You can view detailed information about each issue by clicking on it in the list of found problems. |
83 | 84 |
|
84 |
| -詳細ビューにはその問題が起きているHTML上の場所や、修正するための情報が表示されています。 |
| 85 | +The detailed view shows the location in the HTML where the issue occurs and provides information for fixing it. |
85 | 86 |
|
86 | 87 | .. image:: /img/axe/axe-4.png
|
87 |
| - :alt: スクリーン・ショット:問題の詳細部分 |
| 88 | + :alt: Screenshot: detail view of an issue |
88 | 89 |
|
89 |
| -同じ問題が複数箇所で見つかっている場合は、リスト上にその件数が表示され、詳細ビューのページャーで1つ1つ確認していくことができます。 |
| 90 | +If the same issue is found in multiple places, the count is displayed on the list, and you can check each one using the pager in the detail view. |
90 | 91 |
|
91 | 92 | .. image:: /img/axe/axe-pager.png
|
92 |
| - :alt: スクリーン・ショット:詳細ビューにあるページャー |
| 93 | + :alt: Screenshot: Pager in the detailed view |
93 | 94 |
|
94 |
| -********************************** |
95 |
| -axe DevToolsを使用する上での注意点 |
96 |
| -********************************** |
| 95 | +************************************** |
| 96 | +Considerations When Using axe DevTools |
| 97 | +************************************** |
97 | 98 |
|
98 |
| -* モーダルやアコーディオンが開閉するような場所では、開いた状態や閉じた状態で何度かaxe DevToolsで分析してみる必要があります |
99 |
| -* axe DevToolsだけではすべての問題を発見することはできませんが、機械的に発見できる問題を瞬時に発見することができます。また、調査の必要そうな場所を発見するために非常に有用です。 |
| 99 | +* In areas where modal dialogs or accordions open and close, it is necessary to analyze with axe DevTools several times in both the opened and closed states. |
| 100 | +* While axe DevTools alone cannot detect all issues, it can instantly identify problems that can be programmatically detected. It is also extremely useful for pinpointing areas that may require further investigation. |
100 | 101 |
|
101 | 102 | .. include:: /inc/info2faq/exp-axe.rst
|
102 | 103 |
|
0 commit comments