2

内部アプリケーションのヘッダーに、2 つのユーザー ロールを切り替えるための switch 要素を作成する必要があります。残りのコンテンツは、選択した役割に基づいてレンダリングされます。たとえば、役割 A と役割 B で使用できるナビゲーション項目とアクションは異なります。役割を変更するとページがリロードされることにも注意してください。

これまでのところ、入力 (チェックボックス/ラジオ) またはボタンのみを使用してアクセス可能なソリューションを見つけることができなかったので、両方のアイデアを次のように組み合わせました (ボタンのスタイルは無視してください。これはデモ目的のみです)。

var button = document.querySelector('button');
var inputRoleA = document.getElementById("role-A");
var inputRoleB = document.getElementById("role-B");

button.addEventListener('click', function(event) {
  if (inputRoleA.checked) {
    inputRoleA.checked = false;
    inputRoleB.checked = true;
    button.innerText = 'Role B';
    button.classList.remove('selected-role-A');
    button.classList.add('selected-role-B');
    // AJAX call to server and page reload
  } else {
    inputRoleA.checked = true;
    inputRoleB.checked = false;
    button.innerText = 'Role A';
    button.classList.add('selected-role-A');
    button.classList.remove('selected-role-B');
    // AJAX call to server and page reload
  }
});
fieldset {
  border: none;
}

.sr-only {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

input:focus ~ button {
  outline: 2px solid blue;
}

button {
  width: 120px;
  padding: 4px 2px;
  background: #4a6a9e;
  border: 1px solid white;
  border-radius: 16px;
  color: white;
  font-size: 18px;
  cursor: pointer;
}

.selected-role-A {
  text-align: left;
}

.selected-role-B {
  text-align: right;
}

.selected-role-A::before,
.selected-role-B::after {
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  margin: 0 4px;
  background: white;
  border-radius: 50%;
}
<fieldset>
  <legend class="sr-only">Choose role (reloads the page):</legend>
  <input class="sr-only" id="role-A" name="roles" type="radio" value="Role A" checked>
  <label class="sr-only" for="role-1">Role A</label>
  <input class="sr-only" id="role-B" name="roles" type="radio" value="Role B">
  <label class="sr-only" for="role-B">Role B</label>
  <button tabindex="-1" aria-hidden="true" class="switch selected-role-A">
    Role A
  </button>
</fieldset>

したがって、基本的には、スクリーン リーダー ユーザー用のラジオ入力と、ブラウザーのスイッチに似たボタンとして 2 つのオプションを含むフィールドセットを示します。

ページのリロードに関して — WCAG テクニック G13では、フォーム要素の変更がコンテキストの変更につながる場合 (この場合のリロードなど) に何が起こるかをユーザーに通知する必要があります。残念ながら、デザイン要件のためにボタンの周りに視覚情報を配置することはできないため、スクリーン リーダー用のフィールドセットにのみ追加しました。ただし、私が理解している限りでは、ページがイントラネット アプリケーションであり、ユーザーがトレーニングされる場合 (この場合のように)、これは問題にはなりません。

私のソリューションに他のアクセシビリティの問題はありますか? 2 つの個別の要素を使用せずにこれを達成する方法を知っている人はいますか? 前もって感謝します。

編集:タブの問題を解決しました。

4

1 に答える 1