forked from gambogi/CSHMembersPortal
/
csh-members-portal-report.html
94 lines (94 loc) · 20.8 KB
/
csh-members-portal-report.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
<!doctype HTML><html lang="en"><head><title>csh-members-portal-report.html</title><meta charset="utf-8"><style>
table {
border-collapse: collapse;
width: 100%;
}
table,
td,
th {
border: 1px solid #3b3b3b;
}
td:not(:last-child),
th {
padding: 1em;
vertical-align: top;
text-align: left;
}
td:not([class]):last-child {
padding: 0 1em;
}
</style></head><body><div><main> <h1>CSH Members Portal Accessibility Report </h1> <div><h2>About the Evaluation</h2> <dl><dt>Report Creator </dt><dd>Olivia Dennehy </dd><dt>Evaluation Commissioner </dt><dd>Resident accessibility expert </dd><dt>Evaluation date </dt><dd>Sat October 23, 2022</dd></dl> </div> <div><h2>Executive Summary</h2> <div><p>Overall, not bad. There are things to be worked on but the site is generally very usable, understandable, operable, and robust. Below are the list of failure to be worked--
1.1.1 Non-text Content - No alt text
1.4.4 Resize text - Dropdown menu elements unclickable
2.1.1 Keyboard - Navigation tabs inaccessible via screen reader or tabulation
2.2.2 Pause, Stop, Hide - Time-based or moving media is not able to be paused, stopped, or hidden.
2.3.1 Seizures and Physical Reactions - Plugs can induce seizures or physical reactions and have no warning if they do.
2.4.3 Focus Order - Plugs and weird clock disrupt the flow of usability.
3.1.2 Language of Parts - Icons need IDs</p>
<p>Unclear--
3.3.1 Error Identification - Error pages aren't heavily considered but no obvious errors are occurring.</p>
</div> </div> <div><h2>Scope of the Evaluation</h2> <dl><dt>Website name </dt><dd>CSH Members Portal </dd><dt>Scope of the website </dt><dd>All web content of the desktop and mobile versions of "Members", located at https://members.csh.rit.edu/ </dd><dt>WCAG Version </dt><dd>2.1 </dd><dt>Conformance target </dt><dd>AA </dd><dt>Accessibility support baseline </dt><dd>The content of the site should be accessible via a screen reader (NVDA, VoiceOver, Narrator, etc.). All content will be evaluated using Edge </dd><dt>Additional evaluation requirements </dt><dd>The report will include a list of errors identified by the evaluator as well as improvement suggestions for how to make these errors accessible.</dd></dl> </div> <h2>Detailed Audit Results</h2> <h3>Summary</h3> <p>Reported on 50 of 50 WCAG 2.1 AA
Success Criteria.</p> <ul><li><span>28</span> <span>Passed</span></li><li><span>7</span> <span>Failed</span></li><li><span>1</span> <span>Cannot tell</span></li><li><span>14</span> <span>Not present</span></li><li><span>0</span> <span>Not checked</span></li></ul> <h3>All Results</h3> <h4>1 Perceivable</h4> <h5 id="guideline-11">1.1 Text Alternatives</h5> <table aria-labelledby="guideline-11"><tbody><tr><th scope="col">Success Criterion</th> <th scope="col">Result</th> <th scope="col">Observations</th> </tr> <tr><th scope="row" id="criterion-111">1.1.1: Non-text Content</th> <td><h6>Entire sample</h6> <p><span>Result:</span> Failed</p> </td> <td><h6>Entire sample</h6> <p>Observations:</p> <p>-Icons do not contain understandable ids or alt-text, but do have correlating names written out below
-Plugs do not have alt-text</p>
</td> </tr></tbody> </table><h5 id="guideline-12">1.2 Time-based Media</h5> <table aria-labelledby="guideline-12"><tbody><tr><th scope="col">Success Criterion</th> <th scope="col">Result</th> <th scope="col">Observations</th> </tr> <tr><th scope="row" id="criterion-121">1.2.1: Audio-only and Video-only (Prerecorded)</th> <td><h6>Entire sample</h6> <p><span>Result:</span> Not present</p> </td> <td><h6>Entire sample</h6> <p>Observations:</p> <p>N/A</p>
</td> </tr><tr><th scope="row" id="criterion-122">1.2.2: Captions (Prerecorded)</th> <td><h6>Entire sample</h6> <p><span>Result:</span> Not present</p> </td> <td><h6>Entire sample</h6> <p>Observations:</p> <p>N/A</p>
</td> </tr><tr><th scope="row" id="criterion-123">1.2.3: Audio Description or Media Alternative (Prerecorded)</th> <td><h6>Entire sample</h6> <p><span>Result:</span> Not present</p> </td> <td><h6>Entire sample</h6> <p>Observations:</p> <p>N/A</p>
</td> </tr><tr><th scope="row" id="criterion-124">1.2.4: Captions (Live)</th> <td><h6>Entire sample</h6> <p><span>Result:</span> Not present</p> </td> <td><h6>Entire sample</h6> <p>Observations:</p> <p>N/A</p>
</td> </tr><tr><th scope="row" id="criterion-125">1.2.5: Audio Description (Prerecorded)</th> <td><h6>Entire sample</h6> <p><span>Result:</span> Not present</p> </td> <td><h6>Entire sample</h6> <p>Observations:</p> <p>N/A</p>
</td> </tr></tbody> </table><h5 id="guideline-13">1.3 Adaptable</h5> <table aria-labelledby="guideline-13"><tbody><tr><th scope="col">Success Criterion</th> <th scope="col">Result</th> <th scope="col">Observations</th> </tr> <tr><th scope="row" id="criterion-131">1.3.1: Info and Relationships</th> <td><h6>Entire sample</h6> <p><span>Result:</span> Passed</p> </td> <td> </td> </tr><tr><th scope="row" id="criterion-132">1.3.2: Meaningful Sequence</th> <td><h6>Entire sample</h6> <p><span>Result:</span> Passed</p> </td> <td><h6>Entire sample</h6> <p>Observations:</p> <p>-Only suggestion is to either minimize and/or move "Weird Clock" because it takes up a lot of screen space and is not placed in the best order </p>
</td> </tr><tr><th scope="row" id="criterion-133">1.3.3: Sensory Characteristics</th> <td><h6>Entire sample</h6> <p><span>Result:</span> Passed</p> </td> <td><h6>Entire sample</h6> <p>Observations:</p> <p>Anything differentiated with color are also differentiated programmatically and by another sense.</p>
</td> </tr><tr><th scope="row" id="criterion-134">1.3.4: Orientation</th> <td><h6>Entire sample</h6> <p><span>Result:</span> Passed</p> </td> <td><h6>Entire sample</h6> <p>Observations:</p> <p>-Only suggestion is to minimize or restrict the size of vertical plug in a vertical orientation. It is very large it takes up a lot of space.</p>
</td> </tr><tr><th scope="row" id="criterion-135">1.3.5: Identify Input Purpose</th> <td><h6>Entire sample</h6> <p><span>Result:</span> Passed</p> </td> <td><h6>Entire sample</h6> <p>Observations:</p> <p>There are no input fields accept for a check box field to toggle icons on and off. This check box passes 2.1 WCAG standards.</p>
</td> </tr></tbody> </table><h5 id="guideline-14">1.4 Distinguishable</h5> <table aria-labelledby="guideline-14"><tbody><tr><th scope="col">Success Criterion</th> <th scope="col">Result</th> <th scope="col">Observations</th> </tr> <tr><th scope="row" id="criterion-141">1.4.1: Use of Color</th> <td><h6>Entire sample</h6> <p><span>Result:</span> Passed</p> </td> <td> </td> </tr><tr><th scope="row" id="criterion-142">1.4.2: Audio Control</th> <td><h6>Entire sample</h6> <p><span>Result:</span> Not present</p> </td> <td><h6>Entire sample</h6> <p>Observations:</p> <p>N/A</p>
</td> </tr><tr><th scope="row" id="criterion-143">1.4.3: Contrast (Minimum)</th> <td><h6>Entire sample</h6> <p><span>Result:</span> Passed</p> </td> <td><h6>Entire sample</h6> <p>Observations:</p> <p>Texts and backgrounds checked:
-White text on purple background passed at 6.5% contrast
-Gray icons on white background passed at 4.6% contrast (note that this only passes by 0.1%)
-Black text on cyan background passes at 16.74% contrast</p>
</td> </tr><tr><th scope="row" id="criterion-144">1.4.4: Resize text</th> <td><h6>Entire sample</h6> <p><span>Result:</span> Failed</p> </td> <td><h6>Entire sample</h6> <p>Observations:</p> <p>The dropdown menu options below the first 2 items listed are inaccessible in 200% zoom. As well as in 100% zoom the longer dropdowns still have their items unable to be clicked on. All dropdowns need to have a scroll implemented or do not include dropdown menus</p>
</td> </tr><tr><th scope="row" id="criterion-145">1.4.5: Images of Text</th> <td><h6>Entire sample</h6> <p><span>Result:</span> Not present</p> </td> <td><h6>Entire sample</h6> <p>Observations:</p> <p>N/A</p>
</td> </tr><tr><th scope="row" id="criterion-1410">1.4.10: Reflow</th> <td><h6>Entire sample</h6> <p><span>Result:</span> Passed</p> </td> <td> </td> </tr><tr><th scope="row" id="criterion-1411">1.4.11: Non-text Contrast</th> <td><h6>Entire sample</h6> <p><span>Result:</span> Passed</p> </td> <td> </td> </tr><tr><th scope="row" id="criterion-1412">1.4.12: Text Spacing</th> <td><h6>Entire sample</h6> <p><span>Result:</span> Passed</p> </td> <td> </td> </tr><tr><th scope="row" id="criterion-1413">1.4.13: Content on Hover or Focus</th> <td><h6>Entire sample</h6> <p><span>Result:</span> Passed</p> </td> <td><h6>Entire sample</h6> <p>Observations:</p> <p>Note that passed both while using on-mouse hover AND tabulation hover</p>
</td> </tr></tbody> </table><h4>2 Operable</h4> <h5 id="guideline-21">2.1 Keyboard Accessible</h5> <table aria-labelledby="guideline-21"><tbody><tr><th scope="col">Success Criterion</th> <th scope="col">Result</th> <th scope="col">Observations</th> </tr> <tr><th scope="row" id="criterion-211">2.1.1: Keyboard</th> <td><h6>Entire sample</h6> <p><span>Result:</span> Failed</p> </td> <td><h6>Entire sample</h6> <p>Observations:</p> <p>-The navigation tab dropdowns are inaccessable by both screen reader and tabulation+enter key actions. Only the first menu item (public site) is able to be focused on and interacted with. The rest of the menu items are read out but not able to access the dropdowns.</p>
</td> </tr><tr><th scope="row" id="criterion-212">2.1.2: No Keyboard Trap</th> <td><h6>Entire sample</h6> <p><span>Result:</span> Passed</p> </td> <td><h6>Entire sample</h6> <p>Observations:</p> <p>All keyboard-operated interactions are accessible and navigable from every part of the site. There are no "dead ends".</p>
</td> </tr><tr><th scope="row" id="criterion-214">2.1.4: Character Key Shortcuts</th> <td><h6>Entire sample</h6> <p><span>Result:</span> Not present</p> </td> <td><h6>Entire sample</h6> <p>Observations:</p> <p>No additional shortcuts are implemented.</p>
</td> </tr></tbody> </table><h5 id="guideline-22">2.2 Enough Time</h5> <table aria-labelledby="guideline-22"><tbody><tr><th scope="col">Success Criterion</th> <th scope="col">Result</th> <th scope="col">Observations</th> </tr> <tr><th scope="row" id="criterion-221">2.2.1: Timing Adjustable</th> <td><h6>Entire sample</h6> <p><span>Result:</span> Not present</p> </td> <td><h6>Entire sample</h6> <p>Observations:</p> <p>N/A</p>
</td> </tr><tr><th scope="row" id="criterion-222">2.2.2: Pause, Stop, Hide</th> <td><h6>Entire sample</h6> <p><span>Result:</span> Failed</p> </td> <td><h6>Entire sample</h6> <p>Observations:</p> <p>There is no way to pause, stop, or hide plugs or weird clock (the two automatically moving items. Suggestion to add a hide button to each element</p>
</td> </tr></tbody> </table><h5 id="guideline-23">2.3 Seizures and Physical Reactions</h5> <table aria-labelledby="guideline-23"><tbody><tr><th scope="col">Success Criterion</th> <th scope="col">Result</th> <th scope="col">Observations</th> </tr> <tr><th scope="row" id="criterion-231">2.3.1: Three Flashes or Below Threshold</th> <td><h6>Entire sample</h6> <p><span>Result:</span> Failed</p> </td> <td><h6>Entire sample</h6> <p>Observations:</p> <p>-Any moving/blinking/scrolling elements -aka plugs- must be approved by able human eyes before being implemented into circulation. "Not seizure-inducing" is not part of the criteria for approving. There for, this fails because there is still a way for sizure inducing plugs to make it onto the UI without a warning.
-Bonus moving item, Wierd Clock, does in fact move less than 3 frames per second. There for no physical reactions are to be noted as not there</p>
</td> </tr></tbody> </table><h5 id="guideline-24">2.4 Navigable</h5> <table aria-labelledby="guideline-24"><tbody><tr><th scope="col">Success Criterion</th> <th scope="col">Result</th> <th scope="col">Observations</th> </tr> <tr><th scope="row" id="criterion-241">2.4.1: Bypass Blocks</th> <td><h6>Entire sample</h6> <p><span>Result:</span> Not present</p> </td> <td><h6>Entire sample</h6> <p>Observations:</p> <p>There are no multiple web pages so this is not applicable</p>
</td> </tr><tr><th scope="row" id="criterion-242">2.4.2: Page Titled</th> <td><h6>Entire sample</h6> <p><span>Result:</span> Passed</p> </td> <td> </td> </tr><tr><th scope="row" id="criterion-243">2.4.3: Focus Order</th> <td><h6>Entire sample</h6> <p><span>Result:</span> Failed</p> </td> <td><h6>Entire sample</h6> <p>Observations:</p> <p>For the most part, the site has a meaningful order. The pain points are as listed:
-Weird clock is taking up too much screen real-estate and breaking the flow of reading.
-Plug is not at the top like the majority of CSH services so it breaks cross-platform consistency
Suggestions:
-Move Weird Clock to the bottom or a minimized size under the vertical plug and/or move the link to a new "memes" or an otherly appropriately titled section.</p>
</td> </tr><tr><th scope="row" id="criterion-244">2.4.4: Link Purpose (In Context)</th> <td><h6>Entire sample</h6> <p><span>Result:</span> Passed</p> </td> <td><h6>Entire sample</h6> <p>Observations:</p> <p>Since this site's purpose is to link to other sites its worth noting that this accessibility point has passed with flying colors.</p>
</td> </tr><tr><th scope="row" id="criterion-245">2.4.5: Multiple Ways</th> <td><h6>Entire sample</h6> <p><span>Result:</span> Not present</p> </td> <td><h6>Entire sample</h6> <p>Observations:</p> <p>There are no multiple web pages but it would be worth considering to open all links to a new tab so it is easier to return to the Members page.
Suggestion:
-Add one more attribute to the HTML anchor elements (<a>) namely, the target=_blank;</p>
</td> </tr><tr><th scope="row" id="criterion-246">2.4.6: Headings and Labels</th> <td><h6>Entire sample</h6> <p><span>Result:</span> Passed</p> </td> <td> </td> </tr><tr><th scope="row" id="criterion-247">2.4.7: Focus Visible</th> <td><h6>Entire sample</h6> <p><span>Result:</span> Passed</p> </td> <td><h6>Entire sample</h6> <p>Observations:</p> <p>A black box around the icon and name appear for a specific link. For general divs the box shows up around the whole box.</p>
</td> </tr></tbody> </table><h5 id="guideline-25">2.5 Input Modalities</h5> <table aria-labelledby="guideline-25"><tbody><tr><th scope="col">Success Criterion</th> <th scope="col">Result</th> <th scope="col">Observations</th> </tr> <tr><th scope="row" id="criterion-251">2.5.1: Pointer Gestures</th> <td><h6>Entire sample</h6> <p><span>Result:</span> Passed</p> </td> <td><h6>Entire sample</h6> <p>Observations:</p> <p>No additional multipoint or path-based gestures are included (other than the standard two-finger zoom, etc...). But the site is able to be navigated and used by any and all user input required.</p>
</td> </tr><tr><th scope="row" id="criterion-252">2.5.2: Pointer Cancellation</th> <td><h6>Entire sample</h6> <p><span>Result:</span> Passed</p> </td> <td><h6>Entire sample</h6> <p>Observations:</p> <p>No additional pointer input gestures are included (other than the standard two-finger zoom, etc...). But the site is able to be operated on any input modality required.</p>
</td> </tr><tr><th scope="row" id="criterion-253">2.5.3: Label in Name</th> <td><h6>Entire sample</h6> <p><span>Result:</span> Passed</p> </td> <td><h6>Entire sample</h6> <p>Observations:</p> <p>All components have an accompanying label and <name> tag to identify them.</p>
</td> </tr><tr><th scope="row" id="criterion-254">2.5.4: Motion Actuation</th> <td><h6>Entire sample</h6> <p><span>Result:</span> Not present</p> </td> <td><h6>Entire sample</h6> <p>Observations:</p> <p>N/A</p>
</td> </tr></tbody> </table><h4>3 Understandable</h4> <h5 id="guideline-31">3.1 Readable</h5> <table aria-labelledby="guideline-31"><tbody><tr><th scope="col">Success Criterion</th> <th scope="col">Result</th> <th scope="col">Observations</th> </tr> <tr><th scope="row" id="criterion-311">3.1.1: Language of Page</th> <td><h6>Entire sample</h6> <p><span>Result:</span> Passed</p> </td> <td><h6>Entire sample</h6> <p>Observations:</p> <p>The <style lang="en"> is included and can be determined programmatically.</p>
</td> </tr><tr><th scope="row" id="criterion-312">3.1.2: Language of Parts</th> <td><h6>Entire sample</h6> <p><span>Result:</span> Failed</p> </td> <td><h6>Entire sample</h6> <p>Observations:</p> <p>Failed because the icons are programmatically not determined. Suggest to include ids in addition to names and href.</p>
<p>In plain text, the language is understandable </p>
</td> </tr></tbody> </table><h5 id="guideline-32">3.2 Predictable</h5> <table aria-labelledby="guideline-32"><tbody><tr><th scope="col">Success Criterion</th> <th scope="col">Result</th> <th scope="col">Observations</th> </tr> <tr><th scope="row" id="criterion-321">3.2.1: On Focus</th> <td><h6>Entire sample</h6> <p><span>Result:</span> Passed</p> </td> <td> </td> </tr><tr><th scope="row" id="criterion-322">3.2.2: On Input</th> <td><h6>Entire sample</h6> <p><span>Result:</span> Passed</p> </td> <td><h6>Entire sample</h6> <p>Observations:</p> <p>When linked elements are clicked or highlighted, and when the icons are toggled off, the status is clearly shown and is understandable</p>
</td> </tr><tr><th scope="row" id="criterion-323">3.2.3: Consistent Navigation</th> <td><h6>Entire sample</h6> <p><span>Result:</span> Passed</p> </td> <td><h6>Entire sample</h6> <p>Observations:</p> <p>There are not multiple pages but the navigation bar stays consistent and understandable throughout the whole user journey. However, the drop downs are a concern that should be fixed as outlined in section 1.4.4</p>
</td> </tr><tr><th scope="row" id="criterion-324">3.2.4: Consistent Identification</th> <td><h6>Entire sample</h6> <p><span>Result:</span> Passed</p> </td> <td> </td> </tr></tbody> </table><h5 id="guideline-33">3.3 Input Assistance</h5> <table aria-labelledby="guideline-33"><tbody><tr><th scope="col">Success Criterion</th> <th scope="col">Result</th> <th scope="col">Observations</th> </tr> <tr><th scope="row" id="criterion-331">3.3.1: Error Identification</th> <td><h6>Entire sample</h6> <p><span>Result:</span> Cannot tell</p> </td> <td><h6>Entire sample</h6> <p>Observations:</p> <p>Even with no internet or other tested erroring methods, no 404 or 500 or obvious errors that impaired the site's functionality appeared.
So on one hand, no errors are being displayed, but no errors are being made to affect the site.</p>
</td> </tr><tr><th scope="row" id="criterion-332">3.3.2: Labels or Instructions</th> <td><h6>Entire sample</h6> <p><span>Result:</span> Not present</p> </td> <td><h6>Entire sample</h6> <p>Observations:</p> <p>N/A</p>
</td> </tr><tr><th scope="row" id="criterion-333">3.3.3: Error Suggestion</th> <td><h6>Entire sample</h6> <p><span>Result:</span> Not present</p> </td> <td><h6>Entire sample</h6> <p>Observations:</p> <p>N/A</p>
</td> </tr><tr><th scope="row" id="criterion-334">3.3.4: Error Prevention (Legal, Financial, Data)</th> <td><h6>Entire sample</h6> <p><span>Result:</span> Passed</p> </td> <td><h6>Entire sample</h6> <p>Observations:</p> <p>The only input field is the toggle icons on and off field. It can be reversed and checked and does not need to be confirmed because it does not have a significant impact on the functionality of the site.</p>
</td> </tr></tbody> </table><h4>4 Robust</h4> <h5 id="guideline-41">4.1 Compatible</h5> <table aria-labelledby="guideline-41"><tbody><tr><th scope="col">Success Criterion</th> <th scope="col">Result</th> <th scope="col">Observations</th> </tr> <tr><th scope="row" id="criterion-411">4.1.1: Parsing</th> <td><h6>Entire sample</h6> <p><span>Result:</span> Passed</p> </td> <td><h6>Entire sample</h6> <p>Observations:</p> <p>The HTML and JS files all pass the acceptance criteria</p>
</td> </tr><tr><th scope="row" id="criterion-412">4.1.2: Name, Role, Value</th> <td><h6>Entire sample</h6> <p><span>Result:</span> Passed</p> </td> <td><h6>Entire sample</h6> <p>Observations:</p> <p>All code files found on the GitHub page all pass the acceptance criteria</p>
</td> </tr><tr><th scope="row" id="criterion-413">4.1.3: Status Messages</th> <td><h6>Entire sample</h6> <p><span>Result:</span> Passed</p> </td> <td><h6>Entire sample</h6> <p>Observations:</p> <p>The check box for icon toggle clearly states the state it is in t the moment.</p>
</td> </tr></tbody> </table> <h2>Sample of Audited Web Pages</h2> <ol><li><span>Members</span> - <span>https://members.csh.rit.edu/</span> </li></ol> <h2>Web Technology</h2> <p>HTML,CSS,JavaScript</p> <h2>Recording of Evaluation Specifics</h2> <p></p><p>This evaluation utilized the following resources:</p>
<ul>
<li>Microsoft Edge (Version 10.14.6)</li>
<li>Google Chrome (Version 90.0.4430.212) (Official Build) (x86_64)</li>
<li>WAVE Web Accessibility Evaluation Tool (<a href="https://wave.webaim.org/">https://wave.webaim.org/</a>)</li>
<li>Windows VoiceOver Screen Reader</li>
<li>W3C Markup Validation Service (<a href="https://validator.w3.org/">https://validator.w3.org/</a>)</li>
<li>Color Shark (<a href="https://colorshark.io/">https://colorshark.io/</a>)</li>
</ul>
<p></p> </main></div></body></html>