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.
| Objective | Requirements | Min. time estimation | Description |
|---|---|---|---|
| Toggle rules manually | - | 1 min | Choose Rulesetto see which accessibility rules are on and off. (A switch in offposition equals accessibility issues.) You can either set the rules one by one, or globally with the switch on top. |
| Toggle rules programmatically | - | 1 min | Load 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 demonstration | Developer tools, HTML, CSS | 5 min | Visit 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 evaluation | Assistive technology (screen reader, etc.) | 5 min | Visit 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 validation | HTML, CSS | 5 min | Pick 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 - days | Pick 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 on how to do it within our GitHub repository.
| Task | Requirements | Min. time estimation | Description |
|---|---|---|---|
| Add more accessibility failures | git, WCAG, ... | 2 d | Get the GitHub repository and ... |
| Add one or several languages | git, JSON | 1 d | Get the GitHub repository and add language strings as done with the other languages in the language string JSON. |
| Add more products / clothes | git, JSON | 2 h | First get the GitHub 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 pages | git, Node, Javascript, React, JSX | Min. 1 d | Get the GitHub repository and copy one of the other pages in src/pages or src/page-templates, then modify the copy as needed. |
| Modify existing pages | git, Node, Javascript, React, JSX | 2-5 d | Get the GitHub repository and ... |