How to's

How to use this website

This website can be used in several ways. In the following, we give you a couple of suggestions.

Usage suggestions
ObjectiveRequirementsMin. time estimationDescription
Toggle rules manually-1 minChoose Ruleset to see which accessibility rules are on and off. (A switch in off position equals accessibility issues.) You can either set the rules one by one, or globally with the switch on top.
Toggle rules programmatically-1 minLoad this website with ?enableRules=false in the URI to disable all rules.?enableRules=true in the URI enables all rules. You can also use the shortcut path v1 to switch on all rules and v2 to switch off all rules.
A11Y failure demonstrationDeveloper tools, HTML, CSS5 minVisit an arbitrary page, then play with the toggles of your choice in the settings menu while watching the markup in your browser's developer tools as failures are injected into the page or taken away. Some errors may become visible in the graphical user interface, others not.
Failure impact evaluationAssistive technology (screen reader, etc.)5 minVisit an arbitrary page with the desired assistive technology and turn on / off A11Y failures of your choice in the settings menu. Study what impact the injection of A11Y failures has with regard to what content can or cannot be accessed, and potentially how the user experience changes. The aforementioned can also be carried out in combination with impairment simulation tools, or real users.
A11Y checker validationHTML, CSS5 minPick a page and adjust the injection of A11Y failures as desired. Then pass the static page URI as computed to the accessiblity checker of your choice to study whether the A11Y failures are properly detected. Count false positives and negatives.
User test baseline determination-hours - daysPick an audit metric such as SUS. Then calculate the metric for the solution you need to assess, as well as for this website, by letting users test both as part of task assignments. Determine the chosen metric(s) for each user. Compare both metrics with each other for various user groups.

How to extend this website

The project / website can be extended in multiple ways. Here, we give you a couple of suggestions.

Task suggestions
TaskRequirementsMin. time estimationDescription
Add more accessibility failuresgit, WCAG, ...2 dGet the repository and ...
Add one or several languagesgit, JSON1 dGet the repository and add language strings as done with the other languages in the language string JSON.
Add more products / clothesgit, JSON2 hFirst get the repository. Decide which product categories you want to add. See the type fields in src/data/products.js for existing categories. For each new product, copy the picture to src/images/products/, then add another object in the array of products in products.js according to the structure of existing objects. Before you go live, do not forget to add the appropriate objects in the array of credits in src/data/credits.js.
Add other pagesgit, Node, Javascript, React, JSXMin. 1 dGet the repository and copy one of the other pages in src/pages or src/page-templates, then modify the copy as needed.
Modify existing pagesgit, Node, Javascript, React, JSX2-5 dGet the repository and ...