From 0114a214791c357c3dd3fdde5fc47b9ca33796cc Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Sat, 31 Jul 2021 12:04:19 -0400 Subject: remove link 'title' attributes that's just the 'href' (ja, part 2) (#1807) --- files/ja/learn/forms/how_to_build_custom_form_controls/index.html | 6 +++--- files/ja/learn/forms/how_to_structure_a_web_form/index.html | 4 ++-- files/ja/learn/forms/other_form_controls/index.html | 2 +- files/ja/learn/forms/styling_web_forms/index.html | 6 +++--- files/ja/learn/forms/your_first_form/index.html | 4 ++-- 5 files changed, 11 insertions(+), 11 deletions(-) (limited to 'files/ja/learn/forms') diff --git a/files/ja/learn/forms/how_to_build_custom_form_controls/index.html b/files/ja/learn/forms/how_to_build_custom_form_controls/index.html index 5b3ade8ff2..8e6f1ed7f8 100644 --- a/files/ja/learn/forms/how_to_build_custom_form_controls/index.html +++ b/files/ja/learn/forms/how_to_build_custom_form_controls/index.html @@ -338,7 +338,7 @@ original_slug: Learn/Forms/How_to_build_custom_form_widgets
  • スクリプトが読み込まれません。これはよくあるケースのひとつであり、特にネットワークの信頼性が低いモバイル環境で発生します。
  • スクリプトに不具合があります。この可能性は常に考慮すべきです。
  • スクリプトがサードパーティのスクリプトと競合しています。これは、トラッキングのスクリプトやユーザーが使用するブックマークレットとの間で発生する可能性があります。
    • -
  • スクリプトがブラウザーの拡張機能 (Firefox の NoScript 拡張機能や Chrome の NotScripts 拡張機能など) と競合したり、拡張機能の影響を受けたりしています。
    • +
  • スクリプトがブラウザーの拡張機能 (Firefox の NoScript 拡張機能や Chrome の NotScripts 拡張機能など) と競合したり、拡張機能の影響を受けたりしています。
  • ユーザーが古いブラウザーを使用しており、必要な機能のいずれかがサポートされていません。これは、最先端の API を使用するときに頻繁に発生します。
  • ユーザーは JavaScript が完全にダウンロード、解析、実行される前にコンテンツを操作します。
    • @@ -703,7 +703,7 @@ window.addEventListener('load', function () {

    フル機能のセレクトボックスとはかけ離れていますが動作するものはできましたし、よく動作しています。しかし、私たちが行ってきたことは DOM の操作にすぎません。これには実際のセマンティクスがなく、またセレクトボックスのように見えていてもブラウザーの視点からはそうではないため、支援技術はそれがセレクトボックスであるとは理解できません。つまり、このきれいなセレクトボックスはアクセシブルではありません!

    -

    幸いなことに解決策があり、それは ARIA と呼ばれます。ARIA は "Accessible Rich Internet Application" を表し、その W3C 仕様 は私たちがここで行っていることに特化して設計されています: ウェブアプリケーションやカスタムコントロールをアクセシブルにします。これは基本的には、私たちが作り出した要素がネイティブコントロールとして通るかのように、役割や状態や特性をより説明できるようにするために HTML を拡張する属性のセットです。これらの属性の使用はとても簡単ですので、行ってみましょう。

    +

    幸いなことに解決策があり、それは ARIA と呼ばれます。ARIA は "Accessible Rich Internet Application" を表し、その W3C 仕様 は私たちがここで行っていることに特化して設計されています: ウェブアプリケーションやカスタムコントロールをアクセシブルにします。これは基本的には、私たちが作り出した要素がネイティブコントロールとして通るかのように、役割や状態や特性をより説明できるようにするために HTML を拡張する属性のセットです。これらの属性の使用はとても簡単ですので、行ってみましょう。

    role 属性

    @@ -757,7 +757,7 @@ window.addEventListener('load', function () {

    スクリーンリーダーにオフスクリーンselectに焦点をあてて他のスタイルを無視するようにした法が簡単に見えますが、これはアクセシブルな解決策ではありません。スクリーンリーダーは盲目の人だけのものではありません。低視力や、完全な視力の人もこれを使います。このため、スクリーンリーダーをオフスクリーン要素だけに焦点をあてるようにはできません。

    -

    以下がこれらの変更を施した最終結果です (NVDA や VoiceOver などの支援技術でコントロールを使用してみても、よい感触を得られるでしょう):

    +

    以下がこれらの変更を施した最終結果です (NVDA や VoiceOver などの支援技術でコントロールを使用してみても、よい感触を得られるでしょう):

    diff --git a/files/ja/learn/forms/how_to_structure_a_web_form/index.html b/files/ja/learn/forms/how_to_structure_a_web_form/index.html index 03f2520b12..3bdc3b5f28 100644 --- a/files/ja/learn/forms/how_to_structure_a_web_form/index.html +++ b/files/ja/learn/forms/how_to_structure_a_web_form/index.html @@ -51,7 +51,7 @@ original_slug: Learn/Forms/How_to_structure_an_HTML_form

    {{HTMLElement("fieldset")}} 要素は、スタイルや意味付けのために、同じ目的を持つウィジェットのグループの作成に便利です。{{HTMLElement("fieldset")}} 要素は、<fieldset> タグのすぐ下に {{HTMLElement("legend")}} 要素を入れてラベルを付与できます。{{HTMLElement("legend")}} 要素は、{{HTMLElement("fieldset")}} 要素の目的を正式に説明します。

    -

    多くの支援技術は {{HTMLElement("legend")}} 要素を、対応する {{HTMLElement("fieldset")}} 要素内にある各ウィジェットのラベルの一部であるかのように扱うでしょう。例えば Jaws や NVDA といったスクリーンリーダーは、各ウィジェットのラベルを読み上げる前に legend の内容を読み上げます。

    +

    多くの支援技術は {{HTMLElement("legend")}} 要素を、対応する {{HTMLElement("fieldset")}} 要素内にある各ウィジェットのラベルの一部であるかのように扱うでしょう。例えば Jaws や NVDA といったスクリーンリーダーは、各ウィジェットのラベルを読み上げる前に legend の内容を読み上げます。

    以下に小さなサンプルを挙げます:

    @@ -301,7 +301,7 @@ original_slug: Learn/Forms/How_to_structure_an_HTML_form

    関連情報

    {{PreviousMenuNext("Learn/HTML/Forms/Your_first_HTML_form", "Learn/HTML/Forms/The_native_form_widgets", "Learn/HTML/Forms")}}

    diff --git a/files/ja/learn/forms/other_form_controls/index.html b/files/ja/learn/forms/other_form_controls/index.html index dd8b463ed4..28be191eb4 100644 --- a/files/ja/learn/forms/other_form_controls/index.html +++ b/files/ja/learn/forms/other_form_controls/index.html @@ -226,7 +226,7 @@ translation_of: Learn/Forms/Other_form_controls

    Less obvious datalist uses

    -

    According to the HTML specification, the {{htmlattrxref("list","input")}} attribute and the {{HTMLElement("datalist")}} element can be used with any kind of widget requiring a user input. This leads to some uses of it that might seem a little non-obvious.

    +

    According to the HTML specification, the {{htmlattrxref("list","input")}} attribute and the {{HTMLElement("datalist")}} element can be used with any kind of widget requiring a user input. This leads to some uses of it that might seem a little non-obvious.

    例えば、in browsers that support {{htmlelement("datalist")}} on range input types, a small tick mark will be displayed above the range for each datalist {{htmlelement("option")}} value. You can see an implementation example of this on the <input type="range"> reference page.

    diff --git a/files/ja/learn/forms/styling_web_forms/index.html b/files/ja/learn/forms/styling_web_forms/index.html index 829b0d4604..a549329e48 100644 --- a/files/ja/learn/forms/styling_web_forms/index.html +++ b/files/ja/learn/forms/styling_web_forms/index.html @@ -33,7 +33,7 @@ original_slug: Learn/Forms/Styling_HTML_forms

    なぜ CSS によるフォームウィジェットへのスタイル設定は困難であるか?

    -

    1995年頃に HTML 2 仕様へフォームコントロールが追加されました。CSS は 1996年までリリースされず、その後も少しのブラウザーによって十分サポートされませんでした。ブラウザーはフォームコントロールの管理や表示について下層の OS に頼ることを選択しました。

    +

    1995年頃に HTML 2 仕様へフォームコントロールが追加されました。CSS は 1996年までリリースされず、その後も少しのブラウザーによって十分サポートされませんでした。ブラウザーはフォームコントロールの管理や表示について下層の OS に頼ることを選択しました。

    CSS が HTML のスタイル設定できるようになってからも、ユーザーは各プラットフォームの視覚的な外見に慣れていましたので、ブラウザーベンダーはフォームコントロールをスタイル付け可能にすることに乗り気ではありませんでした。しかしこれは変わりました。ウェブサイトのオーナーはこれまでよりも、サイト全体に適するスタイルを欲しており、ウェブプラットフォームはこれを実現可能にしました。

    @@ -206,8 +206,8 @@ legend {
    1. はがきの背景 — この画像をダウンロードして作業している HTML ファイルと同じディレクトリーに保存します。
      2. -
    2. タイプライター風フォント: fontsquirrel.com の "Secret Typewriter"  — TTF ファイルを上記と同じディレクトリーにダウンロードします。
      3. -
    3. 手書き風フォント: fontsquirrel.com の "Journal"  — TTF ファイルを上記と同じディレクトリーにダウンロードします。
      4. +
    4. タイプライター風フォント: fontsquirrel.com の "Secret Typewriter"  — TTF ファイルを上記と同じディレクトリーにダウンロードします。
      5. +
    5. 手書き風フォント: fontsquirrel.com の "Journal"  — TTF ファイルを上記と同じディレクトリーにダウンロードします。

    始める前にフォントの処理が必要です:

    diff --git a/files/ja/learn/forms/your_first_form/index.html b/files/ja/learn/forms/your_first_form/index.html index dc144d0bd3..24e638b9e1 100644 --- a/files/ja/learn/forms/your_first_form/index.html +++ b/files/ja/learn/forms/your_first_form/index.html @@ -51,8 +51,8 @@ translation_of: Learn/Forms/Your_first_form

    フォームの設計は、サイトやアプリケーションを構築する際の大事なステップです。フォームのユーザー体験まで扱うと本記事の対象を超えてしまいますが、そこまで踏み込みたい場合は以下の記事をご覧ください。

    本記事では、シンプルな連絡フォームを作成します。簡単に図を描いてみましょう。

    -- cgit v1.2.3-54-g00ecf