JAWS is reading content inside of a disabled button while traversing using up and down button

Question

JAWS is reading disabled button contents while traversing using up and down button.When i go through non disable button it reads aria label for the button and move to next button but when i go to disabled button it is reading the contents inside of it like the svg and others.

<div class="ms-Stack button-container css-391"><button class="viewandsignbutton"
        aria-label="View and sign Non-Disclosure Agreement" tabindex="0"><svg class="filter-white" width="14"
            height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
                d="M4.375 4.375C4.375 4.45703 4.37272 4.55046 4.36816 4.65527C4.36816 4.75553 4.37956 4.85124 4.40234 4.94238C4.42513 5.02897 4.46615 5.10189 4.52539 5.16113C4.58919 5.22038 4.6849 5.25 4.8125 5.25H7V6.125H4.8125C4.63021 6.125 4.45931 6.09082 4.2998 6.02246C4.1403 5.9541 4.0013 5.86068 3.88281 5.74219C3.76432 5.6237 3.6709 5.4847 3.60254 5.3252C3.53418 5.16569 3.5 4.99479 3.5 4.8125V4.375H4.375ZM11.375 7V3.5H2.625V7H6.01562L6.89062 7.875H1.75V2.625H12.25V7.875H10.6094L9.73438 7H11.375ZM7.74512 6.25488L14 12.5029L13.3779 13.125L7.12988 6.87012L7 6.125L7.74512 6.25488ZM14 0.875V11.2656L13.125 10.3906V1.75H0.875V11.293C1.86849 11.612 2.87565 11.8512 3.89648 12.0107C4.92188 12.1702 5.95638 12.25 7 12.25C7.57878 12.25 8.15072 12.2249 8.71582 12.1748C9.28548 12.1247 9.85514 12.0518 10.4248 11.9561L10.459 12.168L10.4248 11.9561L10.8828 11.8604L11.6143 12.5986C10.8441 12.7673 10.0785 12.8971 9.31738 12.9883C8.56087 13.0794 7.78841 13.125 7 13.125C5.79232 13.125 4.60742 13.0225 3.44531 12.8174C2.28776 12.6123 1.13932 12.3138 0 11.9219V0.875H3.5V0H10.5V0.875H14Z"
                fill="#171717"></path>
        </svg>View and sign</button></div>
<div class="ms-Stack button-container css-391"><button class="viewandsignbutton" aria-label="xyz" tabindex="0" disabled=""><svg class="filter-white-hidden" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.375 4.375C4.375 4.45703 4.37272 4.55046 4.36816 4.65527C4.36816 4.75553 4.37956 4.85124 4.40234 4.94238C4.42513 5.02897 4.46615 5.10189 4.52539 5.16113C4.58919 5.22038 4.6849 5.25 4.8125 5.25H7V6.125H4.8125C4.63021 6.125 4.45931 6.09082 4.2998 6.02246C4.1403 5.9541 4.0013 5.86068 3.88281 5.74219C3.76432 5.6237 3.6709 5.4847 3.60254 5.3252C3.53418 5.16569 3.5 4.99479 3.5 4.8125V4.375H4.375ZM11.375 7V3.5H2.625V7H6.01562L6.89062 7.875H1.75V2.625H12.25V7.875H10.6094L9.73438 7H11.375ZM7.74512 6.25488L14 12.5029L13.3779 13.125L7.12988 6.87012L7 6.125L7.74512 6.25488ZM14 0.875V11.2656L13.125 10.3906V1.75H0.875V11.293C1.86849 11.612 2.87565 11.8512 3.89648 12.0107C4.92188 12.1702 5.95638 12.25 7 12.25C7.57878 12.25 8.15072 12.2249 8.71582 12.1748C9.28548 12.1247 9.85514 12.0518 10.4248 11.9561L10.459 12.168L10.4248 11.9561L10.8828 11.8604L11.6143 12.5986C10.8441 12.7673 10.0785 12.8971 9.31738 12.9883C8.56087 13.0794 7.78841 13.125 7 13.125C5.79232 13.125 4.60742 13.0225 3.44531 12.8174C2.28776 12.6123 1.13932 12.3138 0 11.9219V0.875H3.5V0H10.5V0.875H14Z" fill="#171717"></path></svg>xyz and abc</button></div>

The top button is non disable one which is getting one time focus on traversing in jaws while the bottom which is the disabled one is getting multiple focus with content inside it are also getting the focus.

Care to share a fiddle that replicates the issue? At the moment we cannot really help you. — GrahamTheDev, Apr 19 '21 at 06:33

GrahamTheDev · Answer 1 · 2021-04-21T07:23:57.593

What is happening?

A disabled button is not meant to receive focus, adding tabindex="0" could override this behaviour in some screen reader / browser combinations.

The other probable issue is that the accessibility tree is picking up your SVG (if you are using IE to test).

How can I fix it?

Remove the tabindex="0", it should not really need exist on a <button>, then the site will behave as expected in all HTML 5 browsers. Then make sure you stop the SVG from receiving focus.

A better way to structure the HTML

aria-label is great for a lot of circumstances, but still doesn't have 100% coverage! So we can replace that with visually hidden text. This then means no compatibility issues as it works all the way back to IE6 in any browser / screen reader combination!

The other issue is SVGs in IE, so we need to make sure that if they are for presentation that we hide them from screen readers.

role="presentation" is not consistent so I would recommend focusable="false" (for IE misbehaving) and aria-hidden="true" as that just removes the SVG from the accessibility tree entirely.

Putting these together I would recommend a structure similar to the following:

.visually-hidden { 
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}

<div class="ms-Stack button-container css-391">
    <!-- remove the aria-label -->
    <button class="viewandsignbutton">
        <!-- focusable="false" is to stop the SVG getting focus in IE, aria-hidden is to ensure the SVG is not read as it adds no value -->
        <svg focusable="false" aria-hidden="true"></svg>
        <!-- in this example we are adding **ADDITIONAL** text for screen reader users so we just add visually hidden text at the end of the visible text -->
        View and sign <span class="visually-hidden"> Non-Disclosure Agreement</span>
     </button>
</div>
<div class="ms-Stack button-container css-391">
    <!-- remove the aria-label -->
    <button class="viewandsignbutton" disabled="">
        
        <svg focusable="false" aria-hidden="true"></svg>
        <!-- in this example we are adding **DIFFERENT** text for screen reader users so we hide the original text from screen readers and add visually hidden text for the screen reader -->
        <span aria-hidden="true">xyz and abc</span> <span class="visually-hidden">xyz</span>
    </button>
</div>

score 0 · Answer 2 · answered Apr 21 '21 at 07:07

0

adding role="presentation" in svg will fix this issue.

answered Apr 21 '21 at 07:07

Sarfraj Ansari

119
2
11

For SVGs you should add `aria-hidden="true"` and `focusable="false"` if they are presentational. Also - disabled buttons should not have `tabindex="0"` on them as they should not be focusable. In fact no button should have `tabindex="0"` as the behaviour is already baked in. If you wait 5 minutes I have an answer nearly complete I will post for you. – GrahamTheDev Apr 21 '21 at 07:17
I have also added a little bit extra to the original answer to address `role="presentation"` as it probably won't work in some screen reader / browser combinations (although they are not used very often anymore so not a massive concern). – GrahamTheDev Apr 21 '21 at 07:26

JAWS is reading content inside of a disabled button while traversing using up and down button

2 Answers2

What is happening?

How can I fix it?

A better way to structure the HTML