Issues:
Audit Accessibility Planon Accelerator
(Issues only)
Scope of the evaluation
| Website name | Planon Accelerator |
|---|---|
| Date | 14 March 2024 |
| Scope of the website |
|
| Conformance target | WCAG 2.1 level AA |
Detailed audit results
1. Perceivable
1.1 Text Alternatives
1.1.1 Non-text Content (Level A)
Information about success criterion 1.1.1 Non-text Content
Outcome: Failed
Finding 1: 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.
Finding 2: 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.
Finding 3: In edit mode (homepage, https://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".
Finding 4: In edit mode (homepage, https://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 ...".
Finding 5: The chart "Investment option" (homepage, https://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.
Finding 6: When an error message appears (homepage, https://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.
Finding 7: In REM - Portfolio > Properties (https://bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient?2#REM89_0000000603): 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.
Finding 8: The Planon logo (Login, https://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".
Finding 9: My telephone directory (homepage, https://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}".
Finding 10: My Phone directory (homepage, https://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.
Finding 11: After selecting multiple properties from the tree and choosing 'Modify within selection' (REM - Portfolio / Properties, https://bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient?2#REM89_0000000603), 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.
Finding 12: The button to turn a filter on or off has a name (REM - Portfolio / Properties, https://bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient?2#REM89_0000000603), 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.3 Adaptable
1.3.1 Info and Relationships (Level A)
Information about success criterion 1.3.1 Info and Relationships
Outcome: Failed
Finding 13: The widgets on the homepage (https://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."
Finding 14: The pagination links (REM - Turnover rent / Configuration, https://bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient#PfM65-0000001686
) 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.
Finding 15: The "Filter name" field (REM - Portfolio / Properties, https://bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient?2#REM89_0000000603) 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.
Finding 16: 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.
Finding 17: 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.
Finding 18: When clicking on an element in the pi chart "Projects per status" (homepage, https://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.
Finding 19: In edit mode (homepage, https://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.
Finding 20: In the user preferences it's possible to select a theme (homepage, https://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.
Finding 21: The data panel (REM - Portfolio / Properties, https://bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient?2#REM89_0000000603) 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'.
Finding 22: In the properties list view, a table is shown (REM - Portfolio / Properties, https://bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient?2#REM89_0000000603). 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.
Finding 23: Advice: The div surrounding the list if gadgets that can be added in edit mode (homepage, https://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.5 Identify Input Purpose (Level AA)
Information about success criterion 1.3.5 Identify Input Purpose
Outcome: Failed
Finding 24: The username and password fields (Login, https://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)
Information about success criterion 1.4.1 Use of Color
Outcome: Failed
Finding 25: Under the chart "Investment option" (homepage, https://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.
Finding 26: In the user preferences it's possible to select a theme (homepage, https://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.3 Contrast (Minimum) (Level AA)
Information about success criterion 1.4.3 Contrast (Minimum)
Outcome: Failed
Finding 27: The calendar to set the reference date has insufficient contrast for the gray days that belong to the previous or next month.
Finding 28: 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.
Finding 29: The contrast between the text in the error message (#ff5245) and the pink background (#f7dee1) is insufficient: 2,5:1 (Login, https://bcberkwcagaudit-prod.plnd.cloud/j_security_check).
1.4.10 Reflow (Level AA)
Information about success criterion 1.4.10 Reflow
Outcome: Failed
Finding 30: 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, https://bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient).
1.4.11 Non-text Contrast (Level AA)
Information about success criterion 1.4.11 Non-text Contrast
Outcome: Failed
Finding 31: In the widget 'Projects per status' (homepage, https://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.
Finding 32: The borders surrounding the username/password inputs (Login, https://bcberkwcagaudit-prod.plnd.cloud/j_security_check) have not enough contrast.
Finding 33: After selecting multiple properties from the tree and choosing 'Modify within selection' (REM - Portfolio / Properties, https://bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient?2#REM89_0000000603), 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.
Finding 34: Advice: In edit mode (homepage, https://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)
Information about success criterion 1.4.12 Text Spacing
Outcome: Failed
Finding 35: 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, https://bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient?2#REM89_0000000603).
2. Operable
2.1 Keyboard Accessible
2.1.1 Keyboard (Level A)
Information about success criterion 2.1.1 Keyboard
Outcome: Failed
Finding 36: 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.
Finding 37: In edit mode (homepage, https://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.
Finding 38: After clicking an element in the pi chart "Projects per status" (homepage, https://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.
Finding 39: 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.
Finding 40: The interactive elements in the pi chart "Projects per status" (homepage, https://bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient) are not usable by keyboard. Ensure all elements are focusable and can be activated by keyboard.
Finding 41: Under the chart "Investment option" (homepage, https://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.
Finding 42: 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.
Finding 43: In the navigation menu/launch center (REM - Portfolio / Properties, https://bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient?2#REM89_0000000603): The end key should move to the last menu item, however the parent ul element containing the menu gets focus instead.
Finding 44: After selecting multiple properties from the tree and choosing 'Modify within selection' (REM - Portfolio / Properties, https://bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient?2#REM89_0000000603), 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.2 Enough Time
2.2.1 Timing Adjustable (Level A)
Information about success criterion 2.2.1 Timing Adjustable
Outcome: Failed
Finding 45: 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.
Finding 46: 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.4 Navigable
2.4.2 Page Titled (Level A)
Information about success criterion 2.4.2 Page Titled
Outcome: Failed
Finding 47: 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)
Information about success criterion 2.4.3 Focus Order
Outcome: Failed
Finding 48: In edit mode (homepage, https://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.
Finding 49: After clicking an element in the pi chart "Projects per status" (homepage, https://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.
Finding 50: After moving gadgets in edit mode and exiting edit mode (homepage, https://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.
Finding 51: 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.
Finding 52: When adding a filter (with `<button class="btn-28 pn-font-icon filterGroupButton" title="Filter option"></button>`) and clicking OK (REM - Portfolio / Properties, https://bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient?2#REM89_0000000603), the dialog disappears, but the focus is lost. This should be set back to the button.
2.4.7 Focus Visible (Level AA)
Information about success criterion 2.4.7 Focus Visible
Outcome: Failed
Finding 53: Various modal dialogs (homepage, https://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.
Finding 54: The focus outline is not visible (Login, https://bcberkwcagaudit-prod.plnd.cloud/j_security_check). Ensure the focus is visible and the outline has enough contrast.
2.5 Input Modalities
2.5.3 Label in Name (Level A)
Information about success criterion 2.5.3 Label in Name
Outcome: Failed
Finding 55: 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.
Finding 56: In the tab 'Properties details' (REM - Portfolio / Properties, https://bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient?2#REM89_0000000603) 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.
3. Understandable
3.3 Input Assistance
3.3.2 Labels or Instructions (Level A)
Information about success criterion 3.3.2 Labels or Instructions
Outcome: Failed
Finding 57: 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.
Finding 58: 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.
Finding 59: Both username and password fields are required (Login, https://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)
Information about success criterion 3.3.3 Error Suggestion
Outcome: Failed
Finding 60: 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".
Finding 61: The error message when an invalid username/password has been entered (Login, https://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".
4. Robust
4.1 Compatible
4.1.2 Name, Role, Value (Level A)
Information about success criterion 4.1.2 Name, Role, Value
Outcome: Failed
Finding 62: 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.
Finding 63: 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.
Finding 64: 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.
Finding 65: The treeview containing properties (REM - Portfolio / Properties, https://bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient?2#REM89_0000000603) 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 <https://developer.mozilla.org/enUS/docs/Web/Accessibility/ARIA/Roles/tree_role>.
Finding 66: 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.
Finding 67: Many buttons (homepage, https://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.
Finding 68: In edit mode (homepage, https://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.
Finding 69: In edit mode (homepage, https://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.
Finding 70: When clicking an element in the "Projects per status" pi chart (homepage, https://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.
Finding 71: After clicking an element in the pi chart "Projects per status" (homepage, https://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.
Finding 72: After clicking an element in the pi chart "Projects per status" (homepage, https://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".
Finding 73: After clicking an element in the pi chart "Projects per status" (homepage, https://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.
Finding 74: The pi chart "Projects per status" (homepage, https://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".
Finding 75: Under the chart "Investment option" (homepage, https://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.
Finding 76: 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 <https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/grid_role>.
Finding 77: 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.
Finding 78: 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.
Finding 79: 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.
Finding 80: My phone directory (Homepage, https://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.
Finding 81: The filter options button (REM - Portfolio / Properties, https://bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient?2#REM89_0000000603) 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.
Finding 82: Many fields in the data panel (REM - Portfolio / Properties, https://bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient?2#REM89_0000000603) 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.
Finding 83: The buttons in the action bar that contain sub menus (REM - Portfolio / Properties, https://bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient?2#REM89_0000000603), 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.
Finding 84: When adding a building (REM - Portfolio / Properties, https://bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient?2#REM89_0000000603), the browse button for an image in the text "Drop file or browse" has no role. Add the correct role (button).
Finding 85: When adding a building and navigating away from the page (REM - Portfolio / Properties, https://bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient?2#REM89_0000000603), 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).
Finding 86: After selecting multiple properties from the tree and choosing 'Modify within selection' (REM - Portfolio / Properties, https://bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient?2#REM89_0000000603), 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.
Finding 87: 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, https://bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient?2#REM89_0000000603).
4.1.3 Status Messages (Level AA)
Information about success criterion 4.1.3 Status Messages
Outcome: Failed
Finding 88: After clicking an element in the pi chart "Projects per status" (homepage, https://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.
Finding 89: The error message (class="pss_dialogaware_message_block") which is displayed above the page (homepage, https://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.
Finding 90: The "Count" button (REM - Portfolio / Properties, https://bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient?2#REM89_0000000603) 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.
Finding 91: The button 'All' at the bottom of the Properties tree selects all properties (REM - Portfolio / Properties, https://bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient?2#REM89_0000000603). 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
- Homepage:
https://bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient - REM Portfolio, Properties:
https://bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient?2#REM89_0000000603 - REM Turnover rent, Configuration:
https://bcberkwcagaudit-prod.plnd.cloud/home/BP/WebClient#PfM65-0000001686 - Login:
https://bcberkwcagaudit-prod.plnd.cloud/j_security_check - Clik the user avatar/name, followed by My Account:
My Account
Relied upon techniques
Resources:
-
Website Accessibility Conformance Evaluation Methodology (WCAG-EM)
www.w3.org/WAI/eval/conformance -
Web Content Accessibility Guidelines (WCAG)
www.w3.org/WAI/intro/wcag -
How to Meet WCAG 2.1 Quick Reference
www.w3.org/WAI/WCAG21/quickref/
This report is mainly created with the online W3C report tool.