How I fixed accessibility on my website and how you can fix yours

Daniela Matos de Carvalho @sericaia

July, 9th

Hello 👋

WHAT
IS
#A11Y

(https://www.who.int/blindness/GLOBALDATAFINALforweb.pdf?ua=1))

> The estimated number of people visually impaired in the world is 285 million, 39 million blind and 246 million having low vision

World Health Organization

What
Accessibility
represents

How
Can we
FIX it

EXperience

MY

Use case

My personal website

MEET sericaia.me

website image, demo

Expectation

> A clean and readable website that uses appropriate landmarks (header, footer, main), where headings (h1, h2, ...) are respected and where all article images had alt attribute.

myself, 1month ago

Expectation

> ...readable website

> ...appropriate

* landmarks ...

* headings ...

* images

Reality

(source https://giphy.com/gifs/dYmSG3I8ucb4BFzu80)

What

I
Used

➕ Tota11y

➕ NoCoffee

➕ VoiceOver

Findings

Contrast issues

before after

Avatar

import React from 'react'
import Img from 'gatsby-image'

const Avatar = ({ src }) => 
  <Img fluid={src} alt="Daniela's personal picture" />

export default Avatar

Avatar

// Header.js
<Link to="/"                           >
  <Avatar src={/*...*/} />
</Link>

 aria-label="Go to index"

"art or "art

const FancyTitle = ({
  title,
  color = 'blue',
  lettersNumber = 3
}) => {
  const firstTextToken = title.substring(0, lettersNumber)
  const lastTextToken = title.substring(lettersNumber)

  return (
    <h2>
      <span style={{ color: colors[color] }}>
    	{firstTextToken}
      </span>
      {lastTextToken}
    </h2>
  )
}

"art icles" or "articles"?

"art or "art

const FancyTitle = ({
  title,
  color = 'blue',
  lettersNumber = 3
}) => {
  const firstTextToken = title.substring(0, lettersNumber)
  const lastTextToken = title.substring(lettersNumber)

  return (
    
      <span style={{ color: colors[color] }}>
    	{firstTextToken}
      </span>
      {lastTextToken}
    </h2>
  )
}

"art icles" or "articles"?

<h2 aria-label={title}>

The strange case of icons

👩‍💻

🌟

🎧

🤓

The strange case of icons

🎧

1.

2.

"invisible" icons

The strange case of icons

meaningful icons

Options

1.

"invisible" icons

The strange case of icons

aria-hidden='true'

1.

"invisible" icons

The strange case of icons


const iconToEmoji = {
  star: '🌟',
  student: '🤓',
  podcast: '🎧',
  webinar: '👩‍💻',
}


// ...
<span key={icon}                    >
  {iconToEmoji[icon]}
</span>

aria-hidden="true"

✅ easy fix

2.

meaningful icons

The strange case of icons

aria-label="highlight post"

The strange case of icons

// don't do this!
<>
  <span                       style={{ display: 'none' }}>
    Please read this
  </span>
  <span
    key={icon}
    style={{ marginRight: '0.3rem' }}

  >
    {iconToEmoji[icon]}
  </span>
</>

not that easy fix

2.

meaningful icons

aria-labelledby="please-read-this"

id="please-read-this"

The strange case of icons

2.

meaningful icons

#readTheDocs

(https://media.giphy.com/media/frv4x1tU4WkXS/giphy.gif)

The strange case of icons

2.

meaningful icons

aria-describedby on a span or div will be ignored by NVDA and VoiceOver unless given an interactive role, an image or landmark role. JAWS and Talkback are OK."

(https://www.w3.org/TR/using-aria/#label-support)

#readTheDocs

The strange case of icons

2.

meaningful icons

"Don't use aria-label or aria-labelledby on a span or div unless its given a role."

(https://www.w3.org/TR/using-aria/#label-support)

#readTheDocs

The strange case of icons

Landmarks

Coderdojo LX

footer

main

header

Landmarks for kids

Landmarks for ME

🤦‍♀️

Headings, paragraphs,

... HTML ELEMENTS

Headings, paragraphs,

... HTML ELEMENTS

h2

h1

h3

...

heading3(h3)

paragraph(p)

What
TO
FIX NEXT

COde snippets

/photography

Images

in

<img alt="1_bird.JPG" ...

<img alt="2_flower2.JPG" ... />

<img alt="3_flower3.JPG" ... />

forms and error handling

(spoiler: we fail a lot here)

Extra

To

sum

up

➕ contrasts

➕ HTML elements