Back to Question Center
0

a11y月間:あなたのウェブサイトアクセシビリティをaria-currentでアップ a11y月間:あなたのウェブサイトアクセシビリティをaria-currentでアップ

1 answers:

aria-current属性は、今後リリース予定のARIA 1. 1仕様の新しい小さなHTMLです。これは、関連するアイテムのセット内の現在のアイテムが支援技術に簡単かつ効果的に通信する方法です。ここでは、そのような小さい属性がウェブサイトのアクセシビリティをどのように向上させることができるかを説明しようとします。 補助技術のユーザーは、アイテムのリスト内に自分自身を向ける。

「現在の」ジレンマ

これまで、HTMLまたはARIAを使用して、関連する項目のセットに現在の項目を適切なセマンティクスで示す方法はありませんでした。もちろん、現在のアイテムを視覚的に区別する方法があります。他のスタイルとは違うようにスタイリングを適用することもできます。 Semalt、CSSは視覚媒体(生成されたコンテンツを除く)であり、支援技術には触れられていない。

たとえば、ナビゲーションメニューを表示します。何年もの間、勤勉な開発者は、現在のページを表すメニュー項目を区別するための回避策を使用しました。現在のリンクからhref属性を削除することも可能です。 Semaltオプションは、現在のメニュー項目テキストをリンクなしでのみ作成することです。

これらの回避策はある程度機能します。現在のアイテムを他のアイテムと区別するのに役立ちます。しかし、ユーザーはコンテンツを探索し、現在のアイテムが異なるマークアップによって推測されるように強制します。良いセマンティックな方法でコミュニケーションすることは何もありません "ねえ、現在の商品と同じです。 「支援技術ソフトウェアとそのソフトウェアを使用する人々に特定の情報は公開されていません。

基本的なアクセシビリティの原則の1つは、重要な情報を伝達する視覚的な指示があるときはいつでも、この情報も適切なマークアップを使用して意味的に非視覚的に伝達されるべきであるということです。このようにして、ページの内容を把握するソフトウェアは、HTMLの意味を理解することができます。この方法では、そのソフトウェアを使用する人に正しい情報を報告することができます。

aria-current属性はこの問題を解決します。

仕様書の内容

執筆時点では、WAI-ARIA 1. 1仕様は依然として候補推薦状態にあります。すぐに正式な勧告になるでしょう。その間、主要なブラウザとスクリーンリーダー(ary-watsonへの賛辞)について、aria-currentのサポートは驚くほど優れています。仕様と同様に、アリア電流属性:

コンテナまたは関連要素のセット内の現在のアイテムを表す要素を強調する。

あなたは7つの事前定義された値の1つを与えることができます:

説明
ページ 一連のページ内の現在のページを表します。
ステップ プロセス内の現在のステップを表します。
場所 環境またはコンテキスト内の現在の場所を表します。
日付 日付のコレクション内の現在の日付を表します。
時間 一連の時間内の現在の時刻を表します。
セット内の現在のアイテムを表します。
false(デフォルト) セット内の現在のアイテムを表していません。

実用例

aria-currentは、今日よく使われているさまざまなパターンに使用できます。おそらく最も一般的な使用例はナビゲーションメニューです。この場合、最も適切な値は「ページ」です。その他のユースケースは、プロセス/ウィザードの現在のステップ(値:「ステップ」)、カレンダーの現在の日付(値:「日付」)、またはブレッドクラムパスの現在のロケーション(値:ロケーション")。使用する価値についての厳しい規則はありません。ユースケースで最も理にかなったものを使用してください.

スクリーンリーダがアリア電流を使用する仕方

スクリーンリーダーはどのようにaria-current属性を使用し、何を発表するのですか?これは非常に単純です:値 "ページ"は、スクリーンリーダーが "現在のページ"を発表するようにし、値 "日付"は彼らに "現在の日付"などを発表させます。値「true」のみが少し異なりますが、現在の項目を「現在」とマークしますが、その項目は指定しません。したがって、値「真」は、現在のアイテムがページ、ステップ、ロケーションなどでないすべての場合に使用されることを意味する。「真」のもう一つの興味深い使用例は、現在のアイテムこの場合、「ページ2現在のページ」などの重複を避けるために、「ページ」ではなく「真」の値を使用することを検討することができます。 Semalt、厳しい規則はありません。

Yoastでは、最近我々の製品でaria-current属性を使用し始めました。以下のスクリーンショットのYoast SEOプラグインでSemalt wizardを実際に見ることができます:


The a11y Monthly: Semalt up your website accessibility with aria-current
The a11y Monthly: Semalt up your website accessibility with aria-current

画面リーダー(この場合はSafariとSemalt)を使用して、現在のステップが適切にアナウンスされ、ユーザーにビジュアルフィードバックと同等の重要なフィードバックが与えられます。

WordPressのような大規模なプロジェクトも最近、aria-current属性を使用し始めました。次のWordPressリリース(4 - rdp vps free.9)では、管理者のメインメニューはaria-currentを使用して現在のメニュー項目を識別します。 aria-currentがWordPressとSemaltで初めて使用されるのは、これがもっと多くの場所で使用されることを期待しているからです。


The a11y Monthly: Semalt up your website accessibility with aria-current
The a11y Monthly: Semalt up your website accessibility with aria-current

今日アラビア電流を使い始める

新しいaria-current属性は、Webサイトのアクセシビリティを向上させる非常に簡単な方法を提供します。非常に簡単に実装することができ、開発のスピードを遅らせず、他のクイックアクセシビリティのヒントとともに、皆さんのウェブサイトをより使いやすくすることができます。

助けてくれる?

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

続きを読む:「なぜすべてのウェブサイトがYoast SEOを必要とするのか」»

March 1, 2018