htmlmaterial-uiaccessibilityjaws-screen-readernvda

I am using NVDA and its reading the close button multiple times ,but in jaws its reading perfectly


This is the code for that close button which is part of the modal pop up...

<h2 class="sc-ejdXBC byjYiM MuiTypography-root MuiTypography-h6 sc-EoWXQ kOYWJk MuiDialogTitle-root" id="popupTitle">
  Default Pop-UP Title
  <button class="sc-dmqHEX dYAxeG MuiButtonBase-root sc-hLseeU gQXJSS MuiIconButton-root       MuiIconButton-colorInherit MuiIconButton-sizeLarge sc-dlfzSu bdNite" tabindex="0" type="button" aria-label="Close" id="mui-4">
    <div size="1" class="sc-fmSAUk jdsjjC">
      <svg class="sc-hAtEyd bHRrTR MuiSvgIcon-root MuiSvgIcon-fontSizeMedium" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="CloseIcon">
        <path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path>
      </svg>
    </div>
    <span class="sc-beqWaB cEtDyT MuiTouchRipple-root"></span>
  </button>
</h2>

NVDA is reading it in this way:

DEFAULT POP-UP TITLE Close  dialog
DEFAULT POP-UP TITLE Close  heading
Close  button    heading    level 2
DEFAULT POP-UP TITLE Close  dialog
heading    level 2  button    Close

It should read the close button "heading level 2 button Close" .I tried by giving some of the settings in nvda but its not working.


Solution

  • The button itself looks good. You have an <svg> embedded in the button (presumably an 'X' shape) and the button doesn't have any text so you are using aria-label. That's all good, although you have a superfluous tabindex="0" on the button.

    The problem is that your button is embedded in the heading, <h2>. Is that intentional? Does your actual code do that or was that a typo?

    <h2>Default Pop-UP Title
      <button>close</button>
    </h2>
    

    You need to close your </h2> and then have the button.

    <h2>Default Pop-UP Title</h2>
    <button>close</button>
    

    Update Using the link in the comment, https://codesandbox.io/s/somr32?file=/demo.tsx

    You get a variety of behaviors based on whether you use NVDA or JAWS and whether you're on Chrome or Firefox. You can't really say which version is correct because they all have merits. The stripped down dialog structure is:

    <div role="presentation" tabindex="-1">
      <div role="dialog" aria-labelledby="heading">
        <h2 id="heading">modal title
          <button aria-label="close"></button>
        </h2>
      </div>
    </div>
    

    When the dialog opens, in the code inspector I looked at document.activeElement and the focus is on the outermost <div>

    <div role="presentation" tabindex="-1">

    Presumably moved there via a focus() call since that <div> has a tabindex="-1".

    When the dialog opens, I hear:

    And then when you tab, the focus moves to the X-close button and the following is announced:

    As you can see, it's all over the place. You might be able to get a little more consistency if you force the initial focus to the dialog itself rather the container above the dialog.