All Episodes

August 29, 2024 50 mins
Special guest, Vitalii Bobrov joins us to talk about accessibility on the web and how to relate it to user experience in general. What can we do to improve accessibility? How can we improve accessibility? Why should we even care about accessibility? Find the answers to these questions and much more on this very insightful episode of Adventures in Angular.

Links

Picks


Become a supporter of this podcast: https://www.spreaker.com/podcast/adventures-in-angular--6102018/support.
Mark as Played
Transcript

Episode Transcript

Available transcripts are automatically generated. Complete accuracy is not guaranteed.
Speaker 1 (00:06):
Hello and how you Welcome to another Adventures in Anguler.
My name is Alyssa Nigel. I am so excited for
today's show, but I have no spoilers no spoilers. So
our panelists include the wonderful Chris Board Meetings and joining
us day is Eddie Hinkle as well. Hey everyone, and

(00:28):
our super secret not yet announced but now totally announced
guest is the Tally bar Rob Welcome. Welcome, Oh my goodness,
so vitally for people out in the community who have
not met you yet, can you tell us a little
bit about yourself what you do?

Speaker 2 (00:45):
Oh?

Speaker 3 (00:45):
Yes?

Speaker 4 (00:45):
So as the work just software engineer re softom engineer
at an outsourcing company called Depom Systems.

Speaker 2 (00:53):
I'm working on a.

Speaker 4 (00:54):
Client which is one of the biggest tech companies, but
I can say which one because of Bengi's And mostly
I'm working with Angler and dark Anglar flat things.

Speaker 2 (01:10):
Like that and basically regarding the work that it is.
But to be main additions. On free time, I'm to music.
Actually I maintaining an.

Speaker 4 (01:24):
Angler application for guitar effects, examplifiers and cabinets and also.

Speaker 2 (01:33):
Doing an old stuff. I'm doing anal.

Speaker 4 (01:38):
Circuits on my own cover drives distortion such cuts of things, and.

Speaker 1 (01:45):
Basically is that I I was looking at our notes
to see if we have your GitHub so I could
check out some of those projects you were mentioning.

Speaker 5 (01:55):
What's your name on githubing? These people want to check
it out.

Speaker 4 (01:58):
It's the same vitally bobro but vitally written slightly different.

Speaker 5 (02:05):
Throw throw people off the set so they can't find you.

Speaker 4 (02:09):
Because I I created this account before I got my
foreign passports with official transliteration of my name because.

Speaker 2 (02:21):
Originally it's written in syrially, so it's completely different.

Speaker 4 (02:25):
Yeah, right, like exact rules, how the translates or really
names to much.

Speaker 5 (02:34):
Yeah, that's awesome.

Speaker 1 (02:38):
I didn't even know there were such rules, but that
makes sense for translating.

Speaker 2 (02:42):
As government rules. How well then, and.

Speaker 5 (02:47):
So you're like, yeah, sure, that's totally what it's supposed
to look like.

Speaker 2 (02:52):
I mean now I'm trying to use official one like in.

Speaker 1 (02:55):
Passports, right right, So it's tell us to tell me
what are we talking about today on the show.

Speaker 4 (03:04):
We want to talk about accessibility in general in web
and how to relate it to user experience in general?

Speaker 2 (03:16):
What can you do? What can we use to improve it?

Speaker 4 (03:21):
Why we should care about how we can maintain the
level of some particular accessibility and things like that.

Speaker 1 (03:31):
Do you often get to bring accessibility into applications in
your day job?

Speaker 4 (03:37):
Yes, because the company I'm working for has special requirements
for all applications to achieve a certain level of accessibility.

Speaker 2 (03:47):
They have a dedicated.

Speaker 4 (03:48):
Team that makes an audit for each project and you
can go with the application in production if you can't
mind some minimum level for accessibility.

Speaker 1 (04:03):
So like, does this team basically give you a grade?
And they contact you and they're like.

Speaker 4 (04:08):
Yeah, right, rates like levels of accessibility like five levels
and you can go below third one.

Speaker 5 (04:18):
That is so cool.

Speaker 2 (04:20):
I love you your application.

Speaker 4 (04:22):
When you think that it's ready for review accessibility review,
then you forward it to this team, describe user journeys,
how users should interact with your applications and something like that,
and then they try to test it in different ways

(04:42):
and provide you with some hints how to improve it,
what should be changed and basically like that, and it
takes a lot of time, and after we achieved the
false level. I think that if you want to make
an app accessible, you should invest your time from the

(05:05):
beginning because otherwise it will take a lot of time.

Speaker 1 (05:10):
Really well, I mean I at this point though, do
you just like pass with flying colors and it's not
even a thought because you've been doing it for so long.

Speaker 4 (05:19):
Then the data and policies regarding murals and we reapply
and again and again. Also, if you're adding some new
food channelity.

Speaker 2 (05:29):
Like new views with let's say some drag and drop
greeds and things like that, you will also forward these
parts so it won't be the whole up review but
new features review.

