Accessibility Evaluation

Report:
Audit Accessibility Planon Accelerator


Evaluator
Bram, Swink; Marjon, Swink
Date
14 March 2024
Commissioner
Planon Software

Summary of the evaluation findings

The website Planon Accelerator does not comply to WCAG 2.1 level AA yet. 18 out of 50 success criteria contain one or more issues. This document describes to what extent the website meets the accessibility requirements captured in WCAG, the Web Content Accessibility Guidelines.

The Planon Accellerator web application was audited between February 19 and February 29 2024. The audit was conducted using the WCAG-EM evaluation method. A testing instance of the application was provided by Planon. A subset of the application has been audited to get a good overview of the current state of the application. The aim of the audit is to provide clear accessibility issues to stakeholders, such as Planon's clients and developers. We are glad to see that many problems that have been found earlier have been fixed, or partially fixed by Planon. A few key findings include:

* The homepage has a set of gadgets, these gadgets are currently not accessible to users of screen readers due to the incorrect use of menu roles
* The tree views that are common in the Accelerator application, such as the Properties list, have various keyboard navigation issues and are not fully accessible to screen reader users
* The various data visualisations and charts in the application are not accessible

The audit focuses specifically on the accessibility of the website for people with a disability, such as people who are blind, deaf, low-literate or have other functional problems. For them it is important that the website is technically and substantively designed in such a way that the site is usable. Optimizing a website for accessibility has more advantages; it makes the website more usable for everyone (for example also for people who look at their mobile phone in a sunny environment) and it makes the site easier to find in search engines.

Scope of the evaluation

Website name Planon Accelerator
Scope of the website
  • All generic components of the Planon Accelerator framework; the launch centre, the homepage, the toolbar in the header of the page.
  • My Planon > Contracts.
  • REM Portfolio > 'Properties' TSI
Conformance target WCAG 2.1 level AA
Accessibility support baseline Common browsers and assistive software.

Overview of audit results

Principle Passed Failed Can't tell
1 Perceivable 12 8 0
2 Operable 11 6 0
3 Understandable 8 2 0
4 Robust 1 2 0
Total 32 18 0

Reading Guide

This evaluation is a snapshot. The website might have been changed. The problems found are only examples. Therefore, check for any problem whether this also occurs in other places. This evaluation is just a sample of a few pages. As many different types of pages are included in the sample as possible to get the best impression of the accessibility. Pay attention! New problems may arise when making improvements or changes to the website/app. Success criteria marked with "Not present" are automatically approved. Success criteria marked with "Unknown" or "Can't tell" are not approved.

Detailed audit results


1. Perceivable

1.1 Text Alternatives

1.1.1 Non-text Content (Level A)

All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below.

Information about success criterion 1.1.1 Non-text Content

Outcome: Failed

Findings: The Planon logo has no appropriate text alternative. The link that contains this logo has an aria-label of "Home", which overrides the alt attribute for the image. The logo has a correct alt attribute, which would describe the image as well as the link target, but this is overridden by the aria-label. Solve this by removing the aria-label.

The icons before the menu items in the navigation with the class `k-sprite` contain icons from the Planon icon font. These icons become part of the accessible name, but are decorative here. Give the span containing the icon an `aria-hidden=true` attribute to hide them from assistive technologies.

In edit mode (homepage, bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient), the delete buttons have an accessible name of "Close". This does not accurately describe the purpose of these buttons. Give the button a better accessible name such as "Delete".

In edit mode (homepage, bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient), the "+" icon signifies that the button can be used to add a gadget. However, this is not indicated in the accessible name of these buttons. Ensure the accessible name contains a text alternative for this icon, such as "Add widget ...".

The chart "Investment option" (homepage, bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient) has no text alternative. Provide a text description or a (link to a) table displaying the data. The text in the SVG is readable, but does only contain the values displayed on the axes and has no meaning for users that can't see the chart. If an appropriate alternative is provided next to, or outside the chart, ensure the chart is marked as a decorative image.

When an error message appears (homepage, bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient), a symbol in the form of an exclamation mark is displayed. This exclamation mark has a meaning, namely a warning. Therefore, a text alternative should be provided, such as: "Attention" or "Beware". This happens for example when adding a new visitor from the Homepage > Visitor list and submitting the form when nothing has been filled out.

