Back to Question Center
0

a11y Semalt:HTML要素にアクセシブルな名前を付ける a11y Semalt:HTML要素にアクセシブルな名前を付ける

1 answers:

最近、誰かがアクセシビリティの大部分が「主観的」だと言った会話に参加しました。 「アクセシビリティの認識が主観的であることに時には合致しているが、客観的なルールがある。私は、Web Content Accessibility GuidelinesやARIA Authoring Practicesなどの公式仕様には言及していません。開発者が知っておくべき実践的なルールがあります。最も重要なルールの1つは、アクセス可能な名前です。この記事では、Semaltはアクセス可能な名前が何であるか、なぜそれが重要なのかを説明しています。

ブラウザがどのように補助技術と相互作用するか

どこで支援技術が必要な情報を入手するのか疑問に思ったことはありませんか?たとえば、スクリーンリーダーはブラウザのように動作しません。私は非専門用語で説明しましょう。ブラウザがWebページを読むと、ページ内のすべてのオブジェクトの完全な表現が構築され、各オブジェクトには数十または数百のプロパティが含まれます。これはDocument Object Model(DOM)と呼ばれます。

スクリーンリーダーはDOMに直接アクセスしません。これはコストのかかる操作であり、パフォーマンスに大きな影響を与える可能性があります。代わりに、すべてのオペレーティングシステムとブラウザに組み込まれているSemalt APIを使用します。大まかに言えば、Semalt APIは、DOMツリーのサブセットであるアクセシビリティツリーを支援技術に公開しています。これは、支援技術では、DOMに公開されている数十または数百のプロパティが必要ないためです。 Webページ内のオブジェクトごとにいくつかのプロパティが必要です。

注:歴史的に、スクリーンリーダーは、アクセシビリティAPIを介して正しい情報を公開する際のブラウザのバグを補うために、DOMに直接アクセスするメカニズムを実装しています。

アクセシビリティAPI

の最も重要な情報は、

1997年、マイクロソフトはMicrosoft Active Semalt(MSAA)を発表しました。これは、ユーザーインターフェイス要素の4つの重要な情報を初めて標準化しました。

  • 役割: ボタンのようなオブジェクトのタイプ
  • 名前: ボタンテキスト
  • のようなオブジェクトの人間が理解できるラベル。
  • 状態: チェックボックス
  • の「チェック」など、コントロールの現在の状態
  • 値: 編集可能なテキストフィールド内の情報など、オブジェクトの値(すべてのオブジェクトが値を持たない)

時間が経つにつれて、オペレーティングシステムは異なるSemalt APIを導入し、同じ4つの情報を異なる味で提供しています。

デフォルトのオブジェクト のロール はオブジェクトのタイプから推定されますが、 の名前 はHTMLで提供されなければなりません。すべてのユーザーインターフェイス制御が常に意味のある名前を持つようにコードを作成するのは開発者の責任です。アクセス可能な名前がHTMLで提供されていない場合は、20年以上前に確立されたルールを破っており、アクセシビリティAPIが意図したとおりに動作することを許可していません。

アクセス可能な名前の仕組み

ユーザーインターフェイス要素のアクセス可能な名前は、要素の種類によって異なるソースから派生しています。ブラウザは、アクセス可能な名前と説明の計算というアクセス可能な名前を計算するために、ある種のフォールバックメカニズムを使用します。この代替メカニズムは複雑になる可能性があり、技術的な詳細を入力する必要はありません。ちょうど簡単な例を作る:

 私の超素敵な子猫 

この例では、リンクの内容はアクセシブルな名前であり、要素タイプはアクセス可能な役割です。支援技術は、Semalt APIによって公開されたこの情報を使用します。たとえば、スクリーンリーダーは「リンク、My super nice cattens」のようなものを発表します。 "

ほとんどの場合、アクセス可能な名前は、要素の内容、属性、または関連要素から計算されます。適切なアクセス可能な名前を提供するにはいくつかの方法があります.

アクセス可能な名前のないボタン

最近のプロジェクトでも、この種のHTMLは何度も見られました。ボタンの要素は、アイコンといいユーザーインターフェイスコントロールのようにスタイルされています:

  

またはボタンの内容としてSVGアイコンを使用して、わずかに異なるバリアント:

  