Speaker 6 (05:43):
Regarding accessibility very good, There isn't it that you've got
access to a team who can help you out with that,
because what I found sort of historically is that if
you've got an accessibility problem, you find out about it
when someone tells you that they can't use your website,
your application, because the abilities are very good, right, So
it's really nice to have somebody there actually doing that.

(06:07):
It can be really just far too easy to just
let it go under the radar on it when you're developing.
So because there's so much to do, right, I'm not
making excuses for my poor accessibility, but there's so much.

Speaker 5 (06:19):
To do and it is one of those things well yeah.

Speaker 6 (06:22):
Yeah, it's just one of those things that if you're
not just on it, you just won't necessarily addressing it right.

Speaker 4 (06:30):
And I believe that this topic became more and more
important because law improved a lot in Yau, in particular
in some countries like Scandinavic Norway, Sweden.

Speaker 2 (06:45):
And in States.

Speaker 4 (06:46):
I knew that there a lot of court cases regarding accessibility.
So basically, the more it will be obligated for businesses
to improve accessibility, the more will be gained for developers
who can work on improvements in this area to achieve

(07:08):
certain standards.

Speaker 2 (07:11):
So I believe it's the future.

Speaker 4 (07:13):
And in general, front end nowadays growing so much in
very wide areas like we have now web assembly, let's say,
webs are things like that, so there are so many
different things to learn and understand. So I believe that

(07:33):
in the future front end will be more granual regarding
specializations for developers because it's too.

Speaker 2 (07:41):
Much of knowledge for one person.

Speaker 4 (07:44):
So basically I believe it will be some persons who
will work with web assembly with some we are stuff
with audio with just layouts and things like that, and
accessibility maybe as well as the separate, separate specialization for

(08:04):
front time developers who else maybe machines will replace us and.

Speaker 2 (08:11):
Nobody will need it anymore.

Speaker 3 (08:14):
It's a happy thought. Yes, then we can close down
on that one.

Speaker 2 (08:19):
It's very Yeah, you know, we just have.

Speaker 1 (08:22):
Like an electronic noise of the machine taking over and
we're just silent, and then that's it.

Speaker 4 (08:27):
Yeah, I don't know my book keyboards these metal fingers.

Speaker 1 (08:33):
So tell us, tell us some things, because it can
be overwhelming, kind of a daunting topic. If you know,
you're an angither developer, you're working on apps all the time,
what's a starting point for accessibility and to bring that
into your applications?

Speaker 2 (08:49):
I think it's the main starting important point here is each.

Speaker 4 (08:53):
Tema actually to learn what does all those elements existing
in smelspac and.

Speaker 2 (09:01):
What is the right purpose of those elements?

Speaker 1 (09:06):
You're saying within a did, within a span, within a D,
within a span within AD is not semantic mark up what.

Speaker 5 (09:13):
Like you guys ever been there where you're like, who
spit this out? And why is it still?

Speaker 4 (09:19):
But you know spen and deep. Yeah, right, it's an
as a topic. But even sometimes it's hard to say
where to use.

Speaker 3 (09:29):
A a tag.

Speaker 4 (09:31):
Like just link or a button or should I use
section elements? What is it what it should be used for.

Speaker 1 (09:40):
Especially because you can style them to look like anything,
So you can style your anchor to look like your button,
or you can sell your button looks like an anchor.
So these are all really valid points of when do
I use them? Do you have a resource to point
to you as far as like.

Speaker 5 (09:54):
Question.

Speaker 4 (09:55):
One resource created by Manuel Matozos as far as remember
he's from Austria and the project called HML help.

Speaker 5 (10:05):
I am currently looking at the.

Speaker 4 (10:07):
Costs is unaccessible HHML markup and styling and explains why
it's wrong and how to make it right. And he
definitely has few posts regarding atak and the bottom and
things like that.

Speaker 2 (10:26):
It's really cool project.

Speaker 4 (10:27):
It's open source so anyone can contribute and add new
posts and they have separate titter accounts.

Speaker 2 (10:37):
It should be called health but I'm not.

Speaker 4 (10:40):
Sure how properly a writed as any end discourse and
things like that. And in general, this guy Manuel, he's
really knowledgeable in accessibility topics. He writes in black pasts
and really good content. Another guy Surgeate Trigger. He also

(11:05):
has a good accessibility talks regarding charts, for example, how
to make your charts accessible and things like that a bunch.
And as I said, this topic gaining more and more attention,
So content, amount of content growing a lot.

Speaker 1 (11:27):
You found it, it's dot dev. Don't go to the
side on it's not the official one.

Speaker 3 (11:35):
I seem I see it's right when.

Speaker 2 (11:38):
It's really cool.

Speaker 6 (11:40):
Yeah, it kind of gives me makes me a little
bit sad reading through it.

Speaker 3 (11:45):
And it's like, oh, some of this looks awful.

Speaker 1 (11:52):
So that's how your first piece of advice is HML.
Know what you're doing with it, know what it's used for.

Speaker 4 (11:58):
Actually you can go wrong. We say, just HTML if
you use it properly. But our applications nowadays are not
just stage camels. So we have Java screed and we're
creating smart digets like fancy buttons with pop ups, models
with I don't know, flash text and whatever, and all