In REM - Portfolio > Properties (bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient): When property details are shown, there is a photo of the property. This image has an alt attribute with the file path as the value for that attribute: `alt="../resources/images/M1EiJUAl0qEL_KGoeXNXNnHezNnyS23I5KilTvYYnox2owGul8oWoWGDkxYIOUqUxDa44T6_1X99d_xY-1dxwC2THCvkEwQ0X-VZ9Qu10k9f6siEe5sYU3x7AQb8brNADURXS-NbQN1Yo2_dkf8PIiuy1iGkG3LuFSvSB31xEPcqvZZfmacJFg/M1Ee0/C2Td4/99de3/URX0a/Kil0d/XNX31/I5K1e/owG1e/oWG3e/YYned/1iG8e/f8Ped/kxYdb/YU3f6/Property%202.png?lastmodified=1708123810000"`. This is not an acceptable text alternative. This is also not a decorative image, so an empty alt attribute is not the solution to this problem.

The Planon logo (Login, bcberkwcagaudit-prod.plnd.cloud/j_security_check
) has a text alternative of "Planon". This text doesn't describe the image properly. Indicate that this is a logo by changing the text to "Planon logo".

My telephone directory (homepage, bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient): The contact photos have an `alt` attribute that is equal to the filename. These text alternatives are not descriptive. Consider changing the text to "Photo of {contact name}".

My Phone directory (homepage, bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient): After expanding a row and clicking "more details", a dialog opens. This dialog has a button next to "space" to view a CAD drawing of the users' location. However, this button is named "Choose value", which does not describe the purpose of this button.

After selecting multiple properties from the tree and choosing 'Modify within selection' (REM - Portfolio / Properties, bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient), a dialog is shown with 3 tabs. After the field 'Parent level' there are two buttons with 2 different icons. Both buttons are named 'Parent level'. This is caused by `aria-labelledby="id1e64"` on both elements. This overrides the also present `aria-label`. Remove the aria-labelledby attribute.

The button to turn a filter on or off has a name (REM - Portfolio / Properties, bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient), but the state can only be derived from the image of the toggle button and the green color. Toggle button names are often ambiguous, so make very clear what the button does, for example by updating the button text (aria-label): 'Turn filter off' and 'Turn filter on'. `<a href="#" id="id6f" draggable="false" title="Filter on/off" role="button" class="filterSwitch temporary-onoff-filter" aria-label="Filter on/off" data-planonid="OnOffFilterButton_">`


1.2 Time-based Media

1.2.1 Audio-only and Video-only (Prerecorded) (Level A)

For prerecorded audio-only and prerecorded video-only media, the following are true, except when the audio or video is a media alternative for text and is clearly labeled as such:

Information about success criterion 1.2.1 Audio-only and Video-only (Prerecorded)

Outcome: Inapplicable


1.2.2 Captions (Prerecorded) (Level A)

Captions are provided for all prerecorded audio content in synchronized media, except when the media is a media alternative for text and is clearly labeled as such.

Information about success criterion 1.2.2 Captions (Prerecorded)

Outcome: Inapplicable


1.2.3 Audio Description or Media Alternative (Prerecorded) (Level A)

An alternative for time-based media or audio description of the prerecorded video content is provided for synchronized media, except when the media is a media alternative for text and is clearly labeled as such.

Information about success criterion 1.2.3 Audio Description or Media Alternative (Prerecorded)

Outcome: Inapplicable


1.2.4 Captions (Live) (Level AA)

Captions are provided for all live audio content in synchronized media.

Information about success criterion 1.2.4 Captions (Live)

Outcome: Inapplicable


1.2.5 Audio Description (Prerecorded) (Level AA)

Audio description is provided for all prerecorded video content in synchronized media.

Information about success criterion 1.2.5 Audio Description (Prerecorded)

Outcome: Inapplicable


1.3 Adaptable

1.3.1 Info and Relationships (Level A)

Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.

Information about success criterion 1.3.1 Info and Relationships

Outcome: Failed

Findings: The widgets on the homepage (bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient
) are structured as an ARIA menu. The `role=menuitem` attribute on every widget hides the whole widget content for some screenreaders such as NVDA in browse mode, making all home page widgets inaccessible. Ensure to only use ARIA roles where needed and apply the correct roles. Automatic tests can prevent some cases of incorrect roles, but testing with screen readers is critical."

The pagination links (REM - Turnover rent / Configuration, bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient
) are not clearly labelled and grouped. Add a containing `<nav>` element and give this element an aria-label describing the purpose (such as "Pagination"). Group the previous/page numbers/next links in a list in this nav, so it is clear that these links belong together.

The "Filter name" field (REM - Portfolio / Properties, bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient) is usable by keyboard, but the filters are not announced by screen readers. Mark this field up using the combobox role and ensure the selectable options are read while using the arrow keys to select them.

The calendar to set the reference date has a visual outline for the current day, however this information is not conveyed to assistive technologies. This information should be available for assistive technologies as well. The best way to do this is to use the aria-current attribute.

