css

.hoge{
speak: none; // 読み上げスキップを指定可能(aria-hidden:trueと同意、擬似要素に使用)
}

html

<!-- 適切なタグを使用できない場合・コンテンツの意味をタグのみで明示できない場合・タグの役割を明示したい場合に使用
    □ role属性 : 役割を記述
      タグによって指定できるroleが決まっている(全てのタグに全てのroleを指定できる訳ではない)
      タグ自体が自身の意味を明示できている場合は付与しない 例: <h1 role="heading"></h1>
    □ aria属性 : 役割の詳細を記述
      aria-labelをインラインSVGのALTとして使用可能
      aria属性に記述したセレクタ名はcssのスタイル対象セレクタとして記述可能
    □ tabindex : <a>や<button>の様にキーボード操作(TABによるfocus切り替え等)を可能に
      ソース内に指定した数値の順序でフォーカスを持たせる事が可能。
-->
<div role="button" aria-label="閉じる" tabindex="0">閉じるボタン</div>
<!-- 
  WAI-ARIA概要
  https://developer.mozilla.org/ja/docs/Learn/Accessibility/WAI-ARIA_basics

  role属性リスト
  https://developer.mozilla.org/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques

  aria属性リスト
  https://www.w3.org/TR/wai-aria-1.1/#state_prop_def
  
  チートシート
  https://aria.markuplint.dev/
-->


<!-- 現在地を伝達(aria-current) -->
<ul>
  <li>内容を見る</li>
  <li aria-current="true">申込フォーム</li>
  <li>申込完了</li>
</ul>

<!-- フォームの入力項目の説明・入力箇所とそのエラーを紐付ける -->
<!-- -------------------------------------
aria-live ... 変更があった場合にリーダーが読み上げるassertiveで即座に読み上げ、politeで「現在読み上げている物が終わったら」読み上げる
aria-atomic... 変更があった場合に、変更箇所のみ伝えるか・変更箇所を含むブロックごと伝えるか
aria-labelledby... その要素と関連するラベルを紐づける
aria-describedby... その要素を説明している要素と紐づける(スペースで複数指定可)
aria-required... 必須項目であることを伝える(required="true"を使用しない場合に使う)
aria-invalid... 現在入力されているデータが「無効なデータ」であることを伝える
-------------------------------------- -->
<form action="">
  <strong aria-live="polite" aria-atomic="true" id="usernameerror" tabindex="-1" class="error" data-errortext="ひらがなのみで入力してね"></strong>
  <div id="username">なまえ(ふりがな)</div>
  <div id="username-description">ひらがなで入力</div>
  <input class="usernameinput" type="text" aria-labelledby="username" aria-describedby="username-description usernameerror" aria-required="true">
  <button class="submitTrigger">送信</button>
</form>

<script>
const submitTrigger = document.querySelector(".submitTrigger");
const error = document.querySelector(".error");
const usernameInput = document.querySelector(".usernameinput");

submitTrigger.addEventListener("click", function (event) {
  event.preventDefault();
  error.innerHTML = error.dataset.errortext;
  usernameInput.setAttribute("aria-invalid", "true");
  error.setAttribute("tabindex", "0");
  error.focus();
});
</script>


<!-- aria-busyで要素の状態を伝達 -->
<p class="status" aria-live="assertive" aria-busy="false" tabindex="0">読み込み状態</p>
<button class="loading">読み込みを開始</button>

<script>
const status = document.querySelector(".status");
const loading = document.querySelector(".loading");
loading.addEventListener("click", function () {
  status.setAttribute("aria-busy", true);
  status.innerHTML = "読み込み中";
  status.focus();
  setTimeout(function () {
    status.innerHTML = "読み込み完了";
    status.setAttribute("aria-busy", false);
  }, 6000);
});
</script>