wcag-compliant-accessible-library: A TypeScript repository from StackOverflowIsBetterThanAnyAI

Installation

Using npm:

$ npm i wcag-compliant-accessible-library

Usage

This library can be used with either ESM or CommonJS.

In the following example, you can see the import and passing of the properties using an example component.

import { WCAGH2H58 } from 'wcag-compliant-accessible-library'

    ...

<WCAGH2H58
    imageData={{
        imageSource: image,
        additionalStyling: { height: 75, width: 75 },
    }}
    link="/star-id"
    childrenBeforeImage
>
    <div>Go to the home page</div>
</WCAGH2H58>

    ...

What is it about?

This library deals with the WCAG 2.2 success criteria.

WCAG stands for Web Consortium Accessibility Guidelines and is an initiative of the World Wide Web Consortium.

The aim behind these guidelines is to make the internet accessible to a wider audience.

The WCAG 2 guidelines are primarily aimed at people with disabilities, people with impaired vision and hearing, impaired movement, speech impairments, photosensitivity and cognitive impairments.

However, people without these disabilities will also benefit from these guidelines.

These guidelines apply to web content for desktops, laptops, tablets and mobile devices.

WCAG 2.2 is divided into four chapters:

Perceivable,
Operable,
Understandable and
Robust.

For each of these four principles, the W3C provides a set of success criteria that should be met to ensure digital accessibility.

(World Wide Web Consortium, Inc., 2023)

This library fulfils a number of these criteria for success.

A number of components are provided which are not styled at all.

This means that you can easily integrate your own designs.

Content

This library takes up two of these four principles: 1) Perceivable and 3) Understandable.

The success criteria covered in this library are:

1.1.1 Non-text Content,

1.3.1 Info and Relationships,

1.3.5 Identify Input Purpose,

3.1.2 Language of Parts and

3.2.2 On Input

Each of these success criteria is given certain techniques by the W3C which fulfil these criteria.

These defined techniques and components have been implemented in this library:

(World Wide Web Consortium, Inc., 2023)

Documentation

You can find the Storybook here.

The technologies used are listed in sequence according to the WCAG prefix.

They start with either ARIA, G or H.

WCAGNonTextContent:

WCAGARIA2H58H65:

By using this component you fulfil the success criteria 1.1.1 Non-text Content, 1.3.1 Info and Relationships and 3.1.2 Language of Parts

Code snippet:

<input title="description" lang="de" />

WCAGARIA6H58:

By using this component you fulfil the success criteria 1.1.1 Non-text Content and 3.1.2 Language of Parts

Code snippet:

<div aria-label="description" lang="de"> children </div>

WCAGARIA10H58:

By using this component you fulfil the success criteria 1.1.1 Non-text Content and 3.1.2 Language of Parts

Code snippet:

WCAGARIA10H58:
<div aria-labelledbyid="id" lang="de"> children </div>

WCAGARIA10H58Text:
<div id="id" lang="de"> children </div>

WCAGARIA15H58:

By using this component you fulfil the success criteria 1.1.1 Non-text Content and 3.1.2 Language of Parts

Code snippet:

WCAGARIA15H58:
<>
   <img aria-describedby="id" src={imageSource-1} />
   <img aria-describedby="id" src={imageSource-2} />
</>

WCAGARIA15H58Text:
<p id="id" lang="de"> children </p>

WCAGG73H58:

By using this component you fulfil the WCAG2.2 success criteria 1.1.1 Non-text Content and 3.1.2 Language of Parts

Code snippet:

WCAGG73H58:
<div aria-describedby="long-desc" id="div-id" lang="de">
    children 
    <a target="_blank" href="#long-desc"> buttonText </a>
    shortText
</div>

WCAGG73H58Text:
<div id="long-desc" lang="de">
    children
    <p>
        <a target="_blank" href="#div-id"> buttonText </a>
    </p>
</div>

WCAGG74G92H58:

By using this component you fulfil the success criteria 1.1.1 Non-text Content and 3.1.2 Language of Parts

Code snippet:

WCAGG74G92H58:
<div aria-describedby="long-desc" lang="de">
    children
    shortText
</div>