(12:21):
of these we should be somehow described to screen readers,
to machines to be understanded what is what is it
and how to use it and what is more important,
how to use it. For example, with keyboard, most of
developers just developing components with mouths and mind or touch pod,

(12:47):
but not keyboard. And actually keyboard navigation and interactions are
not used only by disabled people. Even developers love keyboard
shortcuts like standards ones. If you have applications to edit
something like let's say audio, you want to edit some
audio tracked and you want to use some common tests

(13:11):
command see comment be to copy some parts of audio,
to save the projects and things like that. It's natural
because it exists for ages in all systems. And also
sometimes you have to use keyboards. Let's say your battery
diets in your mouths.

Speaker 1 (13:33):
And yeah, you're trying to repair, to argue repair and
your painting, yeah, and you need.

Speaker 2 (13:42):
To navigate the stuffs and rrows.

Speaker 4 (13:46):
For example, our app has a huge grid of cards.
It's project management applications with a lot of task as
the cards something close to travel let's say board, and
if you will use taps only to navigate through this
grid of cards, it.

Speaker 2 (14:08):
Will be really annoying.

Speaker 4 (14:10):
Let's say you want to go to the card in
the right bottom corner and you have let's say fifty
of them. You want to click fifty times to go
through all the cards.

Speaker 2 (14:23):
What you should do.

Speaker 4 (14:24):
You should do kind of greed that should be accessed
to be at top, and then you will be able
to use arrows to navigate through the grid like roll
down column, right, left and things like that. It will
speed up you a lot. Angler CITYK provides a lot
of primitives for accessibility, and for this particular case they

(14:47):
have Oh I forgot how this package called something like
focus Manager as far as I remember, but basically what
it does you can specify the parent element and the
cha house and how to navigate through them with not
just stubs but arrows as well.

Speaker 2 (15:05):
Another common problem all we have this side.

Speaker 4 (15:10):
Navigations that is killn by some Hamburger items, and sometimes
the developers to forget to exclude this navigation from the
navigation flow via capboard.

Speaker 2 (15:23):
So you can.

Speaker 4 (15:23):
Navigate to some items which are not visible and it's
not right, or you can open some model dialogue or
pop up and you should your navigation flow shouldn't go
out from this model or pop up.

Speaker 2 (15:43):
To the overlay elements as well.

Speaker 4 (15:45):
And there are a lot of such conor cases that
should be taken for attention. And what I'm trying to
say as a summary, short summary that accessibility war lots
of required for only disabled.

Speaker 2 (16:03):
People, but for all of us, and it.

Speaker 4 (16:05):
Will reprove improves the overall level of user experience of
your application.

Speaker 1 (16:13):
And I think it's always important to remember like that.
It's it's hard to know who has accessibility needs and
who doesn't. So I think it's a lot more common
than you think. I was actually testing like many years
ago before became a web dev. I signed up to
go and help like kind of do the accessibility testing
that your team does for a group of developers that

(16:35):
I admired in Orlando, and one of the UI designers
Dan Denny. He's like a really big designer and he's
super awesome. He came over and he was like, he's like,
what did what did you do to the page? And
I was like what, I'm just looking, I'm reading through it,
and he goes, yeah, but you broke my design. And
I guess I had command plus to a certain point

(16:56):
that like broke his layout and he didn't like plan
for that or real and I was like, I was like, yeah,
I really, I have really bad eyes. So any website
I go to, this is the first thing that I do.
And he was like making notes. He's like, good to know.
So I think it's just you know, really, it's it's
not always very accessive, like people who have accessility needs,

(17:17):
but it's also hard to know like who in your
users like might have them, so it's always super good
to plan plan for that.

Speaker 6 (17:24):
I thoughtways interesting what we were talking about the tabbing
tabbing order as well. I was working on an app
in my last job where I'm like, what it did
is not important, but basically, like one of the other
developers that I was working with just came up to
my desk one day and is like, you've got to
fix this this thing on a login screen or something

(17:45):
like that, and like, what thing with the login screen?

Speaker 3 (17:47):
It's like the buttons are in the wrong order, Like
what are you talking about?

Speaker 6 (17:50):
Pulled it up, but like just got this little login
model and like this is all absolutely fine, and he goes, yeah,
but it's all right because you're using your mouth. But
I always just tabbed through all of the forms all
the time. And I I tabed through all of the
inputs and then I pressed tab and then the next
thing that happens is it tabs to the cancel button
and I enter and it closes my modor and cancels
it out.

Speaker 3 (18:10):
It says, it.

Speaker 6 (18:11):
Happens to me several times a day, and it's really annoying. Me,
and it hadn't even occurred to me, and I can't
remember what was causing it. Actually, it was something to
do with something that was up with the tab order.
I mean in the end, I actually I think I
I rearranged the buttons in the HM out and then
and then put them in a flex box so they
were reversed so it didn't actually on the front and
it looked exactly the same.

Speaker 3 (18:31):
But his tab order was restored.

Speaker 5 (18:32):
But I got I've done that exact thing with flex Yeah.

