This repository has been archived by the owner on Feb 9, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 21
/
M004.html
81 lines (74 loc) · 6.72 KB
/
M004.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>M004 - Providing clear indication that elements are actionable / Design actionable objects to look actionable</title>
</head>
<body>
<h1>M004 - Providing clear indication that elements are actionable / Design actionable objects to look actionable </h1>
<h2><span id="Technique_Category">Technique Category</span></h2>
<p>General Techniques </p>
<h2><span id="Technique_Status_Category">Technique Status Category</span></h2>
<p>M4 Draft for Techniques Proposed </p>
<h2><span id="Status">Status</span></h2>
<p>This technique refers to a shorter Guideline in the BBC Mobile Acessibility Guidelines: <a rel="nofollow" href="http://www.bbc.co.uk/guidelines/futuremedia/accessibility/mobile/design/actionable-elements">Actionable elements</a></p>
<ul>
<li> Written by Detlev Fischer </li>
<li> @@ Link to survey when surveyed by group </li>
<li> @@ Notes on work still needed before the technique is ready to publish, such as user agent support notes, etc. </li>
</ul>
<h2><span id="Applicability">Applicability</span></h2>
<p>This technique is relevant for web and native mobile applications that have actionable elements like buttons or links, especially in interaction modes where the affordance of actionable elements is commonly detected visually (touch and mouse use). </p>
<h2><span id="WCAG_references">WCAG references</span></h2>
<p>Applicable WCAG Success Criteria: </p>
<ul>
<li> <a rel="nofollow" href="http://www.w3.org/TR/WCAG20/#content-structure-separation-programmatic">1.3.1 Info and Relationships</a></li>
<li> <a rel="nofollow" href="http://www.w3.org/TR/WCAG20/#content-structure-separation-understanding">1.3.3 Sensory Characteristics</a></li>
<li> <a rel="nofollow" href="http://www.w3.org/TR/WCAG20/#visual-audio-contrast-without-color">1.4.1 Use of Color</a></li>
<li> <a rel="nofollow" href="http://www.w3.org/TR/WCAG20/#navigation-mechanisms-focus-visible">2.4.7 Focus Visible </a></li>
</ul>
<p>The Technique is advisory. </p>
<h2><span id="User_Agent_and_Assistive_Technology_Support_Notes">User Agent and Assistive Technology Support Notes</span></h2>
<blockquote>Provide notes regarding known lack of support for this technique with particular user agents or assistive technologies.</blockquote>
<h2><span id="Description">Description</span></h2>
<p>The objective of this technique is to ensure that visual users interacting with content via touch (direct manipulation) or via visual cursors operated with mice, touchpads, joysticks or similar devices can detect actionable elements. </p>
<p>Frequently, links or buttons triggering changes in mobile apps are not sufficiently distinct to be clearly distinguishable from non-actionable elements (content, status information, etc). There are a number of interface design conventions to indicate clearly those visual elements are actionable. Following these conventions benefits all users but especially users with vision impairments. </p>
<p>For different types of elements,a clear indication that elements are actionable can be achieved by using visual features that set the actionable element apart in terms of shape, color, style, positioning, text label for an action, or conventional iconography. </p>
<p>It is advisable to apply the principle of <strong>redundant coding</strong> to ensure that elements are indicated as actionable by more than one distinguishing visual feature. Typical examples for redundant coding: </p>
<ul>
<li> an element has a text label describing its action AND the element has a button outline AND the element changes visual appearance when focused </li>
<li> An element uses a conventional icon (e.g., question mark for help) AND the icon background color has sufficiant contrast vs. the page background color AND a transient pop-over text hint (custom tool tip) when the element is focused </li>
<li> A navigation element is positioned with a vertical navigation menu AND the elerment changes its visual state (via inversion, frame, indicator mark, etc.) when the element is focused </li>
<li> a text input has a label immediately left of it AND an outline clearly demarkating the input area AND changes state when focused (e.g. color change of frame or input background, blinking cursor) </li>
</ul>
<p>State changes during interaction should be used to reinforce the detection and interpretation of the affordances of actionable elements. This includes visual pressed states for buttons and clearly visual focus when focusing elements via a keyboard via tabbing or arrowing, a pointer device, or swipe gestures when interacting with touch devices in a "screenreader active" mode. </p>
<h2><span id="Examples">Examples</span></h2>
<p>Examples for distinguishing features used for an indication that elements are actionable: </p>
<ul>
<li> Conventional shape: Button shape (rounded corners, drop shadows), checkbox, select rectangle with arrow pointing downwards </li>
<li> Iconography: conventional visual icons (question mark, home icon, burger icon for menu, floppy disk for save, back arrow, etc) </li>
<li> Color offset: shape with different background color to distinguish the element from the page backgrond, different text color </li>
<li> Conventional style: Underlined text for links, color for links </li>
<li> Conventional positioning: Commonly used position such as a top left position for back button (iOS), position of menu items within left-aligned lists in drop-down menus for navigation </li>
</ul>
<h2><span id="Resources">Resources</span></h2>
<h3><span id="Related_Techniques">Related Techniques</span></h3>
<ul>
<li> <a rel="nofollow" href="http://www.w3.org/TR/WCAG20-TECHS/G197.html">G197: Using labels, names, and text alternatives consistently for content that has the same functionality</a></li>
<li> <a rel="nofollow" href="http://www.w3.org/TR/WCAG20-TECHS/G61.html">G61: Presenting repeated components in the same relative order each time they appear</a></li>
<li> <a rel="nofollow" href="http://www.w3.org/TR/WCAG20-TECHS/H33.html">H33: Supplementing link text with the title attribute</a></li>
<li> <a rel="nofollow" href="http://www.w3.org/TR/WCAG20-TECHS/ARIA7.html">ARIA7: Using aria-labelledby for link purpose</a></li>
</ul>
<h2><span id="Tests">Tests</span></h2>
<h3><span id="Procedure">Procedure</span></h3>
<ol>
<li> For all actionable elements, check that they can be visually distiguished from non-actionable text </li>
<li> For all elements that appear actionable according to the styles and conventions used in the context of the app, check that it triggers an action </li>
</ol>
<h3><span id="Expected_Results">Expected Results</span></h3>
<ul>
<li> #1 and #2 are true </li>
</ul>
<h2><span id="Test_Files">Test Files</span></h2>
</body>
</html>