React フックを使用してアクセシブルなナビゲーションメニューバーを構築する-jsチュートリアル-php.cn

Building an Accessible Navigation Menubar with React Hooks

誤って公開してしまいました!詳細については、後でもう一度戻ってください!

導入

アクセシビリティ対応の Web アプリケーションを作成することは、単なる良い習慣ではなく、今や必須となっています。最近、a11y に焦点を当てたナビゲーションメニューバーを構築する機会がありました。調べているうちに、世の中のほとんどのメニューバーが ARIA パターンに準拠していないことに気づきました。たとえば、メニュー項目をタブで移動する代わりに、メニューバーを矢印キーで移動し、独自のフォーカスを管理する必要があることをご存知ですか?

いくつかのチュートリアルを見つけましたが、結局完全に従うことはできませんでした。私がこれを書いているのは、私が最終的に構築したものは、小さなコンポーネントやカスタムフックにも興味があるのであれば、共有する価値があると思うからです。

このブログはいくつかの開発ステップで構成しますが、私の目標はステップバイステップのガイドを書くことではありません。あなたは React の基本とカスタムフックがどのように機能するかを理解していると思います。

現在は主要な実装の詳細のみを共有していますが、将来的には時間があるときにコードサンドボックスの例を含めてこの記事を更新する予定です。

私たちは何を構築しているのでしょうか?

このブログでは、多くの Web アプリケーションの上部または横にあるようなナビゲーションメニューバーを目指して構築しています。このメニューバーでは、一部のメニュー項目にはサブメニューがあり、マウスの入力/終了で開閉します。

HTMLマークアップ

何よりもまず、セマンティック HTML と適切なロールと ARIA 属性がアクセシビリティに不可欠です。メニューバーのパターンについては、ここの公式ドキュメントから詳しく読むことができます。

適切な HTML マークアップの例を次に示します:

<nav aria-label="Accessible Menubar">
  <menu role="menubar">
    <li role="none">
      <a role="menuitem" href="/">Home</a>
    </li>
    <li role="none">
      <a role="menuitem" href="/about">About</a>
    </li>
    <li role="none">
      <button 
        role="menuitem" 
        aria-haspopup="true"
        aria-expanded="false"
      >
        Expand Me!
      </button>
      <menu role="menu">
        <li role="none">
          <a role="menuitem" href="/sub-item-1">Sub Menu Item 1</a>
        </li>
        <li role="none">
          <a role="menuitem" href="/sub-item-2">Sub Menu Item 2</a>
        </li>
      </menu>
    </li>
  </menu>
</nav>

ログイン後にコピー

セマンティック HTML に button タグを使用していることに注意してください。ボタンには、スクリーンリーダーに警告する aria-haspopup も必要です。最後に、メニューの状態に応じて、適切な aria-expanded 属性を割り当てる必要があります。

コンポーネント

必要なコンポーネントについて見ていきましょう。明らかに、メニュー項目コンポーネントだけでなく、メニュー全体のコンポーネントも必要です。

一部のメニュー項目にはサブメニューがありますが、サブメニューがないものもあります。サブメニューのあるメニュー項目は、ホバーイベントやキーボードイベントでのサブメニューの開閉の状態を管理する必要があります。したがって、独自のコンポーネントである必要があります。

サブメニューも独自のコンポーネントである必要があります。サブメニューもメニュー項目の単なるコンテナですが、サブメニューの状態を管理したり、キーボードイベントを処理したりすることはありません。これにより、トップレベルのナビゲーションメニューと区別されます。

私は最終的に次のコンポーネントを作成しました:

メニューバーの最外層の NavMenu。
個々のメニュー項目の MenuItem。
- メニュー項目リンク
- MenuItemWithSubMenu
展開されたサブメニューの SubMenu。 MenuItem はサブメニュー内で再帰的にネストできます。

集中管理

非常に簡単に言うと、「フォーカス管理」とは、コンポーネントがどの子にフォーカスを持っているかを知る必要があることを意味します。したがって、ユーザーのフォーカスが離れて戻ってくると、以前にフォーカスされていた子が再度フォーカスされます。

