-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
140 lines (107 loc) · 10.4 KB
/
index.html
File metadata and controls
140 lines (107 loc) · 10.4 KB
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
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>Project Vibl</title>
<link rel="icon"
type="image/png"
href="https://lh3.googleusercontent.com/NITU1UeIqv6Wjp5N6oSxW3urtGRlpB4DNtR482LWKox_eW-INNihl5kSrxywhZjTucucXO8e4S8pmh-NVcVhq9sn1hzXcmHgJIgqkYugCBZmicCxVjEPxibDH6mfyF_2uztCXY4AAR3fLz8apXZwCyArp5yq-h52NdkinJioxRWQAyNF7tf4Og7EKnFklyzN0T1ieq4ok_Liu14JGg6x1Z88ninUExArBFhDgun4hEah_cwmZKUD-JePsMmbLPdB4iw8iDn1AfWgfybtDpDSN9BI8N3Z-qInDDgY3bTgHvoGH_01VI36boXW_UtByY-dER_URHCQf9Mr0ylmywgeVPgz3AZIUSlSWss21dVeQISiuEEiG24ybmOLbKRYZYkwrgrBCDQUUcUWPwbIMRW3k60ZCSYkVQ1bDMpZQxyKeJeMQFY_yuM5auincsta48BacHX99VSlUF3OyCvBy03R3XlfcKIYVZi_jk971oOfULs2sjKvLxUmVjmBJsJwuRAJQj3Tv2AsF9pcSIH0cPd5YvTIN7z5iR0uEFIQBIVe2S93B60T2FnuU7d9MgjNVmF7ngql=w490-h350-no">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="stylesheets/normalize.css" media="screen">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen">
<link rel="stylesheet" type="text/css" href="stylesheets/github-light.css" media="screen">
</head>
<body>
<section class="page-header">
<h1 class="project-name">Project Vibl</h1>
<h2 class="project-tagline">A Feedback tool for Web developers to improve the accessibility of applications they build</h2>
<a href="https://github.com/achinkulshrestha/accessibility" class="btn">View files on GitHub</a>
<a href="https://github.com/eyeccc/Web_accessibility/blob/gh-pages/Report.pdf" class="btn">View our study report</a>
<!--a href="https://github.com/eyeccc/Web_accessibility/tarball/master" class="btn">Download .tar.gz</a-->
</section>
<section class="main-content">
<h3>
<a id="welcome-to-our-project-pages" class="anchor" href="#welcome-to-our-project-pages" aria-hidden="true"><span class="octicon octicon-link"></span></a>Welcome to Our Project Page!</h3>
<p>This webpage is for our project in CS770 Human-Computer Interaction. The goal of the project is to build a
tool that helps check the accessibility of a webpage and encourages web developers build a more accessible website.</p>
<h3>
<a id="motivation" class="anchor" href="#motivation" aria-hidden="true"><span class="octicon octicon-link"></span></a>Motivation</h3>
<p>Although there are different guidelines and laws to ensure the accessibility of a websites, there are
still plenty of websites not accessible enough for visually impaired users. According to
<a href="http://news.bbc.co.uk/2/hi/technology/6210068.stm">this website</a>,
97 % of websites does not provide minimum levels of accessibility. We think it is important to help
increase the rate of accessibility of all websites. Therefore, we decide to build a tool that
helps web developers add accessibility to their websites.</p>
<h3>
<a id="research_question" class="anchor" href="#research_question" aria-hidden="true"><span class="octicon octicon-link"></span></a>Research Question</h3>
<li>What are the current challenges for developers to make applications accessible?</li>
<li>How can we design effective tool to help developers make websites accessible?</li>
<li>What is the effect of Vibl on accessibility during web developers’ designing process?</li>
<h3>
<a id="related-work" class="anchor" href="#related-work" aria-hidden="true"><span class="octicon octicon-link"></span></a>Related Work</h3>
<p>There are plenty of reasons that developers do not design for accessibility. Previous research papers show that …
<li>Developers are lacking of awareness of the need of different users</li>
<li>Population of potential users with disability is small</li>
<li>It is hard to incorporate all special needs for different users</li>
</p>
<h3>
<a id="design" class="anchor" href="#design" aria-hidden="true"><span class="octicon octicon-link"></span></a>Design of Our Tool</h3>
<li>Functions of the tool
<ul>1. Warning message about which accessibility guideline your website does not pass.</ul>
<ul>2. Encouragement message about which accessibility guidelines are successfully included in your website.</ul>
</li>
<img src="https://lh3.googleusercontent.com/8bApTYbfgKhjvTCeKjcz-XDA7j_-WZ83HiczrJ2OeK9AMUN0H0OqwMY7FF-O0qxB_xklmYMkTxy_ZlCk9-lP5uLotjKKuZ71Y-NC25tPRKLMyKzhsHnnyvjnYaXs6b4EkvxMifRmM5jjWKomRrP2FviExH8rA9BvT2ii-pGxSDOv3qXfQxtIyNIujiC3umKDD3P8cinXwtUuBVf0WxRmfIEomjXun9dkLMi0Y4Fu7ywhYq_cVp2XKeBDKbwhxs0fRSbhaMaakj4tBbFmpfywSTheOm10lkhu68a2yRiFCxpi-JAVrpOFGwmAwBSO2LSyL5fG9Ewv_x54F8v1vTeVRZKFawodecY1HK6z51mxgn45y0az2PmpoXygQn11CGDPoXV33Hm43VaWL9a2JIEWiS71p31Fz2xxcWflSA_eeH-mLDe8XXjldkdXO65-MJXa5Bf5UGogNWXmSrEE5G1VJw55Wm6VEV5C6W9kQCTQPrcKbsGOEHKZDebly6ga3lItbCwPoFk7NlGq_v5tXJETv2pfdZOv6UlopYaTF7tBav64oMu9B392iIRfYPopbQDEpSET=w1335-h643-no" alt="demo warning message">
<img src="https://lh3.googleusercontent.com/v8E-mldRzGgMMRUi_b8HEtjnnmc0VKItnOEx5CLtLLUFaoRERPPkoghx3GANcqoqyrmp-VTGQ7q8kn_g7tWjXopnQVSyQJQ-Oq0sFBmcIZetQwfEx3_aMpsoXyIrrD3dNt_Tn2mdIzY5LtyUuj00y2Lix3xc-NFGgV6Mjf6OOV6FSbUeS-AknjaPUlXAlHjTcIBjGaO30K7U8GKMl3jVOvQhL_tfNr1ts5Y1osIr5QDHBXOJMwwiT_LeiPeKhymWFKy0ZiZyfzBfpJkFExNlqKTiHeIHV4FxOsoqfvBgjBcbvJwJnntcMhPdJ72Lh0JpWqaSdy2qcFivAE4ekW93GpavwWV5NAZ_BlZ6qnvv-e2ySxG2QMQaSPcub87opOJaqx0U6khGeps2GCW4wCu7nNxRjoWOaKf2QA7YtY0cYNGoTCcZuKRP76nJ3SoEWkM1Sj-6JnvXG0lzXb0yrpKrbE7ERfeCcRWHLOq8CEnFJB-BdCTlJUvNdf4kipBV9-BRIXe5DqBQ1xBw9rBjVc5CjLRd6DwOpn1zfqNSQctkvENYQCqDHyvC3UhSLfeKMitF8cMy=w1348-h642-no" alt="demo passing rules">
<li>Gamification
<ul>1. Give you the information that how many other websites successfully pass the test that your website does not.</ul>
<ul>2. Give encouragement message that how many test your website successfully pass.</ul>
</li>
<img src="https://lh3.googleusercontent.com/kug12KvSCXb6A19JvJCjLzkwrXKFsEThYQ3qNDCJ2xP3UPram29-F4RKpX_AA-pmnhXTVd350NOAem8OL90DkG7K76DGeFZTWJAFm36kkCgAowN1deFYDlTsoBJpkF4bcTDp_X6361yiGE8_-msIxAXU566z8IRsTfN2A8DU2gkW5MwZzs2VvJ927X_KAdpwjWMXkvCpmrQFK9dGnVbAz89xs1KkJI62rMEPHUmAn0339E8pemqXsOf6UJ2mBIl6IkqUpoCj11tMcZbgrLtU_p0voxXdxYCmztFxlpqeiSlJ9hVDYTXi9dhIR0y7FDM6lYDg66np2w60tau043bLKfNVBRLg0H5ug6jsaXReSceiR97sf7lMaxbSENQJM_54x92giJDesmGJ24Ghc9XtU_ZVNpIgzAMB4yL47XEYst3ySWoaTqL8bANU2jCK_Q-zGd0cLQUz1yZ16_B1EiiBDAd59k-9zMKKbyyaxjfnAsL31h92DY6EVvdOG8mNkdztVRJCH8g76GYOmkUyk335EzcG6XB9gjovWsSaN0ozvyJNhueRbfDLeK07O3MntDtIJVkx=w413-h643-no" alt="demo gamification">
<li>Learning
<ul>1. Give you a <a href="http://eyeccc.github.io/Web_accessibility/Guideline_page.html">guideline</a> a day
to help you learn more about web accessibility.</ul>
</li>
<img src="https://lh3.googleusercontent.com/BkfO_GaAlrXhYcPb9X2ic2ASmQWtCAaRh859M0bbRl1quBAYxWMrGUZsAA1puij-5P7fYe563HkNa7k4Pmo3Xg63m5yNqXMPcWQkkuQ6r1VaqP0TrcmbengSUMxX-AcfIi08eC98f01uTwvcAgbZQW67DegQbuQ8gUmeNB2C2e0pFDHEtc3C14cYG5awSdcCD3QI7jUk4fRX4Tz7sv9UGLpzaK8LulIF7XpRvdeF4Ws4_qVDGGPFSjHDjhZ6n7_kfN1O7P0BsR06WytqFyOQIwJQVAs4tHCNCSlueLNDQsGi-a-aorBA3e1psNMC9T1SHlvtVFiZPb8RUOgPgsBJV1pbyMgoZNKPiNze4FhhyD97r6jh5QLfWaT5gvslWA5o_REU9f10YnQZdTSdsliL9tcWC8s60pliPd402_hr8UtUMMZbiqrTz6psw2ARENAfsb4A_1HrLw9q84JAqI5q2jL0-f-usrvYP5PnAqgx3KsAebgVsK02HsTuGokEoLXraJKEbNWjEiOJwagsM57RcarqLbPra-uER1g9kTVq9gdIbZcTFvrw7LUWtiP0sx-A3mAN=w627-h213-no" alt="demo learning rules">
<h3>
<a id="hypo" class="anchor" href="#hypo" aria-hidden="true"><span class="octicon octicon-link"></span></a>Our Hypothesis</h3>
<p>We assume by using our tool, web developers can use less extra effort to incorporate accessibility in their websites and
they can learn more knowledge about accessibility rules during the process.</p>
<h3>
<a id="study-design" class="anchor" href="#study-design" aria-hidden="true"><span class="octicon octicon-link"></span></a>Design of Our Study</h3>
<li>Interview web developers to know the current challenge of adding web accessibility.</li>
<li>Design tools based on the interviews.</li>
<li>Evaluation of effect of the tools on accessibility.</li>
<h3>
<a id="result" class="anchor" href="#result" aria-hidden="true"><span class="octicon octicon-link"></span></a>Result</h3>
<p>The main result for Vibl: we have significant improvement on the easiness of learning
web accessibility guidelines and the easiness of adding accessibility to developers' websites.</p>
<h3>
<a id="discussion" class="anchor" href="#discussion" aria-hidden="true"><span class="octicon octicon-link"></span></a>Discussion and Future Work</h3>
<p>The improvement for the motivation on adding web accessibility is small. We
will work on this. Moreover, we plan to add more functions to make web developers incorporate
accessibility in their works more easily.</p>
<h3>
<a id="authors-and-contributors" class="anchor" href="#authors-and-contributors" aria-hidden="true"><span class="octicon octicon-link"></span></a>Authors and Contributors</h3>
<p>Achin Kulshrestha (<a href="https://github.com/achinkulshrestha">@achinkulshrestha</a>),
Chih-Ching Chang (<a href="https://github.com/eyeccc">@eyeccc</a>),
Akshay Uttamani</p>
<h3>
<a id="reference" class="anchor" href="#reference" aria-hidden="true"><span class="octicon octicon-link"></span></a>Reference</h3>
<p>Something will be added. W3C</p>
<h3>
<a id="thanks" class="anchor" href="#thanks" aria-hidden="true"><span class="octicon octicon-link"></span></a>Special Thanks</h3>
<p>We appreciate the people at Practicum for letting us interview their awesome team of professional
web developers and their valuable feedback for the Vibl tool.
We appreciate the people at <a href="https://www.sudo.com.tw/">Sudo</a> for letting us interview as well.
Moreover, we appreciate the help from our instructor, Dr. Bilge Mutlu.</p>
<h3>
<a id="support-or-contact" class="anchor" href="#support-or-contact" aria-hidden="true"><span class="octicon octicon-link"></span></a>Support or Contact</h3>
<p>Having trouble with Pages? Check out our <a href="https://help.github.com/pages">documentation</a> or <a href="https://github.com/contact">contact support</a> and we’ll help you sort it out.</p>
<footer class="site-footer">
<span class="site-footer-owner"><a href="https://github.com/eyeccc/Web_accessibility">Web Accessibility Project Page</a> is maintained by <a href="https://github.com/eyeccc">eyeccc</a>.</span>
<span class="site-footer-credits">This page was generated by <a href="https://pages.github.com">GitHub Pages</a> using the <a href="https://github.com/jasonlong/cayman-theme">Cayman theme</a> by <a href="https://twitter.com/jasonlong">Jason Long</a>.</span>
</footer>
</section>
</body>
</html>