-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathOperable.html
150 lines (145 loc) · 10 KB
/
Operable.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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name = "author" content="Emmeleia Arakleitou">
<link href="StylingProperties.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title> Constructing a POUR website - Operable</title>
</head>
<body>
<a class="skipNavigation" href="#page_content">Skip to main content</a>
<header class = "page_header1">
<h1> Constructing a POUR website</h1>
<p> by Emmeleia Arakleitou</p>
</header>
<div class="content_list">
<button class="dropdown-btn">Web Accessibility<i class="fa fa-caret-down"></i><span class="hidden_link_text">Link opens a dropdown menu</span></button>
<div class="dropdown_content">
<a href="AccessibilityPrinciples.html"> What is web Accessibility<span class="hidden_link_text">Link opensthe same window</span></a>
<a href="AccessibilityPrinciples.html#what_is_web_acc"> Motivations<span class="hidden_link_text">Link opens the same window</span></a>
<a href="AccessibilityPrinciples.html#wai"> WAI <span class="hidden_link_text">Link opens in the same window</span></a>
</div>
<button class="dropdown-btn">Perceivable<i class="fa fa-caret-down"></i><span class="hidden_link_text">Link opens a dropdown menu</span></button>
<div class="dropdown_content">
<a href="Perceivable.html"> Guidelines <span class="hidden_link_text">Link opens in the same window</span></a>
<a href="Perceivable.html#per_guid">Examples <span class="hidden_link_text">Link opens in the same window</span></a>
<a href="Perceivable.html#perc_examp">Techniques <span class="hidden_link_text">Link opens in the same window</span></a>
</div>
<button class="dropdown-btn">Operable<i class="fa fa-caret-down"></i><span class="hidden_link_text">Link opens a dropdown menu</span></button>
<div class="dropdown_content">
<a href="Operable.html">Guidelines <span class="hidden_link_text">Link opens in the same window</span></a>
<a href="Operable.html##oper_guid">Examples <span class="hidden_link_text">Link opens in the same window</span></a>
<a href="Operable.html#oper_examp"> Techniques <span class="hidden_link_text">Link opens in the same window</span></a>
</div>
<button class="dropdown-btn">Understandable<i class="fa fa-caret-down"></i><span class="hidden_link_text">Link opens a dropdown menu</span></button>
<div class="dropdown_content">
<a href="Understandable.html">Guidelines <span class="hidden_link_text">Link opens in the same window</span></a>
<a href="Understandable.html#under_guid">Examples <span class="hidden_link_text">Link opens in the same window</span></a>
<a href="Understandable.html#under_examp"> Techniques <span class="hidden_link_text">Link opens in the same window</span></a>
</div>
<button class="dropdown-btn">Robust<i class="fa fa-caret-down"></i><span class="hidden_link_text">Link opens a dropdown menu</span></button>
<div class="dropdown_content">
<a href="Robust.html">Guidelines <span class="hidden_link_text">Link opens in the same window</span></a>
<a href="Robust.html#rob_guid">Examples <span class="hidden_link_text">Link opens in the same window</span></a>
<a href="Robust.html#rob_examp">Techniques <span class="hidden_link_text">Link opens in the same window</span></a>
</div>
</div>
<div id ="page_content">
<header class="operable_hder">
<div class="operable">
<h2> Operable </h2>
<p>Operable principle states that the user interface and navigation components must be operable by any user despite any disability, hardware, software or technologies that they use. Users can successfully use controls, buttons, navigation and other interactive elements to access the website.</p>
<div id="oper_guid">
<h3> Guidelines under "Operable" principle</h3>
<ul>
<li>Guideline 2.1: Keyboard Accessible </li>
<li>Guideline 2.2: Provide users enough time to read and use content.</li>
<li>Guideline 2.3: Do not design content in a way that is known to cause seizures.</li>
<li>Guideline 2.4: Provide ways to help users navigate, find content, and determine where they are.</li>
</ul>
</div>
<div id="oper_examp">
<h3>Examples of “Operable” websites </h3>
<ul>
<li>A navigation menu with a submenu section revealed when a user hovers over it with a mouse must have the same functionality when it receives focus either with the keyboard or any other interactive device.</li>
<li>An online form requires multiple sections from a drop-down menu but only applicable by pressing Ctrl + selecting elements from menu. This is not operable as not all users can do these two steps simultaneously.</li>
</ul>
</div>
<div id="oper_tech">
<h3> Techniques to build operable web sites based on the guidelines</h3>
<ol>
<li>
<p class="imp_text"> Enable keyboard functionality</p>
<p>Users must be able to access all functionality that is available by mouse by using a keyboard.Since no pointer is used to indicate focus, ensure that focus is indicated appropriately.</p>
<p class="imp_text"> Example: Use both mouse and keyboard handlers to update an image </p>
<div class="example">
<p class="text_inline"> < href="https://www.w3.org/wai"</p>
<p class="imp_text text_inline"> onmouseover</p>
<p class="text_inline"> ="updateImage('wai', true);" <br>  </p>
<p class="imp_text text_inline"> onfocus</p>
<p class="text_inline"> ="updateImage('wai', true); </p>
<p class="imp_text text_inline">"onmouseout= </p>
<p class="text_inline"> "updateImage('wai',false);" <br> </p>
<p class="text_inline imp_text"> onblur </p>
<p class="text_inline">="updateImage('wai',false);"> <img src="greyplus.gif" border="0" alt="" id="wai"> </a></p>
</div>
</li>
<li>
<p class="imp_text">Give users time to read and use the content</p>
<p>Not everybody reads and types with the same speed. Therefore, allow users to adjust the time limits based on their needs, re-authenticate if the session expires and pause, stop or hide moving/blinking/scrolling content.</p>
<p class="imp_text"> EXAMPLE: Retain session data for re-authentication</p>
<p class= "example"> Retain session data if a session times out for security reasons before the user finishes a task. Allow the user to log-in again and if done successfully retreive the data for the user otherwise discard the data.</p>
</li>
<li>
<p class="imp_text">Avoid content that can cause seizures.</p>
<p>Flashes at certain patterns or rates can cause users to have seizures.If possible, flashing content and animations must be avoided otherwise the user must be informed before the content is presented.Alternatives must be provided to perceive the information contained within flashing content or animations.</p>
<p class="imp_text"> Example: Allow users to indicate their motion preference in User Interfaces </p>
<div class="example">
<p class="text_inline"> @media </p>
<p class="imp_text text_inline">(prefers-reduced-motion: reduce)</p><p class="text_inline"> { </p>
<p>  .animation { <br>    animation: none; <br>  } <br>}</p>
</div>
</li>
<li>
<p class="imp_text">Make navigation easier.</p>
<p>Clear and well-organized website allow users to navigate effectively. Techniques in this area of site operability include: </p>
<ul>
<li>Clear page titles</li>
<li>Include frequent and clear headers to structure the page</li>
<li>Provide descriptive text for links as opposed to “Read More”</li>
</ul>
<p class="imp_text"> EXAMPLE: Example: Correct tabindexes to specify an alternative way to navigat content </p>
<div class="example">
<p> The list is navigated by the tab key in the order Homepage, Chapter 1, Chapter 2, Chapter 3, which it does follows the sequence of the content.</p>
<p> <ol>
<br><li><a href="main.html" tabindex="1">Homepage</a></li>
<br><li><a href="chapter1.html" tabindex="2">Chapter 1</a></li>
<br><li><a href="chapter2.html" tabindex="3">Chapter 2</a></li>
<br><li><a href="chapter3.html" tabindex="4">Chapter 3</a></li>
<br></ol></p>
</div>
</li>
</ol>
</div>
</div>
</header>
</div>
<script>
/* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content - This allows the user to have multiple dropdowns without any conflict */
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
});
}
</script>
</body>
</html>