Introduction
This document represents the latest version of the accessibility conformance report for the Verne™ registry product, owned and developed by Foster Moore International Limited. It is written based on the Voluntary Product Accessibility Template (VPAT) version 2.4, issued on March 7 2020, which is owned and supplied by the Information Technology Industry Council (www.itic.org).
Report Details
| Report Detail | Information |
|---|---|
| Name of Product | Verne™ |
| Product Description | Configurable registry platform. Verne is a configurable platform to generate and use registries. In doing so it generates HTML based on its core generation engine, and its Design System, both of which incorporate the accessibility standards and features necessary to generate a WCAG2.1 compliant system. It is to be noted however, that client implementations can render the default generation of a register non-compliant by implementing styles, colours, labels, headings, custom rules around presentation and navigation etc. that they wish to use. On that basis, this conformance report is based on the Design System components, and the standard registry templates and modules that are provided with the platform. |
| Report Date | 30 December 2020 |
| Report Version | 1.0 |
| Contact Information | Email: accessibility@fostermoore.com |
Evaluation Methods Used
The Verne Design System is developed to a set of UX standards that has accessibility embedded within it. Accordingly, each component is tested for compliance to WCAG2.1 success criteria for conformance levels A and AA, and a dedicated section of accessibility features and implementation guidelines is produced as part of that Design System.
A set of methods and tools are used to test for conformance to the WCAG2.1 A and AA criteria and these are details here.
Compliance Tools
The tools aXe and WAVE are used to detect machine-discernible issues with HTML that is generated by the Design System components. The A11y Bookmarklets plugin is used to support visual testing of focus on web pages that are generated.
Colour Contrast Tools
In order to check colour contrast, the WebAim Color Contrast Checker is used.
Screen Readers
The following screen readers are used to test the design System: –
- VoiceOver – for use on Apple Macintosh computers and iOS devices
- NVDA – for use on Windows PCs
- JAWS – for use on Windows PCs
- Talkback – for use on Android devices
The following browsers were tested on: –
- Firefox
- Safari
- Chrome
- Edge
Based on usage statistics, the following combinations were tested: –
Browser and Screen Reader
- JAWS/Edge
- JAWS/Firefox
- NVDA/Firefox
- NVDA/Chrome
- VoiceOver/Chrome
- VoiceOver/Safari
- VoiceOver/iOS
- Talkback/Android
Mobile Platform and Screen Reader
- iOS/VoiceOver
- Android/Talkback
Manual Testing
Manual testing was performed in that each component was tested using keyboard access only, a visual assessment was made of the screens with respect to focus and an intellectual assessment of subjective matter such as labels, headings and error messages was made.
Applicable Standards/Guidelines
This report covers the degree of conformance for the following accessibility standard/guidelines: –
| Standard/Guideline | Included in Report |
|---|---|
| Web Content Accessibility Guidelines 2.1 | Level A Level AA |
Terms
The terms used in the Conformance Level column are defined as follows:
- Supports: The functionality of the product has at least one method that meets the criterion without known defects or meets with equivalent facilitation.
- Supports Pending Remediation: The functionality of the product has at least one method that meets the criterion without known defects or meets with equivalent facilitation subject to known issues being remediated.
- Supports with Exceptions: The functionality of the product has explicit exceptions applied, where the ability to meet the guideline cannot be implemented, such as differences or incompatibilities between a browser, its version and a screen reader.
- Partially Supports: Some functionality of the product does not meet the criterion.
- Does Not Support: The majority of product functionality does not meet the criterion.
- Not Applicable: The criterion is not relevant to the product.
Outstanding Remediation Issues
Where applicable, outstanding remediation issues are identified by a unique identifier, that can be used to identify those issues that are still to be completed, and be informed about progress, by enquiry to accessibility@fostermoore.com.
Accessibility Conformance Report
Success Criteria, Conformance Level A
| WCAG2.1 Success Criteria | Conformance Summary | Remarks and Explanations |
|---|---|---|
| 1.1.1 Non-text Content | Supports Pending Remediation | The following principles are encapsulated within the Verne Design System components: – Text alternatives are provided for non-text items within the Design System components, or are marked as decorative, or have alt text set to “”. Images and icons have text alternatives associated with them to convey the meaning or purpose of the image/icon. Images and icons fonts without associated visible text are assigned role = “img”. Standard controls that leverage icons have been identified as follows: – Error message icons; Some buttons; The ‘X’ icon to close or remove elements such as modal windows and inline menus; The arrow icons (left, right, up, down) that are used to expand and collapse secondary elements. The following known exceptions to these principles have been identified and are being remediated: – 1. The progress icon on the multi-step form component does not have any alternative text that the screen reader can speak out. (Ref: VA-385). 2. When selecting the ‘Use Different Address’ option by keyboard, the focus moves to the ‘Done’ button rather than the address field. (Ref: VA-303). |
| 1.2.1 Audio-only and Video-only (Prerecorded) | Not applicable | Verne has no time-based media components within its Design System. |
| 1.2.2 Captions (Prerecorded) | Supports | Verne has no time-based media components within its Design System. Verne uses an accessible video player widget that plays video content if uploaded by a user. The content that is uploaded by a user is controlled by the user with respect to the presence of captions. |
| 1.2.3 Audio Description or Media Alternative (Prerecorded) | Supports | Verne has no time-based media components within its Design System. The associated product used to play media is typically determined by the user and is thus outside the scope of Verne. The content that is uploaded by a user is controlled by the user with respect to the presence of audio descriptions. |
| 1.3.1 Info and Relationships | Supports Pending Remediation Supports with Exceptions | The following principles are encapsulated within the Verne Design System components: – The information presented and captured within the Verne Design System components is preserved and retains its contextual purpose when the presentation format changes. Assistive technologies can programmatically determine the information, structure and relationships contained within the Verne Design System components. Headings and ARIA landmarks are used where appropriate to help convey presentation. Links and images contain contextual information so that users understand the purpose and impact of accessing or navigating to them. Tables use row and column headers where it is appropriate to do so. ARIA is used to communicate dynamic page changes and intrusive alerts. The following known exceptions to these principles have been identified and are being remediated: – 1. When using a screen reader, the modal component is not reading all of the text within the modal window when accessed. (Ref: VA-359). 2. The full set of validation errors are not being read out in full by screen readers within the Alert component. (Ref: VA-295). 3. The inline help icon’s text does not refer to its purpose in a clear and explicit way. (Ref: VA-395). 4. The expand and contract icons have text that does not explain their purpose in a clear and explicit way. (Ref: VA-392). 5. In some instances, an icon, with conflicting alternative text is featured as apart of a button/link. (Ref: VA-391). 6. The radio button component incorrectly advises that there are four options rather than two when the vertical radio button layout is used. (Ref: VA-388). 7. Screen readers read the pagination component in an unintuitive manner. (Ref: VA-387). The following known exceptions exist: – 1. Verne uses aria-label to provide a descriptive text for an element, and augments the description by providing the text “Optional” or “Is Required” as necessary. This causes VoiceOver to announce the span as a group, using the aria-label content as the group label, prior to announcing the actual text that is displayed on the screen, causing duplicate announcement of the required/optional information.This can be remediated by changing the settings on Voice Over to not announce Groups. 2. The menu items component sometimes announces menu items that are not available to a user visually.This is an issue with VoiceOver, that does not recognise the “aria-hidden=true” when combined with animation, so even if a submenu is no longer visible and with aria-hidden=true, VoiceOver still announces it. 3. On some screen readers, the text “Processing your request” is read from time to time when navigating through the menu and menu item components. This issue is caused by the presence of a task list on the screen that the menus are being read from. A timer that regularly queries the task list issues the message that the request is being processed. |
| 1.3.2 Meaningful Sequence | Supports Pending Remediation Supports with Exceptions | The following principles are encapsulated within the Verne Design System components and subsequent pages generated by Verne: – Headings and ARIA landmarks are used to convey the relationship between content. The ARIA group role is used to categorise content in a logical fashion where appropriate. The use of tabindex other than 0 or -1 is not featured in the design components. The following known exceptions to these principles have been identified and are being remediated: – 1. A number of tab sequence issues are being encountered when using I.E. 11. (Ref: VA-328). The following known exceptions exist: – 1. The menu items component sometimes announces menu items that are not available to a user visually. This is an issue with VoiceOver, that does not recognise the “aria-hidden=true” when combined with animation, so even if a submenu is no longer visible and with aria-hidden=true, VoiceOver still announces it. |
| 1.3.3 Sensory Characteristics | Supports | The following principles are encapsulated within the Verne Design System components: – Any concepts suggested through shape, size, visual location, orientation, or sound is also communicated via textual equivalents that assistive technologies can leverage. These textual equivalents may be visible or hidden, through use of alternative text, the title element, ARIA labels and alerts etc. |
| 1.4.1 Use of Colour | Supports | The following principles are encapsulated within the Verne Design System components: – Where information is conveyed through font styling or colour, such as error levels, the meaning behind the colour is also communicated through textual equivalents. Where highlighting is used to indicate current location, the same information is communicated by headings and selected states. |
| 1.4.2 Audio Control | Not applicable | Verne has no sound-based media components within its Design System. The upload and subsequent inclusion of sound files is typically excluded from Verne, but if permitted, the content is the responsibility of the user performing the upload. The associated product used to play any sound files is typically determined by the user and is thus outside the scope of Verne. |
| 2.1.1 Keyboard | Supports Pending Remediation | The following principles are encapsulated within the Verne Design System components: – Forms are accessible by keyboard and assistive technologies. Some forms use a combination of fields, buttons, inline help, and links. Elements that do not require keyboard access are identified as such, through controls such as the “tabindex = -1” concept and identifying images as decorative. Note that some menu lists require navigation using the tab key rather than the arrow keys. The following known exceptions to these principles have been identified and are being remediated: – 1. When using a screen reader, the hover-over tooltip produced is not read. (Ref: VA-396). |
| 2.1.2 No Keyboard Trap | Supports | No Verne Design System component has any identified keyboard trap. |
| 2.1.4 Character Key Shortcuts | Not applicable | The Verne Design System has no components that leverage character key shortcuts. |
| 2.2.1 Timing Adjustable | Supports | Verne has no components within its Design System that has explicit timing functionality. There are three known instances of interaction within Verne with respect to timing considerations: – 1. A two-factor authentication code is assigned an expiry period, which is advised to the user when it is issued. This meets the guideline as an essential exception – where the time limit is essential and extending it would invalidate the activity. 2. Verne establishes a time-out period for users with respect to inactivity, and advises the user before their session expires. This meets the guideline as an essential exception – where the time limit is essential and extending it would invalidate the activity. 3. An animated ‘In progress’ visual display is presented when the system is in progress. The duration of the animation can be changed via system settings. This meets the guideline as a real-time exception, where the time limit is a required part of a real-time event, and no alternative to the time limit is possible. |
| 2.2.2 Pause, Stop, Hide | Supports | The following principles are encapsulated within the Verne Design System components: – Where it is necessary to indicate to the user that the system is in progress, an animation is presented both visually and with a textual equivalent that assistive technology can leverage. The animation presented meets the guideline as the animation is less than 5 seconds, is auto updating, and the auto-updating is part of an activity where it is essential. |
| 2.3.1 Three Flashes or Below Threshold | Supports | Verne has no components within its Design System that flash. |
| 2.4.1 Bypass Blocks | Supports | The Verne Design System features a bypass mechanism on its menu components to allow users to skip the navigation elements to the main content. A number of components feature the expand/collapse state for secondary content. This is clearly indicated visually and can be leveraged by screen readers. |
| 2.4.3 Focus Order | Supports Pending Remediation | The following principles are encapsulated within the Verne Design System components: – Each component has a logical tab order for the focusable elements within the component. Each standard page has a logical tab order, with comprehensive use of the tabindex = 0 setting. The following known exceptions to these principles have been identified and are being remediated: – 1. When using Chrome’s autofill option for the email address element when registering a company, the focus is then placed on the previous element rather than the next one. (Ref: VA-311). 2. When selecting the ‘Use Different Address’ option by keyboard, the focus moves to the ‘Done’ button rather than the address field. (Ref: VA-303). 3. Within the slide out Repeater component, the focus order is inconsistent based on the selection of the Close button. (Ref: VA-389). |
| 2.4.4 Link Purpose (In Context) | Supports | The following principles are encapsulated within the Verne Design System components: – Each component that features a link has a default and contextual textual description, and this is supported where necessary by equivalent programatically determined link content. Each component is manually tested to ensure that the contextual aspect of the text is appropriate for the purpose of the link. Instructions and advice are provided within the Design System to help engineers that use the components on how to successfully specify the textual description. |
| 2.5.1 Pointer Gestures | Not applicable | Verne has no components within its Design System that use pointer gestures. Any device dependent gestures that may interact with the Verne UI are outside the scope of the Verne Design System and its conformance to accessibility conformance levels A and AA. |
| 2.5.2 Pointer Cancellation | Not applicable | Verne has no components within its Design System that use pointer gestures and subsequently, pointer cancellation. Any device dependent gestures that may interact with the Verne UI are outside the scope of the Verne Design System and its conformance to accessibility conformance levels A and AA. |
| 2.5.3 Label in Name | Supports with Exceptions | The following principles are encapsulated within the Verne Design System components: – Each component that features a control element has a label that is the same as the programmatically (or accessible) name. Each component is manually tested to ensure that the contextual aspect of the programmatic name is logically and contextually associated to the label, if there is a difference between the two. Instructions and advice are provided within the Design System to help engineers that use the components on how to successfully specify the programmatic name. In some instances there is a variation between the text of the label and the programmatic name, to ensure that the programmatic name, when read in conjunction with other text elements that form part of a logical item of information is intuitive to the listener. |
| 2.5.4 Motion Actuation | Not applicable | Verne has no components within its Design System that uses motion actuation. Any device dependent motion actuation that may interact with the Verne UI are outside the scope of the Verne Design System and its conformance to accessibility conformance levels A and AA. |
| 3.1.1 Language of Page | Supports | The following principles are encapsulated within the Verne Design System components: – Every page that is generated features the language of the content, based on the default language setting within the application. If the user changes their default language during a session, then the pages subsequently rendered are rendered with the updated language identified in the page content. |
| 3.2.1 On Focus | Supports Pending Remediation | The following principles are encapsulated within the Verne Design System components: – When an element receives focus, a combination of colour and border effect are used to highlight the element. Focus on an element is moved to a control either via the keyboard or by use of the mouse. Moving the mouse over a control does not move the focus unless scripting implements this behaviour. The following known exceptions to these principles have been identified and are being remediated: – 1. Within the Page Help component, the user is able to navigate out of the modal help without the modal help window being closed.. (Ref: VA-386). |
| 3.2.2 On Input | Supports | The following principles are encapsulated within the Verne Design System components: – All components have been designed such that any the entry of data, or the selection of a form control (such as a drop down list) does not change the context of the page. A number of components have user interface behaviour that is conditional on data entry – for example, the selection from a drop-down list may expose other fields, or remove such fields. However, the structure and nature of the components are such that there is no change in context. |
| 3.3.1 Error Identification | Supports Pending Remediation | The following principles are encapsulated within the Verne Design System components: – All components have error identification messages when invalid data is provided or invalid use is detected. All error messages are configurable, so that any contextually incorrect messages can be updated as necessary. All error identification messages are communicated as visual and programmatically accessible text. Error messages provide a visible and programmatically accessible link that navigates the user to the appropriate field for subsequent resolution. The following known exceptions to these principles have been identified and are being remediated: – 1. A number of tab sequence issues are being encountered when using I.E. 11. (Ref: VA-328). |
| 3.3.2 Labels or Instructions | Supports | The following principles are encapsulated within the Verne Design System components: – Each element in a component has clear headings, labels field sets and buttons that describe the purpose of the element accurately, and provide an appropriate context for any subsequent error identification. Inline help is available to the user where appropriate. The expanded/collapsed state for secondary content is clearly indicated, and the secondary content is programmatically accessible. |
| 4.1.1 Parsing | Supports | The following principles are encapsulated within the Verne Design System components: – All components are written to HTML5 specification. Pages generated by the Verne engine also adhere to the HTML5 specification. |
| 4.1.2 Name, Role, Value | Supports | The following principles are encapsulated within the Verne Design System components: – All components are written to HTML5 specification. The following known exceptions exist: – 1. In some instances, the roles ‘button’ and ‘link’ are used that seem to represent a contradiction to the visual appearance. This is done to maintain the Design System visual standards. |
Success Criteria, Conformance Level AA
| WCAG2.1 Success Criteria | Conformance Summary | Remarks and Explanations |
|---|---|---|
| 1.2.4 Captions (Live) | Not applicable | Verne has no real-time media components within its Design System. The upload and subsequent inclusion of real-time media files is typically excluded from Verne, but if permitted, the provision of captions within the file is the responsibility of the user performing the upload. The associated product used to play any real-time files is typically determined by the user and is thus outside the scope of Verne. |
| 1.2.5 Audio Description (Prerecorded) | Not applicable | Verne has no real-time media components within its Design System. The upload and subsequent inclusion of real-time media files is typically excluded from Verne, but if permitted, the provision of a field to capture an audio description associated with the file can be configured. The provision of the audio description is the responsibility of the user performing the upload. |
| 1.3.4 Orientation | Supports | Verne has no components within its Design System that restricts orientation of the page. |
| 1.3.5 Identify Input Purpose | Supports Pending Remediation | A number of the Verne Design System UI patterns contain input fields that are deemed to be information about the user. Each field within the Design System UI pattern that meets this criteria has the appropriate autocomplete token associated to it so that the field can be programmatically determined as to its input purpose. The following Ui patterns feature autofill tokens within the Verne Design System: – Address – the following autofill tokens are used as applicable: – street-address address-line1 address-line2 address-line3 address-level4 address-level3 address-level2 address-level1 country country-name postal-code Amount – the following autofill tokens are used as applicable: – transaction-currency transaction-amount Multi-step form for frequent users – the following autofill tokens are used as applicable: – organization street-address address-line1 address-line2 address-line3 address-level4 address-level3 address-level2 address-level1 country country-name postal-code tel tel-country-code tel-national tel-area-code tel-local tel-local-prefix tel-local-suffix tel-extension name honorific-prefix given-name additional-name family-name honorific-suffix sex Name – the following autofill tokens are used as applicable: – name honorific-prefix given-name additional-name family-name honorific-suffix Phone Numbers – the following autofill tokens are used as applicable: – tel tel-country-code tel-national tel-area-code tel-local tel-local-prefix tel-local-suffix tel-extension The following known exceptions to meeting this criterion have been identified and are being remediated: – 1. Review and implement autofill tokens to the Verne Design System UI Patterns. (Ref: VA-383). |
| 1.4.3 Contrast (Minimum) | Supports Pending Remediation | The following principles are encapsulated within the Verne Design System components: – Text elements are a minimum of 14 point and feature a contrast ratio of 4.5 to 1 or greater. Text elements that are 14 point and bold, or are at least 18 point feature a contrast ration of 3 to 1 or greater. The contrast between foreground and background features a contrast ratio of 4.5 to 1 or greater. The following known exceptions to meeting this criterion have been identified and are being remediated: – 1. A number of the Tags in the Tag component do not meet the minimum contrast ration. (Ref: VA-394). |
| 1.4.4 Resize Text | Supports | Verne is designed to be used in browsers that have zoom support, and can zoom up to 200%. The components within the Verne System Design do not feature images of text, which removes issues with pixelation as the scale increases. |
| 1.4.5 Images of Text | Supports | The following principles are encapsulated within the Verne Design System components: – Text is used in all instances rather than images of text. Where an image is used – such as a corporate logo, a text alternative is provided. The upload of images that represent text can be performed in prescribed circumstances by the end user. The uploaded image, and its ability to be visible when scaled is determined by the user performing the upload and is thus outside the scope of Verne. |
| 1.4.10 Reflow | Partially Supports | The Verne Design System components use CSS Media queries to reformat web content for different viewport widths, based on the appropriate break points. The following viewport widths are supported by Verne Design System CSS: – Desktop Resolution 1366×768 1920×1080 1536×864 1440×900 1280×720 1600×900 1280×800 Tablet Resolution 768×1024 1280×800 800×1280 601×962 600×1024 1024×1366 Mobile Device Resolution 360×640 375×667 414×896 360×780 360×760 414×736 |
| 1.4.11 Non-text Contrast | Supports | The following principles are encapsulated within the Verne Design System components: – The contrast between controls and meaningful graphics feature a contrast ratio of 3 to 1 or greater. |
| 1.4.12 Text Spacing | Supports | The Verne Design System components use CSS that performs the following: – Letter spacing; Line height; Specification of em units. |
| 1.4.13 Content on Hover or Focus | Partially Supports | Verne’s Design System features a Tooltip component that presents tooltips when the associated element is either hovered over by the mouse or is accessed by the keyboard. Navigation away from the tooltip with the mouse, or the keyboard stops the tooltip from displaying. However, there is no mechanism other than the navigation actions removes the display of the tooltip, meaning that the content is not fully dismissible. The scenario whereby the tooltip obscures other content cannot be completely discounted, as the position on the screen of the element that contains the tooltip can be changed by a configurator as part of a project implementation. |
| 2.4.5 Multiple Ways | Supports | Verne’s Design System contains a Main Navigation component, containing applicable menu items that allows users to navigate to the services and areas of the system as needed. Within pages, use of Headings and ARIA landmarks are incorporated, and unique link and button names exist to provide reliable navigation paths for users. |
| 2.4.6 Headings and Labels | Supports | All components in the Verne Design System have descriptive headings and labels as necessary. Additionally, all text elements, such as headings and labels can be set by the client as part of a Verne implementation. |
| 2.4.7 Focus Visible | Supports | Each Verne Design System component and standard pages have a logical tab order and a visible focus indicator that shows where the focus is. |
| 3.1.2 Language of Parts | Supports Pending Remediation | An improvement to introduce a Language Part component has been raised to formalise the use of the “lang” attribute for a section of a page that is in a different language. (Ref:VA-381). |
| 3.2.3 Consistent Navigation | Supports | All components in Verne’s Design System use a consistent navigation model, leveraging the “tabindex=0” attribute. Headings and ARIA navigation landmarks are implemented to assist with user orientation. The use of the Design System components to build screens ensures a consistency of presentation. |
| 3.2.4 Consistent Identification | Supports | The following principles are encapsulated within the Verne Design System components: – Consistent functionality or actions is embedded in the component design, with consistent names and labels such as Cancel, Continue and Save buttons. Consistent use of icons is employed to perform the same function. Specific buttons, such as that which initiates a Search within the components uses consistent labels. |
| 3.3.3 Error Suggestion | Supports Pending Remediation | The following principles are encapsulated within the Verne Design System components: – Mandatory fields are visually indicated by the absence of the word ‘Optional’ in their label, and have the aria-required property set. All mandatory fields that are not entered are identified and a message issued to the user, with a link to navigate to the field in question. Appropriate text is used if the error relates to the input not being within a specific set of values, or a specific format. All fields that have data and have failed the validation are identified and a suitable message The following known exceptions to these principles have been identified and are being remediated: – 1. When an error is detected in a sliding panel, the user cannot navigate to the error by means of the keyboard. (Ref: VA-312). |
| 3.3.4 Error Prevention (Legal, Financial, Data) | Supports | Each transaction that Verne initiates is preceded by a Review screen that allows the user to check and remediate the data if necessary. Any payment initiated transaction within Verne provides the user with a summary of the payment to be initiated prior, with the ability for the user to cancel the transaction at that point. |
| 4.1.3 Status Messages | Supports | The following Verne Design System components and UI Patterns issue status messages as applicable to the nature of their function: – Alerts Loader Form Validation Errors Multiple Filters Wizard Obligatory Action |
Browser/Screen Reader Incompatibilities
A number of incompatibilities exist when a combination of browser and screen reader is used. This section identifies these issues and provides information on any instances where remediation is anticipated.
VoiceOver/Safari
Ref: VA-315
- VoiceOver is not reading the Verne repeater record during navigation.
- When navigating between the wizard section, the section heading is not announced, nor does it receive focus when VoiceOver is on. Focus moves to the first focusable input control.
VoiceOver/Chrome
Ref: V-2355
- When reading menu items, VoiceOver sometimes announces that ‘Chrome has a new Window’, according to where the mouse is positioned.
NCDA/Firefox
Ref: VA-316
- When a list element is referenced, NVDA announces the first option, even though another option is already selected.
NVDA/Edge
Ref: VA-323
- In some instances, the screen reader reads the label of an element twice.
Ref: VA-324
- In some instances, the text shown when hovering over an element is not read out by the screen reader.
0