While editing the preferences on the My Account page, the radio buttons are not grouped properly.

  • The setting that is being changed is not linked to the set of radio buttons. Use a `fieldset` element and a `legend` element to label the group of radio buttons
  • The radio buttons have no name attribute, therefore most screen readers will read the total number of radio buttons incorrectly. Ensure a screen reader is able to read "1 of 2" for the 24 hour time setting, for example. The easiest way to do this is to give the radio buttons of the same set the same name attribute.

When clicking on an element in the pi chart "Projects per status" (homepage, bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient), a dialog opens. This dialog contains an iframe without a title attribute. Set the title attribute to a descriptive name for the iframe.

In edit mode (homepage, bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient): After adding a widget to the home screen, there is no audio feedback for a screen reader user that confirms the action. A solution could be adding an aria-live area or a status message (role=status) somewhere on the homepage that gives feedback via the screen reader and also visually notifying the user that the item was added to the bottom of the page.

In the user preferences it's possible to select a theme (homepage, bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient). The currently chosen theme can only be recognised by its colour (blue instead of black/grey). This information needs to be conveyed programmatically as well.

The data panel (REM - Portfolio / Properties, bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient) contains groups of fields, for example on the Characteristics tab. The groups titles, such as "General" are not structured as headings or fieldsets. To provide structured information and reach as much users of assistive technologies as possible, consider using a fieldset + legend to describe the groups and put an appropriate h2/h3 element inside the legend. This also occurs in the dialog that is shown after selecting multiple properties from the tree and choosing 'Modify within selection'.

In the properties list view, a table is shown (REM - Portfolio / Properties, bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient). Columns are sortable. There is no programmatic indication that this is possible, so assistive tech can not communicate this to users. Users can also not know in which order the rows are sorted, ascending or descending. Sortable columns appear in several places throughout the application.

Advice: The div surrounding the list if gadgets that can be added in edit mode (homepage, bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient), the "Gadget store list", has a role of "layoutTable" in Chromium based browsers. We consider this a browser bug, but this ca nbe fixed by giving the div a `role=none` attribute.


1.3.2 Meaningful Sequence (Level A)

When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.

Information about success criterion 1.3.2 Meaningful Sequence

Outcome: Passed


1.3.3 Sensory Characteristics (Level A)

Instructions provided for understanding and operating content do not rely solely on sensory characteristics of components such as shape, size, visual location, orientation, or sound.

Information about success criterion 1.3.3 Sensory Characteristics

Outcome: Passed


