STUDIOサイトのアクセシビリティ強化のお知らせ

STUDIOサイトは、様々な場面で使われるようになってきました。

今回、利用シーンの広がりを受け、アクセシビリティ向上のための取り組みとして、公開サイトでフォーカス時の選択枠を表示する対応を行ったことをお知らせします！

アクセシビリティとは？

Webにおける「アクセシビリティ」とは、「情報へのアクセスのしやすさ」を指す言葉です。
訪問者の身体的ハンディキャップ、使用ブラウザや端末等に関わらず、できるだけ同じ使い心地で情報が伝わるようにする＝アクセシビリティを担保することは、Webコンテンツを制作する上でとても大切なことです。

今回の改善点：フォーカス時の選択枠表示

これまでSTUDIOで作成したサイトには、意図しないデザインを防ぐため、フォーカス枠（青いアウトライン）を表示させない処理が自動的に施されていました。

しかし、表示を消してしまうとキーボード操作で閲覧する際にどこを選択しているのかが分からず、アクセシビリティの観点から好ましくない状態でした。

今回のアップデートによりこのフォーカス枠の消去処理を行わないようにし、STUDIO製サイトでキーボード操作時のフォーカス枠が表示されるようになりました！

これからはtabキーを使って、こんなふうにサイトを閲覧することが可能です。

具体的な変更点

今回のアップデートの反映のために、特にユーザー様側での操作は必要ありませんが、フォーカス枠のデザインにこだわりたい場合は一部ご自身で設定していただくことが可能です。
具体的なボックスの挙動は以下となります。

リンク設定のないボックス

• 特に変化はありません

リンクの設定されたボックス

• キーボード操作時、ブラウザデフォルトのフォーカス枠が表示されます

フォーム項目（Input、Textarea、Select）

• クリックもしくはキーボード操作時にフォーカス枠表示

• コンディション「focus」のデザインがある場合、 デザインが優先されます

• focusのデザイン未指定の場合は、デフォルトのフォーカス枠が表示されます

フォームボタン

• キーボード操作時のみフォーカス枠表示

• コンディション「focus-visible」のデザインがある場合、 デザインが優先されます

• focus-visibleのデザイン未指定の場合は、デフォルトのフォーカス枠が表示されます

これからもSTUDIOは、アクセシビリティの向上に取り組んでまいります。
是非ご要望の声をSNSやコミュニティ・問い合わせチャットにてお寄せください！