STUDIOで登場した、アクセシビリティ向上に役立つ3つの新機能をご紹介！

STUDIOは、アクセシビリティに力を入れています

Webサイトは、情報をできるだけたくさんの訪問者に分け隔てなく伝えることが何よりも重要な媒体です。

STUDIOは、アクセシビリティに力を入れるきっかけをくれた方々

• デジタル庁 大橋さん（@shosira）

• SmartHR社 ますぴーさん（@masuP9）

• ディーゼロ社 ゆうてんさん（@cloud10designs）

そして、顧問として参加してくださっている

• freee社 伊原さん（@magi1125）

以上4名の専門家のご協力のもと、アクセシビリティに配慮したWebがつくれる制作プラットフォームとなるべく、全社を挙げて機能改善等に取り組んでいます。

アクセシビリティとは？

「アクセシビリティ」とは、「施設やサービスの利用のしやすさ」を指す言葉で、Webサイトについて話すときには「必要な情報をできるだけ多くの人が状況に左右されずに得られる度合い」という意味で使われます。

様々なデバイスや翻訳ツールを利用しての閲覧、読み上げツールを利用する視覚障害者の訪問など、Webサイトの閲覧環境は近年とても多様化しており、「アクセシビリティが確保されているかどうか」は、Webコンテンツのクオリティを決める条件のひとつとなっています。

アクセシビリティの基礎知識とSTUDIOでの基本的な対応については、こちらの記事で解説していますので、是非ご利用ください！

アクセシビリティのための3つの属性が、STUDIOで使えるようになりました！

早速最近のアップデートで、サイトのアクセシビリティ向上に役立つ、3つの属性の設定が可能になりました！

「属性」とは、ボックス一つ一つが持つことができる、見た目には直接現れない付属情報のことで、STUDIOでは右パネルの詳細メニューで設定することができます。

この記事では、新しく追加されたそれぞれの属性の役割と設定方法を紹介します。

■ lang属性

Webページが何語で書かれているページなのかを指定することができる属性です。

正しく設定しておくことで、機械に言語を宣言することができるので、

• 翻訳機能にかけた時

• スクリーンリーダーで読み上げた時

などの場面で正しい言語判定がされやすくなります。

ボックス未選択状態で、各ページごとに設定できます

詳しい使い方はこちら→

■ aria-labelとaria-hidden

視覚障害者などは、スクリーンリーダーを使って画面を読み上げることで、Webコンテンツの情報を得ています。

このスクリーンリーダーは、ページ上のテキストを認識して読み上げますが、アイコンや画像など「テキストでない形式」で表示されている情報は、そのままでは認識してくれません。

今までは「imgモード」で配置した画像のみ、「alt属性」を設定することで読み上げ内容を決めることができましたが、今回追加された以下の２種類の属性を適切なボックスに設定することで、ページ全体のコンテンツをさらに正しく伝える工夫ができるようになりました。

• aria-label：そのボックスをスクリーンリーダーにどう読ませるか指定する属性

• aria-hidden：そのボックスをスクリーンリーダーが読み飛ばすように指定する属性

詳しい使い方はこちら→

新たに登場した設定項目を使いこなして、閲覧環境やハンディキャップに左右されにくい、アクセシブルなウェブコンテンツの提供を心がけていきましょう！

STUDIOは、アクセシビリティに関する取り組みに力を入れています。
今後もアップデートを予定しているので、続報を楽しみにお待ちください！