Accessibility
- Maciej Zabielski
- Robin Molander (Unlicensed)
Introduction
Application version used for review: 3.8.0
Although the application is formally following the WCAG and ARIA specifications and requirements, a full set of accessibility features is not always possible to achieve in a complex business application used for managing drawings and visual content,
There are still some areas that require a compromise between functionality and accessibility. Below you will find some information related to accessibility features available and a review of level A and AA compliance for WCAG.
Web Content Accessibility Guidelines (WCAG)
This Section describes conformance with WCAG 2.1 level A and AA.
Requirement | Level | Description | Status | Conformance | |
|---|---|---|---|---|---|
1.1.1 Non-text Content | A | All non-text content that is presented to the user has a text alternative that serves the equivalent purpose | Controls, Input
Time-Based Media, Test, Sensory, CAPTCHA
Decoration, Formatting, Invisible
| ||
Guideline 1.2 Time-based Media | 1.2.1 Audio-only and Video-only (Prerecorded) | A | For prerecorded audio-only and prerecorded video-only media | Video content is uploaded by the system users. System does not offer any built in video and/or audio content. | |
1.2.2 Captions (Prerecorded) | A | Captions are provided for all prerecorded audio content in synchronized media | Video content is uploaded by the system users. System does not offer any built in video and/or audio content. User uploaded video should contain proper captions if needed. | ||
1.2.3 Audio Description or Media Alternative (Prerecorded) | A | An alternative for time-based media or audio description of the prerecorded video content is provided for synchronized media | Video content is uploaded by the system users. System does not offer any built in video and/or audio content. | ||
1.2.4 Captions (Live) | AA | Captions are provided for all live audio content in synchronized media. | Video content is uploaded by the system users. System does not offer any built in video and/or audio content. | ||
1.2.5 Audio Description (Prerecorded) | AA | Audio description is provided for all prerecorded video content in synchronized media. | Video content is uploaded by the system users. System does not offer any built in video and/or audio content. | ||
1.3.1 Info and Relationships | A | Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. Consider possibility to use Using ARIA landmarks to identify regions of a page https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html | Review of how Form Fields are built, to indicate required fields compatible with assistive technology. Review Grid View headers and cells navigation and captions. Review checkboxes - labels for each checkbox can be programmatically determined by assistive technology. | ||
1.3.2 Meaningful Sequence | A | When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined. Verify navigation sequence and table reading sequence | Application presents complex business data. The content must be interpreted by a knowledgeable individual. The sequence does not have to be followed in a specific order. | ||
1.3.3 Sensory Characteristics | A | Instructions provided for understanding and operating content do not rely solely on sensory characteristics of components such as shape, color, size, visual location, orientation, or sound. | All symbols have text value assigned. This does not apply to drawing viewer as its impossible to describe drawings uploaded by system users. | ||
1.3.4 Orientation | AA | Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential. | Application can be run on a variaety of screen sizes and orientation. For best productivity a minimum resolution of 1024x760 is advised. | ||
1.3.5 Identify Input Purpose | AA | The purpose of each input field collecting information about the user can be programmatically determined when: The input field serves a purpose identified in the Input Purposes for User Interface Components section; and | All input fields have descriptive labels or aria-labels. | ||
Guideline 1.4 Distinguishable | 1.4.1 Use of Color | A | Make it easier for users to see and hear content including separating foreground from background. | Disabled items do not receive focus and provide good feedback (form fields, buttons) | |
1.4.2 Audio Control | A | If any audio on a Web page plays automatically for more than 3 seconds, either a mechanism is available to pause or stop the audio, or a mechanism is available to control audio volume independently from the overall system volume level. | Not applicable | ||
1.4.3 Contrast (Minimum) | AA | Verify themes and all elements for minimum contrast ratio:
| See High Contrast Accessibility Theme section below as well as theme contrast rating. | ||
1.4.4 Resize text | AA | Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality. | There are three themes available with different font size. Additionally, application can take advantage of browser zoom function. | ||
1.4.5 Images of Text | AA | If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text | No images of text are used except drawing content that might contain images of text. | ||
1.4.6 Contrast (Enhanced) | AAA | Support hi-contrast mode?
| Application supports high contrast mode. For more information, see High Contrast Accessibility Theme section below as well as theme contrast rating. | ||
1.4.10 Reflow | AA | Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for: Vertical scrolling content at a width equivalent to 320 CSS pixels;
Content exceptions for re-flow:
| For a complex graphical web application, a full re-flow is not possible. | ||
1.4.11 Non-text Contrast | AA | User Interface Components required contrast 3 : 1 | There is adequate contrast in GUI components for easy identification of application components. | ||
1.4.12 Text Spacing | AA | In content implemented using markup languages that support the following text style properties, no loss of content or functionality occurs by setting all of the following and by changing no other style property:
| No large portions of text or paragraphs are presented in the application. Legible letter-spacing must be determined on a case-by-case basis, as different font families have different character widths. There is no one value that can ensure all font families automatically maintain their legibility. Changing letter spacing or line height is not supported. | ||
1.4.13 Content on Hover or Focus | AA | Where receiving and then removing pointer hover or keyboard focus triggers additional content to become visible and then hidden, the following are true: Dismissable A mechanism is available to dismiss the additional content without moving pointer hover or keyboard focus, unless the additional content communicates an input error or does not obscure or replace other content; Hoverable If pointer hover can trigger the additional content, then the pointer can be moved over the additional content without the additional content disappearing; Persistent The additional content remains visible until the hover or focus trigger is removed, the user dismisses it, or its information is no longer valid. Exception: The visual presentation of the additional content is controlled by the user agent and is not modified by the author. | Additional content displayed on hoover:
| ||
Guideline 2.1 Keyboard Accessible | 2.1.1 Keyboard | A | All functionality of the content is operable through a keyboard interface without requiring specific timings |
No timing restrictions apply. | |
2.1.2 No Keyboard Trap | A | If keyboard focus can be moved to a component of the page using a keyboard interface, then focus can be moved away from that component using only a keyboard interface, and, if it requires more than unmodified arrow or tab keys or other standard exit methods, the user is advised of the method for moving focus away Focus can be moved using only keyboard (not requiring mouse) | Focus can be moved by keybord Context menu can be opened using Fn Menu button. Drawing content cannot be operated based on keyboard input alone. | ||
2.1.4 Character Key Shortcuts | A | If a keyboard shortcut is implemented in content using only letter (including upper- and lower-case letters), punctuation, number, or symbol characters, then at least one of the following is true: Turn off A mechanism is available to turn the shortcut off; Remap A mechanism is available to remap the shortcut to use one or more non-printable keyboard characters (e.g. Ctrl, Alt, etc); Active only on focus The keyboard shortcut for a user interface component is only active when that component has focus. | Key shortcuts are active only for focused elements No single letter shortcuts are used. Some key shortcuts are used for copy/paste/delete (Ce.g. trl+C) Special keys are always required: Esc, Ctrl, Shift | ||
2.2.1 Timing Adjustable | A | For each time limit that is set by the content, at least one of the following is true:
| No time limited functions are present. | ||
2.2.2 Pause, Stop, Hide | A | For moving, blinking, scrolling, or auto-updating information, all of the following are true: Moving, blinking, scrolling Auto-updating | Some drawing elements blink slightly to indicate new element. This is not repetitive and is non intrusive. Some dialogs use auto update function with pre-set intervals. This is essential to represent current state. The refresh function can be disabled. | ||
2.3.1 Three Flashes or Below Threshold | A | 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. | No flashes above three times. | ||
2.4.1 Bypass Blocks | A | A mechanism is available to bypass blocks of content that are repeated on multiple Web pages. | Not applicable | ||
2.4.2 Page Titled | A | Web pages have titles that describe topic or purpose. | Not applicable | ||
2.4.3 Focus Order | A | If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability. | |||
2.4.4 Link Purpose (In Context) | A | The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general. | |||
2.4.5 Multiple Ways | AA | More than one way is available to locate a Web page within a set of Web pages except where the Web Page is the result of, or a step in, a process. | Not applicable | ||
2.4.6 Headings and Labels | AA | Headings and labels describe topic or purpose. | |||
 2.4.7 Focus Visible | AA | Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. | Yes, although not every part of the interface can be fully operated using keyboard (Drawings) | ||
