From 894ffe22fdd2a98959026ba535333225fb8c7afb Mon Sep 17 00:00:00 2001 From: Ryan Smith Date: Thu, 3 Oct 2024 11:30:44 -0400 Subject: [PATCH 1/3] Add focus management doc --- src/_about/accessibility/focus-management.md | 51 ++++++++++++++++++ src/_about/accessibility/index.md | 1 + .../focus-management/focus-indicator.png | Bin 0 -> 9858 bytes 3 files changed, 52 insertions(+) create mode 100644 src/_about/accessibility/focus-management.md create mode 100644 src/images/about/accessibility/focus-management/focus-indicator.png diff --git a/src/_about/accessibility/focus-management.md b/src/_about/accessibility/focus-management.md new file mode 100644 index 000000000..00b1c4f10 --- /dev/null +++ b/src/_about/accessibility/focus-management.md @@ -0,0 +1,51 @@ +--- +layout: documentation +title: Focus management +permalink: /about/accessibility/focus-management +has-parent: /about/accessibility/ +intro-text: Focus is the element on a page that is ready for you to interact with. It's important for making websites accessible, especially for people who use keyboards or other assistive technology to use the site. +anchors: + - anchor: Focus indicator + - anchor: Focus order + - anchor: Focus management + +--- + +Testing is crucial to ensure that focus on your page functions as expected across different scenarios. + +## Focus indicator + +Sighted keyboard users must always be able to see where the keyboard focus is. If they tab through a website without knowing which element is focused, navigating can be unpredictable. + +Browsers handle displaying the keyboard focus automatically, but each displays it in a different way and may be just enough to pass accessibility guidelines. VA.gov has enhanced this outline to make it more visible. + +![visual focus indicator screenshot]({{ site.baseurl }}/images/about/accessibility/focus-management/focus-indicator.png) + +We advise against disabling the focus outline using `outline: 0` or `outline: none` in CSS. This practice can impair navigation for users who rely on keyboard navigation, especially those with visual impairments. Without a visible focus outline, sighted users may struggle to identify the currently focused element, making navigation difficult. + +## Focus order + +The programmatic focus order should match the visual focus order. Focus typically follows the order in which objects appear in the page source, but may not match the order which users expect to interact with elements on the page. + +This can occur when the order of elements in the source is wrong. If an element's positioned is moved via CSS, it can move that element from where it would normally be positioned. Elements could also be hidden on a page, typically through moving it off-screen or changing it's opacity, but not taken out of the tab order. This makes them focusable even if the focus indicator cannot be seen. + +## Focus management + +Manually managing focus is necessary in some scenarios to provide a seamless and accessible user experience, especially for keyboard and screen reader users. Below are key situations where manual focus management is necessary. + +### The focus should be intentionally set to the appropriate element when a user action requires a change of context or location + +- When content is added to the screen in response to a user-triggered event, the focus should be moved to the new content. +- When content is removed from the screen in response to a user-triggered event, focus should be set to the next logical place in the interaction. +- Example: When opening a dialog, focus should be sent to that dialog. When the dialog is closed, focus is sent back to the original element that triggered it. + +### Focus should not be lost or reset to the top of the page, except when the page is reloaded + +- If focus is reset, keyboard users will have to start from the beginning of the page again. Screen reader users could also become disoriented and unsure if they are on a different page or if the current page reloaded. +- Example: If focus gets lost is after closing a dialog. The focus should be set to the original element that triggered it. + +### When setting focus, the target element must contain text that can be programmatically determined + +- If you must set focus to a non-interactive element, it should have text to allow screen readers to read the text inside the container. + - When setting focus to a non-interactive element, the element should _not_ be added to the tab order of the page through `tabindex="0"`, the focus only needs to be set via JavaScript. +- If focus is set to an empty container, screen readers will have nothing to read, so this should be avoided. diff --git a/src/_about/accessibility/index.md b/src/_about/accessibility/index.md index c6e182924..03e86d406 100644 --- a/src/_about/accessibility/index.md +++ b/src/_about/accessibility/index.md @@ -6,6 +6,7 @@ intro-text: How to follow accessibility standards when using or contributing to sub-pages: - sub-page: Accessibility testing for design system components - sub-page: Accessibility annotations + - sub-page: Focus management --- {% include _site-in-this-section.html %} diff --git a/src/images/about/accessibility/focus-management/focus-indicator.png b/src/images/about/accessibility/focus-management/focus-indicator.png new file mode 100644 index 0000000000000000000000000000000000000000..a8901d1f3bd69cbe6d6fb777924a428190c50853 GIT binary patch literal 9858 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 HDENN?+F{R6 literal 0 HcmV?d00001 From 50e93385f1cee0295f4dca409bede5fc1af8d96a Mon Sep 17 00:00:00 2001 From: Ryan Smith Date: Thu, 3 Oct 2024 11:38:03 -0400 Subject: [PATCH 2/3] Clarifications --- src/_about/accessibility/focus-management.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/_about/accessibility/focus-management.md b/src/_about/accessibility/focus-management.md index 00b1c4f10..d3043067c 100644 --- a/src/_about/accessibility/focus-management.md +++ b/src/_about/accessibility/focus-management.md @@ -11,7 +11,7 @@ anchors: --- -Testing is crucial to ensure that focus on your page functions as expected across different scenarios. +Testing is crucial to ensure that focus on your page functions as expected across different scenarios. Below are some things to look out for. ## Focus indicator @@ -27,11 +27,11 @@ We advise against disabling the focus outline using `outline: 0` or `outline: no The programmatic focus order should match the visual focus order. Focus typically follows the order in which objects appear in the page source, but may not match the order which users expect to interact with elements on the page. -This can occur when the order of elements in the source is wrong. If an element's positioned is moved via CSS, it can move that element from where it would normally be positioned. Elements could also be hidden on a page, typically through moving it off-screen or changing it's opacity, but not taken out of the tab order. This makes them focusable even if the focus indicator cannot be seen. +This can occur when the order of elements in the source is wrong. If an element's positioned is moved via CSS, it can move that element from where it would normally be positioned. Elements could also be hidden on a page, typically through moving it off-screen or changing it's opacity, but not taken out of the tab order. This makes them focusable even if the focus indicator cannot be seen. Because of that, be sure to test that focus is not placed on an element that is not visible. ## Focus management -Manually managing focus is necessary in some scenarios to provide a seamless and accessible user experience, especially for keyboard and screen reader users. Below are key situations where manual focus management is necessary. +Manually managing focus is necessary in some scenarios to provide a seamless and accessible user experience, especially for keyboard and screen reader users. Below are key things to know when setting focus manually. ### The focus should be intentionally set to the appropriate element when a user action requires a change of context or location From 21d229ad77eedada26a58190699b0ca7c538c926 Mon Sep 17 00:00:00 2001 From: Ryan Smith Date: Tue, 8 Oct 2024 09:06:48 -0400 Subject: [PATCH 3/3] Fixes --- src/_about/accessibility/focus-management.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/_about/accessibility/focus-management.md b/src/_about/accessibility/focus-management.md index d3043067c..ad82329a8 100644 --- a/src/_about/accessibility/focus-management.md +++ b/src/_about/accessibility/focus-management.md @@ -27,7 +27,7 @@ We advise against disabling the focus outline using `outline: 0` or `outline: no The programmatic focus order should match the visual focus order. Focus typically follows the order in which objects appear in the page source, but may not match the order which users expect to interact with elements on the page. -This can occur when the order of elements in the source is wrong. If an element's positioned is moved via CSS, it can move that element from where it would normally be positioned. Elements could also be hidden on a page, typically through moving it off-screen or changing it's opacity, but not taken out of the tab order. This makes them focusable even if the focus indicator cannot be seen. Because of that, be sure to test that focus is not placed on an element that is not visible. +This can occur when the order of elements in the source is wrong. If an element's position is moved via CSS, it can move that element from where it would normally be positioned. Elements could also be hidden on a page, typically through moving it off-screen or changing it's opacity, but not taken out of the tab order. This makes them focusable even if the focus indicator cannot be seen. Because of that, be sure to test that focus is not placed on an element that is not visible. ## Focus management @@ -41,8 +41,8 @@ Manually managing focus is necessary in some scenarios to provide a seamless and ### Focus should not be lost or reset to the top of the page, except when the page is reloaded -- If focus is reset, keyboard users will have to start from the beginning of the page again. Screen reader users could also become disoriented and unsure if they are on a different page or if the current page reloaded. -- Example: If focus gets lost is after closing a dialog. The focus should be set to the original element that triggered it. +- If focus is reset, keyboard users will have to start again from the beginning of the page. Screen reader users could also become disoriented and unsure if they are on a different page or if the current page reloaded. +- Example: If focus gets lost after closing a dialog. The focus should be set to the original element that triggered it. ### When setting focus, the target element must contain text that can be programmatically determined