eth-janishutz/fundamentals-of-webengineering
1
0
Fork 0
mirror of https://github.com/janishutz/fundamentals-of-webengineering.git synced 2025-11-25 05:44:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add report

Browse Source
This commit is contained in:
Janis Hutz
2025-10-07 21:01:35 +02:00
parent 689bcfa3d1
commit 5b08248faf
3 changed files with 45 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
task_1_html_css/janishutz.com-accounts-report.pdf Normal file
View File

Binary file not shown.

1
task_1_html_css/janishutzcom-accounts-evaluation.json Normal file
View File

File diff suppressed because one or more lines are too long

44
task_1_html_css/janishutzcom-accounts-report.html Normal file
View File

@@ -0,0 +1,44 @@
<!doctype HTML><html lang="en"><head><title>janishutzcom-accounts-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>janishutz.com Accounts</h1> <div><h2>About the Evaluation</h2> <dl><dt>Report Creator </dt><dd>Janis Hutz </dd><dt>Evaluation Commissioner </dt><dd>Janis Hutz, Robin Bacher </dd><dt>Evaluation date </dt><dd>Tue Oct 07 2025</dd></dl> </div> <div><h2>Executive Summary</h2> <div><span>Not provided</span></div> </div> <div><h2>Scope of the Evaluation</h2> <dl><dt>Website name </dt><dd>janishutz.com accounts </dd><dt>Scope of the website </dt><dd>https://account.janishutz.com/login </dd><dt>WCAG Version </dt><dd>2.1 </dd><dt>Conformance target </dt><dd>AA </dd><dt>Accessibility support baseline </dt><dd><span>Not provided</span> </dd><dt>Additional evaluation requirements </dt><dd><span>Not provided</span></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>27</span> <span>Passed</span></li><li><span>2</span> <span>Failed</span></li><li><span>4</span> <span>Cannot tell</span></li><li><span>17</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> <p><span>Result:</span> Passed</p> </td> <td> <p>Observations:</p> <p>Fully passed, all inputs have placeholder text and all images (only one being my logo) have an 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> <p><span>Result:</span> Not present</p> </td> <td> </td> </tr><tr><th scope="row" id="criterion-122">1.2.2: Captions (Prerecorded)</th> <td> <p><span>Result:</span> Not present</p> </td> <td> </td> </tr><tr><th scope="row" id="criterion-123">1.2.3: Audio Description or Media Alternative (Prerecorded)</th> <td> <p><span>Result:</span> Not present</p> </td> <td> </td> </tr><tr><th scope="row" id="criterion-124">1.2.4: Captions (Live)</th> <td> <p><span>Result:</span> Not present</p> </td> <td> </td> </tr><tr><th scope="row" id="criterion-125">1.2.5: Audio Description (Prerecorded)</th> <td> <p><span>Result:</span> Not present</p> </td> <td> </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> <p><span>Result:</span> Not present</p> </td> <td> </td> </tr><tr><th scope="row" id="criterion-132">1.3.2: Meaningful Sequence</th> <td> <p><span>Result:</span> Not present</p> </td> <td> </td> </tr><tr><th scope="row" id="criterion-133">1.3.3: Sensory Characteristics</th> <td> <p><span>Result:</span> Not present</p> </td> <td> </td> </tr><tr><th scope="row" id="criterion-134">1.3.4: Orientation</th> <td> <p><span>Result:</span> Passed</p> </td> <td> <p>Observations:</p> <p>There are (if I remember correctly) 7 different sizes specifically optimized and scaling is fully dynamic in between</p>
</td> </tr><tr><th scope="row" id="criterion-135">1.3.5: Identify Input Purpose</th> <td> <p><span>Result:</span> Passed</p> </td> <td> <p>Observations:</p> <p>If a user fails to provide (or provides an invalid input), an error message is displayed and the input is highlighted</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> <p><span>Result:</span> Passed</p> </td> <td> <p>Observations:</p> <p>There are various text elements on the page that indicate what to do on the page. The most important elements use a different colour</p>
</td> </tr><tr><th scope="row" id="criterion-142">1.4.2: Audio Control</th> <td> <p><span>Result:</span> Not present</p> </td> <td> </td> </tr><tr><th scope="row" id="criterion-143">1.4.3: Contrast (Minimum)</th> <td> <p><span>Result:</span> Passed</p> </td> <td> <p>Observations:</p> <p>Black text on white background or white text on black background</p>
</td> </tr><tr><th scope="row" id="criterion-144">1.4.4: Resize text</th> <td> <p><span>Result:</span> Failed</p> </td> <td> <p>Observations:</p> <p>Layout breaks (text cut off), but is still somewhat usable</p>
</td> </tr><tr><th scope="row" id="criterion-145">1.4.5: Images of Text</th> <td> <p><span>Result:</span> Passed</p> </td> <td> <p>Observations:</p> <p>Logo has an alt text</p>
</td> </tr><tr><th scope="row" id="criterion-1410">1.4.10: Reflow</th> <td> <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> <p><span>Result:</span> Not present</p> </td> <td> </td> </tr><tr><th scope="row" id="criterion-1412">1.4.12: Text Spacing</th> <td> <p><span>Result:</span> Cannot tell</p> </td> <td> </td> </tr><tr><th scope="row" id="criterion-1413">1.4.13: Content on Hover or Focus</th> <td> <p><span>Result:</span> Failed</p> </td> <td> <p>Observations:</p> <p>No title attributes present</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> <p><span>Result:</span> Passed</p> </td> <td> <p>Observations:</p> <p>Navigable using tab and enter</p>
</td> </tr><tr><th scope="row" id="criterion-212">2.1.2: No Keyboard Trap</th> <td> <p><span>Result:</span> Passed</p> </td> <td> </td> </tr><tr><th scope="row" id="criterion-214">2.1.4: Character Key Shortcuts</th> <td> <p><span>Result:</span> Not present</p> </td> <td> </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> <p><span>Result:</span> Not present</p> </td> <td> </td> </tr><tr><th scope="row" id="criterion-222">2.2.2: Pause, Stop, Hide</th> <td> <p><span>Result:</span> Not present</p> </td> <td> </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> <p><span>Result:</span> Passed</p> </td> <td> </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> <p><span>Result:</span> Passed</p> </td> <td> <p>Observations:</p> <p>None are present</p>
</td> </tr><tr><th scope="row" id="criterion-242">2.4.2: Page Titled</th> <td> <p><span>Result:</span> Passed</p> </td> <td> <p>Observations:</p> <p>This (and all other pages) have a sensible title</p>
</td> </tr><tr><th scope="row" id="criterion-243">2.4.3: Focus Order</th> <td> <p><span>Result:</span> Passed</p> </td> <td> <p>Observations:</p> <p>Email &gt; Password &gt; Log in</p>
</td> </tr><tr><th scope="row" id="criterion-244">2.4.4: Link Purpose (In Context)</th> <td> <p><span>Result:</span> Passed</p> </td> <td> </td> </tr><tr><th scope="row" id="criterion-245">2.4.5: Multiple Ways</th> <td> <p><span>Result:</span> Passed</p> </td> <td> <p>Observations:</p> <p>It technically is the first page, but there are multiple ways to reach it, even from other services when using Single Sign On</p>
</td> </tr><tr><th scope="row" id="criterion-246">2.4.6: Headings and Labels</th> <td> <p><span>Result:</span> Passed</p> </td> <td> </td> </tr><tr><th scope="row" id="criterion-247">2.4.7: Focus Visible</th> <td> <p><span>Result:</span> Passed</p> </td> <td> <p>Observations:</p> <p>True by default</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> <p><span>Result:</span> Not present</p> </td> <td> </td> </tr><tr><th scope="row" id="criterion-252">2.5.2: Pointer Cancellation</th> <td> <p><span>Result:</span> Not present</p> </td> <td> </td> </tr><tr><th scope="row" id="criterion-253">2.5.3: Label in Name</th> <td> <p><span>Result:</span> Passed</p> </td> <td> <p>Observations:</p> <p>name and id match, as well as (to a reasonable extent) the input's placeholder</p>
</td> </tr><tr><th scope="row" id="criterion-254">2.5.4: Motion Actuation</th> <td> <p><span>Result:</span> Not present</p> </td> <td> </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> <p><span>Result:</span> Cannot tell</p> </td> <td> <p>Observations:</p> <p>Defaults to English, can be dynamically changed to German, but since using Vue SPA, will not change the underlying html</p>
</td> </tr><tr><th scope="row" id="criterion-312">3.1.2: Language of Parts</th> <td> <p><span>Result:</span> Cannot tell</p> </td> <td> </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> <p><span>Result:</span> Passed</p> </td> <td> </td> </tr><tr><th scope="row" id="criterion-322">3.2.2: On Input</th> <td> <p><span>Result:</span> Passed</p> </td> <td> </td> </tr><tr><th scope="row" id="criterion-323">3.2.3: Consistent Navigation</th> <td> <p><span>Result:</span> Passed</p> </td> <td> <p>Observations:</p> <p>True inherently from using the Vue router and the same transitions on the entire page</p>
</td> </tr><tr><th scope="row" id="criterion-324">3.2.4: Consistent Identification</th> <td> <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> <p><span>Result:</span> Passed</p> </td> <td> <p>Observations:</p> <p>Many different, descriptive error messages</p>
</td> </tr><tr><th scope="row" id="criterion-332">3.3.2: Labels or Instructions</th> <td> <p><span>Result:</span> Passed</p> </td> <td> <p>Observations:</p> <p>placeholders and error highlighting</p>
</td> </tr><tr><th scope="row" id="criterion-333">3.3.3: Error Suggestion</th> <td> <p><span>Result:</span> Not present</p> </td> <td> <p>Observations:</p> <p>Not possible to implement in this case</p>
</td> </tr><tr><th scope="row" id="criterion-334">3.3.4: Error Prevention (Legal, Financial, Data)</th> <td> <p><span>Result:</span> Passed</p> </td> <td> <p>Observations:</p> <p>Email verification, email, username and password updating possible</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> <p><span>Result:</span> Passed</p> </td> <td> <p>Observations:</p> <p>Eslint go brr</p>
</td> </tr><tr><th scope="row" id="criterion-412">4.1.2: Name, Role, Value</th> <td> <p><span>Result:</span> Passed</p> </td> <td> <p>Observations:</p> <p>Inherently true by using Vue</p>
</td> </tr><tr><th scope="row" id="criterion-413">4.1.3: Status Messages</th> <td> <p><span>Result:</span> Cannot tell</p> </td> <td> </td> </tr></tbody> </table> <h2>Sample of Audited Web Pages</h2> <ol><li><span>Login</span> - <span>https://account.janishutz.com/login</span> </li></ol> <h2>Web Technology</h2> <p>HTML,CSS,JavaScript</p> <h2>Recording of Evaluation Specifics</h2> <p>Not provided</p> </main></div></body></html>