a real use case

Daniela Matos de Carvalho


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


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



How would João add 


 And where?!

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

How could we solve this?

How could we solve this?

  • Aria fields w/ correct labels for forms

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

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 (
          <label htmlFor="username">
            User Id
            title="Insert your user Id"

Real use cases (2)

Recover password on Vodafone's website

dangerous recaptchas

Real use cases (3)

RTP play

How could we solve this?

  • Some wierd HTML
  • Audio descriptions not in place

Real use cases (4)

[on hover menus]

João: "There are websites were I can't move through pages"

how we can create a pretty pretty website with

non accessible content if we're not careful

on hover menus

...are starting to disappear!


...are starting to disappear!

on hover menus


Some other important examples and tips

always have "alt" attrs for images,

<img width="696" height="463" 

alt="" title="nintchdbpict0003290301282">

Check Blur, color contrast, ...

Note: its now possible to fix color contrast using Chrome dev tools help!

(NoCoffee extension)

Deal with wierd cases

Deal with wierd cases decided to use colon for the prev/next problem

  • made more sense
  • consistent across screen readers

Be up to date


Try VoiceOver on MacOS,

JAWS / NVDA on Windows,

or another screen reader


tip ever

Best best best 

tip ever

Know your users,

test with real people!



a real use case

Daniela Matos de Carvalho


ReactGirls - Jan, 2018

Made with