Skip to content

Commit a6bfba3

Browse files
committed
exp-axeの英訳追加
1 parent bbb1b69 commit a6bfba3

File tree

2 files changed

+53
-50
lines changed

2 files changed

+53
-50
lines changed

en/source/explanations/axe.rst

Lines changed: 50 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,102 +1,103 @@
11
.. _exp-axe:
22

3-
##################################################
4-
axe DevToolsを使用したアクセシビリティー・チェック
5-
##################################################
3+
########################################
4+
Checking Accessibility With axe DevTools
5+
########################################
66

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.
910

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.
1213

1314
**************************************
14-
axe DevToolsのインストールと起動の仕方
15+
How to Install and Launch axe DevTools
1516
**************************************
1617

17-
ChromeウェブストアからChrome拡張をインストールできます。
18+
You can install the Chrome extension from the Chrome Web Store.
1819

1920
`axe DevTools - Web Accessibility Testing - Chrome ウェブストア <https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd>`_
2021

21-
axe DevTools拡張機能はデベロッパーツール内で使用します。
22+
The axe DevTools extension is used within the developer tools.
2223

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).
2425

2526
.. image:: /img/axe/axe-1.png
26-
:alt: スクリーン・ショット:メニューからデベロッパーツールを開こうとしている
27+
:alt: Screenshot: opening the developer tools from the menu
2728

28-
デベロッパーツールのタブから「axe DevTools」を選択します。
29+
In the developer tools, select the "axe DevTools" tab.
2930

3031
.. 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
3233

33-
デベロッパーツールの表示領域が狭い場合は 「>>」アイコンに隠されていることがあります。
34+
If the display area of the developer tools is narrow, the "axe DevTools" may be hidden under the ">>" icon.
3435

3536
.. 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
3738

38-
****************
39-
初期設定(推奨)
40-
****************
39+
***************************
40+
Initial Setup (Recommended)
41+
***************************
4142

42-
より多くの項目をチェックするために、以下の初期設定を行うと良いでしょう。
43+
To check more items, it is advisable to perform the following initial setup:
4344

44-
1. :menuselection:`Options --> Settings` の順にクリック
45+
1. Click :menuselection:`Options --> Settings`
4546

4647
.. image:: /img/axe/axe-settings.png
47-
:alt: スクリーン・ショット:OptionsからSettingsを開こうとしている
48+
:alt: Screenshot: opening the Settings from the Options screen
4849

49-
2. "Best Practices" で "Enable" をチェック
50+
2. Check "Enable" under "Best Practices"
5051

5152
.. image:: /img/axe/axe-settings-best-practices.png
52-
:alt: スクリーン・ショット:Best Practicesの項目のEnableをチェックしている
53+
:alt: Screenshot: checking Enable under Best Practices
5354

54-
3. 「保存」をクリック
55+
3. 「Click "Save"
5556

56-
****************************************
57-
axe DevToolsで今見ているページを分析する
58-
****************************************
57+
********************************************
58+
Analyzing the Current Page with axe DevTools
59+
********************************************
5960

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.
6162

6263
.. image:: /img/axe/axe-8.png
63-
:alt: スクリーン・ショット:axe DevToolsタブ
64+
:alt: Screenshot: axe DevTools tab
6465

65-
今見ているページの問題を瞬時に発見することができます。
66+
You can instantly identify issues on the current page.
6667

6768
.. image:: /img/axe/axe-9.png
68-
:alt: スクリーン・ショット:表示されているページの問題をaxe DevToolsで表示している
69+
:alt: Screenshot: Displaying issues on the page with axe DevTools
6970

70-
**************
71-
レポートの見方
72-
**************
71+
**********************
72+
How to Read the Report
73+
**********************
7374

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.
7576

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.
7879

7980
.. image:: /img/axe/axe-3.png
80-
:alt: スクリーン・ショット:発見された問題の件数が表示されるエリア
81+
:alt: Screenshot: the area that displays the number of issues
8182

82-
発見された問題のリストは、クリックで開くことでその問題の詳細ビューを見ることができます。
83+
You can view detailed information about each issue by clicking on it in the list of found problems.
8384

84-
詳細ビューにはその問題が起きているHTML上の場所や、修正するための情報が表示されています。
85+
The detailed view shows the location in the HTML where the issue occurs and provides information for fixing it.
8586

8687
.. image:: /img/axe/axe-4.png
87-
:alt: スクリーン・ショット:問題の詳細部分
88+
:alt: Screenshot: detail view of an issue
8889

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.
9091

9192
.. image:: /img/axe/axe-pager.png
92-
:alt: スクリーン・ショット:詳細ビューにあるページャー
93+
:alt: Screenshot: Pager in the detailed view
9394

94-
**********************************
95-
axe DevToolsを使用する上での注意点
96-
**********************************
95+
**************************************
96+
Considerations When Using axe DevTools
97+
**************************************
9798

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.
100101

101102
.. include:: /inc/info2faq/exp-axe.rst
102103

ja/source/explanations/axe.rst

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,8 +95,10 @@ axe DevToolsの画面には発見された問題の件数が表示されるエ
9595
axe DevToolsを使用する上での注意点
9696
**********************************
9797

98-
* モーダルやアコーディオンが開閉するような場所では、開いた状態や閉じた状態で何度かaxe DevToolsで分析してみる必要があります
98+
* モーダル・ダイアログやアコーディオンが開閉するような場所では、開いた状態や閉じた状態で何度かaxe DevToolsで分析してみる必要があります
9999
* axe DevToolsだけではすべての問題を発見することはできませんが、機械的に発見できる問題を瞬時に発見することができます。また、調査の必要そうな場所を発見するために非常に有用です。
100100

101101
.. include:: /inc/info2faq/exp-axe.rst
102102

103+
.. translated:: true
104+

0 commit comments

Comments
 (0)