-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathAccessibilityPrinciples.html
101 lines (95 loc) · 7.89 KB
/
AccessibilityPrinciples.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
<!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 </title>
</head>
<body id = "initial_page" class= "bodyClass">
<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 = "web_accessibilityHder">
<div id = "what_is_web_acc">
<h2> Web Accessibility</h2>
<h3> What is Web Acccessibility?</h3>
<p> Web accessibility is the inclusive practice to ensure that the web is fundamentally designed to work for all people.It is not a discrete feature of a website but an ongoing aspect of a managed process that is designed based on the variety of end users, real-world practice and public standards.</p>
<p> Web accessibility aims to make the web accessible for everyone despite their hardware, software, language, location or abilities and remove any barriers that prevent interaction by people with physical or situational impairments and socio-economic restrictions</p>
<p> Accessible web sites allow people to perceive, understand, navigate, interact with the web and contribute to the web</p>
</div>
<div id= "importance_of_acc">
<h3> Motivations and importance of web accessibility </h3>
<p> There are three main reasons that motivate people to develop accessible web content and no matter which motivation, accessible web content became important to web developers. </p>
<ol>
<li> Human-centred motivations: To help people with impairments.</li>
<li> Marketing or economic - centred motivations: Accessible website means a wider audience. <a href="https://www.worldbank.org/en/topic/disability" target="= _blank"> One billion people, or 15% of the world’s population experience some form of disability <span class="hidden_link_text">Link opens in a new window menu</span> </a>. Imagine the economic affects that Amazon for example will have if is not accessible for people with impairments.</li>
<li> Public reactions and punishment – centred motivations: Providing accessibility web content is a legal obligation based on the <a href="https://www.legislation.gov.uk/ukpga/2010/15/section/20" target="_blank">Equality Act 2010 – Gov UK.</a></li>
</ol>
<p> In addition to the above, web accessibility became essential as the web is drastically penetrates into every aspect of our lives, such as education, health care, entertainment etc., and it is only fair that web sites are accessible to everyone to ensure equality among people. </p>
<p> Even though accessible web mainly aims to assist people with disabilities, it can also benefit people that use devices with small screens i.e. smart watch, phone, devices with different input modes i.e. smart TVs. Elderly people, or people with temporal disabilities can benefit as well. For example, <a href="https://www.trustedreviews.com/news/facebook-messenger-dark-mode-3683610" target="_blank">messenger dark mode feature, <span class="hidden_link_text">Link opens in a new \window menu</span> </a> is an accessibility feature that aims to help people use the application in all the environments.</p>
</div>
<div id ="wai">
<h2> Web Accessibility Initiative (WAI) </h2>
<p>WAI provides a set of guidelines that are recognized internationally as the standard for the web accessibility. Web Content Accessibility Guidelines (WCAG) is one of these standards.</p>
</div>
<div id="wcag2">
<h3> WCAG 2.0 </h3>
<p>Are guidelines published by the WAI of the W3C. It was published as a W3C Recommendation on 11 December 2008. The WCAG cannot be enforced by the law althou W3C itself organizations based on these standards, but it cannot enforce them to follow these guidelines. It comprises of 12 guidelines that are mapped under the four POUR principles.</p>
</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>