CODEWITHSUNDEEP
angularaccessibilityjaws-screen-reader
user1107888
user1107888

Reputation: 1525

Controlling screen reader form behavior

I have following form with input fields in my angular 2 Application

<form class='wrapper' [formGroup]='form' novalidate #f='ngForm' role='form'>
<div class='content-row background-form-group'>
    <div [ngClass]="{'has-error': (validationOptions.submissionTried  && 
    bisDatumVorVonDatum())}">
        <input-field-group [overview]='options.overview'
                [validationOptions]='validationOptions'
                [eingabeOptions]='eingabeVonEingabeOptions' [form]='form' 
      (onChange)='onChangeHandler($event)'
                (onFocus)='onFocusHandler($event, 
      eingabeVonEingabeOptions)'>
        </input-field-group>
    </div>
    <div [ngClass]="{' has-error': (validationOptions.submissionTried && 
     (bisDatumVorVonDatum() || bisDatumNachStichtag()))}">
        <input-field-group [overview]='options.overview'
                [validationOptions]='validationOptions'
                [eingabeOptions]='eingabeBisEingabeOptions' [form]='form'
                (onFocus)='onFocusHandler($event, 
     eingabeBisEingabeOptions)'>
        </input-field-group>
    </div>
    <div [ngClass]="{'has-error': (validationOptions.submissionTried  && 
     bisDatumNachStichtag())}">
        <div *ngIf="dataCache.inBearbeitung.typ==='FAMILIENKASSE'">
            <input-field-group [overview]='options.overview'
                    [validationOptions]='validationOptions'
                    [eingabeOptions]='stichtagEingabeOptions' [form]='form'
                    (onFocus)='onFocusHandler($event, 
          stichtagEingabeOptions)'>
            </input-field-group>
        </div>
    </div>
    <div class='col-md-12 has-error'>
                <span id='bisDatumVorVonDatum-FehlerText'
                        *ngIf='validationOptions.submissionTried  && 
     bisDatumVorVonDatum()'
                        data-col='#E2001A'>{{bisDatumVorVonDatumErr}}</span>
        <span id='bisDatumNachStichtag-FehlerText'
                *ngIf='validationOptions.submissionTried && 

    bisDatumNachStichtag()'
                data-col='#E2001A'>{{bisDatumNachStichtagErr}}</span>
    </div>
</div>
</form>

When the page is loaded , JAWS 18 screenreader starts reading the input fields one by one. I want to control this behavior so that the screenreader mentions the form and then stops. For this I have tried role="form" in form tag but this is not working. How can I achieve this objective?

Upvotes: 0

Views: 127

Answers (1)

Andr&#233; Polykanine
Andr&#233; Polykanine

Reputation: 3479

Sorry, but you can't and you shouldn't do such things.
You can convey some info, you can hide or show an element to a screen reader, you can disguise a heading as a button, but you can't stop a screen reader for automatically reading a page. When a user clicks on your page, JAWS starts reading the page aloud (can be switched off in JAWS 2018). And in no way should you prevent the user to read your contents. And again, basically, you can't.
If you try to achieve something else, please update your question.

Upvotes: 2

Related Questions