|
| 1 | +id: p0009 |
| 2 | +sortKey: 69000 |
| 3 | +updated: '2025-03-25' |
| 4 | +tags: |
| 5 | +- keyboard-operation |
| 6 | +title: |
| 7 | + ja: Safariでのみ、Tabキーによるフォーカス移動の挙動がおかしい |
| 8 | + en: Tab key focus movement behaves strangely only in Safari |
| 9 | +problem: |
| 10 | + ja: |- |
| 11 | + SafariでWebページを表示して、 :kbd:`Tab` キーや :kbd:`Shift+Tab` キーでフォーカスを移動すると、本来フォーカスされるべきなのにスキップされる要素がある。 |
| 12 | + Google Chromeや他のブラウザーでは適切にフォーカス移動できているが、コンテンツ側で何らかの対応が必要か。 |
| 13 | + en: |- |
| 14 | + When displaying a Web page in Safari, there are elements that should be focused but are skipped when moving focus with the :kbd:`Tab` key or :kbd:`Shift+Tab` key. |
| 15 | + Google Chrome and other browsers can move focus correctly, but is there any action required on the content side? |
| 16 | +solution: |
| 17 | + ja: |- |
| 18 | + デフォルト設定でSafariを使用している場合の挙動なので対処は不要。 |
| 19 | + :kbd:`option+Tab` と :kbd:`Shift+option+Tab` キーを使用すると他のブラウザーと同様の挙動になる。 |
| 20 | + en: |- |
| 21 | + Since this is the behavior when using Safari with the default settings, no action is required. |
| 22 | + Using the :kbd:`option+Tab` and :kbd:`Shift+option+Tab` keys will behave the same as other browsers. |
| 23 | +explanation: |
| 24 | + ja: |- |
| 25 | + デフォルト設定でSafariを使用している場合、リンクやボタンなど、本来 :kbd:`Tab` キーや :kbd:`Shift+Tab` キーでフォーカスを移動できるはずの要素の一部に、フォーカスが移動できません。 |
| 26 | + 代わりに、 :kbd:`option+Tab` キーや :kbd:`Shift+option+Tab` キーを使用すると、他のブラウザーと同様にフォーカスを移動できます。 |
| 27 | +
|
| 28 | + フォーカス順序のチェックをする場合、通常は他のブラウザーで確認して問題なければ問題はありません。 |
| 29 | + もしSafariでチェックを実施する必要がある場合は、 :kbd:`option+Tab` キーと :kbd:`Shift+option+Tab` キーを使用して確認します。 |
| 30 | +
|
| 31 | + なお、macOS上のSafariを使用している場合は、以下のいずれかの設定をすることで、 :kbd:`Tab` キーと :kbd:`Shift+Tab` キーの挙動が他のブラウザーと同様になります。 |
| 32 | +
|
| 33 | + * Safariの :menuselection:`設定 --> 詳細` で、「Tabキーを押したときにWebページ上の各項目を強調表示」にチェックを入れる |
| 34 | + * macOSの :menuselection:`環境設定 --> アクセシビリティ --> キーボード` で「フルキーボードアクセス」を有効にする |
| 35 | + en: |- |
| 36 | + When using Safari with the default settings, some elements, such as links and buttons, that should be able to move focus to with the :kbd:`Tab` key or :kbd:`Shift+Tab` key, don't receive focus. |
| 37 | + Instead, using the :kbd:`option+Tab` key and :kbd:`Shift+option+Tab` key will allow you to move focus as in other browsers. |
| 38 | +
|
| 39 | + When checking the focus order, if there are no issues when checking with other browsers, usually there is no problem. |
| 40 | + If you need to check with Safari, use the :kbd:`option+Tab` key and :kbd:`Shift+option+Tab` key to check. |
| 41 | +
|
| 42 | + Note that by one of the following settings, the behavior of the :kbd:`Tab` key and :kbd:`Shift+Tab` key in Safari on macOS will be the same as in other browsers. |
| 43 | +
|
| 44 | + * In Safari's :menuselection:`Preferences --> Advanced`, check "Press Tab to highlight each item on a webpage." |
| 45 | + * In macOS :menuselection:`System Preferences --> Accessibility --> Keyboard`, enable "Full Keyboard Access." |
| 46 | +info: |
| 47 | +- exp-tab-order-check |
| 48 | +checks: |
| 49 | +- '0171' |
| 50 | +- '0172' |
| 51 | +guidelines: |
| 52 | +- gl-dynamic-content-focus |
| 53 | +- gl-form-dynamic-content-focus |
| 54 | +- gl-form-keyboard-operable |
| 55 | +- gl-form-tab-order |
| 56 | +- gl-input-device-focus |
| 57 | +- gl-input-device-focus-indicator |
| 58 | +- gl-input-device-keyboard-operable |
| 59 | +- gl-link-tab-order |
0 commit comments