Speaker 4 (18:36):
Yeah, absolutely, But yeah, this even easier to do the
reorder stuff, is it? Because I'm like, really, you can
just specify the call let's say, sell names. You can
assign them names and assign some elements to the cells

(18:58):
or group of cells. So it's really powerful easier to
reorder stuff I need.

Speaker 1 (19:05):
I need to get comfier with the great So I
was looking it up and actually the CDK package that
you were talking about, I found like a listy manager one.
But I'm just going to link to it in the
show notes in case you're curious about pulling in the
CDK for your Angular application to get those.

Speaker 4 (19:25):
So yeah, and in general, all of silica components are
pretty accessible. I believe they also passed on a special
review for accessibility.

Speaker 1 (19:37):
Sorry I have I didn't mute myself, and I have
hummus set as my Slack message notification noise. So you
randomly hear a lady yelling hummus in my office, it's slack.

Speaker 3 (19:53):
Do you want to deep dive on that tool? Give
us a little bit more end fun.

Speaker 1 (19:57):
Oh, me and my husband work in the same office
and our notifications they were driving is crazy because they
sound the same, so we never knew. And also we
each have like six or seven different Slack channels, so
you know, hummus I thought was a really original sound
like for my work.

Speaker 5 (20:14):
So I know, and I hear hummus being yelled at me.
It's important. Yeah, that checks out. Okay, totally derailed us.
Back to accessibility.

Speaker 2 (20:28):
Verifications also need to be accessible is.

Speaker 4 (20:31):
There are a lot of aspects of these things. For example,
we have special media queries like reduce reduce motion motion
prefer to reduced motion.

Speaker 2 (20:43):
Yeah, for people.

Speaker 4 (20:45):
Who can't normally work with things that's moving around a
lot and things like that.

Speaker 2 (20:53):
So using this mediac query, you.

Speaker 4 (20:55):
Can remove all moving animations from your application, like sliding
dialogs or like that, so it basically should should not be.

Speaker 2 (21:08):
Animated for those kind of people.

Speaker 6 (21:12):
And yeah, sorry, how do you know? How do you
know when to tell it when not to animate? Would
people have like a browser setting or something.

Speaker 4 (21:21):
They have special preference in browser? But I'm not sure
if it gets some settings from the system level like
dark mode.

Speaker 2 (21:31):
Okay, but maybe I'm not sure.

Speaker 6 (21:34):
I guess maybe if somebody is using a screen reader,
it stands to reason that maybe they might not be
interested in your heavy use of like the blink tag
or something like that.

Speaker 2 (21:43):
Yeah, that's true.

Speaker 4 (21:45):
Another aspects is colors as well, the outs and stuff
that some people have disabilities related to colors, color blinds
or things like that. Rare a bunch of extensions to
test your views with such issues. It applies screen filters

(22:07):
to simulate such disabilities, so we can try how it
looks like for different people with different kinds of feelness
of eyes, things like that. It's also important again it's
not only for people with any disabilities. It's for daily
usage because if your text is not contrast enough, people

(22:30):
will not be able to read it on some outdoors
for example. Or good usage of dark mode as well,
because at night where when people might use in your
application in dark place without any additional lightning, it will
be annoying to use it in completely white mode when

(22:54):
you have a white background and there are a black
text on it and you will be blinded with the
shine of your screen. And you can actually use some
happy Some of them are experimental, like accessing the lightning
sensors of device. It's available via Generic Sensors API, and

(23:18):
you can listen to light sensor of device if it's available,
and user allows you to read the values and you
can adjust the seam of your application regarding the surrounding light.

Speaker 5 (23:35):
That's cool. That's really neat.

Speaker 2 (23:37):
Same comes out.

Speaker 4 (23:38):
It's not really accessibility, but it's like battery levels, and
for example you might consider to reduce the amount of
animations when your user has a low battery. There is
also available values of battery levels through the sensors a PI,

(24:01):
so you can.

Speaker 2 (24:04):
Give user more power.

Speaker 4 (24:08):
Before the device will will they die without battery.

Speaker 5 (24:14):
Just an idea.

Speaker 1 (24:15):
You see that their battery is dying and you just
really ramp up the animations.

Speaker 2 (24:22):
Last coal animation.

Speaker 6 (24:25):
I think you must be the most considerate developer I've
ever met, actually taking time to think you're you're the
polar opposite of what I just described that actually thinking
people are batteries running out. Let me just let me
just help you. Yeah, you should just like alert plug
your baptop in. That's how I do.

Speaker 4 (24:45):
And as I think, you can the user agent headers
that asks for less data data users, so you can
reduce the requests. For example, if user has the browsers
that request less data, you can for example disable some advertisements.

(25:07):
Nobody will do this, but yeah, you can to save
the data for the user because in some countries data
mobile internet data I mean still very very expensive, like
you bugs kill abide or something like this, or when

(25:27):
you are some outside of your country and you're using
roaming and roving always very expensive as well. So you
want just to check some let's say weather or something,
and you might pay a lot of money for getting

(25:48):
twenty kilobase of some data.

Speaker 2 (25:51):
Things like that.

