Search
Red Dot Ruby Conference 2017
Lightning Talk: One Blind Weekend
Edit
Summarized using AI

Lightning Talk: One Blind Weekend

Jinny Wong • June 23, 2017 • Singapore • Lightning Talk

In the lightning talk titled "One Blind Weekend," Jinny Wong, an Engineering Manager at Carousell, shares her personal experience of becoming temporarily blind and how it changed her perspective on web accessibility. This talk highlights the importance of designing websites that are inclusive for all users, particularly those with visual impairments.

Key Points Discussed:
- Jinny introduces her condition, strabismus, which affects her vision. She describes the limitations it brings, leading to her reliance on assistive technologies during her temporary blindness caused by a corneal abrasion.
- The experience of using screen readers like VoiceOver on Mac and iPhone provided insights into the usability challenges faced by visually impaired individuals.
- Jinny provides several tips for improving web accessibility:
- Use Semantic HTML: Properly structure HTML to ensure screen readers can interpret headings correctly, enabling users to navigate content efficiently.
- Implement ARIA Roles: Use ARIA attributes to enhance navigation, helping users to skip to relevant sections of the page quickly.
- Provide Labels for Inputs: Ensure that all input fields have associated labels so that screen readers can convey the correct context to users.
- Descriptive Alt Text: Use meaningful alt text for images, avoiding unnecessary phrases like "image of" since screen readers identify images by default.
- Scrollable Content: Avoid infinite scrolling which can frustrate users; provide clear pagination or buttons to access more content.
- Consider Accessibility in Design: Ensure sufficient color contrast, make text legible, and avoid restricting zoom features on mobile sites. Also, convey information using shapes, not just colors, to accommodate color-blind users.
- Temporary and Situational Disabilities: Jinny emphasizes that disability can be temporary, as illustrated by her experience, and encourages designers to think inclusively to better serve all users.

The talk concludes with a reminder that accessibility is essential for everyone, not just those with permanent disabilities. It highlights the idea that better accessibility support enriches the user experience for all, referencing Microsoft’s guide on inclusive design as a valuable resource. Jinny acknowledges a mentor who introduced her to accessible technology, underscoring the importance of awareness in tech design.

Overall, Wong’s talk serves as a crucial reminder that web accessibility benefits a broad range of users and is vital in creating an equitable online experience.

Lightning Talk: One Blind Weekend
Jinny Wong • Singapore • Lightning Talk

Date: June 23, 2017
Published: unknown
Announced: unknown

Speaker: Jinny Wong, Engineering Manager, Carousell

This talk is about the time when I was temporarily blind for a weekend, and how suddenly, web accessibility became both a boon and an annoyance to me. In this lightning talk I share about what I went through while "blind", and tips to improve your website's accessibility in order to enable more people to easily access and use your website, regardless of ability.

Speaker's Bio

Jinny is an Engineering Manager at Carousell, and provides strategic and technical guidance to the engineering team. She graduated with a bachelors degree in computer science from Monash university. When she is not serious at work, Jinny owns two cats with her husband. She also enjoys music, photography and running.

Event Page: http://www.reddotrubyconf.com/

Produced by Engineers.SG

Red Dot Ruby Conference 2017