WCAGG74G92H58Text:
<p id="long-desc" lang="de"> children </p>

WCAGG196:

By using this component you fulfil the success criterion 1.1.1 Non-text Content

Code snippet:

<>
    <img alt="description" src={imageSource-1} />
    <img src={imageSource-2} />
</>

WCAGH2H58:

By using this component you fulfil the success criteria 1.1.1 Non-text Content, 2.4.4 Link Purpose (In Context), 2.4.9 Link Purpose (Link Only) and 3.1.2 Language of Parts

Code snippet:

<a target="_blank" href="link" lang="de">
    children
    <img src={imageSource} />
</a>

WCAGH24:

By using this component you fulfil the success criteria 1.1.1 Non-text Content, 2.4.4 Link Purpose (In Context) and 2.4.9 Link Purpose (Link Only)

Code snippet:

<>
    <img useMap"#mapName" src={imageSource} />
    <map name="mapName">
        <area coords="0 0 0 0" shape"rect" />
    </map>
</>

WCAGH30H58:

By using this component you fulfil the success criteria 1.1.1 Non-text Content, 2.4.4 Link Purpose (In Context), 2.4.9 Link Purpose (Link Only) and 3.1.2 Language of Parts

Code snippet:

<a target="_blank" href="link" lang="de">
    preImageText
    <img src={imageSource-1} />
    <img src={imageSource-2} />
    postImageText
</a>

WCAGH36:

By using this component you fulfil the success criterion 1.1.1 Non-text Content

Code snippet:

<input type="image" alt="description" />

WCAGH37:

By using this component you fulfil the success criterion 1.1.1 Non-text Content

Code snippet:

<img alt="description" src={imageSource} />

WCAGH44H58:

By using this component you fulfil the success criteria 1.1.1 Non-text Content, 1.3.1 Info and Relationships, 3.1.2 Language of Parts and 3.3.2 Labels or Instructions

Code snippet:

<>
    <label htmlFor="id" lang="de"> labelText </label>
    <select/textarea/input id="id"> options </select/textarea/input>
</>

WCAGH53:

By using this component you fulfil the success criteria 1.1.1 Non-text Content, 1.2.3 Audio Description or Media Alternative (Prerecorded) and 1.2.8 Media Alternative (Prerecorded)

Code snippet:

<object> children </object>

WCAGH58H86:

By using this component you fulfil the success criteria 1.1.1 Non-text Content and 3.1.2 Language of Parts

Code snippet:

<span aria-label="description" lang="de"> emoji </span> or

<div aria-label="description" lang="de"> emoji </div> or

<abbr title="description" lang="de"> emoji </abbr>

WCAGH67:

By using this component you fulfil the WCAG2.2 success criterion 1.1.1 Non-text Content

Code snippet:

<img alt="" src={imageSource} />

WCAGInfoAndRelationships:

WCAGARIA2H58H71:

By using this component you fulfil the success criteria 1.3.1 Info and Relationships, 3.1.2 Language of Parts and 3.3.2 Labels or Instructions

Code snippet:

<form (optional)>
    <fieldset>
        <legend> legendText </legend>
        <div lang="de">
            <input id="id" />
            <label htmlFor="id"> labelText </label>
        </div>
    </fieldset>
</form>

WCAGARIA2H58H85:

By using this component you fulfil the success criteria 1.3.1 Info and Relationships and 3.1.2 Language of Parts

Code snippet:

<form>
    <label htmlFor="id"> labelText </label>
    <select id="id">
        <optgroup>
            <option lang="de"> option </option>
            <option lang="de"> option </option>
        </optgroup>
    </select>
</form>

WCAGARIA11H58:

By using this component you fulfil the success criteria 1.3.1 Info and Relationships, 1.3.6 Identify Purpose , 2.4.1 Bypass Blocks and 3.1.2 Language of Parts

Code snippet:

<div lang="de" aria-label="description"> children </div> or

<form lang="de" aria-label="description"> children </form>

WCAGARIA12H58:

By using this component you fulfil the success criteria 1.3.1 Info and Relationships and 3.1.2 Language of Parts

Code snippet:

<div aria-level="3" lang="de"> children </div>

WCAGG115H49Code:

