{"id":189,"date":"2019-06-04T13:13:48","date_gmt":"2019-06-04T17:13:48","guid":{"rendered":"https:\/\/pressbooks.library.ryerson.ca\/iwacc\/?post_type=chapter&#038;p=189"},"modified":"2022-12-16T10:17:19","modified_gmt":"2022-12-16T15:17:19","slug":"2-1-keyboard-accessible-level-a","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/2-1-keyboard-accessible-level-a\/","title":{"raw":"2.1 Keyboard Accessible (Level A)","rendered":"2.1 Keyboard Accessible (Level A)"},"content":{"raw":"<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #eb974e\">\r\n<h2><strong>Guideline 2.1<\/strong> Keyboard Accessible<\/h2>\r\nUser interface components and navigation must be operable.\r\n\r\n<\/div>\r\n<strong>Why must web pages be accessible without a mouse?<\/strong>\r\n\r\nSome people cannot use or have difficulties using a mouse. For example:\r\n<ol>\r\n \t<li>The mouse is designed to be guided by eye. Users who are totally blind cannot see the mouse pointer.<\/li>\r\n \t<li>Mouse pointers tend to be small. Individuals with low vision may have trouble spotting the mouse pointer on the screen.<\/li>\r\n \t<li>Someone with a learning disability may find the movements of the mouse pointer distracting, or they may lack the hand-eye coordination needed to reliably use a mouse.<\/li>\r\n \t<li>Some people have trouble remembering when to left-click, double-click, or right-click.<\/li>\r\n \t<li>A person who has hand tremors may be unable to hold the mouse steadily enough to click small screen objects. Some seniors who do not have hand tremors report difficulties holding the mouse steady enough to double-click.<\/li>\r\n<\/ol>\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #ffcb05\">\r\n<h3><strong><a id=\"2.1.1\"><\/a>Success Criterion 2.1.1<\/strong> Keyboard<\/h3>\r\nLevel A\r\n\r\nAll <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-functionality\">functionality<\/a> of the content is operable through a\u00a0<a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-keyboard-interface\">keyboard interface<\/a> without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user\u2019s movement and not just the endpoints.\r\n\r\n<\/div>\r\n<h4>Keyboard Explained<\/h4>\r\nThe computer mouse is ubiquitous today, but before 1984 most computer users did not use one. The mouse only became pervasive during the mid\u20131990s. In recent years, other mouse-like devices have been introduced, including trackballs, touchpads, and trackpoints. Now, a mouse (or a similar pointing device) comes with every computer, and most people would be lost without one.\r\n\r\nYet some people cannot use \u2014 or have difficulties using \u2014 a mouse. For example:\r\n<ul>\r\n \t<li>An individual with low-vision may have trouble locating the mouse pointer on a screen<\/li>\r\n \t<li>A person who is totally blind cannot see the mouse pointer at all<\/li>\r\n \t<li>Someone with a learning disability may find the movements of the mouse pointer distracting<\/li>\r\n \t<li>A person who has hand tremors may be unable to hold the mouse steadily enough to click on small screen objects<\/li>\r\n<\/ul>\r\nIn addition, there are individuals who find that pressing a few keys on the keyboard is faster, easier, and more accurate than pointing and clicking. Many \u201caverage\u201d computer users know a few keyboard shortcuts, and some \u201cpower users\u201d rarely touch the mouse at all.\r\n\r\nMany tasks that are typically done with a mouse can be (or should be) easily keyboard accessible, including \u201cclicking\u201d hypertext links, drawing straight lines and regular geometric shapes, and resizing windows. There are even keyboard equivalents for dragging and dropping. But when a task cannot be performed without a mouse, some people will be prevented from taking full advantage of a site.\r\n\r\nWCAG 2.1 acknowledges that some tasks cannot reasonably be done with a keyboard, such as real-time flight simulations. Tasks that depend on continuous, time-sensitive movements that do not have start and end points are excluded. But the highest conformance level that such a website can attain for <strong>Guideline 2.1<\/strong> is Level A. To achieve Level AAA, all content must be keyboard accessible. Also, see <strong>SC 2.1.3 <\/strong>Keyboard (No Exceptions).\r\n\r\nMany of the assistive technologies that people with disabilities rely upon emulate the functionality of a keyboard. Content that is accessible by keyboard can also be accessed by devices that emulate keyboards. For this reason, the ability to interact with web content using only a keyboard is core to web accessibility.\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #f66\">\r\n\r\n<strong>Key Point: <\/strong><strong>SC 2.1.1<\/strong> Keyboard is as important as <strong>SC 1.1.1<\/strong> Text Alternatives. If neither are addressed, a website will have insurmountable barriers that some users with disabilities may have no way to work around.\r\n\r\n<\/div>\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #b9f\">\r\n<h4><strong><a id=\"Try This: Keyboard Accessible Drag-and-Drop\"><\/a>Try This: Keyboard Accessible Drag-and-Drop<\/strong><\/h4>\r\nOne common keyboard-inaccessible culprit around the Web is drag-and-drop widgets. Developers often have trouble making these accessible, though there are a number of strategies available to make them usable with a screen reader.\r\n\r\nThe following two examples of drag-and-drop sortable lists may look identical, but there is one difference. Mouse users will find that both function exactly the same way; however, for keyboard users, only the first one is accessible.\r\n\r\nTo test each sortable list:\r\n<ol>\r\n \t<li>Open ChromeVox or your preferred screen reader.<\/li>\r\n \t<li>Using your mouse pointer (if you are able), grab one of the list items from each list and drop it in a new position.<\/li>\r\n \t<li>Listen to what the screen reader announces in each case.<\/li>\r\n \t<li>Now put your mouse away, and use your keyboard to complete the same task.<\/li>\r\n \t<li>Mac users use Command + arrow to select and move list items. Windows users use Ctrl + arrow.<\/li>\r\n<\/ol>\r\nNotice that there is no way to reorder the list using a keyboard alone in the second example below. The first example would pass, and the latter would fail accessibility testing.\r\n\r\nAlso, notice how the screen reader announces the accessible version. These semantics are created using WAI-ARIA. WAI-ARIA will be covered in more detail later in later unit and will be covered in great detail in our <a href=\"https:\/\/pressbooks.library.torontomu.ca\/wafd\/\">Web Accessibility for Developers<\/a> book.\r\n\r\n<strong>Example 1: <\/strong>Accessible Sortable List\r\n<!-- h5p element added source: \"https:\/\/rawcdn.githack.com\/gregrgay\/learn-aria\/03f25c3591708b70b451305037d9418ce7170b9c\/sortable.html\"-->\r\n\r\n[h5p id=\"2\"]\r\n\r\n<strong>Example 2: <\/strong>Inaccessible Sortable List\r\n<!-- h5p element added, source \"https:\/\/learnaria.github.io\/sortable.html\" -->\r\n[h5p id=\"3\"]\r\n\r\n<\/div>\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #0000ff\">\r\n\r\n<strong>Suggested Reading:<\/strong>\r\n<ul>\r\n \t<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/keyboard.html\">Understanding Success Criterion 2.1.1 Keyboard<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#keyboard\">How to Meet Keyboard<\/a><\/li>\r\n<\/ul>\r\n<\/div>\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #ffcb05\">\r\n<h3><strong><a id=\"2.1.2\"><\/a>Success Criterion 2.1.2<\/strong> No Keyboard Trap<\/h3>\r\nLevel A\r\n\r\nIf keyboard focus can be moved to a component of the page using a <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-keyboard-interface\">keyboard interface<\/a>, then focus can be moved away from that component using only a keyboard interface. If it requires more than unmodified arrow or Tab keys or other standard exit methods, the user is advised of the method for moving focus away.\r\n\r\n<\/div>\r\n<h4>No Keyboard Trap Explained<\/h4>\r\nA \u201ckeyboard trap\u201d is an area of a web page where a person gets stuck when navigating without a mouse. You can navigate to a spot by pressing a sequence of keystrokes, but you cannot leave \u2014 unless you use a mouse.\r\n\r\nKeyboard traps usually occur when applications are embedded in web pages. The main culprits are text editors, spreadsheets, and media players. For example, on some online forums, it is possible to navigate to a built-in text editor by repeatedly pressing the Tab key but impossible to exit it without a mouse.\r\n\r\nIf there is a non-intuitive keystroke (or series of keystrokes) to escape a keyboard trap, let users know about it. One option would be to provide instructions within the embedded application: \u201cTo exit this spreadsheet, press Ctrl + W (Windows) or Command + W (Mac).\u201d\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #b9f\">\r\n<h4><strong><a id=\"Try This: Example Keyboard Trap\"><\/a>Try This: Example Keyboard Trap<\/strong><\/h4>\r\nThis example requires a Flash plugin be installed with your browser and enabled (right-click the space below to enable if the calculator does not appear).\r\n\r\nUsing two or more different browsers to view this page, use the keyboard\u2019s Tab key to navigate to the Flash calculator below. Notice whether you are able to use the calculator without the aid of a mouse. Notice what happens when you try to navigate away from the calculator using just your keyboard.\r\n\r\n<strong>Note:<\/strong> Current browsers will add a play button to the Flash object below. You may need to click the play button to make the Flash object available. Click the link below to open the calculator if it does not appear here.\r\n\r\n[This Flash object is no longer supported]\r\n\r\n[h5p id=\"4\"]\r\n\r\n<\/div>\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #0000ff\">\r\n\r\n<strong>Suggested Reading: <\/strong>\r\n<ul>\r\n \t<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/no-keyboard-trap.html\">Understanding Success Criterion 2.1.3 No Keyboard Trap<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#no-keyboard-trap\">How to Meet No Keyboard Trap<\/a><\/li>\r\n<\/ul>\r\n<\/div>\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #ffcb05\">\r\n<h3><strong><a id=\"2.1.4\"><\/a>Success Criterion 2.1.4<\/strong> Character Key Shortcuts<\/h3>\r\n<span style=\"background-color: #00ff00;border: thin solid green;padding: 0.2em\"><strong>WCAG 2.1<\/strong><\/span>\r\n\r\nLevel A\r\n\r\nIf a\u00a0<a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-keyboard-shortcuts\">keyboard shortcut<\/a> is implemented in content using only letter (including upper- and lower-case), punctuation, number, or symbol characters, then at least one of the following is true:\r\n<ul>\r\n \t<li><strong>Turn off<\/strong>: A\u00a0<a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-mechanism\">mechanism<\/a> is available to turn the shortcut off.<\/li>\r\n \t<li><strong>Remap<\/strong>: A mechanism is available to remap the shortcut to use one or more non-printable keyboard characters (e.g., Ctrl, Alt, etc).<\/li>\r\n \t<li><strong>Active only on focus<\/strong>: The keyboard shortcut for a\u00a0<a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-user-interface-components\">user interface component<\/a> is only active when that component has focus.<\/li>\r\n<\/ul>\r\n<\/div>\r\n<h4>Character Key Shortcuts Explained<\/h4>\r\nThis success criteria was introduced in WCAG 2.1 to take into account a growing awareness of the need for keyboard access on the Web, for both desktop and mobile applications. It is intended to address access via single, printable keyboard characters, including numbers, letters, and punctuation used to control websites and web application features. An example might be using the \u201cF\u201d key to open a File menu.\r\n\r\nWhile these shortcuts can be very handy for keyboard-only users, they can be quite problematic for voice users, using speech recognition software to control their computer or mobile device. When using speech recognition software, it is typically possible to switch between command and dictation modes, which can be quite inefficient. Speech users will often use an all-encompassing mode, with pauses between dictation and commands. However, if the pause is too short, commands may end up being dictated into a form or document. These types of errors are typically easy to revert and are more an annoyance than a barrier.\r\n\r\nReal problems occur when spoken words in command mode fire off a series of commands associated with the letters in a word. It can be even more problematic when spoken words are picked up in the background, especially from other speakers. The result can completely disorient a user. Watch the following video to see what happens when spoken words are interpreted as commands.\r\n\r\n[embed]https:\/\/youtu.be\/xzSyIA4OWYE[\/embed]\r\n\r\n<strong>Video: <\/strong><a class=\"\" href=\"https:\/\/youtu.be\/xzSyIA4OWYE\">Single key shortcuts affecting speech input<\/a> by Kim Patch\r\n\r\nTo prevent these types of occurrences, keyboard commands programmed into websites and web applications can include a non-printable character key as a modifier, much like Alt, or Ctrl, or Alt + Ctrl together as the ChromeVox modifier keys. Or, if single characters are to be used, a feature is available to disable character keys or remap them, which allows users to define their own key combinations for various controls.\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #f66\">\r\n\r\n<strong>Key Point: <\/strong>This success criteria does not affect the use of HTML access keys because they will always include a non-printable character key as a modifier, such as Alt or Ctrl. It applies only when single character keys are used, typically keys that are scripted for controls in web applications.\r\n\r\n<\/div>\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #0000ff\">\r\n\r\n<strong>Suggested Reading: <\/strong>\r\n<ul>\r\n \t<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/character-key-shortcuts.html\">Understanding \u00a0Success Criterion 2.1.4 Character Key Shortcuts<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#character-key-shortcuts\">How to Meet Character Key Shortcuts<\/a><\/li>\r\n<\/ul>\r\n<\/div>","rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-69d19b9ee9f23\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-69d19b9ee9f23\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/2-1-keyboard-accessible-level-a\/#Guideline_21_Keyboard_Accessible\" >Guideline 2.1 Keyboard Accessible<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/2-1-keyboard-accessible-level-a\/#Success_Criterion_211_Keyboard\" >Success Criterion 2.1.1 Keyboard<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/2-1-keyboard-accessible-level-a\/#Keyboard_Explained\" >Keyboard Explained<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/2-1-keyboard-accessible-level-a\/#Try_This_Keyboard_Accessible_Drag-and-Drop\" >Try This: Keyboard Accessible Drag-and-Drop<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/2-1-keyboard-accessible-level-a\/#Success_Criterion_212_No_Keyboard_Trap\" >Success Criterion 2.1.2 No Keyboard Trap<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/2-1-keyboard-accessible-level-a\/#No_Keyboard_Trap_Explained\" >No Keyboard Trap Explained<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/2-1-keyboard-accessible-level-a\/#Try_This_Example_Keyboard_Trap\" >Try This: Example Keyboard Trap<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/2-1-keyboard-accessible-level-a\/#Success_Criterion_214_Character_Key_Shortcuts\" >Success Criterion 2.1.4 Character Key Shortcuts<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/2-1-keyboard-accessible-level-a\/#Character_Key_Shortcuts_Explained\" >Character Key Shortcuts Explained<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #eb974e\">\n<h2><span class=\"ez-toc-section\" id=\"Guideline_21_Keyboard_Accessible\"><\/span><strong>Guideline 2.1<\/strong> Keyboard Accessible<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>User interface components and navigation must be operable.<\/p>\n<\/div>\n<p><strong>Why must web pages be accessible without a mouse?<\/strong><\/p>\n<p>Some people cannot use or have difficulties using a mouse. For example:<\/p>\n<ol>\n<li>The mouse is designed to be guided by eye. Users who are totally blind cannot see the mouse pointer.<\/li>\n<li>Mouse pointers tend to be small. Individuals with low vision may have trouble spotting the mouse pointer on the screen.<\/li>\n<li>Someone with a learning disability may find the movements of the mouse pointer distracting, or they may lack the hand-eye coordination needed to reliably use a mouse.<\/li>\n<li>Some people have trouble remembering when to left-click, double-click, or right-click.<\/li>\n<li>A person who has hand tremors may be unable to hold the mouse steadily enough to click small screen objects. Some seniors who do not have hand tremors report difficulties holding the mouse steady enough to double-click.<\/li>\n<\/ol>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #ffcb05\">\n<h3><span class=\"ez-toc-section\" id=\"Success_Criterion_211_Keyboard\"><\/span><strong><a id=\"2.1.1\"><\/a>Success Criterion 2.1.1<\/strong> Keyboard<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Level A<\/p>\n<p>All <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-functionality\">functionality<\/a> of the content is operable through a\u00a0<a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-keyboard-interface\">keyboard interface<\/a> without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user\u2019s movement and not just the endpoints.<\/p>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"Keyboard_Explained\"><\/span>Keyboard Explained<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>The computer mouse is ubiquitous today, but before 1984 most computer users did not use one. The mouse only became pervasive during the mid\u20131990s. In recent years, other mouse-like devices have been introduced, including trackballs, touchpads, and trackpoints. Now, a mouse (or a similar pointing device) comes with every computer, and most people would be lost without one.<\/p>\n<p>Yet some people cannot use \u2014 or have difficulties using \u2014 a mouse. For example:<\/p>\n<ul>\n<li>An individual with low-vision may have trouble locating the mouse pointer on a screen<\/li>\n<li>A person who is totally blind cannot see the mouse pointer at all<\/li>\n<li>Someone with a learning disability may find the movements of the mouse pointer distracting<\/li>\n<li>A person who has hand tremors may be unable to hold the mouse steadily enough to click on small screen objects<\/li>\n<\/ul>\n<p>In addition, there are individuals who find that pressing a few keys on the keyboard is faster, easier, and more accurate than pointing and clicking. Many \u201caverage\u201d computer users know a few keyboard shortcuts, and some \u201cpower users\u201d rarely touch the mouse at all.<\/p>\n<p>Many tasks that are typically done with a mouse can be (or should be) easily keyboard accessible, including \u201cclicking\u201d hypertext links, drawing straight lines and regular geometric shapes, and resizing windows. There are even keyboard equivalents for dragging and dropping. But when a task cannot be performed without a mouse, some people will be prevented from taking full advantage of a site.<\/p>\n<p>WCAG 2.1 acknowledges that some tasks cannot reasonably be done with a keyboard, such as real-time flight simulations. Tasks that depend on continuous, time-sensitive movements that do not have start and end points are excluded. But the highest conformance level that such a website can attain for <strong>Guideline 2.1<\/strong> is Level A. To achieve Level AAA, all content must be keyboard accessible. Also, see <strong>SC 2.1.3 <\/strong>Keyboard (No Exceptions).<\/p>\n<p>Many of the assistive technologies that people with disabilities rely upon emulate the functionality of a keyboard. Content that is accessible by keyboard can also be accessed by devices that emulate keyboards. For this reason, the ability to interact with web content using only a keyboard is core to web accessibility.<\/p>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #f66\">\n<p><strong>Key Point: <\/strong><strong>SC 2.1.1<\/strong> Keyboard is as important as <strong>SC 1.1.1<\/strong> Text Alternatives. If neither are addressed, a website will have insurmountable barriers that some users with disabilities may have no way to work around.<\/p>\n<\/div>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #b9f\">\n<h4><strong><a><\/a>Try This: Keyboard Accessible Drag-and-Drop<\/strong><\/h4>\n<p>One common keyboard-inaccessible culprit around the Web is drag-and-drop widgets. Developers often have trouble making these accessible, though there are a number of strategies available to make them usable with a screen reader.<\/p>\n<p>The following two examples of drag-and-drop sortable lists may look identical, but there is one difference. Mouse users will find that both function exactly the same way; however, for keyboard users, only the first one is accessible.<\/p>\n<p>To test each sortable list:<\/p>\n<ol>\n<li>Open ChromeVox or your preferred screen reader.<\/li>\n<li>Using your mouse pointer (if you are able), grab one of the list items from each list and drop it in a new position.<\/li>\n<li>Listen to what the screen reader announces in each case.<\/li>\n<li>Now put your mouse away, and use your keyboard to complete the same task.<\/li>\n<li>Mac users use Command + arrow to select and move list items. Windows users use Ctrl + arrow.<\/li>\n<\/ol>\n<p>Notice that there is no way to reorder the list using a keyboard alone in the second example below. The first example would pass, and the latter would fail accessibility testing.<\/p>\n<p>Also, notice how the screen reader announces the accessible version. These semantics are created using WAI-ARIA. WAI-ARIA will be covered in more detail later in later unit and will be covered in great detail in our <a href=\"https:\/\/pressbooks.library.torontomu.ca\/wafd\/\">Web Accessibility for Developers<\/a> book.<\/p>\n<p><strong>Example 1: <\/strong>Accessible Sortable List<br \/>\n<!-- h5p element added source: \"https:\/\/rawcdn.githack.com\/gregrgay\/learn-aria\/03f25c3591708b70b451305037d9418ce7170b9c\/sortable.html\" --><\/p>\n<div id=\"h5p-2\">\n<div class=\"h5p-content\" data-content-id=\"2\"><\/div>\n<\/div>\n<p><strong>Example 2: <\/strong>Inaccessible Sortable List<br \/>\n<!-- h5p element added, source \"https:\/\/learnaria.github.io\/sortable.html\" --><\/p>\n<div id=\"h5p-3\">\n<div class=\"h5p-content\" data-content-id=\"3\"><\/div>\n<\/div>\n<\/div>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #0000ff\">\n<p><strong>Suggested Reading:<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/keyboard.html\">Understanding Success Criterion 2.1.1 Keyboard<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#keyboard\">How to Meet Keyboard<\/a><\/li>\n<\/ul>\n<\/div>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #ffcb05\">\n<h3><span class=\"ez-toc-section\" id=\"Success_Criterion_212_No_Keyboard_Trap\"><\/span><strong><a id=\"2.1.2\"><\/a>Success Criterion 2.1.2<\/strong> No Keyboard Trap<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Level A<\/p>\n<p>If keyboard focus can be moved to a component of the page using a <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-keyboard-interface\">keyboard interface<\/a>, then focus can be moved away from that component using only a keyboard interface. If it requires more than unmodified arrow or Tab keys or other standard exit methods, the user is advised of the method for moving focus away.<\/p>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"No_Keyboard_Trap_Explained\"><\/span>No Keyboard Trap Explained<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>A \u201ckeyboard trap\u201d is an area of a web page where a person gets stuck when navigating without a mouse. You can navigate to a spot by pressing a sequence of keystrokes, but you cannot leave \u2014 unless you use a mouse.<\/p>\n<p>Keyboard traps usually occur when applications are embedded in web pages. The main culprits are text editors, spreadsheets, and media players. For example, on some online forums, it is possible to navigate to a built-in text editor by repeatedly pressing the Tab key but impossible to exit it without a mouse.<\/p>\n<p>If there is a non-intuitive keystroke (or series of keystrokes) to escape a keyboard trap, let users know about it. One option would be to provide instructions within the embedded application: \u201cTo exit this spreadsheet, press Ctrl + W (Windows) or Command + W (Mac).\u201d<\/p>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #b9f\">\n<h4><strong><a><\/a>Try This: Example Keyboard Trap<\/strong><\/h4>\n<p>This example requires a Flash plugin be installed with your browser and enabled (right-click the space below to enable if the calculator does not appear).<\/p>\n<p>Using two or more different browsers to view this page, use the keyboard\u2019s Tab key to navigate to the Flash calculator below. Notice whether you are able to use the calculator without the aid of a mouse. Notice what happens when you try to navigate away from the calculator using just your keyboard.<\/p>\n<p><strong>Note:<\/strong> Current browsers will add a play button to the Flash object below. You may need to click the play button to make the Flash object available. Click the link below to open the calculator if it does not appear here.<\/p>\n<p>[This Flash object is no longer supported]<\/p>\n<div id=\"h5p-4\">\n<div class=\"h5p-content\" data-content-id=\"4\"><\/div>\n<\/div>\n<\/div>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #0000ff\">\n<p><strong>Suggested Reading: <\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/no-keyboard-trap.html\">Understanding Success Criterion 2.1.3 No Keyboard Trap<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#no-keyboard-trap\">How to Meet No Keyboard Trap<\/a><\/li>\n<\/ul>\n<\/div>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #ffcb05\">\n<h3><span class=\"ez-toc-section\" id=\"Success_Criterion_214_Character_Key_Shortcuts\"><\/span><strong><a id=\"2.1.4\"><\/a>Success Criterion 2.1.4<\/strong> Character Key Shortcuts<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"background-color: #00ff00;border: thin solid green;padding: 0.2em\"><strong>WCAG 2.1<\/strong><\/span><\/p>\n<p>Level A<\/p>\n<p>If a\u00a0<a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-keyboard-shortcuts\">keyboard shortcut<\/a> is implemented in content using only letter (including upper- and lower-case), punctuation, number, or symbol characters, then at least one of the following is true:<\/p>\n<ul>\n<li><strong>Turn off<\/strong>: A\u00a0<a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-mechanism\">mechanism<\/a> is available to turn the shortcut off.<\/li>\n<li><strong>Remap<\/strong>: A mechanism is available to remap the shortcut to use one or more non-printable keyboard characters (e.g., Ctrl, Alt, etc).<\/li>\n<li><strong>Active only on focus<\/strong>: The keyboard shortcut for a\u00a0<a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-user-interface-components\">user interface component<\/a> is only active when that component has focus.<\/li>\n<\/ul>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"Character_Key_Shortcuts_Explained\"><\/span>Character Key Shortcuts Explained<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>This success criteria was introduced in WCAG 2.1 to take into account a growing awareness of the need for keyboard access on the Web, for both desktop and mobile applications. It is intended to address access via single, printable keyboard characters, including numbers, letters, and punctuation used to control websites and web application features. An example might be using the \u201cF\u201d key to open a File menu.<\/p>\n<p>While these shortcuts can be very handy for keyboard-only users, they can be quite problematic for voice users, using speech recognition software to control their computer or mobile device. When using speech recognition software, it is typically possible to switch between command and dictation modes, which can be quite inefficient. Speech users will often use an all-encompassing mode, with pauses between dictation and commands. However, if the pause is too short, commands may end up being dictated into a form or document. These types of errors are typically easy to revert and are more an annoyance than a barrier.<\/p>\n<p>Real problems occur when spoken words in command mode fire off a series of commands associated with the letters in a word. It can be even more problematic when spoken words are picked up in the background, especially from other speakers. The result can completely disorient a user. Watch the following video to see what happens when spoken words are interpreted as commands.<\/p>\n<p><iframe loading=\"lazy\" id=\"oembed-1\" title=\"Single key shortcuts affecting speech input - example 1\" width=\"500\" height=\"375\" src=\"https:\/\/www.youtube.com\/embed\/xzSyIA4OWYE?feature=oembed&#38;rel=0\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p><strong>Video: <\/strong><a class=\"\" href=\"https:\/\/youtu.be\/xzSyIA4OWYE\">Single key shortcuts affecting speech input<\/a> by Kim Patch<\/p>\n<p>To prevent these types of occurrences, keyboard commands programmed into websites and web applications can include a non-printable character key as a modifier, much like Alt, or Ctrl, or Alt + Ctrl together as the ChromeVox modifier keys. Or, if single characters are to be used, a feature is available to disable character keys or remap them, which allows users to define their own key combinations for various controls.<\/p>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #f66\">\n<p><strong>Key Point: <\/strong>This success criteria does not affect the use of HTML access keys because they will always include a non-printable character key as a modifier, such as Alt or Ctrl. It applies only when single character keys are used, typically keys that are scripted for controls in web applications.<\/p>\n<\/div>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #0000ff\">\n<p><strong>Suggested Reading: <\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/character-key-shortcuts.html\">Understanding \u00a0Success Criterion 2.1.4 Character Key Shortcuts<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#character-key-shortcuts\">How to Meet Character Key Shortcuts<\/a><\/li>\n<\/ul>\n<\/div>\n","protected":false},"author":100,"menu_order":2,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-189","chapter","type-chapter","status-publish","hentry"],"part":28,"_links":{"self":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/pressbooks\/v2\/chapters\/189","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/wp\/v2\/users\/100"}],"version-history":[{"count":25,"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/pressbooks\/v2\/chapters\/189\/revisions"}],"predecessor-version":[{"id":1365,"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/pressbooks\/v2\/chapters\/189\/revisions\/1365"}],"part":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/pressbooks\/v2\/parts\/28"}],"metadata":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/pressbooks\/v2\/chapters\/189\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/wp\/v2\/media?parent=189"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/pressbooks\/v2\/chapter-type?post=189"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/wp\/v2\/contributor?post=189"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/wp\/v2\/license?post=189"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}