如何修复：标签索引跳过禁用的输入

Question

对于我们的故事，我们必须确保我们的联系我们页面是可访问的。我们应该确保每个输入的选项卡顺序焦点，以便在屏幕阅读器上读出信息。但是，我们不希望用户能够编辑某些输入字段，但我们仍然希望他们能够让屏幕阅读器捕获它。这个问题的最佳实践是什么？解决此问题的最佳方法是什么？

我在网上找到了这个示例，并尝试探索此修复程序Tab on disabled input 的实现。这是一种缓解问题的 css 样式方法，但不涉及 disabled 属性。

<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>

上述代码选项卡仅通过启用的输入。

Answer 1

使用 readonly 属性或 css pointer-events none 来禁用输入。使用 ngClass 动态添加类。

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

注意：如果您使用指针事件 none 与输入类型按钮，请确保添加只读属性，否则它将可以通过输入按钮提交