-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathRobust.html
107 lines (101 loc) · 5.96 KB
/
Robust.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
<!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 - Robust</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="robust_hder">
<div class="robust">
<h2> Robust </h2>
<p> Websites must be robust in a way that works reliably on a wide range of user agents, browsers, assistive technologies, mobile devices including elements with old software and hardware. Therefore, users can choose any technology to interact with websites.</p>
<div id="rob_guid">
<h3> Guideline under "Robust" principle </h3>
<ul>
<li>Guideline 4.1: Maximize compatibility with current and future user agents, including assistive technologies. </li>
</ul>
</div>
<div id="rob_examp">
<h3>Examples of "Robust" websites </h3>
<ul>
<li>Website that are compatible with all browsers.</li>
<li>Websites accessible to assistive technologies such as screen reader or Braille Device etc.</li>
<li>Websites that include features for alternative inputs such as keyboard navigation, voice commands etc.</li>
</ul>
</div>
<div id="rob_tech">
<h3>Techniques to build robust web sites based on the guidelines</h3>
<ul>
<li>
<p class="imp_text"> Content is compatible with current and future user tools</p>
<p>This can be achieved with:</p>
<ul>
<li>Responsive design and cross-browser compatibility (the website content or functionality will not change from browser to browser.)</li>
<li>Reliable and interpretable mark-up </li>
</ul>
<p class="imp_text"> EXAMPLE: Use of online validation tools to check validity of the HTML pages and ensure mark-up reliability <p>
</li>
</ul>
</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>