|
|
|
[Requirements](https://gitlab.stud.idi.ntnu.no/gruppe-12/picturerama/-/wikis/Requirements)
|
|
|
|
- [ ] Universial Design |
|
|
|
# WCAG 2.1
|
|
|
|
|
|
|
|
## Success Criterion 1.4.1 Use of Color –
|
|
|
|
|
|
|
|
"_Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element._
|
|
|
|
|
|
|
|
_Intent of this Success Criterion is to ensure that all users can access information that is conveyed by color differences, that is, by the use of color where each color has a meaning assigned to it_."
|
|
|
|
|
|
|
|
Reference: [CITATION Acc181 \l 1044]
|
|
|
|
|
|
|
|
In the application, it is used black/grey color consistently, and no information is only displayed through color differences. An example of color changing is when a user is hovering over a button (Figure 1,2). This will darken the color of the button and the cursor will also change to a hand format to indicate the option to "click" it. That way, color changing is not the only indication of buttons being clickable.
|
|
|
|
|
|
|
|
 
|
|
|
|
|
|
|
|
_Figure 1: Not hovered button Figure 2: Hovered button_
|
|
|
|
|
|
|
|
## Success Criterion 1.4.6 Contrast (Enhanced) –
|
|
|
|
|
|
|
|
"_The visual presentation of text and images of text has a contrast ratio of at least 7:1._
|
|
|
|
|
|
|
|
_Large Text_
|
|
|
|
|
|
|
|
_Large-scale text and images of large-scale text have a contrast ratio of at least 4.5:1;_
|
|
|
|
|
|
|
|
_Incidental_
|
|
|
|
|
|
|
|
_Text or images of text that are part of an inactive [user interface component](https://www.w3.org/TR/WCAG21/#dfn-user-interface-components), that are [pure decoration](https://www.w3.org/TR/WCAG21/#dfn-pure-decoration), that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement._
|
|
|
|
|
|
|
|
_Logotypes_
|
|
|
|
|
|
|
|
_Text that is part of a logo or brand name has no contrast requirement._
|
|
|
|
|
|
|
|
_The intent of this Success Criterion is to provide enough contrast between text and its background so that it can be read by people with moderately low vision_"
|
|
|
|
|
|
|
|
Reference: [CITATION Acc182 \l 1044]
|
|
|
|
|
|
|
|
Throughout the application, the default background color for JavaFX (Color code: #F1F2F2) is used as the background color for all pages, and for text, black color is used (Color code: #000000). In terms of the criteria written above, the contrast ratio is required to be at least 7:1. To check if the colors meet the criteria we used a web Color Contrast Checker [CITATION sno15 \l 1044]. It calculated the contrast ratio to be approximately 18:1, which is well above 7:1.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
_Figure 3: Color contrast check results_
|
|
|
|
|
|
|
|
Additionally, we also use prompt text in our text fields with a light grey color, but with a white background. These are not compliant with the requirements, but they are neither necessary as these only displays excess information. Some text fields even contain tooltips that better explain what is supposed to be written.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
_Figure 4: Text field_
|
|
|
|
|
|
|
|
## Success Criterion 1.4.11 Non-text Contrast –
|
|
|
|
|
|
|
|
"_The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):_
|
|
|
|
|
|
|
|
_User Interface Components_
|
|
|
|
|
|
|
|
_Visual information required to identify user interface components and states, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author;_
|
|
|
|
|
|
|
|
_Graphical Objects_
|
|
|
|
|
|
|
|
_Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed_.
|
|
|
|
|
|
|
|
_The intent of this Success Criterion is to ensure that active user interface components (i.e., controls) and meaningful graphics are distinguishable by people with moderately low vision._"
|
|
|
|
|
|
|
|
Reference: [CITATION Acc184 \l 1044]
|
|
|
|
|
|
|
|
Some of the application's non-text components have borders that differentiate the internal background color from the external background color. Internal background is the background inside the component, and external background is the background outside the component. Text fields for instance all have black boarders to distinguish the inner field from the scene background (Figure 4).
|
|
|
|
|
|
|
|
However, the buttons do not comply with these requirements as the borders have been removed. The white internal background is not enough to distinguish from the external background. Despite this, we still decided that the color change when its being hovered over, is enough to differentiate this from the external background. Additionally, the button text, like for instance "Sign up" should give a good enough indication of where to press when a user wants to sign up (Figure 6), and generally it will show a hand cursor where buttons are.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
_Figure 6: Sign up button_
|
|
|
|
|
|
|
|
## Success Criterion 2.1.3 Keyboard (No Exception) -
|
|
|
|
|
|
|
|
## Success Criterion 2.1.1 Keyboard –
|
|
|
|
|
|
|
|
"_All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints._
|
|
|
|
|
|
|
|
_The intent of this Success Criterion is to ensure that, wherever possible, content can be operated through a keyboard_"
|
|
|
|
|
|
|
|
References:
|
|
|
|
|
|
|
|
- [CITATION Acc185 \l 1044]
|
|
|
|
- [CITATION Acc186 \l 1044]
|
|
|
|
|
|
|
|
The application gives the user the option to use the keyboard to navigate through components with functionality. This is done by using the "Tab" key and/or the arrow keys. The focused object will change to a darker color to show that it is being focused, same color as when hovered over by the cursor (Figure 7). Therefore, a user can benefit from all the application's functionalities by only using a keyboard.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
_Figure 7: Focused button_
|
|
|
|
|
|
|
|
## Success Criterion 2.3.1 Three Flashes or Below Threshold
|
|
|
|
|
|
|
|
"_Web pages do not contain anything that flashes more than three times in any one second period, or the flash is below the general flash and red flash thresholds._
|
|
|
|
|
|
|
|
_The intent of this Success Criterion is to allow users to access the full content of a site without inducing seizures due to photosensitivity.__"_
|
|
|
|
|
|
|
|
References: [CITATION Acc187 \l 1044]
|
|
|
|
|
|
|
|
The application has no animation or sudden color changes that could be categorized as flashes that cause seizures. As mentioned before, color changes occur if a user either hovers over or focus marks a component with functionality. Additionally, when a feedback text is given, it should display a red or green colored text (Figure 10), but this does neither exceed the threshold, as it only occupies a small portion of the window.
|
|
|
|
|
|
|
|
 
|
|
|
|
|
|
|
|
_Figure 8: Focus marked buttonFigure 9: Red labeled feedback text_
|
|
|
|
|
|
|
|
Likewise, a user will only experience animation through the loading animation, that happens when for instance the Log in button in Figure 10 is activated (Figure 10). This does neither exceed the threshold, as it only occupies a small portion of the window, and it is dark (not bright enough to exceed the threshold).
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
_Figure 10: Loading animation_
|
|
|
|
|
|
|
|
## Success Criterion 2.4.2 Page Titled –
|
|
|
|
|
|
|
|
"_Web pages have titles that describe topic or purpose._
|
|
|
|
|
|
|
|
_The intent of this Success Criterion is to help users find content and orient themselves within it by ensuring that each Web page has a descriptive title. Titles identify the current location without requiring users to read or interpret page content."_
|
|
|
|
|
|
|
|
References: [CITATION Acc188 \l 1044]
|
|
|
|
|
|
|
|
Every scene in the application has a descriptive title, that should give a sufficient description of the purpose of the scene (Figure 11).
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
_Figure 11: Log in scene with title_
|
|
|
|
|
|
|
|
## Success Criterion 2.4.7 Focus Visible –
|
|
|
|
|
|
|
|
"_Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible._
|
|
|
|
|
|
|
|
_The purpose of this success criterion is to help a person know which element has the keyboard focus."_
|
|
|
|
|
|
|
|
References: [CITATION Acc1810 \l 1044]
|
|
|
|
|
|
|
|
As mentioned before, when buttons receive focus, their color darkens (Figure 7). Additionally, when a text field receives focus a vertical bar is displayed in the field, indicating that the user can type. If text already exist in the field, it will be highlighted, indicating that the user can type over the text (Figure 12).
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
_Figure 12: Focused text field_
|
|
|
|
|
|
|
|
## Success Criterion 3.3.1 Error Identification –
|
|
|
|
|
|
|
|
"_If an input error is automatically detected, the item that is in error is identified and the error is described to the user in text._
|
|
|
|
|
|
|
|
_The intent of this Success Criterion is to ensure that users are aware that an error has occurred and can determine what is wrong._"
|
|
|
|
|
|
|
|
Reference:[CITATION Acc189 \l 1044]
|
|
|
|
|
|
|
|
Input errors in the application will display an error message. The user will receive a descriptive text of what caused the error. For instance, when a user wants to sign up, he will be displayed different red labeled error messages if something went wrong during the registration (Figure 13,14,15).
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
_Figure 13: Error message_
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
_Figure 14: Error message_
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
_Figure 15: Error message_
|
|
|
|
|
|
|
|
# References
|
|
|
|
|
|
|
|
Accessibility Guidelines Working Group. _Understanding Success Criterion 1.4.1: Use of Color._ 2017-2018. https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html (accessed 04 23, 2020).
|
|
|
|
|
|
|
|
—. _Understanding Success Criterion 1.4.11: Non-text Contrast._ 2017-2018. https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html (accessed 04 23, 2020).
|
|
|
|
|
|
|
|
—. _Understanding Success Criterion 1.4.6: Contrast (Enhanced)._ 2017-2018. https://www.w3.org/WAI/WCAG21/Understanding/contrast-enhanced (accessed 04 23, 2020).
|
|
|
|
|
|
|
|
—. _Understanding Success Criterion 2.1.1: Keyboard._ 2017-2018. https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html (accessed 04 23, 2020).
|
|
|
|
|
|
|
|
—. _Understanding Success Criterion 2.1.3: Keyboard (No Exception)._ 2017-2018. https://www.w3.org/WAI/WCAG21/Understanding/keyboard-no-exception.html (accessed 04 23, 2020).
|
|
|
|
|
|
|
|
—. _Understanding Success Criterion 2.3.1: Three Flashes or Below Threshold._ 2017-2018. https://www.w3.org/WAI/WCAG21/Understanding/three-flashes-or-below-threshold.html (accessed 04 23, 2020).
|
|
|
|
|
|
|
|
—. _Understanding Success Criterion 2.4.2: Page Titled._ 2017-2018. https://www.w3.org/WAI/WCAG21/Understanding/page-titled.html (accessed 04 23, 2020).
|
|
|
|
|
|
|
|
—. _Understanding Success Criterion 2.4.7: Focus Visible._ 2017-2018. https://www.w3.org/WAI/WCAG21/Understanding/three-flashes-or-below-threshold.html (accessed 04 23, 2020).
|
|
|
|
|
|
|
|
—. _Understanding Success Criterion 3.3.1: Error Identification._ 2017-2018. https://www.w3.org/WAI/WCAG21/Understanding/error-identification.html (accessed 04 23, 2020).
|
|
|
|
|
|
|
|
—. _w3._ 2017-2018. https://www.w3.org/WAI/WCAG21/Understanding/ (accessed 04 23, 2020).
|
|
|
|
|
|
|
|
snook.ca. _Colour Contrast Check._ 11 01 2015. https://snook.ca/technical/colour\_contrast/colour.html#fg=000000,bg=F1F2F2 (accessed 04 23, 2020). |
|
|
\ No newline at end of file |