Speaker 1 (25:52):
This just reminds me of that's like really funny side
story promise last tangent of me and shy Resnik hang
on Poland one time and I had data and he didn't,
so he was tethering off my phone. But I have
supremely like if you've ever hung out with me in person,
you know, severe, like the most severe ADHD. And we're
just like walking around this market in Poland and he

(26:14):
keeps losing me and then losing his phone connection, so
he's like chasing me.

Speaker 5 (26:18):
He's like, wait, listen, I can't find you, and.

Speaker 1 (26:20):
I'm like, but look this thing like it was really
it was really amusing for me at least, poor Schy.

Speaker 5 (26:25):
But that.

Speaker 1 (26:28):
Then then a random dude who only spoke Polish came
over and started singing, and Shy and him like linked arms,
did not know him, and they started singing together. So
if you know a shy resnic from the either community,
that should give you Yeah, but no.

Speaker 5 (26:43):
You're definitely right.

Speaker 1 (26:44):
There's especially for people who travel a ton for work,
there's a lot of times when you're just like, either
you're worried about data or the coverage is not great,
so you're taking about ten minutes to load a site.

Speaker 4 (26:55):
So yeah, and I just I'm during commute, for example,
when you moving in underground or somewhere in public transport
and you're using your device with one hand, so you
should consider about replacement of important buttons about data saving

(27:20):
as well. For example, when you're moving in underground. It's
cool when you have a web service worker to get
the data beforehand cash sheets, so when the data internet
connection lasting tube underground tube, you won't lose the content

(27:42):
and things like that. There's so many points you can
consider about.

Speaker 1 (27:47):
Yeah, So do you have, like for your own personal
use a like a document or something that you keep
all these things to like double check yourself whenever you're
creating a component, and.

Speaker 4 (28:03):
To be honest now not now, but yeah, time to time.
I just mordin some ideas that they have for the future,
to check it out.

Speaker 6 (28:13):
Do you have any priority of what is important? So
imagine that I have an existing application, which I'm sure
many of us do, and that I have put absolutely
no consideration into the accessibility as I'm sure there's plenty
of people who do.

Speaker 2 (28:29):
Right.

Speaker 6 (28:30):
We've already said that getting your HTML semantic is important
and I'm I'm a big believer of that as well.
People who just everything's a div and I just style
it differently, You know that that is annoying. So that's
number one, or maybe maybe what other things are like
the first things I should do to try and beef
up my my accessibility.

Speaker 4 (28:52):
So yeah, first one should be semantics. Then you should
consider about color contrast of the content. Then I would
say it's navigation flow. And then you should move to
describing some elements which are not content that is not

(29:14):
a text, like charts, images, icons, something like this. Then
you should work on your rich fidgets like drop downs
and things like that, model dialogues because usually in these

(29:34):
components we have some let's say site site functionality not
that important hidden and pop ups and models. And basically
just try to use your application with keyboard for example,
or with any screen reader available on your system.

Speaker 2 (29:57):
Just go through it.

Speaker 4 (29:58):
Try to follow some common user paths. Let's say like
if you have some e commerce application, try to just
go through the list of products, add something to the card,
and go to the checkout.

Speaker 2 (30:16):
How it looks like, does it work at all?

Speaker 1 (30:20):
Yeah, Chrome boxes might go to for testing things with
screen readers, So if you've never opened up your application
with a screen reader, definitely highly recommend it. Even if
it's like you said, just to go through the common
path of like logging in or something.

Speaker 4 (30:34):
And all these applications are built in any system like
on androids, re Stackbeck always in systems on Marcus voice
or on Windows they should forget how they call the
system one. So it's available everywhere, so you just need

(30:57):
to read how to turn it on and that's it.
And yeah, back to this, I believe there is no
ideal applic tool or application to test automate accessibility testing
like one hundred percent, so time to time you really

(31:19):
need to just go through the application and try it out.
You can start with using tools like Lighthouse, which is
a pretty basic one. There was even a past how
to achieve one hundred accessibility in Lighthouse, but for completely
unaccessible application, very basic rules. And for our projects we

(31:47):
are using called x I X because it was already
built in in our like CI flow and things like that.
And it's really cool because it checks a lot of
rules from particular standards like what beg accessibility rules and

(32:08):
all of them. Like it can check some particular rules
for just elements, and it can check the rules for
document level like do you have a title and such
basic things. It also can check if you run it
in havelets browser in real browser you can check for

(32:30):
color contrast and such kinds of issues and which what
is cool about it that you can for example disable
some rules until you're working on it. For example, you're
working on semantics first, so you can turn off all
errors regarding other areas like color contrast.

Speaker 2 (32:54):
Let's say.

Speaker 4 (32:55):
Then when you get into the point when you are
ready to work on color trust, you just enable it
to work on that. But still it can't catch everything
because it doesn't have any idea regarding how to use
your your elements, your components, how to use your application.
It just checks if, for example, you specify that some

(33:19):
components should be a pop up, it has pop up,
that it has all additional properties that should describe a
pop up and things like that.

Speaker 1 (33:29):
Well, it's still really even though it doesn't check for everything.
If you can't afford, you know, a whole team to
go through and run tests, at least better to have
that a part of your bill process than nothing.

