Differences

This shows you the differences between two versions of the page.

--- accessibility:common_issues:keyboard [2023/07/10 16:48] – created scl
+++ accessibility:common_issues:keyboard [2024/01/24 10:53] (current) – [References] aria-keyshortcuts scl
@@ Line 13: / Line 13: @@
 Sighted people using keyboards for navigation need to see which page element has focus. Most native HTML controls have focus indicators; it’s important to avoid turning these off. Custom components may need to have focus styles set explicitly. The focus color should have a 3:1 contrast ratio with the background (using the [[https://webaim.org/resources/contrastchecker/|WebAIM contrast checker]]).
-In CSS, `:focus` will create an outline that is visible when an element has focus via keyboard navigation and mouse clicks, while [[`:focus-visible` behaves differently depending on the mode of input|https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible]]. You can use `:focus-visible` to avoid visible focus rings on clicked buttons and links (but do some user testing first to make sure the rings are not helpful).
+In CSS, `:focus` will create an outline that is visible when an element has focus via keyboard navigation and mouse clicks, while [[https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible|`:focus-visible` behaves differently depending on the mode of input]]. You can use `:focus-visible` to avoid visible focus rings on clicked buttons and links (but do some user testing first to make sure the rings are not helpful).
 In modal windows, [[https://hidde.blog/using-javascript-to-trap-focus-in-an-element/|focus must be trapped in the modal until it is dismissed]], and there must be a way to dismiss the modal using the keyboard.
@@ Line 22: / Line 22: @@
   * [[https://www.digitala11y.com/focus-visible-understanding-sc-2-4-7/|Understanding SC 2.4.7 Focus Visible, DigitalA11y]]
   * [[https://www.sarasoueidan.com/blog/focus-indicators/|A guide to designing accessible, WCAG-compliant focus indicators, Sara Soueidan]]
+  * [[https://adrianroselli.com/2023/08/where-to-put-focus-when-deleting-a-thing.html|Where to Put Focus When Deleting a Thing, Adrian Roselli]]
   * [[https://www.yanandcoffee.com/2020/06/06/accessible-modals-part-2/|Accessible Modals, Part 2 - Focus Trap! Key Events!]]
   * [[https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#keyboardnavigationinsidecomponents#kbd_shortcuts_assignments_assistivetech_conflicts|Avoiding conflicts when creating custom keyboard shortcuts (hotkeys)]]
+  * [[https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-keyshortcuts|aria-keyshortcuts attributes]]