Adventure style text saying Inclusive React a survival guide over a forest backdrop.

Get your QR-code scanner apps ready!

Inaccessible things are out of reach

Rusted old lock and chain in a wooden door so unused it has spider webs.

Inaccessible

Accessible


:focus {
    outline: 0; //Or none
}


       :focus {
          // Some visual style
       }


Name:


<label htmlFor="nameInput">
    Name:
</label>

<input id="nameInput"
       type="text" />

Inaccessible

Accessible


            <div className="button-style"
                 onClick={onClickHandler}>
                 Press Me
            </div>


        <button onClick={onClickHandler}>
             Press Me
        </button>


<a onClick={onClickHandler}>
    Click me
</a>



    Navigate somewhere

A button with dark blue text on a darker blue background showing bad contrast.

A button with dark blue text on a light blue background showing good contrast.

We need a Swiss Army Knife

Swift army knife with blades and tools open.

The React Accessibility Doc

reactjs.org/docs/accessibility.html

WCAG

Web Content Accessibility Guidelines

Defines how to make Web content more accessible to all people.

webaim.org/standards/wcag/checklist

WAI - ARIA

Web Accessibility Initiative – Accessible Rich Internet Applications

Specifies how to increase the accessibility of web applications.

www.w3.org/TR/wai-aria-practices-1.1/

Semantic JSX and HTML

Non-semantic


    <Navigation />


    <SideMenu />


    <MainContent />
    <div className="button-style"
         onClick={handler}>
         Save selection
    
</div>

Semantic


    <Navigation />


    <SideMenu />


    <MainContent />
    <button type="button"
            onClick={handler}>
         Save selection
    </button>