CODEWITHSUNDEEP
htmlangulartestingaccessibilityjaws-screen-reader
Amruta
Amruta

Reputation: 1575

JAWS reads Headings as clickable even though parent div has not click handler associated

I am working on accessibility testing for an Angular project. I have some code for a modal that is as below

<div class="modal fade" bsModal #cancelConfirmModal="bs-modal" tabindex="-1" role="dialog"
    attr.aria-label="Cancel Modal" aria-hidden="true">
    <div class="md-dialog modal-md">
        <!-- Modal content-->
        <div class="md-content">
            <div class="md-header">
                <div class="md-title pull-left">
                    <h4 tabindex=0 class="headerBottomMarginNone"> Cancel</h4>
                </div>
                <button type="button" class="close-popup" (click)="hideCancelModal()">
                    <img src="{{ pathImg }}/close.png" alt="Close Icon"
                        (mouseover)="changeCloseIconOnHover('close-popup3')"
                        (mouseout)="changeCloseIcon('close-popup3')" id="close-popup3">
                    <label class="sr-only">Close</label>
                </button>
            </div>
            <div tabindex=0 class="md-body">
                {{ cancelMessageBody }}
            </div>
            <div class="md-footer">
                <button type="reset pull-right" class="ts-btn ts-btn-primary no-btm-margin" (click)="revert()">Yes</button>
                <button type="pull-right" (click)="hideCancelModal()"
                    class="ts-btn ts-btn-tertiary margin-left10 no-btm-margin">Cancel</button>
            </div>
        </div>
    </div>
</div>

When I tab over to <h4 tabindex=0 class="headerBottomMarginNone"> Cancel</h4> it reads Cancel heading level 4 clickable. There is no click event on the parent or even its parent. h4 is made tab reachable as per the QA's preference. How do I stop JAWS from announcing clickable??

Upvotes: 1

Views: 1314

Answers (1)

GrahamTheDev
GrahamTheDev

Reputation: 24825

Short Answer

Remove the tabindex.

Long Answer

Headings should not have a tabindex (other than maybe a tabindex="-1", covered below).

Anything with a tabindex is considered to be interactive and it is expected that you have supplied the relevant handlers for focus, click, keyboard keys etc.

Your QA is incorrect on this and is making the software harder to use.

The only time it is appropriate to use a tabindex on a heading is if you need to programatically focus it (for example on an AJAX application where you load a new page in it is a good practice to focus the heading level 1 on the page to let screen reader users know the new page has loaded in.) At this point the only tabindex that is appropriate is tabindex="-1" so that it can only be focused programatically and not via the tab key.

Your QA may think that screen reader users need to be able to focus the headings, this is not the case! They use shortcut keys within their screen reader to access headings on the page.

Also remove it from <div tabindex=0 class="md-body"> as that is also not interactive.

Finally it is likely you do not need tabindex="-1" on the modal itself as when you open the modal you should focus either the first interactive element or the close button (which in your case appears to be the cancel button anyway.), however there may be functionality in your software that I am not aware of so that is just a point to consider.

Upvotes: 2

Related Questions