Thank you so much for being with us and being interested in open-source design and without further
a different look at seeing.
Thank you.
So, I'll have you for 20 minutes to talk about improving web accessibility with respect
to background compatibility, there's a lot of words but it's not that difficult.
So, yeah, let's get this.
For context, I worked for two years to improve the web accessibility of the X-Wiki tool.
X-Wiki is a free and open source software which was first released in 2004 when accessibility
really wasn't in the mind of everyone, so there were some things left in some places and
I needed to update it and I was responsible to update those places.
Yeah, so this is X-Wiki just to give you a quick look.
There's a lot of things in the UI and most of X-Wiki we have a tool, X-Wiki standard and
you can put extension on it and you can put your own customization, you can script a lot
of things on it and all of our users, they all have customizations and everything on very
instances.
So, we really need to take care when we update anything to be background compatible because
we don't want our users to have trouble migrating to new virtual versions at least
possible trouble with it.
So, yeah, that's the context and there I was tasked with trying to improve it to give
a keyboard alternative for table dragging actions.
So, as you can see here, we have a component which is kind of data table and everything
go code on, we have you can click the label to filter by this label then you can resize
the columns and you can hear other of them and two years ago you couldn't do this with
a keyboard which isn't really quite for accessibility and even usability.
So, yeah, this was the state of things and this is my first prototype.
I proposed it and actually we merged it and for a day later one of my friends it just
it sent me a message, okay, look up, we need to see something, there's an issue with your
merge.
I have also an issue with your change of the user interface here because on your example,
it's fine, there's space, everything is nice, you can add buttons to, you can add
handles to resize and reorder your columns, but actually on some use cases, on a lot
of very fact, you have like 20 columns and what was fitting really tightly onto one page
before, it overflowed a lot by a lot, so you need it to scroll to access the latest columns
and that's not good, so we needed to discuss again and we arrived to this final version,
we don't have nice looking 24x24 accessible buttons for handles for resizing and reorder
the columns because we had to make compromises, if a space was not really easy to find,
so I just added a small indicator when we have the ring, this one is responsible of resizing
and you can plug in the drop the title to reorder and of course I added all the necessary
listeners to make it with a keyboard and all the RRA descriptions so that users actually
are having on this very specific component could know how to interact with it and how to use
it because it's not a standard opposite to this, this one didn't need many explanations because
it's just buttons with a label and it's fine let's talk so yeah this was this became quite
more difficult and needed a lot more discussions and compromises because we had already users
and a lot of people already using this and getting back on the initial design and the initial
space taken by each column, it was really difficult so the second thing I want to show to you
I want to show to you is making links visually distinct, two years ago we had one mode,
the default which is every link they are not in no link is in their line and the over mode
if you go into a neat little section in your user profile you can activate link and
their lining I had an issue with it it's because when you go to your user profile your first
experience with it's not accessible so it wasn't accessible by default and we couldn't even
assume people knew about this setting because it wasn't really well shown so we needed to do something
about it because users here they would have trouble like with the contrast between the link
and the text is very low so it would be difficult for some users to figure out what is a link
and what is a text like there's two links here that if I just give you a gray image you can barely
see it so yeah there's two solutions for this the first one this is one you just pick a color for
your links where all the contrast requirement between your colors are respected so you need
the four point like for accessible content respecting the value cag 2.2 you need the contrast
of 4.5 between your text and background for you need same for the link color and in a
different you need a contrast of three between the text and the link color yeah sorry yeah that's why
like your contrast is bad and five week it wasn't a solution a possible solution because there were
too many colors everywhere and there were no blue that would fit this thing so we needed
to do underlining this was the only solution to make the links actually distinguishable from
surrounding text but underlining everything is pretty ugly even so like in there's a navigation
element here we have a bunch of links into it and underlining everything I got feedback from the
community they told me it's it makes things so much heavier like it doesn't look good at all
we don't we cannot do this so actually we decided to compromise and try to find the solution
but we fit the best for everyone and to underline only in line links so those links which have
an orange square horned fan they are easy to it's easy to understand they are links
because of their context like you can see around them okay if there's a little dots and it's an
navigation I can probably click on it and it's fine but those links if they are not in their line
those in a little green square it's it's difficult to to figure out if they are actual links
or not possible yeah so that's about it and yeah the backward compatibility aspect is that users
were used like we were used to the loops of this UI which was really light I guess compared to
a full-end online UI and we couldn't just go with a simple solution of underlining everything
we needed to to find the compromise yeah okay the third point I want to talk about it's
thing everyone saw at some point everyone handled the designers or developers it's a login form
in exchange or login form add an issue with tab order when you click on your tab key on your keyboard
on the web page you go through the interactive elements and this was with tab order so one two
you go down down and then you go back up and then down for accessibility you don't want this you want
to line up your content like your visual content with your tab order which in most cases you need to
also line up things up with the other dumb is document object model so it's the way of information
that's contained in the page is stored I guess yeah so this is why I just showed you the path
of the user cursor goes down the form and then back up so we couldn't go with this
the second issue with this was that it was upgraded to be at the start of the page
but when you left the last field of the form it was sent you back to the logo and the top left
so we needed to remove this so this is my first prototype
there I don't want to make UI changes because it needs to be discussed and everything and I'm not
the designer so I cannot propose much so I just said okay let's change the tab order to start here
and then go down there and just go down to form and everything's fine also focus the first
when we arrive and everything's good but we know this and the day later one of my friends contacted me
and it told me okay yeah what you actually did we can't go with this
because it was a user or a fixity and like any developer and when you wanted to log in
it had this is how it's like it was used to just filling his name tapping once filling his first
world tapping twice and then plugging in but I missed this a lot so yeah we're to discuss
change in UI it's not much but we had to discuss it and let me know everyone about it
and we ended up on a design which was kind of similar to this it's not the final one
yeah so that's about it I think it was short one final world
thank you for your attention and what this tells us I want you to remember this lesson
shift level for accessibility if you want your design to stay on a long-term like on a product for
a tool for a long time try to integrate it in your design and to integrate accessibility
and to your designs so that later on you won't have to struggle with the craft compatibility
yeah thank you
okay but what you need to be challenging what's going to be tackled
I think most yeah so what have the big issues left in it's which is right now
I think most of the big issues are tackled most of you we have a ticket system you can
that's completely open you can check there's a double UCHG label if you want to and I think
you can get a filter page from accessibility statement so yeah there's all the info you can
want on fair but yeah the big items are dealt with like things you see every day
like this it's dealt with
so this one's yeah what's the other designer working on this issues okay this one's I
handled them pretty much along like most of the time I didn't expect them to end up in
large changes like you know here it's not a change to a visually UI and it's just a change
in the background of how things work and I didn't like I didn't communicate with a designer
for this but yeah when when I get here by his point I get the feedback of a designer on the
forum description and yeah and most of the time when I see I like yeah when I see I have some UI
changes to make I check with the second year too okay what do you think of this if it's
complicated can you can you help me find something and if I have an idea of what I want to do
can you can you check that my solution is not bad I don't like that and so it's
what's the problem and so it's you think what what you see what you explain I have the idea
the idea is very simple so you know you have the money or clean up this you type out you have
the withdrawn article of the money and you type or you have the top of you have a cross or like this
something like that and you advance you can have the sound and then you you stop for a
metaphor of some money and so I'm sorry but probably sound also for people and people
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
yeah so for liberal physics I'm not sure how what is it sorry um the the model of tab tab in indexing
for the interface is nice but I will provide just some more elements to guide you my other
so for liberal physics I'm not sure about what is behind it but for web web content and
everything web there's a guideline double usage and it's explicit here written into it that you
need to make your web page usable only with with a keyboard with so that's one of the reasons
why it's so easy to make it for our web because we have a lot of tools and
yeah accessibility is useful for everyone
I mean yeah not much like to be honest most of the time the community is understanding and we try to
to make things work somehow to find the solution that will find us work for everyone
I remember I really wanted those buttons to stay there but because it's
more accessible to have buttons that are always visible and part of and things appearing out of
nowhere and disappearing when you move your mouse and yeah I had to compromise for example here
but yeah this was telling improvements compared to what was before where there was no
no keyboard interaction and nowhere if I need to hear about this so we know that we cannot
really make change this in any way to make it more accessible so
when we go over or when we arrive there's the mouse on that line
it's this one
no there's this in the compromise in the final one
oh okay this one
yeah so because I think that's one in the beginning
what you explain is you show that another community
oh so actually this one it's just a table you can it's it's a big
you can scroll vertically yeah but it's not supposed to scroll horizontally
but because of this it made everything like the minimum length of columns was increased
significantly and in some in some places it made it so that we had
I'll finish on those calling so
so
you've talked about elements layout
conditions of these enabling
did you have any significant color changes?
Did I implement any significant color changes?
No, because we don't want to change, yes, but no.
We don't want to change too much of the user experience
from the one version to another.
And we are like, OK, we have a standard color film.
It's not completely double the UCAG compliance.
It was quite good still, but in some places,
we needed a few tweaks.
So I looked for the colors with like minimum compliance,
just to make it a minimum changes, but still compliant.
And so our main color film, like the first one,
you have when you install it with you,
it's double UCAG compliant today.
And we tested it automatically, it was a joke in the community
about the changes.
Can you see the difference between the two pictures?
One was the one with old colors.
And one was the one with the new colors.
And actually, it didn't look that much different.
It was just very small tweaks.
The four of the experience and the extension,
that you provided.
Yeah, that's a little bit extension.
Also, are the extension provided by each week and so accessible?
Did you work on the extension as well?
So provide documentation for the dead external developers
who want to create their own extension for the needs.
If it's just to create an extension,
because those are community extensions,
so there's a lot.
I didn't work on all of them.
Like some of them are baked in each week's standard.
Some of them are IRP-Hoverty and fairly used Mouthem.
So we care a bit more about them,
but we didn't go through all the extensions
to make sure they are accessible,
because it would never hand or like.
A commentant would be 20 or 20 mark in the comments
on the one that accessibility provides to each week.
OK.
So there's no that it's safe to use it
into the state via a system of accessibility compliant.
OK, a comment is one minute.
OK.
If a comment is, we did be possible to mark the extensions
as accessibility compliant.
And I think yes, but right now, no one checked them.
So there's not really one yet.
But yeah, we could probably add a field
on the extension description to make sure.
Thank you so much.
Thank you.