Accessibility Update

 

Accessibility Roadmap

During 2020, we worked hard to bring the myday platform into maximum conformance with WCAG 2.1 AA guidelines in readiness for legal requirements that applied to the public sector and commenced on September 23rd 2020. 

The below information details the approach we have taken to date and how we will proceed during 2021. 

2021 Approach & Accessibility Statement

We planned four accessibility releases up to September 2020. These releases aimed to ensure compliant accessibility across the core platform and within myday apps provided by us.

Moving forwards, we have commenced a new approach of breaking the platform into sections and sweeping for a number of the issues identified in the audit at the same time. We will be focussing on the areas of the platform that are used most heavily by end users first and then on to the administrative functionality.

By changing the approach, we can focus on one area at a time and make that compliant - this way a release will be easier to describe, easier for you, our customers, to understand - and means that we can focus on the most used areas of the platform first.

Each month we will release any improvements that have been made and update the accessibility statement accordingly with the areas that have been swept. We expect that the majority of our platform aside from those areas mentioned in our exclusions are already partially compliant due to the work that commenced last year.

The checklist that we will be using as we works through the areas of the platform is described below.

Information and user interface components must be presentable to users in ways they can perceive.

[1] - Non-text content must have alternatives (https://www.w3.org/WAI/WCAG21/Techniques/general/G94.html) (For our purposes, crossover with colour must have alternatives [1.4.1]). Having alternatives for text ensures that all users can access content. Historically areas in myday, have used different colours to represent a state such as success, warning and erroneous. This could be seen in areas such as admin feedback and newsroom manage subscriptions. Here we must provide alternatives. Approaches include:

  • Using aria-labels to provide more context

  • Using aria-labelledby and aria-describedby

  • Providing alt tags for images were needed (icons within myday are hidden to screen-readers by default as they do not provide any useful information and are used for decorative purposes).

  • Using badges for items which would only be displayed using colour

myday example: Newsroom subscriptions page using a yellow corner to indicate mandatory feeds. Button with recycle bin in mail app, has no aria-label to indicate it means delete as icons aren't seen by a screen reader

[2] Colour contrast of text (4.5 : 1) and components / ui elements (3:1) must be WCAG compliant.

myday example: Colour contrast of progress and graph element with the attendance tile must have correct colour compliance.

myday example: Administration > Dashboard > Dashboard settings. UI elements (buttons) must have a colour contrast of 3:1.

User interface components and navigation must be operable.

[3] - Content that should be keyboard accessible… must be keyboard accessible and focus should be visible. Within areas of myday, we use components such as uib-dropdowns which have the built in ability for this to be added. Other areas may be out of scope such as allowing users to move tiles with arrows keys.

myday example: Course dropdown in the attendance2 app. A user should be able to use arrow keys

[4] - No keyboard traps. Ensure users cannot be trapped within content.

myday example: When using modals (example create a content page), a user could become trapped trying to exit an input field as pressing esc also closes the modal

[5] - Bypass blocks

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

Approaches include:

  • Having links to ‘Skip to Main content’.

  • Use aria landmarks with the code to group elements

  • Providing meaningful headers on different sections of different pages.

Items such as bypass blocks will be much easier to achieve if code is semantically correct and follows best practices of code implementation. This point is further aided by pages having a familiar layout which has a logical focus order.

myday example: Skip to main content and skip sidebar have been implemented.

Information and the operation of the user interface must be understandable

[6] - Input assistance. Under this point there a few things to be aware of:

  • Error identification (error messages must be clear and be easily relatable to input fields which have an error)

  • Labels or instructions (Input fields must have relatable labels and instructions)

  • Error suggestion

Input assistance will be also be easier to achieve with semantically correct code and correct decisions being made in terms of what input is being used. Inputs used should always be appropriate for the input type. i.e. type=”number” for a number.

myday example: Input validation messages in mail app not being relatable to fields easily

Content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies

[7] - Code is semantically correct and has correct regions, roles and names. We should not be using things like paragraphs for headers of pages, if a layout looks like it contains a list, it should be marked up as a list.

myday example: Paragraphs being used as headers previously in User Management app

[8] - Status messages

Messages, errors and warnings appearing in toast messages must be read out to a screen reader without requiring focus by a user.

myday example: Toast messages with errors when submitting forms

 

We have revised our accessibility statement. Our current accessibility statement highlights our levels of compliance achieved in the core platform and apps, limitations and exclusions, and our roadmap for reviewing and resolving any outstanding identified issues following Release 4. Going forward the accessibility statement will continue to be updated as progress is made and will be the primary source for this information. 

Please note if you are still on the myday Legacy Platform "(V2)" you will need to commence your upgrade to the myday Platform "(V3)". To do this please complete this form and contact Customer Success via customersuccess@collabco.com

Previous releases

This release consisted of:

Tasks, Courses, PC Availability apps:

  • Descriptions added to buttons and UI (sidebar, main content) to improve screen reader experience
  • Colour contrast changes
  • Navigation more accessible (nav pills rather than tabs, allow the user to visibly see active elements)
  • The most logical tab ordering through the UI
  • General clean up of UI (Margins and padding added to improve visibility of tab indicators)
  • Functionality changed to buttons to meet compliance (Courses only)
  • All meet 100% compliance with our testing tool

Core platform:

  • Focus indicator added to the body of myday
  • Default warning, error and success buttons have had colour contrast changed to meet WCAG
  • Skip to sidebar added to initial tabbing options when the user first enters the page. This alongside ‘Skip to Main content’ allows the user to easily get to where they want to be on the page
  • The most logical default tab order from page load. The ordering is now header, main, sidebar
  • Improvements to Themes colour palette picker. An admin can now see WCAG compliance of colour palette
  • Improved margins and padding (allows for keyboard access and visibility) in dropdowns, input boxes and sidebar
  • Appropriate roles added to the sidebar so that screen readers can identify lists and how many items are within the list
  • Unnecessary aria-labels removed from tiles and more appropriate labels added to allow the screen reader to know the title of the tile
  • Tiles in logical tab order
  • Tile content available to screen reader (for example: if a user is unauthorised and they need to authorise to use the tasks app this tile will now inform them of this)
  • Toggle buttons can be operated with a keyboard
  • Alt tag added to banner app tile and App Store images (admins can now set an alt tag for a banner by using the ‘alt text’ field in the banner app)
  • Profile pages (profile, preferences, services, active sessions) have had descriptions added, more logical tab ordering and colour contrast changes

Mail App:

  • Elements are now tabbable and focus indicators are visible in areas
  • Quill editor removed and tinymce editor added to provide a more accessible editor
  • User interface on the compose screen has been rearranged to give a more logical order

This release consisted of:

myday Apps: 

  • Attendance
    • Links and drop down menus are now tabbable
  • Attendance 2 
    •  Labels added to input boxes
    •  Aria-labels added to allow screen readers to access content easier
  • Balance
    • Tables given correct formatting and captions added
    • Headers changed from H2 to H3 to provide logical header ordering
  • Facebook
    • Focus indicators on posts are now visible and posts are now tabbable
  • Newsroom
    • Elements are now tabbable and focus indicators are visible in areas
    • Links changed to buttons in places
    • Menu is now more user friendly on mobile screens
    • Headers and descriptions added in places
    • Captions added for tables
    • Additional labels added to determine what type of feed is listed in the interface
    • Aria-labels added in places to make things more accessible for screen readers
  • Primo Search
    • Label added to tile input
    • Search role added to primo search input
    • Aria-labels added to enable screen readers to access what is being searched for 
  • Static Tiles *
    • If an iframe is embedded in the static tile, a title can now be set for the iframe
  • Twitter
    • Default tile colour made WCAG compliant
    • Focus indicators on tweets are now visible and tweets are now tabbable
  • Video Tiles *
    • Admins can now set the title of the embedded iframe video

Identity Server:

  • Spelling corrected on 'Remember my login details'
  • Aria-labels added in places to make things more accessible for screen readers
  • Labels added for inputs
  • Buttons and links are now tabbable

 

*Area that may require action on your behalf.

This release consisted of:

  • Content management templates - Default templates provided by myday will now be accessible by default.  These are very minor changes and will affect the following
    • Page with iframe * - iframe titles can now be set. It is important to set a title for an iframe as it allows screen readers to identify the iframe correctly and it provides context to a user using a screen reader

      Core platform
    • Tile templates *
      • info and multiline templates - Functionality removed from li element and an additional div has been added to wrap content inside carousel items. This allows the li element to have the proper aria-role and moves click functionality to the additional div
    • Admin areas
      • App store headers changed from H2 to H3 to provide logical header ordering
      • Tile edit modal - Margins added to tab headings, labels added to inputs
    • Page headers changed from H2 to H3 *
    • Search role added to search and additional role added to the myday header
    • Margin added to all dropdown menus to allow for visible tab indicators
    • Admin layout / Personalise screens
      • Top menu with all layout options given correct semantics
      • Tab indicators now visible on options
      • Keyboard traps removed from top menu
      • Links changed to button where appropriate
      • Various links and buttons now keyboard accessible

        myday Apps
    • People search
      • Default tile colour made WCAG compliant
      • Margins in places to make focus indicators visible
      • Label added for search input
      • Links changed to buttons to reflect functionality and make them keyboard accessible
    • People
      • Links changed to buttons to reflect functionality and make them keyboard accessible
      • Default tile colour made WCAG compliant
    • Banner app tile *
      • Alternative text can now be set for the banner tile from within banner administration using the 'alternative text' field
    • Student information
      • Headers changed from H2 to H4 in places
      • Tables on desktop now have captions and correct roles
      • Tables removed from mobile view making data easier to access

 

*Area that may require action on your behalf

An accessibility audit has taken place by an independent specialist organisation during the month of July 2020.

The reference codes below relate to the audit report. This release will consist of:

  • Issues identified during the comprehensive accessibility audit 
    • DIG1404: Button text is missing
      • Email Button within mail app
    • DIG2211: An accessible label does not match the visual label
      • The visual label of a component will be the same as the programmatic label, e.g. settings cog within maps app
    • DIG301: Form fields are not associated with text labels
      • Visual text labels will be programmatically associated with the interactive elements they are related to within Dashboard Settings, Edit Tile Settings, Tasks App Settings, Mail Compose New
    • DIG306: Labels for form fields are missing or are not accurate
      • The form elements will have informative labels to describe the action required for a screen reader. For example, the Icon picker will have a label of "Pick an icon" rather than “Icon” in order to give more clarity
    • DIG506: Information is presented visually with no alternative
      • Text will be provided to convey that the purpose of these images. For example the emojis used withing the Feedback tool
    • DIG601: Colour contrast of text is insufficient for users with low vision
      • Text within administrative functions and backstage areas will increase in contrast
    • DIG603: Colour contrast across borders of interactive elements is insufficient for users with low vision
      • Borders around administrative functions will increase in contrast
    • DIG604: Colour contrast on UI elements is insufficient for users with low vision
      • UI elements within administrative areas and backstage areas will increase in contrast
    • DIG801: Content is not keyboard accessible
      • Items within the content will be able to be operated using only the keyboard rather than only by a pointing device such as a mouse. Such as Newsroom articles from the tile and personalisation tile settings
      • Please note the date picker throughout the system will not have been addressed by this point and will be included in a future release
    • DIG804: Content is causing a keyboard trap
      • Items within our control (not including PowerBI interface) will no longer cause a keyboard trap meaning that keyboard-only users can move past the content using the keyboard alone
    • DIG805: There is no indication of focus for keyboard users
      • It will be possible to track all the components on the page with indication of focus in areas such as Calendar navigation
    • DIG806: Hidden elements gain keyboard focus
      • Elements which are not visible on the page will not gain keyboard focus prior to them becoming visible. e.g. Search within the top bar
  • myday Apps

    • Calendar app *
      • This app features the same feature set as previously, however we are now using a different calendar plugin. This calendar plugin is provided by mobiscroll and is now WCAG compliant
      • You will need to update the calendar app to apply the changes themselves by navigating to ‘Apps’ in the left hand menu - locate the ‘Calendar App’. Here you will see a message ‘update available’. Open the app and press ‘Upgrade to’
    • Maps
      • Listings inside the app are now sorted automatically by A-Z
      • Margins added in dropdown menus and buttons to make tab indicator visible
      • Heading colours changed to black so they are colour compliant
      • Titles and descriptions added to the interface to provide more context
      • Aria-labels added to listing to provide more context to screen readers
      • Captions added to tables for area listings
      • Links and buttons made tabbable. Buttons changed location in places to allow for a more logical tab order
      • Headings using logical order. H6 changed to H5 in places, H4 changed to H3 in places

*Area that may require action on your behalf

 



Supporting Information

Most apps only need minor UI changes such as the addition of guidance text and new buttons for keyboard navigation. These changes update automatically when released. Should action be required this will be made clear on the release notes. 

Due to the nature of the changes we are making, your customisations to the platform made with Custom CSS and/or Custom Code might be affected. While we do not normally provide direct support for such changes in these circumstances, should you have any enquiries regarding resulting issues, please contact support for guidance.  

 

We have revised out accessibility statement. Our current accessibility statement highlights our levels of compliance achieved in the core platform and apps, limitations and exclusions, and our roadmap for reviewing and resolving any outstanding identified issues. 

We have created guidance on how to make your myday tenant compliant in the following guides:

Some aspects of the platform have been identified as being outside of the scope of the project. This is due to there being a disproportionate cost of rectification which will be stated in the accessibility statement as justifiable exclusions. These include:

  • myday Legacy Control Panel – Our strategy is to replace functionality in the control panel with new admin apps provided through the dashboard platform
  • myday Legacy Platform "(V2)" – Our strategy is to move customers to the new myday platform

Due to the nature of the changes we are making, your customisations to the platform made with Custom CSS and/or Custom Code might be affected. While we do not normally provide direct support for such changes in these circumstances should you have any enquiries regarding potential or resulting issues, please contact support for guidance.

Due to the nature of the changes we are making, your customisations to the platform made with Custom CSS and/or Custom Code might be affected. While we do not normally provide direct support for such changes in these circumstances should you have any enquiries regarding potential or resulting issues, please contact support for guidance.
 
Feedback and Questions

We welcome all customer feedback relating to this approach and plan.

Please e-mail product@collabco.com with any questions or comments.