-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathassignment4.html
126 lines (121 loc) · 9.25 KB
/
assignment4.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Assignment 4 - Lab 120</title>
<meta name="author" content="Willem van Dommelen - Ozge Karacam">
<meta name="date" content="02/02/2022"
<meta name="description" content=".">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="HTML, CSS, JavaScript">
</head>
<body>
<h1>Assignment 4 - Lab 120</h1>
<h3>Intro section </h3>
<p>The webpages created in assignment 1 and 2 do a relatively good job in terms of accessibility and usability. Both pages are accessible for different devices, and can be used accordingly.
However, there is also room for improvement. The webpage can be improved on certain things, such as but not limited to: text alternatives for non-text content could have been provided;
the webpage could have been made more adaptable; the webpage could potentially have been made more distinguishable; the webpage could have been made keyboard accessible;
and the navigability of the web page could have been; pagebreaks could have been used to increase usability of the webpage; and the dynamic table could have worked.
All in all, the webpage can be enhanced in multiple ways. Nevertheless, the accessibility and the usability of the webpage are still of a sufficient level.</p>
<h3> Accessibility highlights </h3>
<p>The 3 WCAG guidelines that are the most relevant to our page are: 1) Guideline 1.3 Adaptable; 2) Guideline 2.1 Keyboard Accessible; and 3) Guideline 2.4 Navigable.
Making the page more adaptable would make it easier for different type of users to access the page. Adding the features of keyboard accessibility will make the page advanced.
Enhancing the navigability of the page will make it easier for users to find content content and determine where they are.</p>
<h3> Improvement plan section </h3>
<p> In this the improvement plan, improvement will be prioritized as high(H), medium(M), and low(L).
<ol type= "1">
<li> H - Replacing the id attribute that is used for more than one img element to class attribute. <strong>Status:</strong> Completed.</li>
<li> H - Including missing alt attributes for img elements for text alternatives for any non-text content. <strong>Status:</strong> Completed.</li>
<li> H - Removing unvalid elements for HTML5, running HTML5 validator to double check. <strong>Status:</strong> Put on hold due to given limited time.</li>
<li> H - Indentation adjustments on only HTML file. (CSS, and JavaScript file have proper indentation.) <strong>Status:</strong> Completed</li>
<li> H - Fix on cancelling the default event handling by using AJAX. <strong>Status:</strong> Put on hold due to time limit.</li>
<li> M - Adjustments on resizing text. <strong>Status:</strong> Put on hold due to time limit.</li>
<li> M - Investigation to be done for using append functions in HTML table rows. It could be checked if it is the problem with HTML version, a missing library or something else. <strong>Status:</strong> Uncompleted due to limited time and resources.</li>
<li> L - Adding keyboard operators. <strong>Status:</strong> Put on hold due to given limited time.</li>
<li> L - Hiding buttons on print page and getting proper places for page-breaks. <strong>Status:</strong> Put on hold due to given limited time</li>
<li> L - Fix responsive web design. <strong>Status:</strong> Put on hold due to given limited time.</li>
<li> L - Meeting AAA-level requirements. <strong>Status:</strong> Canceled. Beyond the scope of our course.</li>
</ol>
</p>
<table border=1 frame=void rules=rows>
<caption>
<dl><strong>Appendix A</strong></dl>
</caption>
<tr>
<th style="width:50%">Guideline</th>
<th style="width:50%">Evaluations</th>
</tr>
<tr>
<td>Guideline 1.1 Text Alternatives: Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.</td>
<td>Guideline 1.1 has not been met by assignment 1. In case the downloading of the images would not have succeeded, there is no text alternative in place.
Moreover, there is also no text alternative for the form input boxes. An example text alternative could have been put in the input boxes to demonstrate to the user how the input should look like.</td>
</tr>
<tr>
<td>Guideline 1.3 Adaptable: Create content that can be presented in different ways (for example simpler layout) without losing information or structure.</td>
<td>Guideline 1.3 has partly been met by assignment 1. The responsive web design works partly, which causes the content to not be utterly adaptable to every user.
Furthermore, a correct reading sequence has not been determined.</td>
</tr>
<tr>
<td>Guideline 1.4 Distinguishable: Make it easier for users to see and hear content including separating foreground from background.</td>
<td>Guideline 1.4 has partly been met by the assignment.
The visuals are distinguishable from each other, making it easy for the users to separate foreground from background.
The contrast ratio mentioned in the guideline has also been met by the assignment. This ratio ensures that people with bad vision are also able to use the website.
The requirement of resize text has not been met. The responsive web design of the website does not completely work, meaning that the resizing of text could cause problems.
On top of that, the colours cannot be selected by the user. This caused the AAA-level 1.4.8 requirement to not be met.</td>
</tr>
<tr>
<td>Guideline 2.1 Keyboard Accessible: Make all functionality available from a keyboard.</td>
<td>Guideline 2.1 has not been met by assignment 1. Users cannot navigate through the website with the keyboard.
Moreover, the user is not advised a method for moving away.
The JavaScript added in Assignment 2 has made the operability of the web page much better.
However, the added content did not add keyboard operators.</td>
</tr>
<tr>
<td>Guideline 2.4 Navigable: Provide ways to help users navigate, find content, and determine where they are.</td>
<td>Guideline 2.4 has partly been met by the assignments. The web pages do have titles that descripe topic or purpose.
Moreover, the link (in context) always shows the purpose, making it easy for the reader to navigate through the website.
The JavaScript was of great help, as it fixed the 2.4.5 and 2.4.7 requirements.
The AAA-level has not been met by the assignments, unfortunately.
The 2.4.8 requirement, which states that "information about the user's location within a set of Web pages is available",
has not been met, for instance.</td>
</tr>
</table>
<table border=1 frame=void rules=rows>
<caption>
<dl><strong>Appendix B</strong></dl>
</caption>
<tr>
<th style="width:50%">TA Feedback</th>
<th style="width:50%">Evaluations</th>
</tr>
<tr>
<td>A1 HTML Validator check: Error(s) found.</td>
<td>There have been some errors and warning on HTML5 validator. Valid HTML5 elements should have been double checked to not get any errors. </td>
</tr>
<tr>
<td>A1 HTML Miscellaneous Features: Neat and structured HTML code, could use indents</td>
<td> It has no impact on the usability or accessibility of the page however it is important to have proper indentation to keep the code clear for further needs and new developers to work on.</td>
</tr>
<tr>
<td>A1 CSS Print style: Things such as the form and the submit button of the form and links should not be present in the print-version of the page, and pagebreaks could've been better.</td>
<td>Print page desing should have been defined from actual page design to hide buttons and have the pagebreaks in sensible places.</td>
</tr>
<tr>
<td>A1 CSS Responsive design: Text can be too small at times, background of header and background of lower table not properly responsive.</td>
<td>CSS could have been better coded in matter of text font-size and backround.Backround items defined in a class but it could be improve to have it responsive.</td>
</tr>
<tr>
<td>A1 CSS Browser compatibility report: Missing.</td>
<td>It was included on the top of the HTML file in description of head. So we could not understand what was missing for this part. As it is explained in the description,
it was tested for different browsers and seen to work fine with both.</td>
</tr>
<tr>
<td>A2 Dynamic table: 10p for using jquery to send correct get request</td>
<td> Dynamic table was not visible on the web page since it could not be done with append functions (appendTo, appendChild) in the end to make it appear on the table eventhough all the rows were created correctly up until it comes to insert them onto the table. </td>
</tr>
<tr>
<td>A2 Form submit as SPA (single page application): 5p for correctly getting form values from the DOM tree 10p for correctly posting them to the server 5p for cancelling the default event handling </td>
<td> It was missing to cancel the default event handling.</td>
</tr>
</table>
</body>