Heading
見出し
This is the first paragraph
これは最初のパラグラフです
The target is identified by its id attribute value matching the href value (minus the "#") of the "skip" link. When the "skip" link is activated, keyboard focus will be placed on theHeading
見出し
This is the first paragraph
これは最初のパラグラフです
Hidden "skip" links 隠された「スキップ」リンク Many designers worry about the aesthetic impact of visible "skip navigation" links. They may think these links don't look particularly attractive, that they get in the way of artistic expression, or that they may be confusing to some users that do not need them—especially because they are one of the first things within a page. While a visible "skip" link declares a type of distinct commitment to accessibility, to address these concerns, the link can be visually hidden until it is navigated to. 多くの設計者は、目に見える「スキップナビ」リンクの美的影響について心配しています。 彼らは、これらのリンクが特に魅力的に見えない、芸術的な表現の邪魔になる、または、特に、ページ内の最初のものの1つであるため、リンクを必要としない一部のユーザーを混乱させる可能性があると考えるかもしれません。 目に見える「スキップ」リンクは、アクセシビリティへの明確な取り組みを宣言していますが、これらの懸念に対処するために、リンクはナビゲートされるまで視覚的に隠しておくことができます。 To be usable by all keyboard users, particularly sighted keyboard users, the link must: すべてのキーボードユーザー、特に目の見えるキーボードユーザーが使用できるようにするには、リンクは次の条件を満たしている必要があります。 be hidden by default デフォルトで非表示にする be accessible to keyboard navigation キーボードナビゲーションでアクセスできる become prominently visible when it is focused フォーカスされると視覚的に目立つようになる properly set focus to the main content area when activated アクティブ化されたときにメインコンテンツ領域にフォーカスを適切に設定する Probably the most accessible method for visually hiding a skip link is to hide it off screen with CSS, then cause it to be positioned on screen when it receives keyboard focus. Because the link is still part of the accessible content on the page, keyboard and screen reader users can navigate it, and the link will become visible when accessed. スキップリンクを視覚的に隠すための最もアクセス可能な方法は、おそらく、CSS を使用して画面外に隠しておき、キーボードフォーカスを受け取ったときに画面上に配置することです。 リンクは引き続きページ上のアクセス可能なコンテンツの一部であるため、キーボードとスクリーンリーダーのユーザーはリンクをナビゲートでき、アクセスするとリンクが表示されます。 Some techniques, such as hiding the "skip" link with CSS display:none or the hidden attribute, will remove the link from keyboard navigation making it inaccessible to all users. Making the link the same color as the background or fully transparent, sizing the link to 0 pixels, or placing it on a one pixel transparent image can also pose accessibility issues. CSS の display:none または hidden 属性で「スキップ」リンクを非表示にするなどの一部の手法では、キーボードナビゲーションからリンクが取り除かれ、すべてのユーザーがアクセス不可能になります。 リンクを背景と同じ色にするか、完全に透明にする、リンクのサイズを0ピクセルにする、または1ピクセルの透明な画像に配置することも、アクセシビリティの問題を引き起こす可能性があります。 Important 重要 Review the article on Invisible Content Just for Screen Reader Users for details on using CSS to hide "skip" links off-screen. CSS を使用して「スキップ」リンクを画面外に隠す方法の詳細については、「スクリーンリーダーのユーザーのためだけの目に見えないコンテンツ」に関する記事を確認してください。 https://webaim.org/techniques/css/invisiblecontent/ https://raw.githubusercontent.com/Wind1808/Translated-into-Japanese/main/WebAIM/invisiblecontent.txt One potential issue with this approach is that if the user navigates very quickly using the Tab key, the link may be visible on the page for only a fraction of a second and may be overlooked. This can be partially addressed by ensuring that the "skip" link is very visually distinctive at the top of the page when visible. Additionally, one could use scripting or CSS transitions to cause the link to animate so it remains visible on screen for a period of time. このアプローチの潜在的な問題の1つは、ユーザーが Tab キーを使用して非常にすばやくナビゲートすると、リンクがページにほんの一瞬しか表示されず、見落とされる可能性があることです。 これは、「スキップ」リンクがページ上部に表示されているときに、視覚的に非常に目立つようにすることで、部分的に対処できます。 さらに、スクリプトや CSS トランジションを使用してリンクをアニメーション化して、一定期間画面に表示されたままにすることもできます。 Note 注 Navigate the links at the beginning of this page using the Tab key to see an example of a hidden skip link that becomes visible on keyboard focus using CSS transitions to make it visually distinctive and persistent on screen for at least a brief moment. このページの最初にあるリンクを Tab キーを使用してナビゲートすると、キーボードフォーカスで表示される隠されたスキップリンクの例を見ることができます。 CSS トランジションを使用して視覚的に目立たせ、少なくともほんの一瞬でも、画面上に留まるようにしています。 Which wording is best? どの言葉遣いが良いですか? There are multiple ways that the "skip" link could be worded: 「スキップ」リンクを表現する方法は、次のように複数あります。 Skip navigation ナビゲーションをスキップ Skip main navigation メインナビゲーションをスキップ Skip navigation links ナビゲーションリンクをスキップ Skip to main content メインコンテンツへスキップ Skip to content コンテンツへスキップ Any of these may be sufficient so long as the purpose of the link is clearly described. In general, we prefer "Skip to main content" as it explains where the user is navigating to versus what they are navigating past. リンクの目的が明確に説明されている限り、これらのいずれでも構いません。 私たちは、一般的には、「メインコンテンツへスキップ」の方が、ユーザーがどこに向かってナビゲートしているのか、何を通り過ぎてナビゲートしようとしているのかを説明できるため、好ましいと考えています。 Multiple "Skip" Links 複数の「スキップ」リンク What if a page has multiple sections or multiple levels of navigational links? Should developers provide a "skip navigation" link to each of these sections or to skip over each level of navigational? ページに複数のセクションまたは複数レベルのナビゲーションリンクがある場合はどうしますか? 開発者は、これらのセクションのそれぞれに「スキップナビ」リンクを提供したり、それとも各レベルのナビゲーションをスキップしたりするべきでしょうか? In most cases, a single "skip" link is sufficient. For pages that have very few navigable items preceding the main content, a "skip" link may not be necessary at all. On the other hand, a very complex page with several repeated elements may necessitate additional "skip" links. Remember, the purpose of "skip navigation" links is to reduce the clutter of numerous links. Adding more links increases link-clutter. If numerous "skip" links are present, it raises the question of whether a "Skip the skip links" link is necessary! ほとんどの場合、1つの「スキップ」リンクで十分です。 メインコンテンツの前にナビゲート可能な項目がほとんどないページの場合、「スキップ」リンクはまったく必要ない場合があります。 一方、複数の要素が繰り返される非常に複雑なページでは、追加の「スキップ」リンクが必要になる場合があります。 「スキップナビ」リンクの目的は、多数のリンクの乱雑さを減らすことであることを忘れないでください。 リンクを増やすと、リンクが乱雑さも増大します。 多数の「スキップ」リンクが存在する場合、「スキップリンクをスキップする」リンクが必要かどうかという疑問が生じます! Skip links or other in-page links can also be used to allow users to jump to or jump over other types of page content. The "Article Contents" at the top of this page, for example, includes in-page links to facilitate navigation to major page sections. A "skip" link could also be used to allow the user to quickly bypass confusing or potentially inaccessible content, such as ASCII art, complex tables, or complex social media feeds. スキップリンクまたは他のページ内リンクを使用して、ユーザーが他の種類のページコンテンツにジャンプしたり、飛び越えたりできるようにすることもできます。 たとえば、このページの上部にある「記事の内容」には、主要なページセクションへのナビゲーションを容易にするページ内リンクが含まれています。 「スキップ」リンクを使用して、ユーザーが ASCII アート、複雑な表、複雑なソーシャルメディアフィードなどのわかりにくいコンテンツやアクセス不可能かもしれないコンテンツをすばやくバイパスできるようにすることもできます。 WCAG Conformance WCAG への適合性 WCAG 2.4.1 (Bypass Blocks - Level A) states, "A mechanism is available to bypass blocks of content that are repeated on multiple Web pages." This does not necessarily require that a "skip" link be present. Beginning the main content with an