// Not edited for accuracy yet, will be getting to that soon. Please bear with me. Thank you.
1 00:00:00.089 --> 00:00:00.539 Todd Libby: Alright.
2 00:00:07.140 --> 00:00:11.400 Todd Libby: Alright, thank you very much. Hello, everyone, and welcome.
3 00:00:29.220 --> 00:00:30.510 Todd Libby: Hopefully everybody can see that
4 00:00:33.810 --> 00:00:34.560 Todd Libby: I'm Todd Libby.
5 00:00:35.820 --> 00:00:37.350 Todd Libby: And who am I
6 00:00:40.380 --> 00:01:00.870 Todd Libby: Web developer and designer with from South Portland, Maine, with over 21 years in web experience for on both the front and back end as well as design and accessibility. I am a member of the W three see silver community group and visual contrast of text subgroup member
7 00:01:03.270 --> 00:01:05.130 Todd Libby: And I also love lobster rolls.
8 00:01:06.660 --> 00:01:10.290 Todd Libby: As you can see here, and if you follow me on Twitter. You already knew that.
9 00:01:12.720 --> 00:01:14.340 Todd Libby: But that's not why I'm here today.
10 00:01:15.690 --> 00:01:16.530 Todd Libby: I am here.
11 00:01:17.730 --> 00:01:20.730 Todd Libby: To talk about accessible color contrast
12 00:01:27.990 --> 00:01:31.560 Todd Libby: So I'm here to talk about accessible color contrast because
13 00:01:33.780 --> 00:01:37.860 Todd Libby: We have a problem in on the web.
14 00:01:38.880 --> 00:01:39.930 Todd Libby: That I'll get to
15 00:01:40.260 --> 00:01:41.040 Rena Jaffe: In a little bit
16 00:01:42.600 --> 00:01:50.910 Todd Libby: But first, why is it important and what we need to do to fix it. For those of you who know who Bob Ross is
17 00:01:52.650 --> 00:01:53.190 Todd Libby: Awesome.
18 00:01:54.420 --> 00:01:56.640 Todd Libby: For those who don't know who Bob Ross is
19 00:01:59.880 --> 00:02:02.100 Todd Libby: I love this quote I think this quote
20 00:02:03.120 --> 00:02:12.480 Todd Libby: Sums up that we as design designers and developers have unlimited power with this canvas. We call the web.
21 00:02:14.340 --> 00:02:15.510 Todd Libby: And this is Bob Ross.
22 00:02:16.560 --> 00:02:18.900 Todd Libby: Paint our art instructor and TV host
23 00:02:20.280 --> 00:02:22.230 Todd Libby: Who had some of the most stunning paintings
24 00:02:23.700 --> 00:02:29.850 Todd Libby: On a public television show that I've ever seen. And he used you normally between seven and nine colors on his palate.
25 00:02:31.110 --> 00:02:38.730 Todd Libby: Mr. Ross also used to say we don't make mistakes. We just have happy accidents.
26 00:02:42.270 --> 00:02:46.890 Todd Libby: But sometimes on the web. We don't have happy accidents.
27 00:02:51.750 --> 00:02:57.000 Todd Libby: This is not a happy accident. This is an oversight on somebody's part
28 00:02:58.590 --> 00:03:05.220 Todd Libby: So I was filling out a form to be notified of a potential
29 00:03:06.390 --> 00:03:07.350 Todd Libby: Conference.
30 00:03:08.700 --> 00:03:14.460 Todd Libby: Back in January or February before everything hit
31 00:03:15.900 --> 00:03:16.590 Todd Libby: And
32 00:03:18.060 --> 00:03:27.420 Todd Libby: This is blowing up. So maybe you can see it. Maybe you can't I have a hard time seeing I had an even harder time seeing it at 12 to 14 pixels.
33 00:03:29.190 --> 00:03:45.990 Todd Libby: On the screen and I have quote unquote good vision. So I could imagine what somebody say would cataracts would be seeing and thinking of the frustration, they feel when they stumble.
34 00:03:47.190 --> 00:03:49.350 Todd Libby: Upon things across the web, like this.
35 00:03:56.160 --> 00:04:06.540 Todd Libby: So one definition of color contrast according. According to Merriam Webster dictionary is this juxtaposition of dissimilar elements such as color.
36 00:04:07.620 --> 00:04:12.180 Todd Libby: Tone. Whoops. Yeah. Let's try that again.
37 00:04:16.650 --> 00:04:18.660 Todd Libby: Or emotion any work of art.
38 00:04:25.230 --> 00:04:27.930 Todd Libby: So why do I speak about color contrast
39 00:04:29.400 --> 00:04:36.960 Todd Libby: I speak about color contrast, because I have relatives and friends who have visual impairments visual disabilities.
40 00:04:39.900 --> 00:04:44.880 Todd Libby: And seeing their frustration and seeing the looks on their faces when they can't
41 00:04:46.230 --> 00:04:48.930 Todd Libby: Perceive something on the web that I can
42 00:04:50.280 --> 00:04:52.050 Todd Libby: Was the force behind
43 00:04:53.070 --> 00:04:53.610 Todd Libby: This talk
44 00:04:58.980 --> 00:04:59.640 Todd Libby: So,
45 00:05:01.440 --> 00:05:04.080 Todd Libby: I'm going to give a few seconds and
46 00:05:06.090 --> 00:05:14.880 Todd Libby: See if you can guess what the number one common failure insights today regarding accessibility is on the web.
47 00:05:22.770 --> 00:05:25.620 Todd Libby: And if you said, low contrast or low contrast
48 00:05:25.620 --> 00:05:26.160 Dave S (he/him): Text.
49 00:05:26.640 --> 00:05:27.420 You'd be correct.
50 00:05:29.160 --> 00:05:43.080 Todd Libby: So in the recent web a million report of the top million home pages on the on the internet, an astounding 86.3% of homepages had errors in the contrast of text.
51 00:05:49.830 --> 00:05:54.630 Todd Libby: Now this encompassed everything that was wrong with these
52 00:05:57.270 --> 00:06:14.250 Todd Libby: homepages with the report 98.1% of homepages had detectable with tag to failures with keg being Web Content Accessibility Guidelines. This was up from 97.8% in February 2019
53 00:06:18.240 --> 00:06:26.520 Todd Libby: There are only automatically detectable errors that align with wicked conformance failures with a high level of reliability, so
54 00:06:27.630 --> 00:06:33.150 Todd Libby: There could be some false positives some false negatives depends on the testing.
55 00:06:39.000 --> 00:06:45.420 Todd Libby: So you can see the top six issues that were the ones that stood out in this test.
56 00:06:49.530 --> 00:06:55.110 Todd Libby: But for today's talk. I'm focusing solely on low contrast or contrast
57 00:06:56.400 --> 00:06:57.420 Todd Libby: Color contrast
58 00:07:06.840 --> 00:07:12.480 Todd Libby: Who are we feeling well, we are failing as designers and developers in my opinion.
59 00:07:13.830 --> 00:07:15.930 Todd Libby: The people on the other side of the class.
60 00:07:19.500 --> 00:07:24.780 Todd Libby: Companies are losing potential income because websites and applications are not accessible.
61 00:07:25.890 --> 00:07:27.120 Todd Libby: Or fully accessible.
62 00:07:28.170 --> 00:07:36.510 Todd Libby: There are untapped markets due to lack of education and an overall ignorance to the fact there is such a thing called accessibility.
63 00:07:40.740 --> 00:07:54.030 Todd Libby: And according to the World Health Organization globally, at least 2.2 billion people have a vision impairment blindness and, of whom at least a billion have a vision impairment that could have been prevented or has yet to be addressed.
64 00:07:56.820 --> 00:08:13.620 Todd Libby: Of these 1 billion people. This includes those with moderate or severe distance vision impairment or blindness due to the unaddressed refractive error or are as well as near vision impairment caused by unaddressed presbyopia
65 00:08:14.970 --> 00:08:30.870 Todd Libby: Globally, the leading cause of vision impairment or uncorrected refractive errors in cataract and the majority of people with vision impairments are over the age of 50 years. So I have something to look forward to in January.
66 00:08:37.050 --> 00:08:42.270 Todd Libby: I had a talk about accessibility with a stakeholder once
67 00:08:44.490 --> 00:08:50.730 Todd Libby: And when I pitched accessibility to this Vice President, this is what he said to me.
68 00:08:52.080 --> 00:08:55.230 Todd Libby: I know our customer base and we do not have disabled users.
69 00:08:57.090 --> 00:08:57.570 Todd Libby: Well,
70 00:08:59.700 --> 00:09:08.790 Todd Libby: Unfortunately, I had to Tom. That's what you think because you do not know your customer base you because you have the potential future customers as well.
71 00:09:10.290 --> 00:09:11.160 Todd Libby: But if you do not
72 00:09:12.300 --> 00:09:14.850 Todd Libby: Have accessible websites or applications.
73 00:09:17.370 --> 00:09:18.660 Todd Libby: You're going to lose those people
74 00:09:20.940 --> 00:09:32.250 Todd Libby: I won't go into situational disability temporary disability but the fact remains, no one knows their customers because of the potential for something to happen like trauma to the eye. For instance,
75 00:09:37.980 --> 00:09:51.810 Todd Libby: So back to color contrast the definition color contrast. Another definition from dictionary com is the change in appearance of a color surrounded by another color. For example, grey looks bluish if surrounded by yellow
76 00:09:55.110 --> 00:10:00.840 Todd Libby: And I don't know about you, but I could barely make out the placeholders in this form. And this this is blown up.
77 00:10:05.460 --> 00:10:10.200 Todd Libby: I had a really hard time actually trying to read the form itself.
78 00:10:13.350 --> 00:10:21.180 Todd Libby: So imagine if you could a minute for a minute. Someone with a stigmatism would be seeing as you see here, it's all blurry.
79 00:10:28.590 --> 00:10:30.300 Todd Libby: So there are seven types.
80 00:10:36.600 --> 00:10:51.240 Todd Libby: Of colorblindness proto nominally and dude Are normally proto Nokia and dude or novia tried anomaly and tried Nokia in monochromatic color blindness is not complete blindness colorblind is just the fact that
81 00:10:52.440 --> 00:10:56.040 Todd Libby: Those who have monochrome Missy cannot see color.
82 00:10:57.240 --> 00:10:59.520 Todd Libby: And there are other visual impairments as well.
83 00:11:00.810 --> 00:11:07.770 Todd Libby: Hyper metro PA myopia cataracts glaucoma Stargardt's in traumatic I write us
84 00:11:16.020 --> 00:11:26.880 Todd Libby: Traumatic i right this is a Form eight and inflammation of the iris due to trauma. So I had this about over a decade ago, I had trauma to the
85 00:11:29.280 --> 00:11:45.150 Todd Libby: What traumatic Iris is inflammation of the iris that because cynic eel formations between the inflamed my optic iris and interior lens. So, simply put, this was, you know, the lens in the iris in my I were pressed together and inflamed.
86 00:11:45.750 --> 00:11:51.690 Todd Libby: And I had to take steroids drops, twice a day in a pill once a day to treat my case.
87 00:11:55.350 --> 00:12:02.070 Todd Libby: And in this time, I still had to work and traumatic I write us. It was very, very painful.
88 00:12:03.810 --> 00:12:13.200 Todd Libby: So what were the tools that I used. Well, I didn't have all the tools that we have today at my disposal, but I did have tools like color contrast checkers.
89 00:12:17.310 --> 00:12:18.570 Todd Libby: What do I use today though.
90 00:12:22.110 --> 00:12:34.260 Todd Libby: We have a room has a color contrast checker at the address you see below there. It's a fantastic color contrast checker. It takes in
91 00:12:35.340 --> 00:12:43.290 Todd Libby: As you can see HS la RGB a it takes in hex color and it takes in named colors as well.
92 00:12:49.530 --> 00:13:03.930 Todd Libby: Another resource I use for another color Checker is who can use. And as you can see there is share statistics on each visual type, the percentage of people in the population that have
93 00:13:05.790 --> 00:13:07.980 Todd Libby: The visual impairment
94 00:13:10.830 --> 00:13:17.850 Todd Libby: It also gives you the contrast ratio in the wick egg grading in with that little box on the right with the simulation of text.
95 00:13:22.950 --> 00:13:26.580 Todd Libby: And I like to aim for triple A wicked grading.
96 00:13:28.500 --> 00:13:32.670 Todd Libby: Double a is minimal. But I always tell people
97 00:13:33.690 --> 00:13:39.510 Todd Libby: You know, if you can go for AAA. If you can get AAA go for AAA compliance.
98 00:13:42.210 --> 00:13:46.290 Todd Libby: And here are some more tools. They're all color contrast checkers.
99 00:13:48.240 --> 00:13:49.860 Todd Libby: Every person has their own
100 00:13:51.240 --> 00:13:59.070 Todd Libby: Flavor. I guess you could say. So they are those there the wicked contrast checker. The web aim contrast checker a site.
101 00:14:00.210 --> 00:14:05.190 Todd Libby: That I used to use called color contrast and random Li
102 00:14:08.880 --> 00:14:17.280 Todd Libby: What about browser extensions. Well, there are a couple of browser extensions. I use often when I do accessibility testing.
103 00:14:20.430 --> 00:14:21.540 Todd Libby: They use the wave
104 00:14:22.740 --> 00:14:28.710 Todd Libby: browser extension X browser extension and I use Firefox and Chrome Dev Tools.
105 00:14:32.340 --> 00:14:45.210 Todd Libby: The Firefox Vision Simulator. As you can see in the picture on the right. That is a experimental feature and this feature depends on web render and it's not enabled by default on all platforms.
106 00:14:46.500 --> 00:14:55.800 Todd Libby: When you go into the about config page in Firefox to force enable the web render you can set the preference of GFX web render
107 00:14:56.880 --> 00:15:03.120 Todd Libby: Dot all to true just start using that simulator and it's great. I use it often
108 00:15:06.420 --> 00:15:17.220 Todd Libby: Chrome as you can see here the features built in. There's no config required and just all you have to do is toggle the element on the page to enable the modal
109 00:15:26.010 --> 00:15:29.460 Todd Libby: Web Content Accessibility Guidelines or wick egg.
110 00:15:30.960 --> 00:15:39.510 Todd Libby: covers a wide range of recommendations for making web content more accessible. And right now, as of 2018 we are up to 2.1
111 00:15:43.350 --> 00:15:47.220 Todd Libby: So when you go in and you read if you read the specs.
112 00:15:49.140 --> 00:16:07.920 Todd Libby: Success Criteria 1.21 point three is the visual presentation of text and images of texts that has a contrast ratio of 4.5 to one, except for the fall, you have large text incidental text in logo types.
113 00:16:12.120 --> 00:16:17.940 Todd Libby: Large scale text and images of large scale text have a contrast ratio of three to one.
114 00:16:18.990 --> 00:16:36.960 Todd Libby: Text or images of texts that are part of an inactive user interface component that are pure decoration that are not visible to anyone, or that are part of a picture that contains significant other visual content have no contrast and climb.
115 00:16:38.520 --> 00:16:47.730 Todd Libby: And it with logo types texts that as part of a logo or brand name has no minimum record contrast requirement, either.
116 00:16:51.960 --> 00:16:58.590 Todd Libby: And how to meet those success criteria is texts that is less than 18 point
117 00:16:59.820 --> 00:17:05.610 Todd Libby: 24 or 24 pixel, if not bold and less than 14 point and
118 00:17:07.020 --> 00:17:08.430 Todd Libby: And some change pixels.
119 00:17:09.450 --> 00:17:15.570 Todd Libby: Or tech set is at least 18 point, if not bold and at least 14 point if bolt.
120 00:17:19.110 --> 00:17:24.360 Todd Libby: So the up and coming contrast three there's going to be some changes.
121 00:17:25.980 --> 00:17:28.890 Todd Libby: And as we're keg progresses in version two.
122 00:17:30.480 --> 00:17:41.670 Todd Libby: Everything will be backwards compatible. So everything with 2.1 is compatible backwards compatible with two. And when the time comes when
123 00:17:42.930 --> 00:17:48.030 Todd Libby: Comes though. That'll be backwards compatible with both 2.1 and 2.0
124 00:17:49.650 --> 00:17:56.280 Todd Libby: So with that said, new calculations contrast based on more modern research on color perception.
125 00:17:57.810 --> 00:18:00.660 Todd Libby: And you can already see these in Chrome Canary.
126 00:18:03.360 --> 00:18:10.020 Todd Libby: So when you have the modal window over an element. You can see those new scoring changes.
127 00:18:12.090 --> 00:18:27.270 Todd Libby: Merge contrast three will merge the 1.43 double A in 1.4 point six AAA levels into one guideline, there will be a new test of texts contrast and it only includes textual visual contrast
128 00:18:34.140 --> 00:18:34.590 Todd Libby: Now,
129 00:18:36.240 --> 00:18:37.560 Todd Libby: When I had pets.
130 00:18:38.730 --> 00:18:43.710 Todd Libby: I used to talk foolish to them or say something. So in this is the response, I would get
131 00:18:44.730 --> 00:18:48.240 Todd Libby: So you can imagine my surprise when I went in and I saw this
132 00:18:51.000 --> 00:18:53.670 Todd Libby: And if that's a little bright I'm I apologize.
133 00:18:56.340 --> 00:19:00.450 Todd Libby: And that's zoomed in. So imagine seeing this at 12 to 14 pixels.
134 00:19:03.030 --> 00:19:14.730 Todd Libby: Now white text on a yellow background is the web's version of nails being run down a chalkboard. You have that same spine tingling shiver inducing horrific experience.
135 00:19:18.780 --> 00:19:19.980 Todd Libby: This was my reaction.
136 00:19:25.920 --> 00:19:34.620 Todd Libby: Even at this level of magnification. It's hard for me to make out what the message says, and I don't know about you, but imagine if you know
137 00:19:36.840 --> 00:19:46.950 Todd Libby: Traumatic injury to the eye or a stigmatism or cataracts, I would wager, it's going to be very difficult, if not nearly impossible.
138 00:19:47.430 --> 00:19:51.480 Todd Libby: For someone to read this with a visual impairment or disability.
139 00:19:52.110 --> 00:20:03.150 Todd Libby: And we really need to do better than this. We need to start thinking like I said earlier about the people on the other side of the glass, the user, we do what we do for the user.
140 00:20:03.870 --> 00:20:13.110 Todd Libby: We don't build and create things for ourselves in a professional corporate or studio setting we create things for ourselves on a personal setting.
141 00:20:13.620 --> 00:20:28.110 Todd Libby: But we create things in a professional setting because there's a need or desire or a want for things to be made for everyone. So why shut people out doing this is my question.
142 00:20:32.220 --> 00:20:36.180 Todd Libby: So something I wanted to briefly touch on is video captioning.
143 00:20:39.780 --> 00:20:41.580 Todd Libby: And I had to throw a lobster roll in there.
144 00:20:43.500 --> 00:20:49.530 Todd Libby: So down on the bottom. I don't know if you can see the captioning very well that I put in there but
145 00:20:51.420 --> 00:20:58.350 Todd Libby: There's a lot going on in the background. And most of the time I have found we are forgetting people that need to clearly see
146 00:20:59.580 --> 00:21:01.770 Todd Libby: What is being captioned on a video.
147 00:21:03.570 --> 00:21:20.310 Todd Libby: This is Mary Kay Evans, she's at Merrill at Merrill K Evans on Twitter and Merrill says Readability is the most important aspect of captioning in video. No other rules matter if captions cannot be read, which couldn't be further from the truth.
148 00:21:22.680 --> 00:21:25.350 Todd Libby: So now as you see here.
149 00:21:26.730 --> 00:21:28.110 Todd Libby: You can read the captions
150 00:21:36.900 --> 00:21:41.190 Todd Libby: And that's what we see most of the time is those captions with the darker background.
151 00:21:42.270 --> 00:21:43.140 Todd Libby: It's more readable.
152 00:21:45.210 --> 00:21:49.710 Todd Libby: Make sure text stands out from the background and any distractions.
153 00:21:54.270 --> 00:21:55.380 Todd Libby: So what can we do
154 00:21:59.220 --> 00:22:04.920 Todd Libby: We can test with persons with visual impairments. We can hire people with disabilities.
155 00:22:06.240 --> 00:22:11.910 Todd Libby: We can make accessibility inclusive in the design and development process from the very start.
156 00:22:14.160 --> 00:22:22.200 Todd Libby: Designers, we can be sensible with colors and color palettes and designers and developers, we can use the tools.
157 00:22:23.490 --> 00:22:25.230 Todd Libby: There are plenty of tools out there.
158 00:22:30.630 --> 00:22:34.830 Todd Libby: So this is a quote I pulled from Jeffrey Zelman site last year.
159 00:22:36.120 --> 00:22:37.590 Todd Libby: I from Blue beanie day
160 00:22:39.510 --> 00:22:47.580 Todd Libby: Blue beanie day being the day every year on November 30 where web standards are celebrated and Jeffrey said
161 00:22:48.240 --> 00:22:54.990 Todd Libby: Our industry as a whole things less and less about accessibility. Not that we ever had an a game on the subject.
162 00:22:55.470 --> 00:23:07.980 Todd Libby: And talks less and less about progressive enhancement referring to chase the effort mo goalposts have over engineered solutions to non problems and that couldn't be further from the truth.
163 00:23:09.180 --> 00:23:16.980 Todd Libby: And it all starts with looking at the web, a million report and seeing that color that contrast of text.
164 00:23:18.420 --> 00:23:19.140 Todd Libby: Percentage
165 00:23:23.910 --> 00:23:33.000 Todd Libby: So a lengthy report released by the United Nations argued that disconnecting individuals from the internet is a violation of human rights and goes against international law.
166 00:23:34.650 --> 00:23:35.850 Todd Libby: So as you can see here
167 00:23:37.170 --> 00:23:44.580 Todd Libby: And I put the link to that in the slides that I will have that we have a link in the discord channel to
168 00:23:46.050 --> 00:23:53.640 Todd Libby: The special rep tour underscores the unique and transformative nature of the internet, not only to enable individuals to exercise their right.
169 00:23:54.150 --> 00:24:05.760 Todd Libby: To freedom of opinion and expression, but according to the report summary, but also a range of other human rights in to promote the progress as society of society as a whole.
170 00:24:11.730 --> 00:24:16.560 Todd Libby: As a quote I use often. And I usually tweeted out once a day.
171 00:24:17.760 --> 00:24:23.400 Todd Libby: Accessibility is. Right, not a privilege and use. You can see here there's a t shirt for that.
172 00:24:25.950 --> 00:24:32.460 Todd Libby: It reminds me every day and it reminds people I work with that we need to be more inclusive.
173 00:24:33.480 --> 00:24:35.010 Todd Libby: And embrace accessibility.
174 00:24:36.120 --> 00:24:48.150 Todd Libby: Accessibility is something we need as designers and developers to bring into our workflows and project kickoffs from the very start advocate educate push for accessibility.
175 00:24:49.440 --> 00:24:59.190 Todd Libby: When stakeholders are managers push back arm yourselves with the knowledge and and the power to push back a little harder. It can be done. Sometimes
176 00:25:01.380 --> 00:25:12.000 Todd Libby: Fight for the people that do not have a voice. We have the voice and we need to use that voice for the people that don't have the voice. So we need, we need to use our voices more
177 00:25:14.820 --> 00:25:15.210 Todd Libby: Thank you.
178 00:25:22.500 --> 00:25:30.510 Rena Jaffe: Thank you, Todd. So we have time for questions. Are people able to unmute themselves if someone could just give that a shot.
179 00:25:34.620 --> 00:25:35.130 Elizabeth Hall: Yes.
180 00:25:35.970 --> 00:25:36.540 Rena Jaffe: Thank you.
181 00:25:40.920 --> 00:25:44.910 Rena Jaffe: For if you have questions, you can head over to discord and write them there.
182 00:25:47.580 --> 00:25:52.980 Elizabeth Hall: I was just wondering where on Chrome tools, um, whereas the accessibility.
183 00:25:54.120 --> 00:26:00.750 Elizabeth Hall: Tool that you're talking about. If I go into my Chrome tools. Is it under more tools or do or is it something that I have to
184 00:26:03.450 --> 00:26:12.450 Todd Libby: There is, let me actually pull up my instance a Chrome, there is an accessibility tab. I believe in.
185 00:26:13.650 --> 00:26:20.040 Elizabeth Hall: Advanced or we say. And so if I go into dev tools. Let me just look
186 00:26:23.790 --> 00:26:25.110 For this was giving me
187 00:26:27.030 --> 00:26:27.960 Elizabeth Hall: Coding stuff.
188 00:26:31.290 --> 00:26:43.530 Todd Libby: So on the very far left on the top you have you can toggle the device toolbar or you can select an element in the page to inspect it.
189 00:26:44.310 --> 00:26:45.180 Elizabeth Hall: Oh, okay.
190 00:26:47.160 --> 00:26:52.500 Todd Libby: If you click that and choose an element in the page that modal will pop up for you.
191 00:26:52.680 --> 00:26:56.040 Elizabeth Hall: Okay. Okay. Great. Thank you. Yep, thanks.
192 00:27:05.310 --> 00:27:06.960 Todd Libby: There is also a
193 00:27:10.050 --> 00:27:13.410 Todd Libby: Lead when you put when you install the x
194 00:27:15.870 --> 00:27:22.290 Todd Libby: Browser play the browser extension, you get a tab with x that says x on it.
195 00:27:22.950 --> 00:27:25.920 Elizabeth Hall: Okay, and x is a x
196 00:27:27.150 --> 00:27:27.870 Todd Libby: A taxi.
197 00:27:29.250 --> 00:27:31.320 Todd Libby: Yes. From DQ systems. Yep.
198 00:27:31.470 --> 00:27:31.890 Okay.
199 00:27:33.930 --> 00:27:35.220 Elizabeth Hall: Thank you. Yep.
200 00:27:35.730 --> 00:27:37.770 John F Croston III - jfc3: Then the lake house one that's in there two
201 00:27:37.770 --> 00:27:40.890 John F Croston III - jfc3: Mile is built off of x.
202 00:27:42.360 --> 00:27:43.230 Elizabeth Hall: Oh, thank you.
203 00:27:46.680 --> 00:27:57.120 Roxanne g: I was using sigma for my last two projects and I was happy to find that there's a plugin available to check color blindness for eight different types of colorblindness was really helpful.
204 00:27:59.100 --> 00:28:06.990 Todd Libby: Very they've come along with that tool. Very much so. Yeah, I like when I do use it. I use that one. Often, yep.
205 00:28:08.700 --> 00:28:10.170 Reed Gustow: What tool was that I'm sorry.
206 00:28:11.160 --> 00:28:14.340 Roxanne g: In sigma. Um, it's like sketch
207 00:28:15.990 --> 00:28:22.860 Roxanne g: One of the newer one Serena right and it has a plugin. I think it's a community plugin. Someone wrote it. I don't think sigma wrote it.
208 00:28:23.760 --> 00:28:32.970 Roxanne g: And it tests eight different types of color blindness and you can just pick one of your frames and run it through and it shows you exactly what it would look like to those people
209 00:28:34.020 --> 00:28:34.770 Roxanne g: It's pretty cool.
210 00:28:36.090 --> 00:28:38.910 Husna Ansari: Um, where can we get the plugin.
211 00:28:40.020 --> 00:28:42.420 Roxanne g: I'll put a link in the chat. Thank
212 00:28:43.320 --> 00:28:46.110 John F Croston III - jfc3: Put it in discord so that doesn't disappear instead
213 00:28:46.380 --> 00:28:47.910 Roxanne g: Yeah, I will do that. Sure.
214 00:28:48.930 --> 00:28:50.940 Rena Jaffe: I can also copy and paste it there too.
215 00:28:52.950 --> 00:28:55.260 John F Croston III - jfc3: So there's color Oracle
216 00:28:56.610 --> 00:28:58.530 John F Croston III - jfc3: For color deficiency color blindness.
217 00:28:59.970 --> 00:29:05.400 John F Croston III - jfc3: And they it. Same idea, you can do it, it goes over your main screen and puts like a color.
218 00:29:07.440 --> 00:29:15.420 John F Croston III - jfc3: Blindness mask over the screen so you get an idea that your red and green shirt items next to each other and could you tell the part
219 00:29:21.840 --> 00:29:34.680 Kira: I'm curious if you could share like what strategies have been successful for you and your experience getting people to care about this kind of stuff. Because like I'm, I'm a web developer and
220 00:29:35.760 --> 00:29:40.920 Kira: I'm lucky the company, the team. I work for we mostly do work with the, the UK Government, so we sort of have to
221 00:29:41.370 --> 00:29:48.840 Kira: abide by all these government accessibility standards, but I find Yeah, for the most part this entire industry is just like
222 00:29:49.290 --> 00:29:59.970 Kira: totally unconcerned with users period like not even like visual accessibility stuff like pages are slow and Genki and buggy and like user data is not
223 00:30:00.420 --> 00:30:09.030 Kira: handled carefully or respected at all. And it's like a total mess and it's like an endless uphill battle to just be like, you should care about that.
224 00:30:09.570 --> 00:30:19.320 Kira: And like I don't know how else to say it in a way that that gets through to people. So I'm always curious to hear other people. If you've made any headway in that like changing hearts and minds kind of
225 00:30:20.340 --> 00:30:20.790 Kira: Where it
226 00:30:20.850 --> 00:30:21.990 Todd Libby: Is yeah
227 00:30:23.430 --> 00:30:27.420 Todd Libby: It is, I understand you totally
228 00:30:28.560 --> 00:30:30.660 Todd Libby: It is a never ending battle.
229 00:30:31.230 --> 00:30:32.760 Todd Libby: It is a daily battle.
230 00:30:37.350 --> 00:30:41.790 Todd Libby: What people used to do. I found was the shame game.
231 00:30:43.200 --> 00:30:49.890 Todd Libby: And that doesn't work anymore because if you think back to when you're a teenager. And if you know
232 00:30:51.000 --> 00:30:55.020 Todd Libby: Anything like me. I didn't want to listen to my parents when they told me to do something.
233 00:30:56.160 --> 00:31:05.970 Todd Libby: So why should see, you know, why should I listen to somebody else told me to do something. So what I do now and what I've done for a long time now is
234 00:31:06.570 --> 00:31:22.320 Todd Libby: I try to sit down or I, you know, strike up a conversation online with somebody and I tried to take it the diplomatic route and try to have a civil conversation with them and say, okay, you
235 00:31:23.730 --> 00:31:24.900 Todd Libby: For instance,
236 00:31:27.000 --> 00:31:28.410 Todd Libby: You don't know that.
237 00:31:30.060 --> 00:31:33.330 Todd Libby: Some people use the keyboard for navigation, for instance.
238 00:31:34.800 --> 00:31:40.980 Todd Libby: Tried to educate them and tell them you know there are other methods to use than just
239 00:31:42.630 --> 00:31:50.850 Todd Libby: You know, a mouse or a trackpad, for instance, some people use a sip and puff. Some people use, you know,
240 00:31:51.810 --> 00:32:16.470 Todd Libby: voice recognition software. So I try to strike up a conversation. If I you know if anybody has a question for me or, you know, if I run across the people that I, you know, had that one slide there where the VP said while we don't have any you know disabled users. And I said, well,
241 00:32:17.100 --> 00:32:29.490 Kira: Most common thing when I say like, Oh, you know, we shouldn't ship like 100 megabytes of JavaScript to those people because they're like, oh, none of our users have slow internet. It's like they might you don't know that.
242 00:32:30.180 --> 00:32:41.040 Todd Libby: Yeah, and and disability an accessibility is not just physical. It's also for that person that still has a 2G, 3G phone friends.
243 00:32:42.480 --> 00:32:47.580 Todd Libby: Or you know they they have, they may they may still have a dial up connection.
244 00:32:48.990 --> 00:32:57.810 Todd Libby: And people are kind of I'd found blind to that. So, you know, I just
245 00:32:59.430 --> 00:33:10.440 Todd Libby: With the with the VP. I'll use this for an experience he had he had glasses on. And I said, well, your glasses are an assistive technology and that kind of
246 00:33:13.350 --> 00:33:19.950 Todd Libby: So I was able to carry that conversation forward and eventually they they said to me.
247 00:33:21.750 --> 00:33:26.910 Todd Libby: All right, do what you need to do and that that were that was
248 00:33:28.200 --> 00:33:43.920 Todd Libby: A day or two of advocating for accessibility. The best piece of advice I got from someone in the in the accessibility space was, as I mentioned earlier in my talk when they push back, push back a little harder.
249 00:33:45.060 --> 00:33:45.570 Like that.
250 00:33:47.130 --> 00:33:47.460 Dave S (he/him): Um,
251 00:33:49.080 --> 00:33:55.440 Dave S (he/him): One thing I think is a really interesting point around this is that often accessibility often
252 00:33:56.490 --> 00:34:12.450 Dave S (he/him): intersects with good design or also helps people that you don't even expect like the point of like captioning videos that also do sometimes people have their audio off and want to look at captions are like
253 00:34:15.300 --> 00:34:19.950 Dave S (he/him): That color contrast text that it's not really great for me was
254 00:34:21.000 --> 00:34:21.810 Dave S (he/him): Harder to see
255 00:34:23.790 --> 00:34:33.990 Dave S (he/him): Or like in the physical world. Like, I know I've seen the point of this a curb cuts with wheelchair use that also helps the strollers.
256 00:34:35.010 --> 00:34:38.760 Dave S (he/him): And then like it just seems to be extremely prominent that
257 00:34:39.900 --> 00:34:40.530 Dave S (he/him): All kinds of
258 00:34:41.550 --> 00:34:45.180 Dave S (he/him): These different things like that. Also help
259 00:34:46.470 --> 00:34:47.730 Dave S (he/him): More people than you realize.
260 00:34:49.980 --> 00:34:54.120 John F Croston III - jfc3: A web he has an article hierarchy of motivating accessibility change.
261 00:34:54.990 --> 00:34:56.880 John F Croston III - jfc3: That the chat and to
262 00:34:57.780 --> 00:35:09.660 John F Croston III - jfc3: Discord. You know, as well as besides the accessibility person telling you. So, and then there's another great article by Anna Gibson from the paint on the pastry box about alphabet of accessibility issues.
263 00:35:10.170 --> 00:35:15.090 John F Croston III - jfc3: So it gets you into more than just, you know, people are blind or visually impaired and bunch of other groups.
264 00:35:17.010 --> 00:35:21.210 John F Croston III - jfc3: But sometimes I go in and just, you know, if the color contrast off by a little
265 00:35:21.810 --> 00:35:26.640 John F Croston III - jfc3: couldn't change the CSS and talk to never looked at it. We've done it.
266 00:35:28.260 --> 00:35:40.500 John F Croston III - jfc3: With designs, where we had a designer designer. It was like, Oh, we got GRAY GRAY, like, no, it's not going to work. Well, I don't want to have to redo the whole comp. This is back years ago. Like, we're just going to change it in the CSS.
267 00:35:42.420 --> 00:35:42.690 Yeah.
268 00:35:44.190 --> 00:35:47.370 Reed Gustow: Could you, you know, there could be some instances where you could
269 00:35:48.000 --> 00:36:01.380 Reed Gustow: They wanted to do a certain way that has the, you know, light gray on dark rain is absolutely invisible say well you know we can do that. It's going to cost you 35% more for us to do that. Now, if you want to do it the right way. You can save a whole lot of money.
270 00:36:03.120 --> 00:36:09.270 Reed Gustow: Will give you a compliance site for, you know, a million dollars, but you're on compliance is going to be 2 million sorry that just
271 00:36:11.310 --> 00:36:14.340 Reed Gustow: Obviously, that's not going to work in every instance, but
272 00:36:14.700 --> 00:36:15.000 Right.
273 00:36:16.380 --> 00:36:25.800 Todd Libby: There is there also with accessibility tools automated tools, I should say, there can be false positives.
274 00:36:26.370 --> 00:36:35.340 Todd Libby: There can be false negatives. I will throw the example out that I had a project I was working on for a company who had a kind of a
275 00:36:36.240 --> 00:36:48.900 Todd Libby: On the darker side of navy blue background and they wanted their texts on their website. Their navigation to be a bright orange reddish and from first sight.
276 00:36:49.860 --> 00:37:01.950 Todd Libby: I was like, Okay, well, that will work because you didn't know it seems like it's going to be passable. And when I ran it through three different colored checkers. It was coming back as a fail.
277 00:37:03.030 --> 00:37:09.480 Todd Libby: So I had to manipulate it to where it was on the
278 00:37:10.650 --> 00:37:17.040 Todd Libby: Orange yellowish side of color and fortunately for me.
279 00:37:18.810 --> 00:37:21.720 Todd Libby: It wasn't too far off.
280 00:37:23.580 --> 00:37:24.570 Todd Libby: That I could say
281 00:37:26.070 --> 00:37:28.590 Todd Libby: What you have for your color is a little off.
282 00:37:29.730 --> 00:37:38.520 Todd Libby: Is there some way that we can go towards this color and they were able to work it out, where there was a little bit of a rebranding then
283 00:37:39.930 --> 00:37:41.670 Todd Libby: So tools.
284 00:37:43.050 --> 00:38:02.460 Todd Libby: Especially the automated ones, they don't necessarily tell you the right thing and that led me to add late last night as matter of fact scoring will change because right now the scoring is it's not ideal.
285 00:38:04.260 --> 00:38:12.150 Todd Libby: For for contrast and color contrast really isn't about color. It's how our brains interpret
286 00:38:13.800 --> 00:38:28.590 Todd Libby: Things. So there's a lot of work going into it. It's a lot of great work. The system. The, the new scoring system and it won't be or it's 2.1 now you can see it in Chrome Canary.
287 00:38:34.470 --> 00:38:36.870 Todd Libby: It will be much, much better.
288 00:38:40.230 --> 00:38:42.120 Todd Libby: Thank you. Appreciate it.
289 00:38:45.150 --> 00:38:53.370 Todd Libby: So text right now 4.5 to one ratio or yeah 4.5 to one ratio. It should be
290 00:38:54.990 --> 00:38:56.340 Todd Libby: Ideally 10 to one.
291 00:38:59.550 --> 00:39:03.720 Todd Libby: So the scoring system is going to change and it will be for the better.
292 00:39:05.760 --> 00:39:06.630 Todd Libby: Because as far as
293 00:39:08.130 --> 00:39:08.550 John F Croston III - jfc3: Go ahead.
294 00:39:09.330 --> 00:39:09.600 I'm
295 00:39:11.700 --> 00:39:18.000 Husna Ansari: Sorry, I wanted to add in this is earlier conversation to think that Kira Kira
296 00:39:18.330 --> 00:39:30.000 Husna Ansari: Yeah, something like here, I asked about like how to get people to actually keep people your organization to actually care about accessibility. Again, I have a question like, how much do you think language.
297 00:39:31.020 --> 00:39:37.920 Husna Ansari: impacts how they react, because when we say the words accessibility, will we say the words disability.
298 00:39:38.910 --> 00:39:45.030 Husna Ansari: Do they immediately just stop listening. Um, do they associate like to they have associations with those words.
299 00:39:45.720 --> 00:40:05.490 Husna Ansari: If you're really trying to get like them to take action on something would like reframing the language that you use help kind of like what day was saying was, like, a lot of these features actually help more than just like people who have accessibility needs. It's like can help anyone.
300 00:40:07.260 --> 00:40:16.860 Husna Ansari: And if you like framed it like this will help you to reach more users or this can help you and other ways. What do you guys think
301 00:40:19.710 --> 00:40:27.030 Todd Libby: It can help. I guess it goes for me, it's been, it all depends on speaking with
302 00:40:28.770 --> 00:40:31.020 Todd Libby: If they're open minded.
303 00:40:32.100 --> 00:40:47.820 Todd Libby: I've met people that are really close minded about it. All they care about is a bottom line. So in though when I come across those people that are, you know, they're all about the bottom line or the dollar. I tell them you could possibly lose a percentage of
304 00:40:49.980 --> 00:40:56.190 Todd Libby: potential customers that and in by doing that, you're losing money. And that's when their ears perk up
305 00:40:59.970 --> 00:41:07.230 Husna Ansari: So shifting what you know they are interested in what they care about and trying to find where does accessibility.
306 00:41:08.730 --> 00:41:13.950 Husna Ansari: Full into that because it does whatever it is that they care about accessibility will connect to it.
307 00:41:14.610 --> 00:41:32.070 Todd Libby: Yes, exactly, open minded people will be more receptive, of course, to okay I'm I'm listening. You know, and you, you tell them you know there are people that did not like I have a hidden disability I get migraine headaches.
308 00:41:33.840 --> 00:41:39.270 Todd Libby: And I use that as a classic example. Whenever I talk to somebody who's more open minded.
309 00:41:41.010 --> 00:41:45.960 Todd Libby: I tell them I can't use a computer. If I'm in the middle of a
310 00:41:46.500 --> 00:41:49.290 Todd Libby: You know, raging migraine. Yeah.
311 00:41:50.640 --> 00:42:05.610 Todd Libby: Like sites that have animation will make me feel nauseous and then I'm left with vertigo like symptoms, that's usually when they kind of okay there's they're starting to get invested in it. So I tried to relay my personal experience.
312 00:42:06.690 --> 00:42:08.130 Todd Libby: If I
313 00:42:09.960 --> 00:42:12.270 Todd Libby: If I didn't have
314 00:42:13.320 --> 00:42:20.700 Todd Libby: lave lived experience. I would probably go to the example of my relatives that do have disabilities.
315 00:42:25.890 --> 00:42:39.540 Todd Libby: But yeah, it's in the way that you frame it to to the certain people, you know, and usually even with the ones that are pretty narrow minded. I will say, I won't say close minded.
316 00:42:42.090 --> 00:42:47.220 Todd Libby: Nine times out of 10 I'll get a more positive response.
317 00:42:48.330 --> 00:42:48.990 Todd Libby: To
318 00:42:50.370 --> 00:43:03.150 Todd Libby: You know, bringing in accessibility and like I said, when you see somebody you're talking to somebody that cares about dollars and you mentioned possible lost income, you'll get their attention fast.
319 00:43:05.640 --> 00:43:19.710 John F Croston III - jfc3: Right, because you want them to be able to read or do whatever is on your site that needs to make money. Now, and sometimes too close minded ones are tend to be those that are getting the only reason they're doing this is because they're getting sued over it, you're like,
320 00:43:21.390 --> 00:43:22.800 John F Croston III - jfc3: There's probably a problem.
321 00:43:23.310 --> 00:43:26.010 Todd Libby: That's the thing too, if you get really
322 00:43:27.240 --> 00:43:41.730 Todd Libby: stubborn people like I've gotten before I mentioned Domino's Pizza lawsuit and they turn their, you know, completely around 180 and they're like, oh, okay, well, you know, we don't want to get sued.
323 00:43:42.630 --> 00:43:51.570 Todd Libby: And, you know, you're talking about a firm coming in and you're spending, maybe seven figures or more for a firm to come in and do an accessibility audit.
324 00:43:53.070 --> 00:43:54.870 Rena Jaffe: Guys, I have to jump in because it is
325 00:43:56.310 --> 00:43:58.380 Rena Jaffe: This talk was awesome. Todd you rock.
326 00:43:59.160 --> 00:43:59.580 Todd Libby: Thank you.
327 00:43:59.940 --> 00:44:06.000 Rena Jaffe: Continue and chat with Todd do you there's a hallway. We could meet there and talk more
328 00:44:07.560 --> 00:44:10.770 Rena Jaffe: So I look forward to seeing you guys in other rooms.
329 00:44:11.430 --> 00:44:13.650 Todd Libby: Yeah, I'll be more than happy to hang out in the hallway.
330 00:44:17.490 --> 00:44:19.170 John F Croston III - jfc3: Split in the hallways, different from
331 00:44:21.390 --> 00:44:22.290 Todd Libby: Thank you, everybody.