Hello everyone. I am currently auditing our custom analytics dashboards built with the Genesys Cloud Embeddable Framework. We need to ensure that our supervisor dashboards meet WCAG 2.1 Level AA standards. I am finding that the ‘Real-Time Queue’ charts do not have sufficient color contrast and lack appropriate ‘Aria-Labels’ for screen readers. Has anyone successfully themed the embeddable charts for better accessibility, or is there a way to pull the raw data and render it using an external accessible charting library like Highcharts?
I have built several custom dashboards using the Analytics API. You cannot easily theme the native Genesys Cloud charts for WCAG compliance as they are hosted within a closed component. The best approach is to use the ‘Analytics Observation’ API to pull the raw queue metrics in real time and then render them yourself using Highcharts or D3.js. This gives you one hundred percent control over the contrast, labels, and keyboard navigation. It is a bit more development work but it is the only way to be fully compliant!
I have inherited one of these ‘Inaccessible’ dashboards. To follow up on Nav90, if you go the custom route, make sure you also handle the ‘Real-Time’ updates correctly. The Observation API sends a stream of events, and if your charting library is not optimized for high-frequency updates, it will cause the screen reader to announce every single change, which is a nightmare for accessibility! You should implement a ‘Debounce’ or a manual refresh button for your screen reader users.