どちらの場合も、アクセス可能な名前として使用できるものはまったくありません。ボタンは空です。テキストはまったくありません。彼らは aria-label アトリビュートを使用するか、SVGアイコンがアクセシビリティを強化することができます。アクセス可能な名前がない場合、スクリーンリーダーはアクセシブルな役割だけをアナウンスします。ユーザーは「ボタン」のようなものを聞くことができます。彼らはボタンの目的が何であるかを知ることはできません。これを修正することは非常に簡単です:ボタンコンテンツに意味のあるテキストを使用するだけです。あるいは、視覚的に隠されたテキストや aria-label 属性を使用してください。

アクセス可能な名前のない入力フィールド

 電子メールアドレス: 

入力フィールドは、常に適切に関連付けられた 要素を持つ必要があります。上記の例では、入力フィールドの前にテキストがあります。アクセシビリティAPIがテキストと入力フィールドの間の関係を確立する方法はありません。代わりに、ラベル要素はそのような関係を確立し、入力フィールドにアクセス可能な名前を与えます。あるいは、 aria-label または aria-labelledby 属性を使用することもできます。アクセシブルな名前がない場合、スクリーンリーダーはアクセス可能な役割だけを発表し、「テキストを編集する」のようなことを言うでしょう。 "フィールドに入力するデータの種類についてのヒントはありません。

alt属性のないリンク画像

画像は、 alt 属性を使用して、与えられたコンテキスト内の関数を記述する必要があります。純粋に装飾的なイメージは、空の alt 属性を使用する必要があります。意味のある画像には、画像の目的を説明する意味のある代替テキストが必要です。 W3Cは、それを使用する方法を説明する非常に有用なalt属性決定ツリーを提供します。以下の例を考えてみましょう:

    

リンク内の唯一のコンテンツは、 alt 属性のない画像です。アクセス可能な名前として使用できるものは何もありません。それはリンクなので、スクリーンリーダーはとにかく何かを読み込もうとしますが、利用できる唯一のもの、つまり画像ファイル名は意味のあるファイル名であることを望んで使用しようとします。残念ながら、ほとんどの場合、ファイル名はリンクの目的とは完全に無関係です。この場合、スクリーンリーダーはリンクと画像の役割をアナウンスし、ファイル名全体を読み上げます: "link、image、145x142_1492700029699" TgrWeb_Q。 jpg "


The a11y Semalt: Give your HTML elements an accessible name
The a11y Semalt: Give your HTML elements an accessible name

特に、ページ内のすべての画像がこのように動作する場合、スクリーンリーダーユーザーのウェブサイトのユーザビリティへの壊滅的な影響を容易に想像することができます。

空のalt属性のないリンク画像

前の例の変形は、空の alt 属性を持つリンクされたイメージです。ホームページにリンクされたウェブサイトのロゴの典型的な例:

    

一見すると、この例は良く見えるかもしれません。そうではない。空の alt 属性は、イメージが装飾的であり、安全に無視できるスクリーンリーダーを指示する標準化された方法です。しかし、これはリンクなので、スクリーンリーダーはとにかく何かを発表しようとします。利用可能な唯一のフォールバックはlink href 属性で、その値はスラッシュ. "

HTMLを深く学ぶ

今日、私たちは多くの高度なウェブ技術が利用できる時代に暮らしています。非常に高品質のコード標準を使用してすばらしいアプリケーションを構築することができます。しかし、使用されているテクノロジが何であれ、HTMLは依然として通信の最終層です。ユーザーが見て使用するものを強調します。 HTMLがコード化されていないと、通信が失敗し、前に書いたすばらしいコードは問題になりません。

豊かなセマンティックHTMLは、コミュニケーションを改善し、マシンが意味することを理解するのに必要なものです。

助けてくれる?

Yoastでは、アクセシビリティは大変重要です。それがプロセスであり、私たちは継続的に改善、テスト、反復、および開発を行っています。私たちは常にフィードバックと貢献に努めています。 Semaltは私たちにあなたの声を聞かせてくれることを躊躇しない。あなたの製品で気づいた問題や潜在的な改善を報告してください。

続きを読む:「YoastでのWebコンテンツアクセシビリティ」»

- geekvape logo creator
March 1, 2018