Speaker 4 (33:40):
So also it will help to maintain the level of accessibility.
So you're working on new features, you just add one
one additional test to your unit tests or to end
test with running this tool, and you get the idea
of what issues might be hidden in these new components.

(34:03):
So it's pretty cool and dry. A lot of alternative
to this tool, and a X has also a chrome extension.
There was also some cool the online tool made by Microsoft.
As far as I remember, when you just give it

(34:25):
a link to your application, Anti checks for accessibility issues
on it.

Speaker 1 (34:30):
So the Chrome extension, how did that work? It's like
running while your app is like while you're on the
page and it's just yelling at you about different things
or what is that?

Speaker 5 (34:40):
What would that look like?

Speaker 4 (34:42):
Yeah, it could be runt like in background, or it
can be run like Lighthouse.

Speaker 2 (34:48):
Just run through it and try and figure out what
might these issues? Same for this color blind extension I
used for Chrome, but I believe there was similar or
the same extension for other browsers as well. And yeah,

(35:08):
browsers also getting better in debugging accessibility. In the futures,
they will allow you to see what's.

Speaker 4 (35:16):
Going on on accessibility three because behind the scenes, browsers
also building another tree of objects really related to accessibility.
Sometimes browsers have issues internal issues as well, like rock
semantics for basic elements.

Speaker 2 (35:34):
But they improve in it and fixed those bogs.

Speaker 6 (35:40):
Is accessibility part of the Lighthouse score? Did I completely
made up? What lighthouse? Which is the chrime? Is accessibility
in there? Did I just imagine it?

Speaker 1 (35:50):
Yeah?

Speaker 2 (35:50):
They have accessibility chase.

Speaker 3 (35:52):
Yeah, so I mean I guess that'd be a good
place to start as well.

Speaker 1 (35:58):
For p w A's right, like excess ability is just
like one of those things like marks that you want
to hit.

Speaker 4 (36:03):
Yeah, yeah, but it's pretty basic. Yeah, it doesn't have
a lot of rules to check here.

Speaker 7 (36:11):
Okay, So would you say X is more robust than Lighthouse.

Speaker 4 (36:17):
Yes, they have like all the checks from main standards,
accessibility standards.

Speaker 2 (36:24):
From what do we ge?

Speaker 7 (36:26):
Yeah, ACTS looks really cool because we yeah, we use
Cypress as our end to end and they have a
plug in between ACTS and Cypress, so it can like
run with our end end tests.

Speaker 4 (36:38):
Yeah, and it's cool to run it on end to
end test because you can check page level rules like
titles and things like that.

Speaker 2 (36:46):
Yeah.

Speaker 4 (36:46):
But in my particular carri Is, I'm using them on
both end to end and on unit testing, on un
testing and checking keyboard navigations and things like that on
that level.

Speaker 5 (36:59):
So have you all heard of dark patterns before darks?

Speaker 1 (37:06):
Well, well, it's kind of it's kind I did a
talk I think flash Share on it, and it's I
think in like the Harry Bricknell like form like coined
the name dark pattern in like twenty eleven or something.
But it's essentially using the knowledge of UX against users.

(37:27):
So a good example, we're talking about contrast over and
over again, right about how important contrasting colors can be.
And you know, you know how it's a requirement to
have a way for a user to unsubscribe from an
email chain. Well, this company that I found, they had
they had a way to unsubscribe from their email and
it was at the very bottom of their email, white

(37:48):
text on the white background. And so so that is
like a very clear like dark pattern that you're using
against everyone.

Speaker 4 (37:57):
So using such things a lot, like you have to
pop up with video running out and the closed button
is so small or hidden somewhere. Yeah, it exists, but
especially it's an on mobile devices when you don't have
that much screen size to use for content.

Speaker 1 (38:21):
And the ex is like small, smaller than your pinky finger,
and you're like, yeah.

Speaker 2 (38:27):
It's another issue.

Speaker 4 (38:30):
And accessibility basically issue when links are so small, and
I'm personally getting these issues a lot, like clicking on
wrong button because they are too small, or these jumping
layouts when you load in some content you want to
click some button, but actually click some advertisements.

Speaker 2 (38:51):
So here you go, three your tops and these things
you don't need.

Speaker 1 (38:58):
Oh my goodness. So I'm trying to go over our
lesson see if we've Is there any other accessibility pointers.
I know that you did a talk and no apologies
making app successful at nd D as.

Speaker 2 (39:13):
You right, Yeah, not only at the conference.

Speaker 4 (39:17):
I believe I did this talk two or three times. Yeah,
but basically I covered pretty same points in very fast minor.

Speaker 1 (39:31):
Because with no visuals, right like, that's always challenging.

Speaker 4 (39:38):
Yeah, I believe, yes, And there are so many resources
on deft your medium to go through accessibility tweeter just
follow some people like Manuel, like Cergey Krigger. Even more,
there is some new topics Guardian CSS accessibility.

Speaker 2 (40:03):
For example, you.