Guideline 2.5 Input Modalities | 2.5.1 Pointer Gestures | A | Â All functionality that uses multipoint or path-based gestures for operation can be operated with a single pointer without a path-based gesture, unless a multipoint or path-based gesture is essential. | User interface controls offer the operation using plus and minus buttons to zoom in and out. Drag and Drop links can be also performed using menu options (copy / paste) | |
2.5.2 Pointer Cancellation | A | For functionality that can be operated using a single pointer, at least one of the following is true:
| Down event does not perform the operation (up event is required) | ||
2.5.3 Label in Name | A | For user interface components with labels that include text or images of text, the name contains the text that is presented visually. | All elements consists of text, text with icon or icon with tooltip. ARIA labels are available for all components. | ||
 2.5.4 Motion Actuation | A | Functionality that can be operated by device motion or user motion can also be operated by user interface components and responding to the motion can be disabled to prevent accidental actuation | No motion activated functions. | ||
3. Understandable | 3.1.1 Language of Page | A |
| HTML element has dynamically set language code User interface is translated into several languages and this option can be selected per user. | |
3.1.2 Language of Parts | AA | The human language of each passage or phrase in the content can be programmatically determined except for proper names, technical terms, words of indeterminate language, and words or phrases that have become part of the vernacular of the immediately surrounding text. | Entire application is using single user defined language. | ||
Guideline 3.2 Predictable | 3.2.1 On Focus | A | When any user interface component receives focus, it does not initiate a change of context. | ||
3.2.2 On Input | A | Changing the setting of any user interface component does not automatically cause a change of context unless the user has been advised of the behavior before using the component. | |||
3.2.3 Consistent Navigation | AA | Navigational mechanisms that are repeated on multiple Web pages within a set of Web pages occur in the same relative order each time they are repeated, unless a change is initiated by the user. | |||
3.2.4 Consistent Identification | AA | Components that have the same functionality within a set of Web pages are identified consistently. | |||
3.3.1 Error Identification | A | 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. | Input errors are presented using:
| ||
3.3.2 Labels or Instructions | A | Labels or instructions are provided when content requires user input. | |||
 3.3.3 Error Suggestion | AA | If an input error is automatically detected and suggestions for correction are known, then the suggestions are provided to the user, unless it would jeopardize the security or purpose of the content. | |||