1.3.4 Orientation (Level 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.

Information about success criterion 1.3.4 Orientation

Outcome: Passed


1.3.5 Identify Input Purpose (Level AA)

The purpose of each input field collecting information about the user can be programmatically determined when:

Information about success criterion 1.3.5 Identify Input Purpose

Outcome: Failed

Findings: The username and password fields (Login, bcberkwcagaudit-prod.plnd.cloud/j_security_check) have an `autocomplete=off` attribute and can't be filled automatically. Add the correct `autocomplete` values so that the fields can be filled automatically by user agents of assistive technologies.


1.4 Distinguishable

1.4.1 Use of Color (Level A)

Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

Information about success criterion 1.4.1 Use of Color

Outcome: Failed

Findings: Under the chart "Investment option" (homepage, bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient) is a button called "Investment option". Clicking this button shows or hides the bars in the chart. This button uses colour alone to indicate it's state. Ad another visual indicator so people can determine the button state without having to see colours.

In the user preferences it's possible to select a theme (homepage, bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient). The currently chosen theme can only be recognised by its colour (blue instead of black/grey). There needs to be a second characteristic, like a checkmark, or bold text.


1.4.2 Audio Control (Level 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.

Information about success criterion 1.4.2 Audio Control

Outcome: Passed


1.4.3 Contrast (Minimum) (Level AA)

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:

Information about success criterion 1.4.3 Contrast (Minimum)

Outcome: Failed

Findings: The calendar to set the reference date has insufficient contrast for the gray days that belong to the previous or next month.

In the 'Properties' section, you can click on one of the Properties, after which a list of details appears. Here you see light red asterisks in front of several fields. The light red colour has too low a contrast. The contrast ratio of red `#FF5245` on light gray `#F6F6F6` is 2.96:1. This should be at least 3.0:1.

The contrast between the text in the error message (#ff5245) and the pink background (#f7dee1) is insufficient: 2,5:1 (Login, bcberkwcagaudit-prod.plnd.cloud/j_security_check).


1.4.4 Resize text (Level 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.

Information about success criterion 1.4.4 Resize text

Outcome: Passed


1.4.5 Images of Text (Level AA)

If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text except for the following:

Information about success criterion 1.4.5 Images of Text

Outcome: Inapplicable


1.4.10 Reflow (Level AA)

Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for:

Except for parts of the content which require two-dimensional layout for usage or meaning.

Information about success criterion 1.4.10 Reflow

Outcome: Failed

Findings: It is not possible to zoom to 400% at a viewport width of 1280px and still be able to use the application as intended (homepage, bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient).


1.4.11 Non-text Contrast (Level AA)

The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):

Information about success criterion 1.4.11 Non-text Contrast

Outcome: Failed

Findings: In the widget 'Projects per status' (homepage, bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient), the colour contrasts between colours of the sections in the pie chart are not sufficient. This could be solved by adding some white space between the sections. This will only work if the chosen colours themselves have a contrast of at least 3:1 against a white background.

The borders surrounding the username/password inputs (Login, bcberkwcagaudit-prod.plnd.cloud/j_security_check) have not enough contrast.

After selecting multiple properties from the tree and choosing 'Modify within selection' (REM - Portfolio / Properties, bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient), a dialog is shown with 3 tabs. There is a button to select an image. Activating this option opens another dialog 'Open' with folders to choose from. There are several contrast issues here:

  • The borders around the fields
  • The contrast of the light grey 'Clear' button in the search field
  • The contrast of the placeholder text 'Search' is too low, an this should be also a label that remains visible.

Advice: In edit mode (homepage, bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient): On hover, the plus sign icon becomes green (`#1bc23e`). Contrast against a white background is 2,4:1, where this should be at least 3:1. Contrast is sufficient when the user activates the high contrast mode or dark mode, but it's recommended to ensure contrasts are sufficient in every mode.


1.4.12 Text Spacing (Level 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:

Information about success criterion 1.4.12 Text Spacing

Outcome: Failed

Findings: Setting the text spacing according to the requirements in this success criterion results in some text being truncated or hidden to the point that the user can't properly identify controls (REM - Portfolio / Properties, bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient).


1.4.13 Content on Hover or Focus (Level AA)

Where receiving and then removing pointer hover or keyboard focus triggers additional content to become visible and then hidden, the following are true:

Information about success criterion 1.4.13 Content on Hover or Focus

Outcome: Passed


2. Operable

2.1 Keyboard Accessible

2.1.1 Keyboard (Level A)

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.

Information about success criterion 2.1.1 Keyboard

Outcome: Failed

Findings: The menu bar containing the "Reference date", "Help", "User info" etc options is marked up as a menubar. This menu should be navigable by the arrow keys and should have one tab stop. Currently every item has it's own tab stop. Menu roles are mainly used for complex menus in web applications. Feel free to mark up simple navigation links as links in a list and a nav element. If the menu is kept, ensure the recommendations and requirements from the ARIA specification are met.

In edit mode (homepage, bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient), there is no way to move gadgets using the keyboard. Provide an alternative to the drag and drop interface. To be compliant with WCAG 2.2 in the future, provide visible buttons on screen to move the gadgets and not just keyboard hotkeys.

After clicking an element in the pi chart "Projects per status" (homepage, bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient), a dialog opens. This dialog contains a table with projects. The table itself and every row in the table is keyboard focusable, but the rows are non-interactive. Ensure non-interactive elements are not focusable.

The pi chart on the homepage in the "Projects per status" gadget can be rotated using a mouse. There is no keyboard equivalent for this functionality. Ensure the chart can also be rotated using a keyboard.

The interactive elements in the pi chart "Projects per status" (homepage, bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient) are not usable by keyboard. Ensure all elements are focusable and can be activated by keyboard.

Under the chart "Investment option" (homepage, bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient) is a button called "Investment option". Clicking this button shows or hides the bars in the chart. This button is not keyboard accessible.

In the navigation menu/launch center: Keyboard focus is not managed as described in the ARIA specification. Arrow keys move through the items, but sub menus can't be opened using the right arrow key and can't be closed using left arrow key/escape. Follow the expected keyboard interactions as described in the ARIA specification or remodel this element as a treeview and follow keyboard interaction for that role. In that case, left/right arrow keys should collapse/expand items in the tree and allow users to quickly move up a level in the menu structure.

In the navigation menu/launch center (REM - Portfolio / Properties, bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient): The end key should move to the last menu item, however the parent ul element containing the menu gets focus instead.

After selecting multiple properties from the tree and choosing 'Modify within selection' (REM - Portfolio / Properties, bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient), a dialog is shown with 3 tabs. There is a button to select an image. Activating this option opens another dialog 'Open' with folders to choose from. With a mouse, you can double-click a folder to move into it. This is not possible with the keyboard.


2.1.2 No Keyboard Trap (Level 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.

Information about success criterion 2.1.2 No Keyboard Trap

Outcome: Passed


2.1.4 Character Key Shortcuts (Level 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:

Information about success criterion 2.1.4 Character Key Shortcuts

Outcome: Passed


2.2 Enough Time

2.2.1 Timing Adjustable (Level A)

For each time limit that is set by the content, at least one of the following is true:

Information about success criterion 2.2.1 Timing Adjustable

Outcome: Failed

Findings: During testing, a session time out has been encountered from time to time. It seems that in this configuration, the session cannot be extended, but logging in again is the only option. Ensure the session configuration meets the requirements as specified in this success criterion and that the user can either disable or extend the session timeout up to ten times. Extending the session should be an easy operation, such as just pressing space or enter. In practice, a button that gets focus is a good solution.

In the properties tree, it is possible to select multiple properties by control-clicking on items. It is not possible to do this with a mouse or using a touchscreen.


2.2.2 Pause, Stop, Hide (Level A)

For moving, blinking, scrolling, or auto-updating information, all of the following are true:

Information about success criterion 2.2.2 Pause, Stop, Hide

Outcome: Passed


2.3 Seizures and Physical Reactions

2.3.1 Three Flashes or Below Threshold (Level 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.

Information about success criterion 2.3.1 Three Flashes or Below Threshold

Outcome: Passed


2.4.1 Bypass Blocks (Level A)

A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.

Information about success criterion 2.4.1 Bypass Blocks

Outcome: Passed


2.4.2 Page Titled (Level A)

Web pages have titles that describe topic or purpose.

Information about success criterion 2.4.2 Page Titled

Outcome: Failed

Findings: The page title "Planon ProCenter : Accelerator" is the same for all pages in the application. Ensure every page has a descriptive title.


2.4.3 Focus Order (Level 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.

Information about success criterion 2.4.3 Focus Order

Outcome: Failed

Findings: In edit mode (homepage, bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient), when activate the "Close edit mode" button, the focus is lost. Ensure the focus is set on the "Edit mode" button.

After clicking an element in the pi chart "Projects per status" (homepage, bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient), a dialog opens. When switching result pages, the focus is lost. Ensure the focus stays where it was, on the previous/next button.

After moving gadgets in edit mode and exiting edit mode (homepage, bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient). The gadgets are visually rearranged, but the order of gadgets in the DOM stays the same as before editing. This causes focus order issues. Ensure the visual order matches the order in the DOM.

In edit mode: After adding a widget to the home screen, the element is removed from the list. No other element receives focus. Fix the focus so it is set to the next item in the library after adding one to the page. When no blocks/gadgets are left in the library, show a text in the library that “no gadgets are available in the library” and set the focus on that.

When adding a filter (with `<button class="btn-28 pn-font-icon filterGroupButton" title="Filter option"></button>`) and clicking OK (REM - Portfolio / Properties, bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient), the dialog disappears, but the focus is lost. This should be set back to the button.


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.

Information about success criterion 2.4.4 Link Purpose (In Context)

Outcome: Passed


2.4.5 Multiple Ways (Level 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.

Information about success criterion 2.4.5 Multiple Ways

Outcome: Passed


2.4.6 Headings and Labels (Level AA)

Headings and labels describe topic or purpose.

Information about success criterion 2.4.6 Headings and Labels

Outcome: Passed


2.4.7 Focus Visible (Level AA)

Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.

Information about success criterion 2.4.7 Focus Visible

Outcome: Failed

Findings: Various modal dialogs (homepage, bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient
) don't trap the focus properly, it is possible to leave the dialog by shift+tabbing. For example when clicking a section of a pi chart in the projects per status widget on the homepage. Ensure the focus is trapped for keyboard users as well as for screen readers within modal dialogs. Also, a best practice is to enable closing of the dialog with the escape key. Ensure the focus is placed on the button/link that opened the dialog after it has been closed.

The focus outline is not visible (Login, bcberkwcagaudit-prod.plnd.cloud/j_security_check). Ensure the focus is visible and the outline has enough contrast.


2.5 Input Modalities

2.5.1 Pointer Gestures (Level 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.

Information about success criterion 2.5.1 Pointer Gestures

Outcome: Passed


2.5.2 Pointer Cancellation (Level A)

For functionality that can be operated using a single pointer, at least one of the following is true:

Information about success criterion 2.5.2 Pointer Cancellation

Outcome: Passed


2.5.3 Label in Name (Level A)

For user interface components with labels that include text or images of text, the name contains the text that is presented visually.

Information about success criterion 2.5.3 Label in Name

Outcome: Failed

Findings: The accessible name of the user menu is "User info" and is set using aria-label. An aria-label overrides the contents of an element, so the username is no longer part of the element's accessible name. Ensure all visible text is included in the accessible name for all interactive elements and that the accessible name describes the element. In this case, a suitable label might be "OGPTEST, current user information". Note also that there is an image within this element. Depending the solution for this issue, the value of the alt attribute may have to be adjusted, as 'alt="BC.jpg"' is not a good text alternative.

In the tab 'Properties details' (REM - Portfolio / Properties, bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient) there is a quick search field just above the list with properties. You can choose between 'Code' and 'Name'. The accessible name of the select element is 'Search expression', but the visible label is whichever option is selected in the select element. This is caused by `aria-label="Search expression"`. It is possible to name the select, via a (visually hidden) label-element. Make sure that visible labels (not necessarily label-elements!) contain the same text as the accessible name.


2.5.4 Motion Actuation (Level 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, except when:

Information about success criterion 2.5.4 Motion Actuation

Outcome: Inapplicable


3. Understandable

3.1 Readable

3.1.1 Language of Page (Level A)

The default human language of each Web page can be programmatically determined.

Information about success criterion 3.1.1 Language of Page

Outcome: Passed


3.1.2 Language of Parts (Level 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.

Information about success criterion 3.1.2 Language of Parts

Outcome: Passed


3.2 Predictable

3.2.1 On Focus (Level A)

When any component receives focus, it does not initiate a change of context.

Information about success criterion 3.2.1 On Focus

Outcome: Passed


3.2.2 On Input (Level 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.

Information about success criterion 3.2.2 On Input

Outcome: Passed


3.2.3 Consistent Navigation (Level 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.

Information about success criterion 3.2.3 Consistent Navigation

Outcome: Passed


3.2.4 Consistent Identification (Level AA)

Components that have the same functionality within a set of Web pages are identified consistently.

Information about success criterion 3.2.4 Consistent Identification

Outcome: Passed


3.3 Input Assistance

3.3.1 Error Identification (Level 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.

Information about success criterion 3.3.1 Error Identification

Outcome: Passed


3.3.2 Labels or Instructions (Level A)

Labels or instructions are provided when content requires user input.

Information about success criterion 3.3.2 Labels or Instructions

Outcome: Failed

Findings: On multiple pages, a "*" is used to indicate required fields. However, the meaning of this "*" is not indicated anywhere. Add an explanation at the top of every form, explaining that a "*" indicates a required field.

The username and password fields are only labelled by a `title` and a `placeholder` attribute. When text is entered in the field, there is no visible label. Ensure a visible label is always present by using `label` elements and associating them with the fields, for example.

Both username and password fields are required (Login, bcberkwcagaudit-prod.plnd.cloud/j_security_check), but this is not indicated on the page. Add a text like "All fields are required" or add a required indicator to the fields such as an asterisk and explain what this indicator means on the page.


3.3.3 Error Suggestion (Level 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.

Information about success criterion 3.3.3 Error Suggestion

Outcome: Failed

Findings: Not every error message contains clear instructions on how to solve the error. Always include hints to solve the error if field validation fails. For example, if an email address is requested, a good error message looks like "... is not a valid email address, enter a valid email address such as someone@example.com". If a field is required, a good error message could be "This field is required, please enter a value".

The error message when an invalid username/password has been entered (Login, bcberkwcagaudit-prod.plnd.cloud/j_security_check) does not give a suggestion on how to resolve the problem. Add a suggestion like "Enter a valid username and password".


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:

  1. Reversible: Submissions are reversible.
  2. Checked: Data entered by the user is checked for input errors and the user is provided an opportunity to correct them.
  3. Confirmed: A mechanism is available for reviewing, confirming, and correcting information before finalizing the submission.

Information about success criterion 3.3.4 Error Prevention (Legal, Financial, Data)

Outcome: Passed


4. Robust

4.1 Compatible

4.1.1 Parsing (Level 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.

Information about success criterion 4.1.1 Parsing

Outcome: Passed


4.1.2 Name, Role, Value (Level 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.

Information about success criterion 4.1.2 Name, Role, Value

Outcome: Failed

Findings: The skip links such as "Skip to Search" and "Skip to Main Content" are marked up as buttons using the `role=button` attribute. Ensure that all the behaviour associated with a role is implemented. In this case, activating a button with the space bar is expected, but missing. The easiest solution is to use a `<button>` element which will apply the correct behaviour automatically. It is also an option to implement the behaviour using a keyUp event in javascript. Skip links are usually normal links (`<a>` elements), so dropping the role and handling this as a normal link is another option.

The skip links such as "Skip to Search" and "Skip to Main Content" have an `aria-label` attribute that doubles their link text and so has no effect. However, having such labels complicates the code and may lead to issues when translating the user interface. Remove the aria-label, so the link text is used as the accessible name. Check the whole application for aria-label attributes that double the existing accessible name or are unnecessary because there is already a proper and descriptive accessible name present.

The collapse/expand navigation button has no descriptive accessible name. This button contains an icon that is placed using CSS before/after pseudo elements and an icon font. This icon is seen as a normal font character and as such is used as the accessible name for this button. There is a title attribute that contains "collapse navigation" or "Expand navigation", but this is presented as an accessible description and not exposed by many assistive technologies. The application contains many buttons that are labelled this way, check all these buttons for this issue. The most robust way to solve this is to use an `img` element to place the icons and give the element a descriptive alt attribute. However, this means that the icon font can not be used and that the icons should be converted to images or SVG elements. The advantage of this solution is that the browser can provide a suitable fallback if the CSS and/or icon font is not loaded properly. To keep using the icon font, ensure every button has a descriptive aria-label. The aria-label will override all button contents, so if the button contains more than the icon, ensure this is reflected in the label as well. For buttons that have a collapsed/expanded state such as this navigation button, only include the name such as "Navigation" and not the collapse/expand information. This information is already conveyed by the aria-expanded attribute.

The treeview containing properties (REM - Portfolio / Properties, bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient) does not convey all information to assistive technologies. For example if an item is expandable and it's current expanded state. This is an issue for all trees in the application. Implement the ARIA tree role including all keyboard interaction as described in the ARIA specification. Give the tree view a descriptive name such as "Properties" in this case. See for more information <developer.mozilla.org/enUS/docs/Web/Accessibility/ARIA/Roles/tree_role>.

The "Reference date" option is labelled using aria-labelledby. This only references the selected value such as "Today", but should also contain the field label "Reference date". When this item is activated, a submenu opens which is accessed by pressing tab. Ensure the submenu gets focus when this option is activated and that it is navigable by the arrow keys.

Many buttons (homepage, bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient
), such as the "Edit mode" button, can't be activated by pressing the space bar. This is expected for a button. Ensure all elements with `role=button` can be activated by pressing space bar.

In edit mode (homepage, bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient
), the buttons to add widgets are marked up as links. These elements should be identified as buttons, add a `role=button` attribute, or use the native `<button>` element.

In edit mode (homepage, bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient), the set of current gadgets is not labelled as such. Give the containing `ul` element a descriptive aria-label, such as "Current gadgets". Also, either remove the menu role or let this component behave as a menu.

When clicking an element in the "Projects per status" pi chart (homepage, bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient), a dialog opens. This dialog has no accessible name. Add an aria-label to the dialog that describes it's purpose.

After clicking an element in the pi chart "Projects per status" (homepage, bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient), a dialog opens. If the previous/next button is disabled, this state is not communicated to assistive technologies. Add an aria-disabled attribute to the disabled buttons, or use the native `button` element and add a `disabled` attribute.

After clicking an element in the pi chart "Projects per status" (homepage, bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient), a dialog opens. Select the blue button with the white arrow "Choose value: property", another dialog opens. Leave all fields empty and press search. The resulting list has a checkbox to select all items, this checkbox does not have an accessible name. Add an accessible name such as "Select all".

After clicking an element in the pi chart "Projects per status" (homepage, bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient), a dialog opens. Select the blue button with the white arrow "Choose value: property", another dialog opens. Leave all fields empty and press search. The resulting list has selectable rows. The selected state of the row is not communicated to assistive technologies.

The pi chart "Projects per status" (homepage, bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient) contains text elements with the project status and the number of projects. These text elements are buttons, but don't have the role of button. Also, they should be grouped in a list which describes the chart's purpose, such as "Projects per status".

Under the chart "Investment option" (homepage, bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient) is a button called "Investment option". Clicking this button shows or hides the bars in the chart. This button has no role. Give this button a role of button and ensure it conveys it's state (on/off) to assistive technologies.

The homepage widgets contain multiple tables, for example in 'My Planon' > 'My telephone directory'. These tables have a `tabindex=0` attribute on every row, making the row focusable. However, since rows are usually non-interactive components, it is unclear for users of screenreaders that these rows can be activated. Having a tab stop for every row is also not ideal for keyboard users, a large data table causes many tab stops before the end of the table is reached. An ARIA grid pattern is suitable here. Ensure proper column and row headers and implement keyboard navigation by arrow keys. See for more information <developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/grid_role>.

In the menu in the header of the page: When a menu item is expanded, for example the user info button, it does not communicate its state of expanded or collapsed.

In the navigation menu/launch center: The current page is marked up with `aria-selected`, this attribute is not appropriate for this purpose. Use `aria-current="page"` to identify the currently opened page. If this launch center would be restructured as a treeview (now it is a menu), `aria-selected` could be used to identify the currently focused item when navigating through the tree.

In the navigation menu/launch center: The sub menus are marked up using `group` roles. Groups are not meant for sub menus, but to split a set of menu items into multiple groups. Now, most assistive technologies will not indicate the sub menus correctly. Either nest menu roles to indicate sub menus and indicate a sub menu will open by using the `aria-haspopup=menu` attribute on the main menuitem or restructure the markup of this element as a treeview, which might be more appropriate here.

My phone directory (Homepage, bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient): The expandable rows don't convey their expandable state to assistive technologies. Add an `aria-expanded` attribute to the row to indicate it's state.

The filter options button (REM - Portfolio / Properties, bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient) does not convey it's collapsed/expanded state to assistive technologies. Add an `aria-expanded` attribute to indicate the state. The menu that opens is usable by keyboard (pressing tab), but does not follow the roles/keyboard interactions that are expected of a menu.

Many fields in the data panel (REM - Portfolio / Properties, bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient) have an information button, a button to chose the value or both. These buttons have the field name as accessible name and the description contains it's function (information or choose value). Ensure the name is complete and includes the action of the button as well.

The buttons in the action bar that contain sub menus (REM - Portfolio / Properties, bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient), such as "Add" have no role and don't convey their collapsed/expanded state. Add the appropriate role (button) and ensure the state is presented to assistive technologies. Either using `aria-expanded` or `aria-haspopup`. Also ensure the sub menu follows the ARIA specification and has the correct roles and keyboard interaction.

When adding a building (REM - Portfolio / Properties, bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient), the browse button for an image in the text "Drop file or browse" has no role. Add the correct role (button).

When adding a building and navigating away from the page (REM - Portfolio / Properties, bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient), a question pops up that asks if you want to save the changes. This dialog has no accessible name and description. Ensure these kind of dialogs have their title set as aria-label (or via aria-labelledby) and that the main content (the question) is set as the aria-description (or using aria-describedby).

After selecting multiple properties from the tree and choosing 'Modify within selection' (REM - Portfolio / Properties, bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient), a dialog is shown with 3 tabs. Each of the tabs shows checkboxes that have no name. These checkboxes can be named by aria-labelledby, referring to the id of the corresponding label.

The button to add a filter `<button class="btn-28 pn-font-icon filterGroupButton" title="Filter option"></button>` does not have a name (REM - Portfolio / Properties, bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient).


4.1.3 Status Messages (Level 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.

Information about success criterion 4.1.3 Status Messages

Outcome: Failed

Findings: After clicking an element in the pi chart "Projects per status" (homepage, bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient), a dialog opens. In this dialog is a status messages that changes when switching result pages, for example "11 - 19 of 19". This status message is not automatically announced. Ensure this status is conveyed to assistive technology by setting a `role=status` attribute on the status message.

The error message (class="pss_dialogaware_message_block") which is displayed above the page (homepage, bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient) is not being read out. This DIV should already be present at the moment the page is loaded, so the screenreader software kan already listen if new text is added in that area. To do this the role=status should be assigned. The message will then be read out at the moment that text is added to this element. The messages for the fields, (class="pss_field_feedback_label"), are not linked to the inputs. You can link these by using aria-describedby on the input, and letting that refer to the id of the error message text beneath the field. It would would also be good to add aria-invalid= true for an input that is filled with incorrect input. This happens for example when adding a new visitor from the Homepage > Visitor list and submitting the form when nothing has been filled out.

The "Count" button (REM - Portfolio / Properties, bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient) adds the number of properties to the first item in the tree, but this information is not announced by screen readers. Either provide a status message (using role=status) or add the result of the count to the name or description of the Count button.

The button 'All' at the bottom of the Properties tree selects all properties (REM - Portfolio / Properties, bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient). The text of the root node changes to 'All properties selected' and in the details field, there is also a message and two action buttons 'Modify within selection' and 'Action on selection'. The button 'None' deselects the properties. All of this cannot be communicated by assistive technology. This could be solved by adding role=status, probably to the text in the details field, as that's where the instructions are, like 'Select a single record from the list of Properties to see details'.

Basis for this evaluation

The audit was conducted based on the evaluation method of the W3C, WCAG-EM. This is largely done manually by taking a sample. For a quickscan we use parts of this methodology. Despite all the researcher's care and experience, it is possible that a problem has not been identified. Keep in mind that in a next audit certain parts could be assessed differently because of further development of techniques and assistive software. Tools are used in the manual audit.

Sample of audited web pages

Relied upon techniques

Web browsers (User Agents) and other software

The following software was used in this evaluation:

Resources:

This report is mainly created with the online W3C report tool.

Source: toegankelijkheidsrapport.swink.nl/planon-accelerator/audit/
Printed: 2024-05-20 05:25:44 v2.4-011