Speaker 4 (40:04):
Can get give an alternate text for content CSS content property,
which is used usually for some additions. You can give
alternate text for that as well. And I believe in
the futures I build consider for more features related to accessibility,

(40:26):
like those media quaries, prefers, reduced motion.

Speaker 5 (40:31):
So yeah, we're reaching the top of hour where we
do picks.

Speaker 1 (40:33):
Do you have anything else on accessibility that you'd like
to add before we get to that section no, I.

Speaker 4 (40:39):
Believe I shared pretty much what I had in my
mind for now.

Speaker 1 (40:46):
Well, gentlemen, Addie and Chris picks anything interesting.

Speaker 6 (40:51):
I could pick some things, always got, always got my picks.
I can pick a figure games coming out in a
couple of months. Back in I think maybe twenty twelve thereabouts,
there was a game that I had on my Xbox
three sixty called Kingdoms of Amla Reckoning, which is fantasy RPG,

(41:12):
kind of my favorite style of game to play. I
really loved it, like a quite a deep, rich fantasy world,
et cetera, et cetera. It didn't really gain much traction sadly,
and I think the company that made it went like
horrifically financially under and took the whole property with them.
But then recently it was the property was bought by

(41:35):
THHQ Nordic, and then out of nowhere they announced that
they're they're basically the remastering it for modern systems, and
that's coming out in September.

Speaker 1 (41:46):
My keyboard died, and so I can't google anything that
you're talking about.

Speaker 5 (41:50):
I need a link to quick.

Speaker 6 (41:51):
I will put a linka I'll put a link in
in notes. So the remaster's coming out I think September eighth.
But I loved that game. It was it was as
good I've pre ordered it.

Speaker 3 (41:59):
I never order anything.

Speaker 6 (42:00):
I pre ordered GTA five and I think I've pre
ordered Mass Effect Andromeda until I render reviews and I
canceled my pre order.

Speaker 5 (42:06):
You had a fantasy rpg.

Speaker 6 (42:08):
I was like, that's that's Kingdoms of Amla re reckoning
and then I'm going to pick one more thing. So
at the weekend, I went back to my hometown, the
beautiful city of Oxford. Haven't been there for five months.
Love it very very special place to me. I haven't

(42:28):
actually lived there in the area for like twenty years,
but whenever I go back, I enjoy it. But because
I've been back for so long because of the pandemic, I took.
I took just took some time wandering around and just
looking at stuff because it's it's such a beautiful city.
And oddly, when I was doing my explore, I found
a GitHub office, which I was really surprised by because
I had no idea they even had any presence in
the UK, and in like a tiny back alley in Oxford.

(42:52):
But anyway, this this is going somewhere there's because I
love the city so much and I don't get back
very often. There is a TV show that I love
to watch which is set in Oxford.

Speaker 3 (43:03):
It's like a murder mystery thing.

Speaker 6 (43:05):
We have this set of murder mysteries set in Oxford
from like the seventies and eighties called Inspector Morse. Hasn't
aged particularly well, I will say, but recently there, or
say recently in the last few years, they've they've made
this new TV series based on this police detective in
his in his formative years, and it's called Endeavor. And
that's Endeavor with a U because we put us and

(43:26):
everything in that in words that we spell.

Speaker 3 (43:28):
And so if you like a murder mystery and.

Speaker 6 (43:30):
You like things set in beautiful British cities where you
have lots of people punching each other and then like
drinking beer from big glass big glasses and things, I
recommend that I'll put a link in that as well
for that where you can find it on iTunes.

Speaker 3 (43:44):
There's my picks.

Speaker 5 (43:45):
Listen.

Speaker 1 (43:46):
My first and most bright impression of my trip to
the UK was this little pub where I got fish
and the best wine that I've ever had. I was
hanging out with Jen Looper and so now never you know,
people are like, oh, on some wine. I'm like, it's
just not going to like, it's not going to.

Speaker 3 (44:04):
Be that so if you got any fish to go
with it, but.

Speaker 5 (44:10):
Seriously, great pics. So is it only on iTunes? Because
you know, I just.

Speaker 6 (44:15):
iTunes is my go to for like online content. I
mean to be honest, we our streaming services in the UK.
Even though we've got that Netflix and Amazon Prime stuff,
all of the content is different, so I wouldn't have
the faintest idea no access So anyway I'll spell it.
I'll spell it because of our fanciful way of spelling
things with yous just because.

Speaker 5 (44:35):
Interested thank you awesome Eddie, what about you.

Speaker 7 (44:39):
I'm gonna have my first pick actually be that accessibility
because as we were talking about all this, I'm seeing
here trying to figure out how in the world are
we going to start figuring out accessibility at my job?
And then I was like, wow, acces is like a
good start towards figuring things out and then from there
we can figure out how to do things, you know,

(45:00):
actually running through it. But it's like for first past,
like how are we doing. We'll probably get an F
but you know, run acts, so I'm super excited about that.
Besides that, I've been playing around with swift Jui, which
is Apple's newest kind of UI paradigm, and I like
it a lot because it's, you know, normally mobile development

(45:22):
is a lot more difficult than web development, but with
swift Jui, I feel like it makes mobile development like
on par and in some ways easier. Because of course
we'ven to talking about accessibility and swift Jui.

