00:00:06.880
hi everyone my name is Jeannie I'm
00:00:11.150
originally from Malaysia as I said and
00:00:13.969
I'm currently working down south in this
00:00:15.939
neighboring country of us in this
00:00:18.410
company called carousel and um I'd like
00:00:22.820
to tell you a little bit of a story
00:00:24.320
about myself today so I have this
00:00:27.110
condition since I was very young call
00:00:29.869
strabismus so for you for some of you
00:00:33.200
who are not familiar about strabismus
00:00:34.730
means the common word for it is called a
00:00:37.010
squint so what has this got to do with
00:00:40.460
my talk now imagine for a normal person
00:00:44.140
their eyes look like this alright and
00:00:47.510
imagine that this is basically the view
00:00:50.629
of my eyes looking towards you my eyes
00:00:54.100
look like this so my right eye actually
00:00:58.609
turns inwards towards my nose and as a
00:01:00.949
result of it
00:01:02.059
not being treated when I was young most
00:01:05.269
of the time my vision is effectively
00:01:08.030
this so when you have a screen what
00:01:12.440
happens is your brain basically shuts
00:01:14.960
down the visual input from the misalign
00:01:16.790
eye in order to prevent double vision
00:01:18.950
and headaches
00:01:19.760
and because it was never treated and my
00:01:23.960
brain kept surprising the vision so over
00:01:26.810
time it just got lazier and lazier and
00:01:29.990
lazier and I ended up with basically
00:01:31.850
lazy eye and I'm losing vision as well
00:01:35.800
so this means I have no binocular vision
00:01:42.010
objects appear in a different spot to me
00:01:44.570
from where they actually are I use the
00:01:46.880
thing as a kid that I had superpowers to
00:01:48.800
move objects and red-green 3d glasses to
00:01:54.410
me are just red and about a year ago I
00:02:00.440
somehow managed to scratch my good eye
00:02:02.090
and I ended up with corneal abrasion on
00:02:05.360
my left eye so corneal abrasion is
00:02:09.800
basically a scratch on the eye and is
00:02:11.269
really really painful and it's really
00:02:13.040
difficult to open your eyes may not be
00:02:15.950
standing but you also make your eyes
00:02:17.750
really
00:02:18.560
if to like so this led me to be unable
00:02:21.230
to open my left eye and since my right
00:02:23.180
eye is also funky this meant for a whole
00:02:26.090
weekend my vision was basically this and
00:02:30.280
suddenly I was blind for an entire
00:02:33.260
weekend well thank goodness for screen
00:02:37.670
readers such as voiceover and mech or
00:02:39.709
jaws on windows because frankly if not
00:02:42.350
because of it I don't know how would
00:02:43.880
have survived the entire weekend because
00:02:45.440
you know I'm just chronically addicted
00:02:47.360
to the Internet but the experience could
00:02:51.110
have been better so here are some quick
00:02:53.030
tips of how you can adapt your website
00:02:54.920
to play nice with screen readers and
00:02:57.050
improve the experience for the visually
00:02:59.209
impaired so first you semantic HTML if
00:03:04.400
the text is not a hater don't use either
00:03:06.560
text stolid some other way using CSS
00:03:09.410
instead this is because a lot of screen
00:03:11.959
readers actually use a header text in
00:03:14.720
order to let the users skip through
00:03:16.910
content or quickly schema pitch by
00:03:19.010
skipping through all the different
00:03:20.209
headers or a header levels so using it
00:03:23.600
for unintended purposes can actually
00:03:25.310
mess a screen reader experience a little
00:03:26.840
bit so to give you an example if you've
00:03:28.850
got h1 or h2 elements to style like text
00:03:34.239
visually style text in between
00:03:36.170
paragraphs and that text is actually
00:03:38.540
meant to be part of a paragraph the
00:03:40.310
screen reader basically read all the
00:03:42.230
paragraph nicely like it's a story and
00:03:44.180
it goes heading level 3 bla bla bla bla
00:03:47.329
bla and then it goes paragraph and then
00:03:49.760
table and if you have headings to style
00:03:56.000
a banner for example for your pitch
00:03:58.910
it goes like hitting level 1 blah blah
00:04:01.220
blah and then your and then your to your
00:04:03.709
actual heading it goes
00:04:05.060
hitting level 1 your title so that's
00:04:08.299
really weird
00:04:11.260
you should also take advantage of things
00:04:13.460
like Aria elements such as Neff or
00:04:15.980
section tax as well as adding role
00:04:18.530
attributes to key content sections so
00:04:21.170
modern screen readers provide for an
00:04:22.910
easy way for the users to actually skip
00:04:26.240
across contents using Aria landmarks so
00:04:30.110
this actually our Aria landmarks as well
00:04:32.420
and allow the users to actually so for
00:04:36.710
example using voiceover they have this
00:04:38.630
thing called the wet rota where you can
00:04:40.250
basically turn your fingers on the
00:04:43.850
trackpad like as if you're turning
00:04:45.260
against actual mechanical rotor to
00:04:48.920
basically skip through the page
00:04:51.260
landmarks quickly and if you want to use
00:04:56.420
an element to display something but it
00:04:58.460
should not contain text visually hide
00:05:00.980
the text instead screen readers can't
00:05:03.440
focus on an empty element so blank text
00:05:06.620
may actually cause the screen reader to
00:05:08.660
skip important contextual elements on
00:05:11.330
your website even if you can visually
00:05:13.669
see it and same goes with elements
00:05:18.350
without names or labels so a user when a
00:05:21.350
screen user won't know what an input
00:05:23.150
field is for unless you also give it an
00:05:26.090
Associated label so for example if
00:05:28.669
you've got a signup form having a first
00:05:31.100
name having a label first name for a
00:05:34.760
first name input field would cause the
00:05:36.710
screen reader to properly say first name
00:05:39.169
edit text otherwise it would just say at
00:05:42.200
the X but what should I put in here in
00:05:47.540
this example the screen reader will
00:05:50.690
simply say button even if you can
00:05:54.020
visually see the word submit add the
00:05:58.010
word submit instead so that the screen
00:05:59.840
reader would say submit button
00:06:04.030
and for this the screen the screen
00:06:07.720
reader would simply say link click here
00:06:10.500
but where does it go here it would say
00:06:16.330
link example.com much clearer and make
00:06:23.050
sure you put your own descriptions in
00:06:24.580
your image text and no me words like
00:06:27.300
image off because screen readers will
00:06:30.850
already tell the user that is an image
00:06:32.950
so if you've got an alt text that says
00:06:35.280
cat curled up in a ball looking
00:06:37.419
suspicious like my cat over here the
00:06:40.300
screen will actually say image cat
00:06:43.419
curled up in a ball looking suspicious
00:06:46.000
and by the way screen readers also
00:06:48.640
respect punctuation marks so you should
00:06:52.180
actually write your alt text properly
00:06:54.700
with punctuation box and if you want to
00:07:00.610
do things like on over menus or you know
00:07:03.940
Homer menus and fancy things with
00:07:07.300
JavaScript
00:07:08.110
make sure the underlying HTML elements
00:07:10.780
and the structure of the menu is
00:07:12.010
actually still accessible via the Dom so
00:07:14.500
that the screen readers can focus into
00:07:16.210
it and be careful if you choose to
00:07:19.090
implement things like infinite scrolling
00:07:20.890
because imagine this if a blind user
00:07:23.320
wants to click a link are they at the
00:07:25.919
link at the page footer all right I want
00:07:28.600
to see if there's anything at the page
00:07:30.160
footer but when you scroll down the page
00:07:33.910
loads more content and then gets longer
00:07:36.880
so when does the page actually end will
00:07:39.760
I ever get to the bottom of the page so
00:07:42.960
consider a lot a lot more button or a
00:07:45.970
standard pagination instead and make
00:07:50.050
sure your links actually proper link
00:07:51.700
text not some random HTML that has a
00:07:55.330
click handler on it all right and
00:07:58.950
finally consider fonts and colors that
00:08:02.500
use in your website make sure that
00:08:04.840
there's sufficient contrast and I
00:08:08.890
challenge you to read this right make
00:08:11.979
sure the size is legible enough
00:08:16.290
yes that's on purpose by the way and
00:08:21.880
especially on mobile websites try not to
00:08:23.740
prevent the user from being able to zoom
00:08:25.240
in and out so don't set max zoom on your
00:08:32.950
viewports and even for a fully sighted
00:08:37.300
people remember that they're also those
00:08:40.090
who are colorblind roughly 9% or as the
00:08:43.960
first talk in the morning this this
00:08:45.760
morning say one inch of mills are
00:08:48.100
colorblind don't depend solely on colors
00:08:51.100
to deliver context you might want to
00:08:53.140
consider using shapes or texts in
00:08:56.410
association with the color so for
00:08:59.860
example if you are displaying stock
00:09:01.870
market movements at shapes to indicate
00:09:05.410
is going up or down so these are just
00:09:10.330
some really quick tips for adding better
00:09:12.070
accessibility to your site and really
00:09:14.050
it's actually not that difficult and
00:09:16.500
it's actually all these small little
00:09:19.570
changes that you can make your website
00:09:21.370
that really makes a big difference to
00:09:24.040
your users and you know accessibility is
00:09:27.280
not just an abstract concept for a small
00:09:30.430
group of people that we don't often
00:09:31.840
think about this ability can be
00:09:34.360
temporary or situational - just like how
00:09:37.930
I was temporarily blind for one weekend
00:09:40.840
last year or maybe you're a mother who
00:09:44.620
is nursing or you're carrying a baby or
00:09:47.470
you know maybe you're just carrying a
00:09:48.790
bag of groceries and you're walking home
00:09:50.350
phone in one hand you're trying to do
00:09:52.900
something all right adding better
00:09:55.450
accessibility support helps everyone and
00:09:57.850
not just the permanently disabled so
00:10:00.670
Microsoft actually has a pretty good
00:10:03.400
guide on inclusive design you should
00:10:05.589
actually go check it out I think with
00:10:07.089
that link in my slides I will be sharing
00:10:09.850
my slides after the talk and you know
00:10:13.060
just to underscore that disability in
00:10:16.300
whatever form whether it is permanent or
00:10:19.089
temporary or situational is more common
00:10:24.040
than you think it is
00:10:26.529
that's actually two of us who is
00:10:28.719
actually blind in one eye in this room
00:10:31.079
so here's Kevin and I showcasing where
00:10:35.409
outline eyes are and I'd like to end by
00:10:41.469
giving a shout out to a very special
00:10:43.359
person mr. yam Tong Wu who nearly about
00:10:46.719
10 years ago introduced me to the world
00:10:48.219
of accessible tech and how to use voice
00:10:50.769
over and in doing so unknowingly helped
00:10:53.919
me to survive that blind weekend so mr.
00:10:56.289
yam actually is the founder of the adult
00:10:58.329
blind association of Selangor who
00:10:59.859
basically advocates and helps people who
00:11:03.459
are who became blind as adults to regain
00:11:07.629
their independence through computers
00:11:10.809
technology accessible technology and the
00:11:13.209
internet so thank you
00:11:22.080
you