Update Universal Design

Universal-Design.md

@@ -1,7 +1,11 @@
+[[_TOC_]]
+
 Good universal design is very important for any product. Particularly with web applications like ours, it can be critical to achieving good user experiences. 
 
 __To achieve great Universal Design, we followed Don Norman's seven fundamental design principles.__
 
+## Don Norman's seven design principles
+
 #### 1.	Discoverability (Visibility) 
 Discoverability offered a certain challenge to us, as we set ambitious goals for our product and wanted to include all functionality we and the user deemed necessary. This meant that the front page needed options for editing or viewing each tournament, creating new tournaments, viewing tournament history, user profiles and logging out. For discoverability we could have added all these functions to the front page of the application, however, this would go against 	other principles. 
 We decided that the most important functions that would see the most use were creating, editing and viewing tournaments. For this reason, we added obvious functionality for performing these functions on the front page, and placed the history, profile and logout functions in a hamburger menu. We feel that this gives good discoverability as it is easy to understand what the web application is meant to be used for, while also having all the functionality available.
@@ -35,24 +39,28 @@ Our steps to follow this principle include, but are not limited to:
 
 <br />
 
-## UD Testing
+## UD Testing with Microsoft's "Accessibility Insights for Web"
-### Microsoft's "Accessibility Insights for Web" Tests
+
-#### First test of web application using Microsoft “Accessibility Insights for Web” – MVP
+All test summaries can be found in documentation/UD_Tests
-__Purpose__
+
+### First test of web application using Microsoft “Accessibility Insights for Web” – MVP
+
+#### Purpose
 
 - Check that each page meets the requirements for WCAG 2.1 – 1 Perceivable
 
-__Method__
+#### Method
 
 Used the “Accessibility Insights for Web” tool by Microsoft to run automatic, partially-automatic and manual tests on each page. 
 
-__Results__
+#### Results
 
-##### “Tournaments” page
+**Tournaments page**
 - All checks passed 
 
 
-##### “Create tournament” page 
+**Create tournament page**
+
 Issues:
 - The “Upload” button on the page did not meet the contrast ratio requirement
   - Color-contrast – Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds
@@ -67,11 +75,11 @@ Solutions:
 - Removed select element in favor of a slider
 
 
-##### “Manage tournaments” page
+**Manage tournaments page**
 - All checks passed
 
 
-##### "View tournament” page
+**View tournament page**
 Issue:
 - The “Manage teams” button on the page did not meet the contrast ratio requirement
   - Color-contrast – Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds
@@ -81,11 +89,11 @@ Solution:
 - Changed button color to increase contrast
 
 
-##### “Manage teams” page
+**Manage teams page**
 - All checks passed
 
 
-##### “Edit teams” page
+**Edit teams page**
 Issues:
 - Duplicate-id-aria – two elements had the aria id of “teamNameInput”
   - Ensures every id attribute value used in ARIA and in labels is unique
@@ -95,3 +103,41 @@ Issues:
 Solutions: 
 - Changed the ARIA id attribute on one of the elements
 
+<br />
+
+### Second test of web application using Microsoft “Accessibility Insights for Web” – Near-final product
+
+#### Purpose
+
+- Check that each page meets the requirements for WCAG 2.1 – 1 Perceivable
+
+#### Method
+
+Used the “Accessibility Insights for Web” tool by Microsoft to run automatic, partially-automatic and manual tests on each page. 
+
+#### Results
+
+**Tournament Overview page**
+
+Issues: 
+- Listitem – some listelements was left from an old revision
+  - Ensures `<li>` elements are used semantically
+  - WCAG 1.3.1
+
+Solution:
+- To ensure a responsive design, all default `<ul>` and `<li>` elements were turned into MUI <Box> elements that had has corresponding `<ul>` and `<li>` as its component, to keep the already set up system using `<li>` and `<ul>`. The error was a result of only some elements being changed into these MUI boxes with their corresponding components, and has since been resolved.
+
+**Admins page**
+
+Issues: 
+- Aria-required-children – 
+  - Ensures elements with an ARIA role that requires child roles contain them
+  - WCAG 1.3.1
+- Aria-required-parent – 
+  - Ensures elements with an ARIA role that requires parent roles are contained by them
+  - WCAG 1.3.1
+- Duplicate-id-aria – multiple elements had the aria id of “rankSelect”
+  - Ensures every id attribute value used in ARIA and in labels is unique
+  - WCAG 4.1.1
+
+_There was not enough time left to properly address these issues_