Accesibility

First steps

Index

Basics

1. Basics

☑️ Tag ➡ semantinc

☑️ Never use HTML tags for styling

☑️ Semantic layout

☑️ Scalable texts (zoom)

1. Basics

☑️ Semantic layout

<header>
  <h1>Header</h1>
</header>
<nav>
  <!-- main navigation in here -->
</nav>
<!-- Here is our page's main content -->
<main>
  <!-- It contains an article -->
  <article>
    <h2>Article heading</h2>
    <!-- article content in here -->
  </article>
  <aside>
    <h2>Related</h2>
    <!-- aside content in here -->
  </aside>
</main>
<footer>
    <!-- footer-->
</footer>

UX/UI

☑️ Links/Buttons/... shape feedback

 

☑️ Actions (Hover/Focus): outline, color blindness

☑️ Forms:

  •   Accesible errors
  •   Placeholders, enough contraste
  •   Radio-buttons as tags?

   Examples:

 ⛔️ Hover button, error input... 

2. UX/UI

☑️ Color contrast

☑️ Color blindly

COLOR-Tools

2. UX/UI

☑️ Storybook A11y addon

CODE

What's in our hands

3. CODE

Images & icons

Readers matters 🔎

3. CODE

☑️ Background images only for decorative purposes

☑️ Use alt properly.

☑️ Decorative images: alt="".

      Avoid reading the src

Images & icons

❌ atl="logo of Openbank"
✅ atl="Go to homepage"

3. CODE

☑️  Iconos (IE RRSS):

Images & icons

<a src="/blabla" aria-label="Follow company on IG" >
  <svg aria-hidden="true">
  ......
  </svg>
</div>

Decorative icons aria-hidden="true"

3. CODE

☑️  Tip: never use aria-labelledby

Images & icons

☑️ Tip: Images with relevant text,

describe it within the  alt attribute

3. CODE

☑️  Tip: try to avoid them

NON-BUTON/LINK clickable Elements

☑️ role="button" & tabindex=0

☑️ Accesible: Needs JS to be able to interact with space & enter. 

3. CODE

☑️  Use buttons

Dropdown Menus

☑️ aria-expanded=true/false modify via JS

☑️ Content collapsed → tabindex="-1" avoiding readers to access it.

3. CODE

Burger Menu example 🍔

Dropdown Menus

☑️  aria-expanded=true/false

☑️  Button con aria-label="Menu"

☑️  Svg dentro con aria-hidden="true"

3. CODE

Bypass blocks

☑️  Only on focus (keyboard/readers navigation)

☑️ Links to the main content, contact forms... etc

3. CODE

Links

☑️  Contrast

☑️  New window link:

  • rel="noopener"
  • aria-label="something opens in new window"

☑️  Try to avoid "here/aqui" links

☑️  links focus/active/visited shape & color

3. CODE

Navigation

☑️  nav > ul> li > a

☑️  Identify the main navigation element (topbar) aria-label="Main"

☑️  aria-current="page" with the active element

3. CODE

Hidden elements

☑️ IE scrollable elements that comes into view: tabindex="-1"

3. CODE

Forms

☑️  labels associated with inputs  for="" & id=""

☑️  Placehoder contrasts

☑️  Required fields with required attribute or aria-required=true

☑️  If we use asterisks: aria-hidden="true", or explain them

☑️  button: type="submit". Use of descriptive texts

3. CODE

Tables

<p id="caption">
  My Hobbies
</p>
<div aria-describedby="caption" class="table" role="grid">
  <div class="tr" role="row">
    <div class="th" role="columnheader">
      Name
    </div>
    <div class="th" role="columnheader">
      Description
    </div>
    <div class="th" role="columnheader">
      Additional Resources
    </div>
  </div>
  <div class="tr" role="row">
    <div class="th" role="rowheader">
      Playing Soccer
    </div>
    <div class="td" role="gridcell">
      Soccer is a team sport played between two teams of eleven players with a spherical ball.
    </div>
    <div class="td" role="gridcell">
      <a href="https://en.wikipedia.org/wiki/Association_football">Wikipedia</a>
    </div>
  </div>
  <div class="tr" role="row">
    <div class="th" role="rowheader">
      Dancing
    </div>
    <div class="td" role="gridcell">
      Dance is a performing art form consisting of purposefully selected sequences of human movement.
    </div>
    <div class="td" role="gridcell">
      <a href="https://en.wikipedia.org/wiki/Dance">Wikipedia</a>
    </div>
  </div>
  <div class="tr" role="row">
    <div class="th" role="rowheader">
      Gardening
    </div>
    <div class="td" role="gridcell">
      Gardening is the practice of growing and cultivating plants as part of horticulture.
    </div>
    <div class="td" role="gridcell">
      <a href="https://en.wikipedia.org/wiki/Gardening">Wikipedia</a>
    </div>
  </div>
</div>

3. CODE

Carousel

☑️  Controls size

☑️  aria-labels in navigation controls

☑️  Hidden elements with tabindex="-1"

☑️  Controls Contrast

3. CODE

Media players

☑️  Avoid autoplay

☑️  Video description

☑️  Accesible media controllers (by readers)

3. CODE

Tips

Tips

☑️ Color blindness

☑️ Keyboard/automated navigation: tabindex, roles, use of buttons, links...

☑️ Readers: alt, aria-label... etc

☑️ Zoom

keep in mind

Tools

Checklists

4. TOOLS

☑️  wcag

☑️  a11yproject

Extensions

4. TOOLS

☑️ Color blindly

☑️ Screen reader

☑️ arc-toolkit

LInter

4. TOOLS

   rules: {
   //....
    'jsx-a11y/img-redundant-alt': [
      2,
      {
        components: ['MbImg'],
        words: ['Foto', 'Logo'],
      },
    ],
    'jsx-a11y/alt-text': [
      2,
      {
        img: ['MbImg'],
      },
    ],

   }
  

Integrated accesibility testing

4. TOOLS

Reference sites

4. TOOLS

SOME LINKS

4. TOOLS

Courses

4. TOOLS

🎉

calos.perezjimeno@gruposantander.com

Accesibility

By Carlos Pérez Jimeno

Accesibility

Accesibilty first steps

  • 318