00:00:06.100 hi my name is Ginny I'm an engineering
00:00:09.860 manager at carousel and I have a
00:00:14.360 condition since I was very young called
00:00:16.099 strabismus also known as a screen so
00:00:19.609 what has this got to do it my talk now
00:00:22.640 imagine that for a normal person your
00:00:25.250 eyes look like this mine look like this
00:00:28.869 so my eye my right eye turns inwards
00:00:31.730 towards my nose and as a result of it
00:00:33.980 not being treated when I was young
00:00:35.899 most of the time my vision is kind of
00:00:37.910 effectively this in order to prevent
00:00:41.270 double vision the brain shuts down the
00:00:43.190 visual input from my misalign eye and
00:00:46.210 generally this can lead to lazy eye and
00:00:48.500 loss of vision so this means I have no
00:00:53.719 binocular vision objects tend to appear
00:00:58.219 in a different spot that where they
00:00:59.840 actually are and green 3d glasses are
00:01:04.009 all just waiting me and about a year ago
00:01:09.470 I somehow managed to scratch my left eye
00:01:12.080 and I ended up with corneal abrasion so
00:01:16.670 and it's really extremely painful and it
00:01:20.000 makes your eye sensitive too like a saw
00:01:21.650 so you can't really open it so this and
00:01:23.860 since my right eye is also funky this
00:01:27.259 means that for a whole weekend my vision
00:01:30.259 was effectively this and suddenly I was
00:01:33.200 kind of transported into the world of
00:01:34.520 the uncharted well tangles of green
00:01:39.350 readers because such as voiceover or
00:01:42.829 neck or jaws on windows in my experience
00:01:44.630 I was using voiceover on a Mac and the
00:01:47.090 iPhone because frankly is not because of
00:01:49.040 it I don't know how I would have
00:01:50.180 survived that we can given that I kind
00:01:51.890 of chronically addicted to the internet
00:01:55.360 but the experience could have been
00:01:57.380 better so here are some quick tips on
00:01:59.060 how you can actually adapt your website
00:02:00.560 to play nicely with screen readers and
00:02:02.119 improve the experience for the visually
00:02:04.310 impaired so first of all use semantic
00:02:09.170 HTML for example if the text is not a
00:02:12.650 header don't use header text you
00:02:15.319 studied some other way using CSS instead
00:02:17.920 this is because green readers actually
00:02:20.060 let's when you just skip through header
00:02:21.829 text to quickly skim through an entire
00:02:24.140 page content so using it for unintended
00:02:27.319 purposes can actually mess the scheme
00:02:29.150 either experience a little bit and this
00:02:30.650 goes to sit for all other elements as
00:02:33.140 well
00:02:34.480 the second is consider taking advantage
00:02:37.700 of things like Aria elements such as
00:02:39.409 math and section text as well as adding
00:02:41.329 role attributes to key content sections
00:02:43.310 such as navigation main or such this is
00:02:48.200 because modern screen readers already
00:02:50.439 provide for an easy way for users to
00:02:52.849 skip across sections of content using
00:02:54.680 landmarks and pitch outlines voice-overs
00:02:58.129 roaster for example in conjunction with
00:03:00.439 the trackpad or the touch screen on the
00:03:02.060 iPhone actually allows the user to
00:03:04.250 actually skip through content within a
00:03:07.250 page by rotating your fingers on it so
00:03:12.139 this greatly enhances the experience to
00:03:19.269 give context so for example if you want
00:03:22.970 to display an element but that you don't
00:03:26.930 want the element to display backs
00:03:29.260 visually hide it instead using CSS but
00:03:32.510 make sure that the text exist in your
00:03:34.280 Dom screen readers can't focus on an
00:03:36.470 empty element so it might be skipping
00:03:38.629 over important element that you want to
00:03:40.310 tell your user the same goes with
00:03:44.180 elements without names or labels a
00:03:46.639 screen reader would know what an input
00:03:48.859 field is for unless you also give it an
00:03:50.840 Associated label for example if you have
00:03:53.599 a signup form having a label first name
00:03:56.060 for the input field this will cause the
00:03:59.540 screen reader to properly say first name
00:04:01.639 edit back
00:04:05.620 in this example the screen is always
00:04:08.620 simply say button
00:04:10.390 even if visually you can see this but
00:04:12.670 some in other words submit in state so
00:04:16.269 that the screen reader will say submit
00:04:18.070 button and for this it will simply say
00:04:22.419 link click here here it will say link
00:04:26.980 example comm much better and make sure
00:04:32.710 you also put up descriptions for your
00:04:34.570 image text and you can omit works like
00:04:37.090 image off or picture off because the
00:04:39.100 screen reader already know and they will
00:04:41.080 tell the user for example if you have an
00:04:44.650 alt text that says get caught up in a
00:04:47.139 ball looking suspicious the screen
00:04:50.290 reader will say image cat curled up in a
00:04:54.070 ball looking suspicious and if you want
00:04:59.830 to do things like however my news or you
00:05:03.190 know anything that requires the user to
00:05:05.979 actually visually see something in order
00:05:07.810 to interact with it make sure that the
00:05:10.120 underlying HTML elements and structure
00:05:12.100 of the menu is still accessible via the
00:05:14.169 Dom so that the screen reader can
00:05:15.520 actually focus into it and if you want
00:05:19.570 implement things like infinite scrolling
00:05:21.190 consider this scenario the user wants to
00:05:24.220 scroll to the bottom of the page because
00:05:25.930 they you want to see what's down there
00:05:27.100 or maybe you want to click a link on the
00:05:28.630 footer but the pitch never ends because
00:05:31.539 it keeps infinitely loading more stuff
00:05:34.200 so what you can do is to add a lot more
00:05:36.639 button or just use standard pagination
00:05:39.970 instead and a link should be a link not
00:05:44.919 some random HTML that a click handler
00:05:50.610 finally consider the font and colors
00:05:53.500 that you use in your website make sure
00:05:55.270 that there is sufficient contrast and
00:05:57.250 that the size is legible enough and
00:06:03.210 especially for mobile websites
00:06:05.470 try not to prevent the user from being
00:06:07.120 able to zoom in and out or restrict
00:06:08.830 their users scalable or max scale and
00:06:14.520 remember that even for the fully sighted
00:06:16.900 people there are those amount of who
00:06:19.120 actually colored line so don't depend
00:06:21.699 solely on color to deliver context for
00:06:24.010 example when you are displaying content
00:06:25.449 for stock market try to add shapes to
00:06:28.630 indicate whether is going up or down if
00:06:30.160 they are just real green so these are
00:06:34.720 just some quick tips for adding better
00:06:36.400 accessibility support from your site and
00:06:38.290 you know accessibility isn't just an
00:06:41.169 abstract concept for a small group of
00:06:43.060 people who don't know we don't often
00:06:44.680 think about disability can be temporary
00:06:47.590 or situational as well just like how I
00:06:49.810 was temporarily blind for a weekend or
00:06:51.729 maybe when you're just carrying a bag of
00:06:53.710 groceries home and adding better
00:06:56.979 accessories support helps everyone not
00:06:59.680 just the criminally blind
00:07:01.120 sorry permanently disabled so Microsoft
00:07:04.389 actually has a very good guy on
00:07:06.669 inclusive design so you should actually
00:07:08.650 go check it out I am turning in my
00:07:10.210 resources and I'd like to end by giving
00:07:14.650 a special shout out to a special person
00:07:17.110 mr. yang dong-geun
00:07:18.360 who nearly 10 years ago introduced me to
00:07:22.510 the world of accessible tech and how to
00:07:24.910 use voice over N in doing so unknowingly
00:07:28.930 helped me to survive that line we can
00:07:31.650 thank you thank you very much and just a
00:07:42.880 little bit of a call-out over here so I
00:07:46.150 will share this link on the slides later
00:07:47.830 but specifically to call out the first
00:07:50.229 link which is the story about how a
00:07:52.180 local company here hired a blind
00:07:53.889 developer so you should go check it out
00:07:55.840 thank you
JW
Jinny Wong
2 talks
Explore all talks recorded at Red Dot Ruby Conference 2017
+12