Accessibility:

a real use case

Daniela Matos de Carvalho

@sericaia

ReactGirls - Jan, 2018

about me

I code at

{

}

I organize

I like

What exactly do I do?

Meet My friend João

João is incredibly fast

but

sometimes tech does not help

he asked for help

Real use cases (1)

Lets try to apply for a disability badge

(...yada yada yada yada)

"you can also apply for a blue badge using the IMT online services"

My first thoughts:

*what an amazing website... (...) who uses this S**T?*

João's perspective:

I just want it to work

After login with credentials...

because everybody knows they're check digit, right?

we're done, right?

well, not really.

after registering it sends an email

to confirm your registration

Hello <user>,

Welcome to IMT online. To validate please insert the code 12349fgfh-3454fd-s4fb

...

(adapted)

How would João add

12349fgfh-3454fd-s4fb

And where?!

There's a new magic field in the IMT online website!

How could we solve this?

Aria fields w/ correct labels for forms


  <div>
    <input id="auth-imt" type="checkbox" checked="true"/>
    <label for="auth-imt">Authorization to be contacted by IMT</label>
  </div>

How could we solve this?

Alternative to E-mail confirmation key

Button w/ link for

a validation page?

Check-digit?

"An error has occured."? well...

How about React?

“Note that all aria-* HTML attributes are fully supported in JSX.”

(from React docs)

How about React?

    render() {
      return (
        <div>
          <label htmlFor="username">
            User Id
          </label>
          <input
            type="text"
            name="username"
            id="username"
            title="Insert your user Id"
            aria-required="true"
          />
        </div>
      );
    }