フォーカス管理の一般的な手法は「ロービングタブインデックス」です。グループ内のフォーカスされた要素のタブインデックスは 0 で、他の要素のタブインデックスは -1 になります。こうすることで、ユーザーがフォーカスグループに戻ると、タブインデックス 0 の要素が自動的にフォーカスを持つようになります。

NavMenu の最初の実装は次のようになります。

export function NavMenu ({ menuItems }) {
  // state for the currently focused index
  const [focusedIndex, setFocusedIndex] = useState(0);

  // functions to update focused index
  const goToStart = () => setCurrentIndex(0);
  const goToEnd = () => setCurrentIndex(menuItems.length - 1);
  const goToPrev = () => {
    const index = currentIndex === 0 ? menuItems.length - 1 : currentIndex - 1;
    setCurrentIndex(index);
  };
  const goToNext = () => {
    const index = currentIndex === menuItems.length - 1 ? 0 : currentIndex + 1;
    setCurrentIndex(index);
  };

  // key down handler according to aria specification
  const handleKeyDown = (e) => {
    e.stopPropagation();
    switch (e.code) {
      case "ArrowLeft":
      case "ArrowUp":
        e.preventDefault();
        goToPrev();
        break;
      case "ArrowRight":
      case "ArrowDown": 
        e.preventDefault();
        goToNext();
        break;
      case "End":
        e.preventDefault();
        goToEnd();
        break;
      case "Home":
        e.preventDefault();
        goToStart();
        break;
      default:
        break;
    }
  }

  return (
    <nav>
      <menu role="menubar" onKeyDown={handleKeyDown}>
        {menuItems.map((item, index) => 
          <MenuItem
            key={item.label}
            item={item}
            index={index}
            focusedIndex={focusedIndex}
            setFocusedIndex={setFocusedIndex}
          />
        )}
      </menu>
    </nav>
  );
}

ログイン後にコピー

e.preventDefault() は、ArrowDown によるページのスクロールなどを防ぐためにあります。

これが MenuItem コンポーネントです。サブメニューのある項目は少し無視してみましょう。 useEffect、usePrevious、element.focus() を使用して、focusedIndex が変更されるたびに要素にフォーカスします。

export function MenuItem ({ item, index, focusedIndex, setFocusedIndex }) {
  const linkRef = useRef(null);
  const prevFocusedIndex = usePrevious(focusedIndex);
  const isFocused = index === focusedIndex;

  useEffect(() => {
    if (linkRef.current 
      && prevFocusedIndex !== currentIndex 
      && isFocused) {
      linkRef.current.focus()
    }
  }, [isFocused, prevFocusedIndex, focusedIndex]);

  const handleFocus = () => {
    if (focusedIndex !== index) {
      setFocusedIndex(index);
    }
  };

  return (
    <li role="none">
      <a 
        ref={linkRef} 
        role="menuitem"
        tabIndex={isFocused ? 0 : -1}
        onFocus={handleFocus}
      >
        {item.label}
      </a>
    </li>
  );
}

ログイン後にコピー

これは ref (サブメニューのあるメニュー項目のボタン) を持つ必要があるタグであることに注意してください。そのため、これらのタグにフォーカスすると、Enter キーでのナビゲーションなど、デフォルトのキーボード動作が期待どおりに開始されます。さらに、タブインデックスはフォーカスされている要素に応じて適切に割り当てられています。

フォーカスイベントがキー/マウスイベントによるものではない場合に備えて、フォーカスイベントのイベントハンドラーを追加しています。以下はウェブドキュメントからの引用です:

すべてのフォーカスの変更がキーとマウスのイベントによって行われるとは考えないでください。スクリーンリーダーなどの支援テクノロジは、フォーカス可能な要素にフォーカスを設定できます。

微調整 #1

上記の useEffect に従うと、ユーザーがキーボードを使用して移動しなくても、最初の要素にフォーカスがあることがわかります。これを修正するには、アクティブな要素を確認し、ユーザーがキーボードイベントを開始したときにのみ focus() を呼び出します。これにより、フォーカスが本体から移動します。

  useEffect(() => {
    if (linkRef.current 
      && document.activeElement !== document.body // only call focus when user uses keyboard navigation
      && prevFocusedIndex !== focusedIndex
      && isCurrent) {
      linkRef.current.focus();
    }
  }, [isCurrent, focusedIndex, prevFocusedIndex]);

ログイン後にコピー