2017-03-29 7 views
4

入力フィールドとボタンの2つの要素を持つ検索フォームを作成しています。入力フィールドにはラベルが関連付けられていません。視覚的に隠されたarial-labelまたはラベル要素を使用する必要があります

フィールドにアクセスしやすくするために、<label for="searchfield">Search</label>を追加して、視覚的に非表示にします。スクリーンリーダーにアクセスできるようにする。

入力フィールドにaria-label="search"を追加して、入力フィールドにラベルを付けずに残すこともできます。

Macで「Voice Over」でテストしましたが、結果は同じです。私の質問は、これらのアプローチは同等ですか?あるいは、他のアプローチよりも1つのアプローチが優れていますか?

ここにはpenがあります。

+0

あなたはすでに2つの回答がありますが、いくつかの文脈を提供できますか?サイトの残りの部分は、フォームまたは 'aria-label'に'

+0

@ aardrian残りのサイトフォームフィールドは '

+0

技術的なスキルが低く、多くの場合ローエンドまたはそれ以上の機器を使用しているユーザーをターゲットにしている場合、コードをどのように変更するのか。たとえば、私の両親は私とは劇的に異なるスキルレベルを持っており、リンクをダブルクリックする必要はない(大まかな例、はい)ことは知らない。 – aardrian

答えて

2

(自分のスキルレベルやハイテクプロファイルは何ですか?)、私はカップルのパラメータでこれらの質問にアプローチ:

  1. 言われて、私は多くの場合、ARIAなしとCSSせずにページをコーディングすることARIAのルール(first ruleがここで適用される場合があります)
  2. プログレッシブ・エンハンスメント

(つまり、ブロックされるかもしれませんように、など、チャンク)それがアクセス可能であることを確認してください。

つまり、コードは<label>です。それから私はそれを視覚的に隠す。 CSSが壊れても、すべて正常です。ユーザーのスクリーンリーダーがARIAをサポートしていない場合は、すべて正常です。あなたのユーザーのすべてのスクリーンリーダーがARIAをサポートしていると思うならば、ユーザーの技術評価(実際のユーザーがいなければ、ローカルブラインドアソシエーションは良いスタートです)にすることをお勧めします。多くの人々はまだ古いバージョンのブラウザとSRを実行しています。

目に見えるユーザーのために、ボタンの明確な検索アイコン(または単語)(Unor参照)のような文脈の手がかりに頼るようにします。または適切なコントラストを持つplaceholder(ただし、フォーカスを隠すためにいくつかのCSSトリッキーがある視覚的なプレースホルダーとして<label>を使用することもできます)。

送信ボタンにSVGを使用している場合は、SVG代替テキストメソッドに関する一貫性のないサポートがあるため、ARIAを折り畳んでいます。

FWIWも、私はtitle属性のファンではありません。部分的にはアクセスできない名前の計算が原因で、部分的には私はそれが似ていると思うからです。

だから、あなたの質問に答えるために:

私の質問は、これらのアプローチは同等であるのですか?

いいえ、しかし、それらの間の距離は縮小しています。

もう一方のアプローチよりも優れていますか?

これは、私たちが持っていない文脈によって決まります。

+0

詳細な回答ありがとうございます。私はマークアップを完全にコントロールしているので、「ARIAの最初のルール」はこれを私にとってちょっとだけ解決します。 – Ingvi

1

​​のように、よりクリーンなマークアップ(つまり、不要なlabelタグはありません)とCSSのラベルの表示を設定する必要がないので、aria-label="search"は正しいアプローチです。

CSSを使用して視覚的に隠すと考えているのは、ARIAがアクセシブルなマークアップの標準であるのに対して、このような状況では明らかに選択肢になるはずです。

一方、サポートするすべてのブラウザでARIAを正しく使用できることを確認する価値があります。そうでない場合は、labelアプローチを使用してすべてのブラウザで互換性を確保する価値があります。しかし、最近のサポートはかなり良いと思いますが、一般的なシナリオではありません。

2

要素を視覚的に隠すためにCSSを使用するよりも、aria-labelを使用する方が望ましいです。

(関連技術:Using aria-label to provide an invisible label where a visible label cannot be used

しかし、唯一の検索フィールドで構成され、送信ボタンを検索フォーム用のyou don’t have to provide a labelことに注意してください。 「検索」のようなラベルの付いたボタンを使用すると仮定すると、テキストフィールドがどの目的に使用されているかが明確になっています。

(関連技術:Using an adjacent button to label the purpose of a field)その場合

、それはラベルを必要としませんが、それはまだ名前を取得する必要があります。名前を提供する1つの方法は、input要素のtitle属性を使用することです。技術Using the title attribute to identify form controls when the label element cannot be usedはこれを示します(title属性がinputにあるラベルのない検索フォーム)はexample 3です。サイトのいずれかの知識(?どのようにラベルされた他のフォームフィールドです)、または聴衆を持つが存在しない場合には

+0

いつものように、私はより良い互換性のために 'title' **と**' aria-label'の両方を使うことを勧めます( 'aria-label'は補助技術によってのみ理解され、' title'属性は視覚的なツールチップの標準送信ボタンがまだ表示されていないときに便利なブラウザ、たとえば画面拡大ツールを使用して)。 – Adam

+0

満足のいく技術と実際のアプリケーションの間には違いがあります。 OPはサイトのユーザーには何の文脈も提供せず、真空ブランケットの推奨や仕様の引用は問題を引き起こす可能性があります。 'タイトル 'については、デフォルトではノー・ゴーだと思う。それに関係なく、 'title'の詳細:https://www.paciellogroup.com/blog/2013/01/using-the-html-title-attribute-updated/ – aardrian

+0

@ aardrian私は' title '属性を使用しますが、 'aria-label'を使用するたびにその使用を推奨します。それは万能薬ではありませんが、それを好む人もいます。 – Adam

関連する問題