WEBVTT 00:00.000 --> 00:13.440 Thank you so much for being with us and being interested in open-source design and without further 00:13.440 --> 00:15.880 a different look at seeing. 00:15.880 --> 00:16.880 Thank you. 00:16.880 --> 00:24.240 So, I'll have you for 20 minutes to talk about improving web accessibility with respect 00:24.240 --> 00:29.480 to background compatibility, there's a lot of words but it's not that difficult. 00:29.480 --> 00:34.200 So, yeah, let's get this. 00:34.200 --> 00:41.400 For context, I worked for two years to improve the web accessibility of the X-Wiki tool. 00:41.400 --> 00:50.120 X-Wiki is a free and open source software which was first released in 2004 when accessibility 00:50.120 --> 00:58.160 really wasn't in the mind of everyone, so there were some things left in some places and 00:58.160 --> 01:06.800 I needed to update it and I was responsible to update those places. 01:06.800 --> 01:10.520 Yeah, so this is X-Wiki just to give you a quick look. 01:10.520 --> 01:20.400 There's a lot of things in the UI and most of X-Wiki we have a tool, X-Wiki standard and 01:20.400 --> 01:26.480 you can put extension on it and you can put your own customization, you can script a lot 01:26.480 --> 01:37.160 of things on it and all of our users, they all have customizations and everything on very 01:37.160 --> 01:38.160 instances. 01:38.160 --> 01:45.280 So, we really need to take care when we update anything to be background compatible because 01:45.280 --> 01:53.080 we don't want our users to have trouble migrating to new virtual versions at least 01:53.080 --> 01:56.760 possible trouble with it. 01:56.760 --> 02:09.680 So, yeah, that's the context and there I was tasked with trying to improve it to give 02:09.680 --> 02:13.240 a keyboard alternative for table dragging actions. 02:13.240 --> 02:19.920 So, as you can see here, we have a component which is kind of data table and everything 02:19.920 --> 02:29.280 go code on, we have you can click the label to filter by this label then you can resize 02:29.280 --> 02:35.240 the columns and you can hear other of them and two years ago you couldn't do this with 02:35.240 --> 02:41.400 a keyboard which isn't really quite for accessibility and even usability. 02:41.400 --> 02:48.200 So, yeah, this was the state of things and this is my first prototype. 02:48.280 --> 03:00.640 I proposed it and actually we merged it and for a day later one of my friends it just 03:00.640 --> 03:07.880 it sent me a message, okay, look up, we need to see something, there's an issue with your 03:07.880 --> 03:08.880 merge. 03:08.880 --> 03:15.160 I have also an issue with your change of the user interface here because on your example, 03:15.240 --> 03:21.880 it's fine, there's space, everything is nice, you can add buttons to, you can add 03:21.880 --> 03:32.200 handles to resize and reorder your columns, but actually on some use cases, on a lot 03:32.200 --> 03:41.440 of very fact, you have like 20 columns and what was fitting really tightly onto one page 03:41.440 --> 03:48.080 before, it overflowed a lot by a lot, so you need it to scroll to access the latest columns 03:48.080 --> 03:58.680 and that's not good, so we needed to discuss again and we arrived to this final version, 03:58.680 --> 04:09.800 we don't have nice looking 24x24 accessible buttons for handles for resizing and reorder 04:09.840 --> 04:17.880 the columns because we had to make compromises, if a space was not really easy to find, 04:17.880 --> 04:28.120 so I just added a small indicator when we have the ring, this one is responsible of resizing 04:28.120 --> 04:38.840 and you can plug in the drop the title to reorder and of course I added all the necessary 04:38.920 --> 04:46.280 listeners to make it with a keyboard and all the RRA descriptions so that users actually 04:46.280 --> 04:54.680 are having on this very specific component could know how to interact with it and how to use 04:54.680 --> 05:03.080 it because it's not a standard opposite to this, this one didn't need many explanations because 05:03.160 --> 05:15.320 it's just buttons with a label and it's fine let's talk so yeah this was this became quite 05:15.320 --> 05:22.520 more difficult and needed a lot more discussions and compromises because we had already users 05:22.520 --> 05:29.720 and a lot of people already using this and getting back on the initial design and the initial 05:29.800 --> 05:41.320 space taken by each column, it was really difficult so the second thing I want to show to you 05:43.320 --> 05:51.640 I want to show to you is making links visually distinct, two years ago we had one mode, 05:51.720 --> 06:00.200 the default which is every link they are not in no link is in their line and the over mode 06:00.200 --> 06:06.520 if you go into a neat little section in your user profile you can activate link and 06:06.520 --> 06:14.600 their lining I had an issue with it it's because when you go to your user profile your first 06:14.600 --> 06:23.720 experience with it's not accessible so it wasn't accessible by default and we couldn't even 06:23.720 --> 06:30.360 assume people knew about this setting because it wasn't really well shown so we needed to do something 06:30.360 --> 06:38.840 about it because users here they would have trouble like with the contrast between the link 06:38.920 --> 06:47.000 and the text is very low so it would be difficult for some users to figure out what is a link 06:47.000 --> 06:54.920 and what is a text like there's two links here that if I just give you a gray image you can barely 06:54.920 --> 07:05.880 see it so yeah there's two solutions for this the first one this is one you just pick a color for 07:05.960 --> 07:13.560 your links where all the contrast requirement between your colors are respected so you need 07:13.560 --> 07:22.520 the four point like for accessible content respecting the value cag 2.2 you need the contrast 07:22.520 --> 07:32.120 of 4.5 between your text and background for you need same for the link color and in a 07:32.120 --> 07:47.000 different you need a contrast of three between the text and the link color yeah sorry yeah that's why 07:47.000 --> 07:53.160 like your contrast is bad and five week it wasn't a solution a possible solution because there were 07:53.160 --> 08:01.640 too many colors everywhere and there were no blue that would fit this thing so we needed 08:01.800 --> 08:09.640 to do underlining this was the only solution to make the links actually distinguishable from 08:09.640 --> 08:20.920 surrounding text but underlining everything is pretty ugly even so like in there's a navigation 08:20.920 --> 08:27.400 element here we have a bunch of links into it and underlining everything I got feedback from the 08:27.400 --> 08:35.560 community they told me it's it makes things so much heavier like it doesn't look good at all 08:35.560 --> 08:45.240 we don't we cannot do this so actually we decided to compromise and try to find the solution 08:45.240 --> 08:53.320 but we fit the best for everyone and to underline only in line links so those links which have 08:53.800 --> 09:00.920 an orange square horned fan they are easy to it's easy to understand they are links 09:00.920 --> 09:07.400 because of their context like you can see around them okay if there's a little dots and it's an 09:07.400 --> 09:13.480 navigation I can probably click on it and it's fine but those links if they are not in their line 09:13.480 --> 09:23.560 those in a little green square it's it's difficult to to figure out if they are actual links 09:23.560 --> 09:35.720 or not possible yeah so that's about it and yeah the backward compatibility aspect is that users 09:35.720 --> 09:47.400 were used like we were used to the loops of this UI which was really light I guess compared to 09:47.400 --> 09:55.640 a full-end online UI and we couldn't just go with a simple solution of underlining everything 09:56.040 --> 10:08.200 we needed to to find the compromise yeah okay the third point I want to talk about it's 10:08.200 --> 10:15.320 thing everyone saw at some point everyone handled the designers or developers it's a login form 10:16.280 --> 10:27.720 in exchange or login form add an issue with tab order when you click on your tab key on your keyboard 10:27.720 --> 10:36.040 on the web page you go through the interactive elements and this was with tab order so one two 10:36.040 --> 10:43.880 you go down down and then you go back up and then down for accessibility you don't want this you want 10:43.880 --> 10:53.800 to line up your content like your visual content with your tab order which in most cases you need to 10:53.800 --> 11:01.320 also line up things up with the other dumb is document object model so it's the way of information 11:02.120 --> 11:14.760 that's contained in the page is stored I guess yeah so this is why I just showed you the path 11:14.760 --> 11:21.160 of the user cursor goes down the form and then back up so we couldn't go with this 11:22.440 --> 11:27.960 the second issue with this was that it was upgraded to be at the start of the page 11:28.840 --> 11:35.800 but when you left the last field of the form it was sent you back to the logo and the top left 11:36.680 --> 11:41.560 so we needed to remove this so this is my first prototype 11:43.160 --> 11:49.160 there I don't want to make UI changes because it needs to be discussed and everything and I'm not 11:49.160 --> 11:57.160 the designer so I cannot propose much so I just said okay let's change the tab order to start here 11:57.160 --> 12:04.280 and then go down there and just go down to form and everything's fine also focus the first 12:04.280 --> 12:16.120 when we arrive and everything's good but we know this and the day later one of my friends contacted me 12:16.120 --> 12:21.480 and it told me okay yeah what you actually did we can't go with this 12:22.360 --> 12:35.240 because it was a user or a fixity and like any developer and when you wanted to log in 12:35.240 --> 12:41.720 it had this is how it's like it was used to just filling his name tapping once filling his first 12:41.720 --> 12:51.400 world tapping twice and then plugging in but I missed this a lot so yeah we're to discuss 12:51.720 --> 12:59.400 change in UI it's not much but we had to discuss it and let me know everyone about it 13:00.040 --> 13:05.880 and we ended up on a design which was kind of similar to this it's not the final one 13:08.440 --> 13:19.240 yeah so that's about it I think it was short one final world 13:19.800 --> 13:26.680 thank you for your attention and what this tells us I want you to remember this lesson 13:27.400 --> 13:34.040 shift level for accessibility if you want your design to stay on a long-term like on a product for 13:35.320 --> 13:45.560 a tool for a long time try to integrate it in your design and to integrate accessibility 13:45.560 --> 13:51.640 and to your designs so that later on you won't have to struggle with the craft compatibility 13:53.640 --> 13:55.640 yeah thank you 14:16.200 --> 14:23.640 okay but what you need to be challenging what's going to be tackled 14:29.640 --> 14:34.920 I think most yeah so what have the big issues left in it's which is right now 14:35.960 --> 14:44.120 I think most of the big issues are tackled most of you we have a ticket system you can 14:44.200 --> 14:51.800 that's completely open you can check there's a double UCHG label if you want to and I think 14:51.800 --> 15:00.520 you can get a filter page from accessibility statement so yeah there's all the info you can 15:00.520 --> 15:07.160 want on fair but yeah the big items are dealt with like things you see every day 15:08.200 --> 15:10.200 like this it's dealt with 15:14.760 --> 15:41.960 so this one's yeah what's the other designer working on this issues okay this one's I 15:42.120 --> 15:49.160 handled them pretty much along like most of the time I didn't expect them to end up in 15:50.760 --> 15:56.520 large changes like you know here it's not a change to a visually UI and it's just a change 15:56.520 --> 16:04.840 in the background of how things work and I didn't like I didn't communicate with a designer 16:04.840 --> 16:11.960 for this but yeah when when I get here by his point I get the feedback of a designer on the 16:11.960 --> 16:24.040 forum description and yeah and most of the time when I see I like yeah when I see I have some UI 16:24.040 --> 16:30.200 changes to make I check with the second year too okay what do you think of this if it's 16:30.280 --> 16:36.920 complicated can you can you help me find something and if I have an idea of what I want to do 16:36.920 --> 16:55.800 can you can you check that my solution is not bad I don't like that and so it's 16:55.800 --> 17:01.720 what's the problem and so it's you think what what you see what you explain I have the idea 17:01.720 --> 17:09.560 the idea is very simple so you know you have the money or clean up this you type out you have 17:09.560 --> 17:17.960 the withdrawn article of the money and you type or you have the top of you have a cross or like this 17:17.960 --> 17:23.560 something like that and you advance you can have the sound and then you you stop for a 17:23.560 --> 17:31.160 metaphor of some money and so I'm sorry but probably sound also for people and people 17:31.160 --> 17:38.600 that play and so and so for me it's with this idea of this kind of model but I don't know why it's 17:39.560 --> 17:50.360 yeah so for liberal physics I'm not sure how what is it sorry um the the model of tab tab in indexing 17:50.360 --> 18:00.520 for the interface is nice but I will provide just some more elements to guide you my other 18:01.400 --> 18:08.680 so for liberal physics I'm not sure about what is behind it but for web web content and 18:09.960 --> 18:17.480 everything web there's a guideline double usage and it's explicit here written into it that you 18:17.480 --> 18:30.440 need to make your web page usable only with with a keyboard with so that's one of the reasons 18:30.440 --> 18:36.440 why it's so easy to make it for our web because we have a lot of tools and 18:51.000 --> 18:55.000 yeah accessibility is useful for everyone 19:00.440 --> 19:28.120 I mean yeah not much like to be honest most of the time the community is understanding and we try to 19:28.200 --> 19:35.080 to make things work somehow to find the solution that will find us work for everyone 19:35.080 --> 19:42.200 I remember I really wanted those buttons to stay there but because it's 19:43.000 --> 19:50.920 more accessible to have buttons that are always visible and part of and things appearing out of 19:50.920 --> 19:57.800 nowhere and disappearing when you move your mouse and yeah I had to compromise for example here 19:57.800 --> 20:05.880 but yeah this was telling improvements compared to what was before where there was no 20:05.880 --> 20:11.560 no keyboard interaction and nowhere if I need to hear about this so we know that we cannot 20:11.560 --> 20:18.600 really make change this in any way to make it more accessible so 20:18.600 --> 20:26.280 when we go over or when we arrive there's the mouse on that line 20:26.280 --> 20:28.920 it's this one 20:28.920 --> 20:33.560 no there's this in the compromise in the final one 20:33.560 --> 20:34.920 oh okay this one 20:34.920 --> 20:38.600 yeah so because I think that's one in the beginning 20:38.600 --> 20:42.920 what you explain is you show that another community 20:43.800 --> 20:51.400 oh so actually this one it's just a table you can it's it's a big 20:51.400 --> 20:56.200 you can scroll vertically yeah but it's not supposed to scroll horizontally 20:56.200 --> 21:04.520 but because of this it made everything like the minimum length of columns was increased 21:04.520 --> 21:10.440 significantly and in some in some places it made it so that we had 21:11.240 --> 21:19.480 I'll finish on those calling so 21:24.920 --> 21:30.760 so 21:30.760 --> 21:32.760 so 21:32.760 --> 21:35.080 you've talked about elements layout 21:35.080 --> 21:38.200 conditions of these enabling 21:38.200 --> 21:42.400 did you have any significant color changes? 21:42.400 --> 21:47.280 Did I implement any significant color changes? 21:47.280 --> 21:53.560 No, because we don't want to change, yes, but no. 21:53.560 --> 21:56.320 We don't want to change too much of the user experience 21:56.320 --> 21:58.000 from the one version to another. 21:58.000 --> 22:02.240 And we are like, OK, we have a standard color film. 22:02.240 --> 22:06.440 It's not completely double the UCAG compliance. 22:06.440 --> 22:09.520 It was quite good still, but in some places, 22:09.520 --> 22:11.480 we needed a few tweaks. 22:11.480 --> 22:17.720 So I looked for the colors with like minimum compliance, 22:17.720 --> 22:22.880 just to make it a minimum changes, but still compliant. 22:22.880 --> 22:27.680 And so our main color film, like the first one, 22:27.680 --> 22:30.320 you have when you install it with you, 22:30.320 --> 22:33.920 it's double UCAG compliant today. 22:33.920 --> 22:43.920 And we tested it automatically, it was a joke in the community 22:43.920 --> 22:45.080 about the changes. 22:45.080 --> 22:47.840 Can you see the difference between the two pictures? 22:47.840 --> 22:50.680 One was the one with old colors. 22:50.680 --> 22:53.480 And one was the one with the new colors. 22:53.480 --> 22:56.480 And actually, it didn't look that much different. 22:56.480 --> 22:58.240 It was just very small tweaks. 23:04.000 --> 23:07.720 The four of the experience and the extension, 23:07.720 --> 23:08.720 that you provided. 23:08.720 --> 23:11.040 Yeah, that's a little bit extension. 23:11.040 --> 23:17.200 Also, are the extension provided by each week and so accessible? 23:17.200 --> 23:19.400 Did you work on the extension as well? 23:19.400 --> 23:24.160 So provide documentation for the dead external developers 23:24.160 --> 23:31.560 who want to create their own extension for the needs. 23:32.520 --> 23:34.920 If it's just to create an extension, 23:34.920 --> 23:37.160 because those are community extensions, 23:37.160 --> 23:39.920 so there's a lot. 23:39.920 --> 23:42.600 I didn't work on all of them. 23:42.600 --> 23:46.320 Like some of them are baked in each week's standard. 23:46.320 --> 23:50.520 Some of them are IRP-Hoverty and fairly used Mouthem. 23:50.520 --> 23:53.040 So we care a bit more about them, 23:53.040 --> 23:55.320 but we didn't go through all the extensions 23:55.320 --> 23:57.640 to make sure they are accessible, 23:57.640 --> 24:00.560 because it would never hand or like. 24:03.760 --> 24:08.760 A commentant would be 20 or 20 mark in the comments 24:11.320 --> 24:15.840 on the one that accessibility provides to each week. 24:15.840 --> 24:17.160 OK. 24:17.160 --> 24:19.440 So there's no that it's safe to use it 24:19.440 --> 24:23.200 into the state via a system of accessibility compliant. 24:23.200 --> 24:26.400 OK, a comment is one minute. 24:27.040 --> 24:28.360 OK. 24:28.360 --> 24:32.040 If a comment is, we did be possible to mark the extensions 24:32.040 --> 24:34.160 as accessibility compliant. 24:34.160 --> 24:37.800 And I think yes, but right now, no one checked them. 24:37.800 --> 24:40.000 So there's not really one yet. 24:40.000 --> 24:44.400 But yeah, we could probably add a field 24:44.400 --> 24:48.480 on the extension description to make sure. 24:50.840 --> 24:52.240 Thank you so much. 24:52.240 --> 24:53.080 Thank you.