Universal Design Report
This report focuses on universal design and accessibility on Ygg & Lyng's website, encompassing both automatic and manual testing.
Report Link: https://docs.google.com/document/d/1GoeRKrJfDMoHsfXANK9_JwWSpeQp-3XHjLNhlP8mjhM/edit?usp=sharing
Code Examples Link: https://codepen.io/collection/gYyJRq
Report Template
To ensure an effective, structured, and clear report, I started by creating a template in Google Docs. This template defined basic elements such as font, font size, pagination, and a banner element. The banner was designed to help the reader stay informed about the section of the report they are currently viewing. Since the report is significantly long, I felt this would be practical.
Manual Testing
Manual testing was conducted to uncover potential accessibility challenges on the website. To test the user experience for people with visual impairments, Windows Screen Reader and Android Talkback were utilized. These tools read the website content, thereby revealing issues related to navigation, content comprehension, and the use of interactive elements.
Ideally, I would have used the Jaws screen reader as it is the most popular screen reader on Windows, but unfortunately, you need to purchase a license for the program.
To perform a thorough analysis, Firefox Inspect Elements was preferred over Chrome. Firefox offers extended functionality for accessibility testing. The "Accessibility Inspector" tool allows for quick and efficient measurement of text contrast, providing a scale from the lowest to the highest contrast on individual text elements. Additionally, Firefox identifies potential accessibility issues related to HTML elements and their attributes.
Automatic Testing
Following the manual testing, I performed automatic tests using various tools:
- Google Lighthouse: A tool integrated into Chrome that evaluates websites based on performance, accessibility, best practices, and SEO. Lighthouse generates a report with concrete suggestions for improvements.
- HeadingsMap (Chrome-utvidelse): Visualizes the website's heading structure (h1-h6) in a hierarchical tree, thereby revealing any missing or incorrect uses of headings, which is crucial for navigation for screen reader users.
- Siteimprove Accessibility Checker (Chrome-utvidelse): Scans the website for violations of WCAG guidelines, WAI-ARIA standards, and best practices. It then identifies issues and provides you with a list of all errors on the website.
- Wappalyzer (Chrome-utvidelse): Identifies technologies used on the website, such as CMS, programming languages, Javascript libraries, and plugins. This provides insights into potential causes of performance issues and compatibility challenges.
Documentation of Findings
During testing, all identified violations of WCAG guidelines were meticulously documented in a separate section. Each finding was briefly explained, supplemented by references to relevant WCAG criteria or other applicable resources.
Documentation of findings varied based on the complexity of each issue, but what is common among all findings is a brief explanation, links to resources like wcag or law of ux, a more detailed explanation, and a suggested solution.
Two of the findings were exceptions where I created a full section of the website from scratch. This was because these issues can be very difficult to understand if you only read about them. In these cases, I created a codepen that shows these new sections in a responsive way. These examples can be found here https://codepen.io/collection/gYyJRq
Beyond WCAG violations, other user experience issues were also recorded. These consisted of elements that potentially hindered usability but did not necessarily violate WCAG. These findings were documented separately for later elaboration.
Elaboration on Other Findings
After completing the manual and automatic testing, I went into depth on the other findings. Each issue was documented similarly to WCAG issues, and concrete suggestions for improvements were provided based on principles of universal design and usability.
Report Summary
To provide a concise overview of the key issues, I wrote a summary. This section presented the most critical findings, along with a brief explanation of why these are problematic for usability and accessibility.
Resources and References
I included a list of all resources and tools used during the preparation of the report. This included links to automatic and manual testing tools, relevant WCAG criteria, legislation related to privacy, general resources for universal design, and code examples.
By following this structured and chronological process, I ensured a thorough and informative audit report that provides Ygg & Lyng with a solid foundation to improve the website's accessibility and user experience.