{"id":209,"date":"2019-06-04T13:16:27","date_gmt":"2019-06-04T17:16:27","guid":{"rendered":"https:\/\/pressbooks.library.ryerson.ca\/iwacc\/?post_type=chapter&#038;p=209"},"modified":"2019-07-31T13:30:02","modified_gmt":"2019-07-31T17:30:02","slug":"2-5-input-modalities-level-aaa","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/2-5-input-modalities-level-aaa\/","title":{"raw":"2.5 Input Modalities (Level AAA)","rendered":"2.5 Input Modalities (Level AAA)"},"content":{"raw":"<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #ffcb05\">\r\n<h3><strong><a id=\"2.5.5\"><\/a>Success Criterion 2.5.5<\/strong> Target Size<\/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 AAA\r\n\r\nThe size of the <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-target\">target<\/a> for <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-pointer-inputs\">pointer inputs<\/a> is at least 44 by 44 <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-css-pixels\">CSS pixels<\/a> except when:\r\n<ul>\r\n \t<li><strong>Equivalent<\/strong>: The target is available through an equivalent link or control on the same page that is at least 44 by 44 CSS pixels;<\/li>\r\n \t<li><strong>Inline<\/strong>: The target is in a sentence or block of text;<\/li>\r\n \t<li><strong>User Agent Control<\/strong>: The size of the target is determined by the user agent and is not modified by the author;<\/li>\r\n \t<li><strong>Essential<\/strong>: A particular presentation of the target is <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-essential\">essential<\/a> to the information being conveyed.<\/li>\r\n<\/ul>\r\n<\/div>\r\n<h4>Target Size Explained<\/h4>\r\nThis success criterion was added in WCAG 2.1 to ensure that people are able to activate actions either with a mouse click or a touch. Some people may have difficulty targeting small objects with a mouse pointer, perhaps having difficulty holding the mouse pointer steady enough to click a tiny target area.\r\n\r\nOne common way to make tiny web elements, such as radio buttons or checkboxes, targetable, is to label them with the HTML label element. When it is used the label itself becomes clickable, creating a larger target area to activate these tiny form elements.\r\n\r\nWhere target sizes often become problematic is in responsive designs. When web content is viewed on larger screens, target areas may meet the 44 by 44 pixel minimum dimensions, though when viewed on a small device, content may reflow and elements may be reduced in size to fit in the smaller space available. On mobile devices, targets need to be (a) large enough to be touchable with a finger tip without activating other nearby elements unintentionally, and (b) large enough so a finger tip does not completely obscure the element.\r\n\r\nExceptions:\r\n<ul>\r\n \t<li>Targets within a sentence<\/li>\r\n \t<li>When target size is essential and would invalidate an activity or function otherwise<\/li>\r\n \t<li>When an equivalent 44 by 44 target is provided, the original does not need to meet this requirement<\/li>\r\n \t<li>Links at the end of a sentence to a footnote (these are considered to be part of the sentence)<\/li>\r\n \t<li>Elements that are part of the operating system user interface or a user agent (e.g., browser)<\/li>\r\n<\/ul>\r\n<div style=\"height: 10em;margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #f66\">\r\n\r\n<strong>Key Point:<\/strong>\r\n\r\nWhat does 44 by 44 CSS pixels look like?\r\n<div style=\"height: 44px;width: 44px;border: thin solid black;float: left\"><\/div>\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\/target-size.html\">Understanding Target Size<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#target-size\">How to Meet Target Size<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.smashingmagazine.com\/2012\/02\/finger-friendly-design-ideal-mobile-touchscreen-target-sizes\/\">Finger-Friendly Design: Ideal Mobile Touchscreen Target Sizes<\/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.5.6\"><\/a>Success Criterion 2.5.6<\/strong> Concurrent Input Mechanisms<\/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 AAA\r\n\r\nWeb content does not restrict use of input modalities available on a platform except where the restriction is <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-essential\">essential<\/a>, required to ensure the security of the content, or required to respect user settings.\r\n\r\n<\/div>\r\n<h4>Concurrent Input Mechanisms Explained<\/h4>\r\nThis success criterion was added in WCAG 2.1 to ensure that users are not limited in the input method they use to access web content. For a mobile device, a finger tip is typically the main input method. For a person who may have limited use of their fingers, however, they might choose to attach a mouse and keyboard to their device to make it easier to operate. Web content must not prevent the use of these or other alternate input devices.\r\n\r\nInput type restrictions typically occur when JavaScript is used to handle input. If, for example, a developer chooses to use a touch-specific event handler (e.g., touchstart) without providing alternative access through a mouse event handler (e.g., mousedown), it may make the content unusable by someone who is unable to touch a screen or target elements on the screen. To avoid such limitation, developers can create functions that handle a variety of input methods (e.g., finger, mouse, keyboard, stylus, or joystick), or they can use device-independent event handlers (e.g. focus, blur, or click) that do not rely on any specific input device.\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> Despite the \u201cclick\u201d event being associated with a mouse action, over time it has become a device-independent event handler that works with any device (like how focus and blur events behave).\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\/concurrent-input-mechanisms.html\">Understanding Concurrent Input Mechanisms<\/a><\/li>\r\n<\/ul>\r\n<ul>\r\n \t<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#concurrent-input-mechanisms\">How to Meet Concurrent Input Mechanisms<\/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-69d7318bcc274\" 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-69d7318bcc274\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/2-5-input-modalities-level-aaa\/#Success_Criterion_255_Target_Size\" >Success Criterion 2.5.5 Target Size<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/2-5-input-modalities-level-aaa\/#Target_Size_Explained\" >Target Size Explained<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/2-5-input-modalities-level-aaa\/#Success_Criterion_256_Concurrent_Input_Mechanisms\" >Success Criterion 2.5.6 Concurrent Input Mechanisms<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/2-5-input-modalities-level-aaa\/#Concurrent_Input_Mechanisms_Explained\" >Concurrent Input Mechanisms Explained<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/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_255_Target_Size\"><\/span><strong><a id=\"2.5.5\"><\/a>Success Criterion 2.5.5<\/strong> Target Size<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 AAA<\/p>\n<p>The size of the <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-target\">target<\/a> for <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-pointer-inputs\">pointer inputs<\/a> is at least 44 by 44 <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-css-pixels\">CSS pixels<\/a> except when:<\/p>\n<ul>\n<li><strong>Equivalent<\/strong>: The target is available through an equivalent link or control on the same page that is at least 44 by 44 CSS pixels;<\/li>\n<li><strong>Inline<\/strong>: The target is in a sentence or block of text;<\/li>\n<li><strong>User Agent Control<\/strong>: The size of the target is determined by the user agent and is not modified by the author;<\/li>\n<li><strong>Essential<\/strong>: A particular presentation of the target is <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-essential\">essential<\/a> to the information being conveyed.<\/li>\n<\/ul>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"Target_Size_Explained\"><\/span>Target Size Explained<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>This success criterion was added in WCAG 2.1 to ensure that people are able to activate actions either with a mouse click or a touch. Some people may have difficulty targeting small objects with a mouse pointer, perhaps having difficulty holding the mouse pointer steady enough to click a tiny target area.<\/p>\n<p>One common way to make tiny web elements, such as radio buttons or checkboxes, targetable, is to label them with the HTML label element. When it is used the label itself becomes clickable, creating a larger target area to activate these tiny form elements.<\/p>\n<p>Where target sizes often become problematic is in responsive designs. When web content is viewed on larger screens, target areas may meet the 44 by 44 pixel minimum dimensions, though when viewed on a small device, content may reflow and elements may be reduced in size to fit in the smaller space available. On mobile devices, targets need to be (a) large enough to be touchable with a finger tip without activating other nearby elements unintentionally, and (b) large enough so a finger tip does not completely obscure the element.<\/p>\n<p>Exceptions:<\/p>\n<ul>\n<li>Targets within a sentence<\/li>\n<li>When target size is essential and would invalidate an activity or function otherwise<\/li>\n<li>When an equivalent 44 by 44 target is provided, the original does not need to meet this requirement<\/li>\n<li>Links at the end of a sentence to a footnote (these are considered to be part of the sentence)<\/li>\n<li>Elements that are part of the operating system user interface or a user agent (e.g., browser)<\/li>\n<\/ul>\n<div style=\"height: 10em;margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #f66\">\n<p><strong>Key Point:<\/strong><\/p>\n<p>What does 44 by 44 CSS pixels look like?<\/p>\n<div style=\"height: 44px;width: 44px;border: thin solid black;float: left\"><\/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\/target-size.html\">Understanding Target Size<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#target-size\">How to Meet Target Size<\/a><\/li>\n<li><a href=\"https:\/\/www.smashingmagazine.com\/2012\/02\/finger-friendly-design-ideal-mobile-touchscreen-target-sizes\/\">Finger-Friendly Design: Ideal Mobile Touchscreen Target Sizes<\/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_256_Concurrent_Input_Mechanisms\"><\/span><strong><a id=\"2.5.6\"><\/a>Success Criterion 2.5.6<\/strong> Concurrent Input Mechanisms<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 AAA<\/p>\n<p>Web content does not restrict use of input modalities available on a platform except where the restriction is <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-essential\">essential<\/a>, required to ensure the security of the content, or required to respect user settings.<\/p>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"Concurrent_Input_Mechanisms_Explained\"><\/span>Concurrent Input Mechanisms Explained<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>This success criterion was added in WCAG 2.1 to ensure that users are not limited in the input method they use to access web content. For a mobile device, a finger tip is typically the main input method. For a person who may have limited use of their fingers, however, they might choose to attach a mouse and keyboard to their device to make it easier to operate. Web content must not prevent the use of these or other alternate input devices.<\/p>\n<p>Input type restrictions typically occur when JavaScript is used to handle input. If, for example, a developer chooses to use a touch-specific event handler (e.g., touchstart) without providing alternative access through a mouse event handler (e.g., mousedown), it may make the content unusable by someone who is unable to touch a screen or target elements on the screen. To avoid such limitation, developers can create functions that handle a variety of input methods (e.g., finger, mouse, keyboard, stylus, or joystick), or they can use device-independent event handlers (e.g. focus, blur, or click) that do not rely on any specific input device.<\/p>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #f66\">\n<p><strong>Key Point:<\/strong> Despite the \u201cclick\u201d event being associated with a mouse action, over time it has become a device-independent event handler that works with any device (like how focus and blur events behave).<\/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\/concurrent-input-mechanisms.html\">Understanding Concurrent Input Mechanisms<\/a><\/li>\n<\/ul>\n<ul>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#concurrent-input-mechanisms\">How to Meet Concurrent Input Mechanisms<\/a><\/li>\n<\/ul>\n<\/div>\n","protected":false},"author":100,"menu_order":11,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-209","chapter","type-chapter","status-publish","hentry"],"part":28,"_links":{"self":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/pressbooks\/v2\/chapters\/209","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":10,"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/pressbooks\/v2\/chapters\/209\/revisions"}],"predecessor-version":[{"id":1220,"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/pressbooks\/v2\/chapters\/209\/revisions\/1220"}],"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\/209\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/wp\/v2\/media?parent=209"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/pressbooks\/v2\/chapter-type?post=209"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/wp\/v2\/contributor?post=209"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/wp\/v2\/license?post=209"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}