By using this component you fulfil success criterion 1.3.1 Info and Relationships

Code snippet:

<code> children </code>

WCAGG115H49H58A:

By using this component you fulfil the success criteria 1.3.1 Info and Relationships and 3.1.2 Language of Parts

Code snippet:

<a target="_blank" href="link" lang="de"> children </a>

WCAGG115H49H58B:

By using this component you fulfil the success criteria 1.3.1 Info and Relationships and 3.1.2 Language of Parts

Code snippet:

<b lang="de"> children </b>

WCAGG115H49H58Cite:

By using this component you fulfil the success criteria 1.3.1 Info and Relationships and 3.1.2 Language of Parts

Code snippet:

<cite lang="de"> children </cite>

WCAGG115H49H58Em:

By using this component you fulfil the success criteria 1.3.1 Info and Relationships and 3.1.2 Language of Parts

Code snippet:

<em lang="de"> children </em>

WCAGG115H49H58Quote:

By using this component you fulfil the success criteria 1.3.1 Info and Relationships and 3.1.2 Language of Parts

Code snippet:

<blockquote lang="de"> children </blockquote>

WCAGG115H49H58ShortQuote:

By using this component you fulfil the success criteria 1.3.1 Info and Relationships and 3.1.2 Language of Parts

Code snippet:

<q lang="de"> children </q>

WCAGG115H49H58Strong:

By using this component you fulfil the success criteria 1.3.1 Info and Relationships and 3.1.2 Language of Parts

Code snippet:

<strong lang="de"> children </strong>

WCAGG115H49H58Sub:

By using this component you fulfil the success criteria 1.3.1 Info and Relationships and 3.1.2 Language of Parts

Code snippet:

<sub lang="de"> children </sub>

WCAGG115H49H58Sup:

By using this component you fulfil the success criteria 1.3.1 Info and Relationships and 3.1.2 Language of Parts

Code snippet:

<sup lang="de"> children </sup>

WCAGG117H48H58:

By using this component you fulfil the success criteria 1.3.1 Info and Relationships and 3.1.2 Language of Parts

Code snippet:

<ul>
    <li lang="de"> item </li>
    <li lang="de"> item </li>
</ul>

or

<ol>
    <li lang="de"> item </li>
    <li lang="de"> item </li>
</ol>

or

<dl>
    <div>
        <dt lang="de"> name </dt>
        <dd lang="de"> description </dd>
    </div>
</dl>

WCAGG117H58H97H101:

By using this component you fulfil the success criteria 1.3.1 Info and Relationships, 2.4.1 Bypass Blocks and 3.1.2 Language of Parts

Code snippet:

<nav>
    <ul>
        <li>
            <a target="_blank" href="link" lang="de"> displayedText </a>
            <a target="_blank" href="link" lang="de"> displayedText </a>
        </li>
    </ul>
</nav>

WCAGH39H43H51H58H63:

By using this component you fulfil the success criteria 1.1.1 Non-text Content, 1.2.3 Audio Description or Media Alternative (Prerecorded), 1.2.8 Media Alternative (Prerecorded), 1.3.1 Info and Relationships and 3.1.2 Language of Parts

Code snippet:

<table>
    <caption> captionText </caption>
    <tbody>
        <tr>
            <th id="id" scope"col" lang="de"> header </th>
        </tr>
        <tr headers="id">
            <td lang="de"> item </td>
        </tr>
        <tr headers="id">
            <td lang="de"> item </td>
        </tr>
    </tbody>
</table>

WCAGIdentifyInputPurpose

WCAGG13H32H58H98:

By using this component you fulfil the success criteria 1.3.5 Identify Input Purpose, 3.1.2 Language of Parts, 3.2.2 On Input and 3.3.2 Labels or Instructions

Code snippet:

<form>
    changedContextText (optional)
    <div>
        <label htmlFor="id"> labelText </label>
        <input type="month" autocomplete="bday-month" id="id" />
    </div>
    <div>
        <input type="submit" /> (div and submit are optional)
    </div>
</form>

You can find the Storybook here.

License

MIT

StackOverflowIsBetterThanAnyAI/wcag-compliant-accessible-library

Installation

Usage

What is it about?

Content

Documentation

License