3.3.4 Error Prevention (Legal, Financial, Data) | AA | For Web pages that cause legal commitments or financial transactions for the user to occur, that modify or delete user-controllable data in data storage systems, or that submit user test responses, at least one of the following is true: Reversible: Submissions are reversible. | Irreversible operations require review and confirmation. | ||
3.3.5 Help | AAA | Context-sensitive help is available. | Context help buttons are available throughout the application. | ||
Guideline 4.1 Compatible | 4.1.1 Parsing | A | In content implemented using markup languages, elements have complete start and end tags, elements are nested according to their specifications, elements do not contain duplicate attributes, and any IDs are unique, except where the specifications allow these features. | ||
4.1.2 Name, Role, Value | A | For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. | Application structure (e.g. regions and nesting of components) follows ARIA roles and guidelines. All components are described by ARIA-LABEL attributes as well as have dynamically changed specific attributes that reflect their state and relations. | ||
4.1.3 Status Messages | AA | In content implemented using markup languages, status messages can be programmatically determined through role or properties such that they can be presented to the user by assistive technologies without receiving focus. | Using role=status to present status messages https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA22 Providing success feedback when data is submitted successfully https://www.w3.org/WAI/WCAG21/Techniques/general/G199 Using ARIA role=alert or Live Regions to Identify Errors |
High Contrast Accessibility Theme
Users can enable Accessibility theme for the highest possible contrast, enlarged texts, and unique selection of colours as illustrated below.
Icons are mostly based on shape, to avoid dependency on colour alone.
If you have any disabilities that prevent you from using the software efficiently, please do not hesitate to contact our support.
We will try to implement changes that will result in better user experience based on your feedback!
Contrast ratingÂ
Contrast rating for our standard theme is between AA and AAA rating as shown on the test image:
Contrast Rating for Accessibility theme is at minimum level of AAA:
Note:Â WCAG 2 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text, and a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders).
Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.
Screen Readers (Assistive Technology)
Most commonly, this term in the context of web applications relates to support tools that can read out texts related to screen elements like buttons or labels.
All elements in the user interface either have text or have unique industry-standard assistive tags, like "aria-label".
Thanks to this, a screen reader can read out loud what a specific button is for, even if the original interface does not show any text.
ARIA tags are translated to your language.
The illustration below demonstrated how a vector-based button is represented in the underlying code, with ARIA tags that can be picked up by the screen reader: