Summarized using AI

Lightning Talk: One Blind Weekend

Jinny Wong • October 13, 2017 • Selangor, Malaysia • Lightning Talk

The video "Lightning Talk: One Blind Weekend" features speaker Jinny Wong discussing her personal experience with visual impairment and advocating for web accessibility. Wong shares her story starting from her childhood condition of strabismus, which led to significant vision loss over time. Recently, she faced a corneal abrasion that left her temporarily blind for an entire weekend, a situation that underscored the importance of assistive technology like screen readers.

Wong gives practical tips for improving website accessibility, focusing on how developers can make their sites more usable for visually impaired individuals:

  • Semantic HTML: Emphasizes the importance of using proper HTML elements for structure, as screen readers often rely on headers to navigate content.
  • ARIA Landmarks: Encourages the use of ARIA elements and role attributes to define key content sections and help users skip through pages.
  • Accessible Forms: Stresses the need for associated labels with input fields so that screen readers can provide context to users, avoiding confusion from vague or unnamed elements.
  • Alt Text: Advises against introductory phrases like "image of" in alt text, recommending clear and descriptive phrases while maintaining proper punctuation.
  • Menu Structure: Notes that JavaScript elements must still be accessible in the DOM for screen reader users to engage with them.
  • Color Contrast: Suggests ensuring adequate color contrast and font size for better readability, including accommodating users who may be colorblind.
  • Consideration for Situational Users: Highlights that disabilities can be temporary or situational, affecting a larger number of people than might be typically recognized.

Wong concludes by encouraging developers to view accessibility as a crucial consideration in web development, impacting not just those with permanent disabilities but anyone who may face temporary or situational challenges. She highlights the commonality of disabilities, noting how easily one can become reliant on supportive technology. Wong passionately acknowledges her mentor, Mr. Yam Tong Wu, for his role in introducing her to accessible technology, which was vital for her during her blind weekend experience.

In summary, Jinny Wong’s talk effectively blends personal narrative with technical insights, making a strong case for why web accessibility is essential for enhancing user experience for all.

Lightning Talk: One Blind Weekend
Jinny Wong • October 13, 2017 • Selangor, Malaysia • Lightning Talk

Speaker: Jinny Wong (@shujinh)

Website: http://rubyconf.my

Produced by Engineers.SG

RubyConf MY 2017

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
Explore all talks recorded at RubyConf MY 2017
+16