How to fix: Tab index skips past disabled inputs

Question

For our story we have to make sure our contact us page is accessible. We are supposed to make sure the tab order focus for each input in order for information to be read out on the screenreader. However, we have certain input fields that we don't want the user to be able to edit, however we still want them to be able to have the screen reader capture it. What is the best practice for this issue? What is the approach best to follow to solve this issue?

I found this example online and tried exploring the implementation of this fix Tab on disabled input. It is a css style approach to mitigating the problem but doesn't involve the disabled property.

<form  [formGroup]="contactUsForm">
  <div class="container pt-4">

    <!-- Instructions -->
    <div name="instructions-row" class="row">
      <div tabindex="0" name="form-instructions"  id="form-instructions" class="col justify-content-center">
        Please fill out the form and click the send button to submit your message. If your question or comment is
        about a specific account, enter the account name and account number in the body of the message.
      </div>
    </div>

    <!-- Basic Info -->
    <div name="basic-info-row"  class="row">
      <div class="col-xl-6 justify-content-center">
        <!-- From -->
        <div class="input-container">
          <label for="from-input" class="liberty-text-secondary">
            From
            <span *ngIf="contactUsForm.get('from').hasError('required')" class="text-danger">
              *
            </span>
          </label>
          <input role="textbox" id="from-input" class="liberty-input col-12" formControlName="from" />
        </div>

        <!-- Account Number -->
        <div class="input-container">
          <label for="account-number-input" class="liberty-text-secondary">
            Account Number
            <span *ngIf="contactUsForm.get('accountNumber').hasError('required')" class="text-danger">
              *
            </span>
          </label>
          <input tabindex="0" role="textbox" id="account-number-input" class="liberty-input col-lg-4 col-md-12" formControlName="accountNumber" />
        </div>

        <!-- User ID -->
        <div class="input-container">
          <label for="user-id-input" class="liberty-text-secondary">
            User ID
            <span *ngIf="contactUsForm.get('userId').hasError('required')" class="text-danger">
              *
            </span>
          </label>
          <input tabindex="0" role="textbox" id="user-id-input" class="liberty-input col-lg-10 col-md-12" formControlName="userId" />
        </div>

        <!-- Name -->
        <div class="input-container">
          <label for="name-input" class="liberty-text-secondary">
            Name
            <span *ngIf="contactUsForm.get('name').hasError('required')" class="text-danger">
              *
            </span>
          </label>
          <input tabindex="0" role="textbox" id="name-input" class="liberty-input col-lg-10 col-md-12" formControlName="name" />
        </div>

        <!-- Phone Number -->
        <div class="input-container">
          <label for="phone-number-input" class="liberty-text-secondary">
            Phone Number
            <span *ngIf="contactUsForm.get('phoneNumber').hasError('required')" class="text-danger">
              *
            </span>
          </label>
          <input tabindex="0" role="textbox" id="phone-number-input" class="liberty-input col-lg-4 col-md-12" formControlName="phoneNumber" />

          <span *ngIf="contactUsForm.get('phoneNumber').hasError('pattern')" class="text-danger">
            Please enter a valid phone number.
          </span>
        </div>

        <!-- Subject -->
        <div class="input-container">
          <label for="subject-input" class="liberty-text-secondary">
            Subject
            <span *ngIf="contactUsForm.get('subject').hasError('required')" class="text-danger">
              *
            </span>
          </label>
          <select tabindex="0" id="subject-input" class="liberty-select col-lg-11 col-md-12" formControlName="subject">
            <option *ngIf="!contactUsForm.value.subject" [value]="null" selected disabled></option>
            <option *ngFor="let subject of subjects" [value]="subject">{{subject}}</option>
          </select>
        </div>

      </div>
    </div>

    <!-- Comments -->
    <div class="row">
      <div class="col-xl-10 justify-content-center">
        <div class="input-container">
          <label for="comments-input" class="liberty-text-secondary">
            Comments
            <span *ngIf="contactUsForm.get('comments').hasError('required')" class="text-danger">
              *
            </span>
          </label>
          <textarea tabindex="0" role="textbox" id="comments-input" class="liberty-text-area" formControlName="comments"></textarea>
        </div>
      </div>
    </div>

    <!-- Submit Button -->
    <div class="row py-4">
      <div class="col container">
        <div class="row">
          <button tabindex="0" role="button" id="submit-button" class="col-xl-2 col-3 btn liberty-button mx-3" [disabled]="contactUsForm.invalid"
            (click)="onSubmitClick()">
            Send
          </button>
          <button tabindex="0" role="button" id="cancel-button" class="col-xl-2 col-3 btn liberty-button mx-3" routerLink="/home">
            Cancel
          </button>
          <span class="col-xl-8 col-6"></span>
        </div>
      </div>
    </div>
  </div>
</form>

The above code tabs through the enabled inputs only.

I just figured out I could also use the ```readonly``` property. That will make it non editable but the styling is left out. Still trying to research the best practice solution — Drew Gallagher, Aug 27 '19 at 14:29

score 0 · Accepted Answer · answered Aug 27 '19 at 14:51

Use readonly attribute or css pointer-events none to make the input disabled. Use ngClass to add class dynamically.

component.css

.disabled {
  pointer-events: none; 
  opacity: 0.5;
}

component.html

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <input type="text" formControlName="userName">
  <input  type="text" formControlName="password">
  <input [ngClass]="{'disabled':!form.valid}"  readonly type="button" value="submit"  >
</form>

Example

Note: If you use pointer events none with input type button make sure to add readonly attribute otherwise it will be submit able through enter button

How to fix: Tab index skips past disabled inputs

1 Answers1