この文書は、Framerを学ぶ日本国内のユーザーが資料の不足で感じている困難を解決するため、公式ブログの内容を日本語に翻訳し、実務に有用な情報を追加しました。Framerを使用する皆様に、少しでも役立つことを願っています。

どのような場合にARIA Labelを使用すべきですか？

ウェブサイトの一部の要素は、基本的にアクセス可能な名前（Accessible Name）がないか、実際のコンテンツを十分に説明しない場合があります。このような状況でaria-label属性が役立つことがあります。簡単に言うと、各コンテンツに簡潔なラベルを提供してアクセシビリティを向上させる方法です。

コンテンツごとにアクセス可能な名前（Accessible Name）の役割をする要素が様々です。以下の例を通じて理解できます。

• ボタン(button): タグ内のテキストを通じてボタンの目的を認識します。

• 画像(img): alt text属性を通じて画像が何を説明しているか認識します。

• フォーム入力(input): 連結されたlabelタグのテキストを通じてどの情報を得るためのフォームかを認識します。

aria-labelは特にコンテンツに視覚的テキストが不足している場合や、視覚的テキストだけでは目的や意味を十分に伝えられない状況で有効に使われることができます。

ARIA Labelを試用してみよう

1. コードで使う

例えば、Framerのウェブサイトへ直接移動するボタンがあると仮定しましょう。このボタンにテキストがなければスクリーンリーダーの使用者はそのボタンの機能を認識しないかもしれません。このような場合、aria-labelを使うことで目的を明確に伝えることができます。

<button aria-label="Framer 웹사이트로 이동하기">
  <!-- Framer 아이콘 또는 그래픽 요소 -->
</button>

こうしてaria-labelを指定すると、画面には依然としてアイコンのみ表示されますが、スクリーンリーダーはボタンの機能を「Framerウェブサイトへ移動」と正確に読み上げられるようになります。

2. Framerで使用する

Framer内でも、右側のプロパティパネルのAccessibility > Aria Labelの欄でコードなしで簡単にaria-labelを挿入できる機能を提供しています。

これにより、ウェブサイトの包括性とユーザーの親しみやすさを大幅に向上させ、全てのユーザーにより良い体験を保証することができます。aria-labelを活用して、ユーザーに優しいウェブサイトを制作してみてください。

本記事はFramer公式ブログの「Improving Accessibility with ARIA Labels」を翻訳・アレンジしたコンテンツです。