Figmaでアクセシビリティを向上させる15以上の方法

本日、キーボードやスクリーンリーダーを使用してファイル操作をより簡単かつ確実に行える改善を実施します。FigJamでのウィジェット選択やFigma Designでの定規ガイド調整といった新たなキーボードショートカットから、スクリーンリーダー向けの明確なアナウンスやテキストサポートの強化まで、これらの更新により、集中力と作業の流れをサポートする、よりスムーズな体験を実現します。

キャンバスとコメント機能のキーボード操作の改善

Figma Designで線を調整する場合も、FigJamの図表にコネクターを追加する場合も、キーボード操作でキャンバス上を移動する方法を拡充しました。キャンバスオブジェクトはスクリーンリーダーでも認識可能になり、すべてのユーザーのナビゲーションが向上しています。さらに、キーボード操作専用ユーザー向けに、コメントやDev Modeのアノテーションをショートカットで追加、移動、ナビゲートできる機能も追加し、コラボレーションとハンドオフをスムーズにしました。その他にも新しい機能があります。

キャンバスのキーボード操作

製品全体で拡張されたコントロール機能により、オブジェクトの移動、調整、位置合わせをより正確に行えます。新しいコントロール機能には以下が含まれます。

Figma Slides

• プレゼンターのノートのサイズを変更し、AIで文体を調整する。

FigJam

• 行と列の追加、削除、並べ替え。
• スタンプ、投票、和紙テープを追加、調整する。
• AI概要や埋め込みリンク、ビデオなどのキャンバスオブジェクトをナビゲートする。
• マーカーの線および蛍光ペンの線を選択して調整する。
• テーブルの行や列を追加、削除、並べ替え

Figma Design

• 線を追加、選択、調整する。
• 定規ガイドを追加、削除、編集する。
• 楕円から円弧を作成、編集する。

製品横断

• 編集モードまたは閲覧専用モードでリンクを開いて移動する。

フィードバックのキーボード操作

新しいショートカットで、集中を途切れさせることなくフィードバックへの返信やディスカッション間の移動が可能になります。これらのショートカットで以下の操作を行えます。

• すべての製品をまたいでコメントを追加、移動、ナビゲートする(ベータ製品では利用できません)。
• Dev Modeアノテーションを追加、移動、ナビゲートする。

切り替え

Figma製品全体でエクスペリエンスを個別にパーソナライズする新しい方法が追加されました。

• タイピング時にFigma限定のショートカットの上書きをオフにする
• スポットライトで他のユーザーを自動フォローするかどうかを選択する

スクリーンリーダーのサポートが向上

Figmaの支援技術との連携方法を改善し、スクリーンリーダーのユーザーが、ファイルををスムーズに操作し、オブジェクトを順序通りに聞き取り、変更時に最新情報を把握できるようにします。より一貫性のある信頼性の高いアナウンス、充実したオブジェクト説明、太字や斜体の文字を認識できる書式付きテキストのサポートなど、これらの改善により、スクリーンリーダーによるコンテンツの追跡と理解が容易になります。

更新内容:

• アクションナビゲーション: タブキーによるボタン、メニュー、パネルなどのインタラクティブ要素の移動が、より論理的な順序で行われるようになりました。ユーザーはメニューの表示、ボタンの操作、ツールバーオプションの選択といった特定のアクションに直接移動できます。
• オブジェクトの説明:スクリーンリーダーは、オブジェクトの種類、名前、状態など、より詳細な情報を音声で通知するようになりました。これにより、ユーザーはキャンバス上に何が表示されているかをより正確に把握できます。
• お知らせの更新: お知らせの表示がより一貫性のあるものになりました。これにより、新しいコメントやファイルの更新といった重要な変更を見逃すことがなくなります。
• フォーマットされたテキストのサポート: スクリーンリーダーは、太字、斜体、リスト、リンクなどのリッチテキスト書式を保持するようになりました。これにより、ユーザーは重要な構造や意味を失うことがありません。
• BuzzおよびSlidesのキャンバスオブジェクトに関する情報の取得: スクリーンリーダーが、BuzzおよびSlides内のキャンバスオブジェクトを認識し、読み上げることができるようになりました。

画面コントラストの強化

簡単な切り替え操作で、ユーザーはライトモードとダークモードの両方で、テキストや要素と背景の区別を明確にできるようになりました。強化された色のコントラストにより、Figmaの操作性が向上し、すべてのユーザーにとって使いやすくなりました。具体的には以下のとおりです。

• テキストとアイコンの可読性の向上
• インターフェースの構成を確認しやすくし、必要な要素をすばやく見つけることができます
• ボタンやアウトラインにカーソルを合わせたり操作したりしたときに、より明確に目立つようにします
• 光の反射や日光下での視認性を向上
• マルチタスク時のスキャンと再方向付けを迅速化

通常のコントラストと強化されたカラーコントラストの微妙な違いは、特に長時間の画面視聴時に大きな差を生むことがあります。

Figma Sitesのアクセシビリティ改善

デザイン内の各要素に適切なHTMLタグやアクセシビリティプロパティを適用するといった手法を通じて、Figma Sitesでスクリーンリーダーやキーボード操作に依存するユーザーにとって使いやすいWebサイトを作成できます。

当社のFigma Sitesにおけるアクセシビリティ改善点には以下が含まれます。

• 新しいARIA (アクセシブルなリッチインターネットアプリケーション)プロパティを適用し、HTMLを超えたコンテキストを追加します。対応するHTMLタグはレイヤーパネルで確認できます。
• プロパティパネルから直接、代替テキスト、ラベル、役割などのアクセシビリティオプションを編集でき、サイトのアクセシビリティ確保が容易になります。

これらの更新により、デフォルトでよりアクセシブルかつ包括的なサイトをデザイン、公開することが容易になります。

最新のアクセシビリティに関する更新情報については、新しいアクセシビリティヘルプセンターをご覧ください。