VOGUEX-A11Y

Description

voguex-a11y is your ticket to an inclusive internet! This library introduces a suite of hooks designed to tackle accessibility (a11y) challenges head-on. Improve your components and build better solutions with customizable hooks that effortlessly enhance accessibility features, ensuring everyone can engage with your app without any problem. From keyboard navigation to screen reader announcements and more, voguex-a11y empowers you to create digital experiences that truly welcome to every user.

Demo

• See the Demo - storybook here

Features

• Accessible State Management: Manage accessible states such as focus, keyboard navigation, and screen reader announcements easily.
• Customizable: Tailor accessibility behaviors to fit your specific application needs.
• Easy Integration: Easy integration with existing React applications.

Installation

Install voguex-a11y, and together we will start to make great products.

  npm install voguex-a11y

Usage

• To use the package, import the package and use the hooks, is very simple:

import { useRef } from "react";
import useArrowsNavigation from "@voguex/hooks/useArrowsNavigation";

const App = () => {
  const ref1 = useRef(null);
  const ref2 = useRef(null);
  const ref3 = useRef(null);

  const { speakNavigationStatus, setSpeakNavigationStatus } =
    useArrowsNavigation([ref1, ref2, ref3]);

  return (
    <section>
      <p
        aria-label="title of the component"
        aria-describedby="title of arrow navigation component"
      >
        We can navigate using arrows keys and if you want it, we can activate
        voice to read the content of the elements
      </p>
      <section>
        <button
          aria-label="button to enable or disable voice"
          onClick={() => setSpeakNavigationStatus(!speakNavigationStatus)}
        >
          {speakNavigationStatus ? "Disabled" : "Enabled"} voice
        </button>
        <button aria-label="first element to navigate" ref={ref1}>
          Element 1
        </button>
        <button aria-label="second element to navigate" ref={ref2}>
          Element 2
        </button>
        <button aria-label="third element to navigate" ref={ref3}>
          Element 3
        </button>
      </section>
    </section>
  );
};

Changelog

The changelog is regularly updated, please visit to see the latest changes.

Repository

See the Repository to see the source code.

Authors

• @fmruiz