Accessibility in Portugal:

a real use case

Daniela Matos de Carvalho

@sericaia

Braga.js - Jan, 2018

about me

I code at 

{

}

I organize 

I like

I'm not a rock star

(unfortunately)

But I do have other interests

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

"Pode também fazer o pedido de cartão de estacionamento

através dos Serviços On-line do IMT."

(...yada yada yada yada)

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

"Pode também fazer o pedido de cartão de estacionamento

através dos Serviços On-line do IMT."

(...yada yada yada yada)

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?

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

• Check-digit?

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

Not everything

is bad, folks!

Real use cases (2)

Recover password on Vodafone's website

dangerous recaptchas

João wanted to check how many minutes he has left for calls

Real use cases (3)

RTP play

How could we solve this?

• Audio descriptions not in place

Real use cases (4)

Windows wanted to do a 2018 update

Real use cases (5)

[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!

However,

...are starting to disappear!

on hover menus

However,

Some other important examples and tips

always have "alt" attrs for images,

<img width="696" height="463" class="entry-thumb td-animation-stack-type0-1" src="..." srcset="..." sizes="..."

alt="" title="nintchdbpict0003290301282">

always have "alt" attrs for images,

On mobile

specially for ICONS

captions help

On mobile

specially for ICONS

captions help

Add

contact

Check

Solution

Wierd Edit?

Maximize

Best tip eveeeer

Try VoiceOver on MacOS,

JAWS on Windows,

or another screen reader

Check Blur, color contrast, ...

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

(NoCoffee extension)

Deal with wierd cases

(example from https://accessibility.blog.gov.uk/2017/12/18/what-working-on-gov-uk-navigation-taught-us-about-accessibility/ )

Deal with wierd cases

(example from https://accessibility.blog.gov.uk/2017/12/18/what-working-on-gov-uk-navigation-taught-us-about-accessibility/ )

Screen readers do it in different ways

Deal with wierd cases

(example from https://accessibility.blog.gov.uk/2017/12/18/what-working-on-gov-uk-navigation-taught-us-about-accessibility/ )

Gov.uk decided to use colon for the prev/next problem

• made more sense
• consistent across screen readers

Use

Hierarchical

Headings

<h1>Use</h1>

<h2>Hierarchical</h2>

<h3>Headings</h3>

Be careful with animations

Be up to date

Must read https://axesslab.com/accessibility-according-to-pwd/

https://axesslab.com/

https://accessibility.blog.gov.uk

https://axe-core.org/playground/

https://lynx.browser.org/

http://pa11y.org/

lynx browser

Best best best 

tip ever

Know your users,

test with real people!

Thanks!

Accessibility in Portugal:

a real use case

Daniela Matos de Carvalho

@sericaia

Braga.js - Jan, 2018