Summer'24 UIのアップデート：フォーカスしている場所（操作箇所）がよりわかりやすくなる

はっきりと伝えてくれてありがとう。

Admin

2024/06/05 16:58:33

こちらの記事で少しだけ触れていたのですが、リリースノートでも記載があり、Summer’24からのUIの大きな変化でもあるので、あらためて記事にしました。

Salesforceの画面で選択している項目やアクションが濃い青の枠で強調されます！

◇ SALESFORCE HELP ＞DOCS ＞SALESFORCE RELEASE NOTES ＞Salesforce Summer’24 Release Notes ＞Salesforce ＞General Enhancements ＞See Improved Contrasts in Focus States

See Improved Contrast in Focus States

We’ve updated Salesforce Lightning Design System (SLDS) blueprints and Lightning base components with a new focus state styling that overrides the browser’s default focus state styling. The new styling appears as a dark blue line around the perimeter of the component. Depending on the component, this styling may be outset or inset. This change is turned on by default, and there’s no option to turn it off.

Where: This change applies to Lightning Experience in all editions.

Why: Web Content Accessibility Guidelines (WCAG) include criteria for non-text contrast and focus appearance. Meeting these guidelines means that all users can more easily see the content on any device or in any lighting conditions.

With the current focus state colors in Salesforce, users with low vision who use a keyboard or other assistive devices sometimes struggle to see which element is focused on. This update satisfies WCAG’s criteria for non-text contrast and makes it clear which element is focused on.

↓日本語訳です。

フォーカス状態のコントラストが向上

Salesforce Lightning Design System（SLDS）ブループリントとLightningベースコンポーネントを更新し、ブラウザのデフォルトのフォーカス状態のスタイルを上書きする新しいフォーカス状態のスタイルを追加しました。新しいスタイルは、コンポーネントの周囲に濃い青色の線で表示されます。コンポーネントによって、このスタイリングはアウトセットまたはインセットになります。この変更はデフォルトでオンになっており、オフにするオプションはありません。

適用場所：この変更は、すべてのエディションの Lightning Experience に適用されます。

理由：Web Content Accessibility Guidelines（WCAG）には、テキスト以外のコントラストとフォーカスの外観に関する基準が含まれています。これらのガイドラインを満たすことは、すべてのユーザーがどのようなデバイスや照明条件でもコンテンツをより簡単に見ることができることを意味します。

Salesforce の現在のフォーカス状態の色では、キーボードやその他の支援デバイスを使用している弱視のユーザが、どの要素にフォーカスが当たっているかを確認するのに苦労することがあります。この更新は、テキスト以外のコントラストに関するWCAGの基準を満たし、どの要素にフォーカスが当たっているかを明確にします。

今現在の Spring'24 と来る Summer’24画面を比べてみました。

リストビューでのレコード選択時

レコード詳細画面の項目編集時

アクション選択時

レポートでの項目選択時（一瞬だけ）

ひとこと

アクション選択時って白とグレーの違いだけだったのですね。こうして並べてみるとSummer’24のほうが断然わかりやすいです。
社会貢献活動にも力を入れているSalesforceさんですが、提供する製品でもこのようなガイドラインを順守し、多様なユーザーに価値を届けられるように取り組まれていることは大変すばらしいことです。
でもインテリジェンスビューは青すぎると思いますの……。

Salesforceの「色」関連の記事

色覚障がいの方にとって使いやすい Salesforce画面を考える
Salesforceの組織ごとにタブの雲の色を変更する
Lightningで選択リスト値の色を指定するときは、値の【編集】から設定します
数式がカラフルになる Better Salesforce formula editorは楽しいよ

gilde tech(for Salesforce)」に入会しませんか？
登録すると、「gilde tech」に掲載されているSalesforceのノウハウを全部閲覧できるだけでなく、自分が知っている知識を発信し、他の会員と交流することもできます。
またSalesforceの知識習得に役立つイベント情報も得ることができます。
是非ここで得た知識を業務に活かしてください！

Summer'24 UIのアップデート：フォーカスしている場所（操作箇所）がよりわかりやすくなる

Salesforceの画面で選択している項目やアクションが濃い青の枠で強調されます！

今現在の Spring'24 と来る Summer’24画面を比べてみました。

ひとこと

Summer'24関連の記事

Salesforceの「色」関連の記事