-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathUnderstandable.html
135 lines (131 loc) · 8.97 KB
/
Understandable.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
<!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 - Understandable</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_examp">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="understandable_hder">
<div class="understandable">
<h2> Understandable </h2>
<p>Understandable websites are consistent in its format and presentation, simple and easy to use and comprehend, predictable in its design and usage patterns. Information and user interface are understandable by all users.</p>
<div id="under_guid">
<h3> Guidelines under “understandable” principle </h3>
<ol>
<li>Guideline 3.1: Readable content.</li>
<li>Guideline 3.2: Predictable webpages.</li>
<li>Guideline 3.3: Help users avoid and correct mistakes.</li>
</ol>
</div>
<div id="under_examp">
<h3>Examples of "Understandable" websites </h3>
<ul>
<li>A website that requires the user to fill in a form must inform the users of any errors.</li>
<li>A Website must declare the meaning of all abbreviations, acronyms and jargon used. </li>
<li>Websites that consists of multiple links must display the links in the same order in every web page so that users don’t need to memorize navigation steps for each web page.</li>
</ul>
</div>
<div id="under_tech">
<h3>Techniques to build understandable web sites based on the guidelines</h3>
<ol>
<li>
<p class="imp_text">Provide readable and understandable text</p>
<p>Content must be readable and understandable to the broadest possible audience and not just by viewing the content but also when it’s been perceived by other assistive technologies such as screen reader. The Website’s author must:</p>
<ol>
<li>Programmatically determine the language of the page</li>
<li>Provide definitions for technical content and abbreviations</li>
</ol>
<p class="imp_text">Example: Use the "lang" attribute to denote content in other language other than the specified one</p>
<div class="example">
<p class="imp_text">At the start of the html document the author must include this line so that the document language is indicated:</p>
<p> <html lang = "en"></p>
<p class="imp_text"> To denote include text in other language the lang attribute must used to indicate the language:</p>
<p> <blockquote lang="el">
<br> <p>
<br>  Θα πάρω μιαν ανηφοριά, θα πάρω μονοπάτια
<br>  να βρω τα σκαλοπάτια που παν στη λευτεριά.
<br>  Θ” αφήσω αδέλφια, συγγενείς, τη μάνα, τον πατέρα
<br>  μες στα λαγκάδια πέρα και τις βουνοπλαγιές.
<br> </p>
<br></blockquote>
</p>
</div>
</li>
<li>
<p class="imp_text">Make content operate and appear in predictable ways</p>
<p>Page navigation should be constant and consistent. This means that the main navigation mechanism must be repeated on multiple pages and appear at the same locations. Repeated user interface components must always have the same meaning and different components must have different meanings.Also changes in the website may happen only with the user's concent.</p>
<p class="imp_text"> EXAMPLE: Inform the user in advance that an action will create a pop-up window</p>
<div class="example">
<img src="images/warning.jpg" alt = "Example of a pop-up warning on button click">
</div>
</li>
<li>
<p class="imp_text">Help the users to avoid and correct their mistakes</p>
<p>Most common mistakes on a website appear on interactive forms. To help users avoid such mistakes fields must be labelled with clear disruptive text and all the required elements must be indicated. Also, if a form is submitted with error alert the user with adequate error messages to find the error and correct it.</p>
<p class="imp_text">EXAMPLE: Error idication to user when submitting a form</p>
<p class="example"> In the case that the user submits a form with invalid information in any of the fields, the server must retain the content of the form and return it indicating that an error occured.The error must be clearly described and the field that the error appeared myst be indicated so that the user can correrct the mistake easily.</p>
</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>