Speaker 5 (45:33):
The thing I really like is it.

Speaker 7 (45:35):
Bakes in a whole bunch of accessibility with it, like
you say, hey, here's some labels, and the labels automatically
grow and shrink because they can do that because it's
you know, on one platform. But yeah, so I've been
really enjoying that and all the benefits it brings, very
very cool.

Speaker 1 (45:50):
I'm gonna paste mine in the chat too. Mine is
the same as it's been for a couple of weeks now.
I do streams weekly on the coded live channel twitch
so Twitch dot tv slash coded Live every Wednesday afternoon
CDT time, so I'll be on talking about UI issues
and tackling CSS challenges and goofing off, So join me

(46:14):
there for some fun and then we also do like
about I think every month we have these big, like
eight hour streams where we're giving away things like switches
and xboxes and Amazon gift cards. So definitely follow our
channel and look for you know, fun hanging out times
and price giveaway. What more can you want? Yeah, that's
my that's my pick the telly, what about you?

Speaker 4 (46:37):
Actually, regarding those small vigits, last time, I was online
interview online on site interview for one big tech company
and they asked me to build actually a small vigit
like star rating, and I wanted to build it accessible,
but my interviewer asked me actually to just write JavaScript

(47:00):
for dissent spans.

Speaker 2 (47:03):
I believe that's why give past that interview.

Speaker 4 (47:06):
But yeah, come back to my pigs. And actually, as
I said, I'm doing an app on my free time
with guitar effects, and I would like to everyone who
interested in music to follow the project on GitHub and

(47:27):
contribute to it. For now, I have like a simulations
for a few real amplifiers models and a bunch of effects,
something like fifteen of them. For right now, I'm trying
to replicate real ones because I'm actually have some effects

(47:51):
sometimes building the clones on my own in an other way,
and I'm trying to replicate. So I'm reading how the
I don't know how it called in English, actually amplitude, frequency,
characteristics of these effects. I'm trying to replicate those in

(48:16):
digital way and playing around that. And I'm really excited
to get regarding the audio work clots that came in
Chrome and Firefox right now, so it's supported by majority
of browsers and you allowed to use an actual separate

(48:36):
threat for audio processing like it's done in classic applications,
desktop applications Returnancy and C plus plus, and with a
web assembly you can actually port some C plus plus
plugins from those desktop applications to webb and yeah, it's

(48:59):
kind of cool YouTube when we will see more and
more professional applications like audio editors of level of que
base and things like that in web.

Speaker 1 (49:13):
Very very cool. Sorry, I'm trying to figure out this
keyboard issue. No no link for you, this is but yeah,
but Tali, thank you so much for coming on today.

Speaker 5 (49:26):
Is there for me? It's Twitter. That's where I prefer
to be hit.

Speaker 1 (49:30):
Up and talk to you about anything web or life related.
Is there one place that you prefer just if you
want to contact.

Speaker 2 (49:39):
You or reach out Twitter as well Twitter that we'll have.

Speaker 5 (49:44):
That in the chat.

Speaker 1 (49:46):
Well, thank you so much for perfect Yes. Yeah, Barbara
nineteen eighty nine.

Speaker 5 (49:52):
Very cool. Well, thank you so much for the awesome
show today. Yeah, I think that is all for me.

Speaker 2 (50:00):
Really cool time for chatting. Yeah, thank you
Advertise With Us

Popular Podcasts

CrimeLess: Hillbilly Heist

CrimeLess: Hillbilly Heist

It’s 1996 in rural North Carolina, and an oddball crew makes history when they pull off America’s third largest cash heist. But it’s all downhill from there. Join host Johnny Knoxville as he unspools a wild and woolly tale about a group of regular ‘ol folks who risked it all for a chance at a better life. CrimeLess: Hillbilly Heist answers the question: what would you do with 17.3 million dollars? The answer includes diamond rings, mansions, velvet Elvis paintings, plus a run for the border, murder-for-hire-plots, and FBI busts.

Crime Junkie

Crime Junkie

Does hearing about a true crime case always leave you scouring the internet for the truth behind the story? Dive into your next mystery with Crime Junkie. Every Monday, join your host Ashley Flowers as she unravels all the details of infamous and underreported true crime cases with her best friend Brit Prawat. From cold cases to missing persons and heroes in our community who seek justice, Crime Junkie is your destination for theories and stories you won’t hear anywhere else. Whether you're a seasoned true crime enthusiast or new to the genre, you'll find yourself on the edge of your seat awaiting a new episode every Monday. If you can never get enough true crime... Congratulations, you’ve found your people. Follow to join a community of Crime Junkies! Crime Junkie is presented by audiochuck Media Company.

Stuff You Should Know

Stuff You Should Know

If you've ever wanted to know about champagne, satanism, the Stonewall Uprising, chaos theory, LSD, El Nino, true crime and Rosa Parks, then look no further. Josh and Chuck have you covered.

Music, radio and podcasts, all free. Listen online or download the iHeart App.

Connect

© 2025 iHeartMedia, Inc.