Using screenreader with Treemap

[Peter Colla]

Hi,

I've recently been contacted by an end-user who uses a screen reader to view our Angular site. They have advised they can't get any information on each leaf of the treemap using their screen reader. 

I installed a screen reader chrome extension to test it out and noticed the following:

The first issue I noticed is that when clicking on the leaf item the only thing read out is the label, which is not helpful to the user, as the label only contains the name of the item and not the value. 

I did manage to update the tooltipsettings to include aria-live="polite", but the only issue with this was every time the mouse moved the value was read out again.

readonly tooltipSettings: object = {

    visible: true,

    template: '<div class="ej2-tooltip-large" role="tooltip" aria-live="polite"> ${itemName} </br> Student Count:${count} </div>',

  };

I understand users of screen readers would more likely use the navigation keys, which is where I found the next issue, using the navigation keys each individual leaf item is not part of the navigation, so the items are just skipped completely.

Can you please advise if there is an implementation that will allow a user with a screen reader to navigate through each leaf item, where the label and the value are read out?

For completeness this is the code for my treemap:

<ejs-treemap

    [id]="getId()"

    [dataSource]="data"

    [levels]="hasGroups ? levels : null"

    [leafItemSettings]="leafItemSettings"

    [legendSettings]="data.length > 0 ? legendSettings : {}"

    weightValuePath="count"

    colorValuePath="color"

    [tooltipSettings]="tooltipSettings"

    background="white"></ejs-treemap>

readonly levels: LevelSettingsModel[] = [

    {

      groupPath: 'groupName',

      groupGap: 1,

      headerHeight: 0,

      headerStyle: { size: '0' },

      groupPadding: 0,

    },

  ];

  readonly leafItemSettings: LeafItemSettingsModel = {

    labelPath: 'itemName',

    border: { color: '#FFFFFF', width: 1 },

  };

  readonly legendSettings: LegendSettingsModel = {

    visible: true,

    position: 'Bottom',

    width: '100%',

    alignment: 'Center',

  };

  readonly tooltipSettings: object = {

    visible: true,

    template: '<div class="ej2-tooltip-large" role="tooltip" aria-live="polite"> ${itemName} </br> Student Count:${count} </div>',

  };

[Indumathi Ravi]

Hi Peter,

 

Please find the details for your queries from the below table.

Queries	Details
The first issue I noticed is that when clicking on the leaf item the only thing read out is the label, which is not helpful to the user, as the label only contains the name of the item and not the value.	When analyzing the provided scenario, it appears that only the names of the TreeMap items were being rendered as labels in your application. The text displayed in these labels is only readable using a screen reader within the TreeMap. However, you have the option to customize the labels in the TreeMap using the "labelFormat" property. This customization allows you to display both the name of the item and its corresponding value. By doing so, the TreeMap can convey both the name and the value of each item effectively. You can find the sample and video for demonstration at the link below.   Sample: https://stackblitz.com/edit/angular-x7aajk-3bcjxr Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Treemap1320314011   Please let us know if the above solution meets your requirements. If not, please share your expected scenario. We will check the possibilities and assist you further.
I did manage to update the tooltipsettings to include aria-live="polite", but the only issue with this was every time the mouse moved the value was read out again. readonly tooltipSettings: object = {     visible: true,     template: '<div class="ej2-tooltip-large" role="tooltip" aria-live="polite"> ${itemName} </br> Student Count:${count} </div>',   };	We were unable to reproduce the reported issue. You can view the video, where we attempted to read the tooltip when moving the mouse, below. The tooltip is only read when the mouse moves over the specified item in the TreeMap and is not read again with every subsequent mouse movement. https://www.syncfusion.com/downloads/support/directtrac/general/ze/Treemap_Tooltip1846056491   Could you please share the steps to reproduce the reported scenario? It will help us analyze and assist you further?
I understand users of screen readers would more likely use the navigation keys, which is where I found the next issue, using the navigation keys each individual leaf item is not part of the navigation, so the items are just skipped completely. Can you please advise if there is an implementation that will allow a user with a screen reader to navigate through each leaf item, where the label and the value are read out?	The TreeMap control does not support keyboard navigation. We have considered your requirement as a feature and added it to our feature request list. We do not have immediate plans to implement this feature. However, we will include this implementation in any of our upcoming releases. Meanwhile, please find the feedback link below to keep track of this feature.   https://www.syncfusion.com/feedback/59863

 

Please let us know if you need any further assistance.

[Peter Colla]

Thanks for your prompt and detailed response. As a workaround for the navigation of the treemap I have created a function that is called when the treeemap is loaded, which will set the tabindex and replace the aria-label value, so a person using a screenreader will hear the label and corresponding value. It works well enough for my solution.

getId(): string {

    return this.mapHeading.replace(/\s/g, '');

  }

  /* Called once treemap is loaded

   * This will fix the demographic map so each leafitem

   * and associated student count will be read out by screen reader.

   */

  handleTreeMapLoad() {

    const id = this.getId();

    var level, itemNum;

    level = itemNum = this.hasGroups ? 1 : 0;

    var item = document.getElementById(

      id + '_Level_Index_' + level + '_Item_Index_' + itemNum + '_Group'

    );

    while (item) {

      // Make TreeMap items focusable and add ARIA attributes

      item.setAttribute('tabindex', '0');

      item.setAttribute('role', 'tooltip');

      item.setAttribute(

        'aria-label',

        `${this.data[itemNum - level].itemName},

        Student Count: ${this.data[itemNum - level].count}`

      );

      itemNum++;

      item = document.getElementById(

        id + '_Level_Index_' + level + '_Item_Index_' + itemNum + '_Group'

      );

    }

[Chrispine Agunja Imbo]

Hi Peter,

We are glad to hear that you've found the solution. Please feel free to contact us if you need any other assistance.

Regards,

Chris