{"id":312,"date":"2018-12-10T16:12:33","date_gmt":"2018-12-10T16:12:33","guid":{"rendered":"https:\/\/pressbooks.library.ryerson.ca\/wafd\/?post_type=chapter&p=312"},"modified":"2022-12-16T18:26:52","modified_gmt":"2022-12-16T18:26:52","slug":"keyboard-interaction","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/chapter\/keyboard-interaction\/","title":{"raw":"Keyboard Interaction","rendered":"Keyboard Interaction"},"content":{"raw":"Keyboard access is perhaps the most important accessibility feature that can go into a website, widget, or web application. However, it is often overlooked by developers, who are typically mouse users and may not have keyboard usability as a part of their testing regimen. People who are blind are typically unable to use a mouse, so any feature that relies on a mouse alone to function will likely be inaccessible to them. Fortunately, it is relatively easy to include keyboard access. It\u2019s more a matter of remembering to add it when mouse access is added.\r\n\r\nThe following is a simple example of including both mouse and keyboard events when defining interaction for a widget or web application. Examine the JavaScript to see how mouse and keyboard events are handled, then under the Result tab<\/strong>, try operating the button with a keyboard and mouse while using ChromeVox. How you go about implementing both mouse and keyboard doesn\u2019t really matter, as long as it is possible to interact with both.\r\n\r\nYou may notice some inconsistencies in ChromeVox support for the live region used to present the messages in the example, more specifically the aria-atomic<\/code> attribute. Live regions will be covered more thoroughly later in this unit.\r\n
[h5p id=\"12\"]<\/div>\r\n

Predictability, Consistency, and Convention<\/h2>\r\nHere we will introduce the basics of keyboard interaction, and we\u2019ll go into greater detail when we start looking more closely at particular widgets and design patterns as they are introduced in the units that follow.\r\n\r\nAs the heading for this section suggests, keyboard interaction needs to be predictable, consistent, and should follow convention. That is, users should have a good idea of the path that the focus will follow (predictable). When navigating with the Tab key, that path should be the same throughout an application or website (consistent). Finally, it should be like it is in other applications, websites, or operating systems (convention).\r\n
Suggested Reading:<\/strong> Developing a Keyboard Interface<\/a><\/div>\r\nTake for example a combo box (aka, a select menu). Regardless of the operating system being used, combo boxes work the same way. If you are developing a widget out of divs that function like a combo box, it should operate like a standard HTML combo box.\r\n\r\nConventional keyboard interaction for a combo box:<\/strong>\r\n