S8 E13 | Web Accessibility | Maria Korneeva

Join us and Maria Korneeva as we discuss web accessibility. 

More about Maria.
X: @BrowserPerson,
BlueSky: @browser-person.bsky.social,
LinkedIn: https://www.linkedin.com/in/maria-korneeva/

Follow us!
X: The Angular Plus Show
Bluesky:  @ng-conf.bsky.social

The Angular Plus Show is a part of ng-conf. ng-conf is a multi-day Angular conference focused on delivering the highest quality training in the Angular JavaScript framework. Developers from across the globe converge on Salt Lake City, UT every year to attend talks and workshops by the Angular team and community experts.
Join: http://www.ng-conf.org/
Attend: https://ti.to/ng-conf
Follow: https://twitter.com/ngconf
             https://www.linkedin.com/company/ng-conf
             https://bsky.app/profile/ng-conf.bsky.social
             https://www.facebook.com/ngconfofficial
Read: https://medium.com/ngconf
Watch: https://www.youtube.com/@ngconfonline
 
Edited by Patrick Hayes https://www.spoonfulofmedia.com/ 
Stock media provided by JUQBOXMUSIC/ Pond5

Episode Transcript

Speaker 1 (00:08):
Welcome to the Angular Plus Show. We're app developers of
all kinds share their insights and experiences. Let's get started.

Speaker 2 (00:21):
Hello and welcome back for another episode of the Angular
Plus Show. My name is Lara Newsom. I'll be one
of your hosts today.

Speaker 3 (00:27):
Today.

Speaker 2 (00:28):
I have with me my friend q Q. How's it going.

Speaker 4 (00:31):
I'm doing great, being festive with this Christmas cheer going on?

Speaker 2 (00:36):
Yep, yep, y'all were many I know from following the
feeds on Blue Sky many folks are running on fumes
to get to any sort of break they might get
over the Christmas holiday. I think the last few years
in tech have been very interesting. So yeah, there's a lot,

(00:57):
a lot of relaxing that.

Speaker 4 (00:58):
Needs done, I think absolutely.

Speaker 2 (01:01):
And we have another host with us today. It's Ques
dog Anubis Anubis. Uh. Since this is not a video podcast,
y'all don't know. He's a hairless dog and he's delightfully
cute and wow.

Speaker 4 (01:19):
So if you hear barking in the background.

Speaker 2 (01:24):
Weighing in on his opinions on accessibility and Angular and
to that point, we have a lovely guest with us today.
Our guest today is Maria Kardiva. Maria how are you today, I'm.

Speaker 3 (01:36):
Good, Thank you, thank you for the invitation. Yes, it's
so great to see you.

Speaker 2 (01:40):
I got to see you in person back in October
in Bonn, so that was fantastic. The NGDE conference was
in Bond in October of twenty twenty four. Always a
great opportunity to connect with developers in Europe. And I
got an exciting email today, actually it was yesterday that

(02:04):
the twenty twenty five event is being planned and tickets
are now on sale, so that is exciting news. It's
always great to I know it takes a lot to
organize conferences, and you've been involved in the past, so
you can definitely speak to the amount of energy required
to not only get speakers lined up, but to get

(02:27):
venues lined up, get people to buy tickets, get people fed,
get people in rooms, all of that. So it's no
easy task. But but yeah, so true. We don't know
a ton about the twenty twenty five event. It said
they're thinking Berlin in the fall and so dates are TBD.

(02:51):
But I did the thing I did read in the
email is that tickets are on sale and if you
buy them and for any reason like the dates don't
work out, they're refundable, so I thought that was pretty
cool to be able to get planning on that now.

Speaker 3 (03:06):
And I also found the marketing gag of the first
and tickets quite nice. The first ten people who get
the tickets will be invited to the exclusive speaker dinner,
where you can't just be in a smaller group with
all the speakers, and well, I am a groupie just
to talk to the people there, thoughts. I think it's

(03:30):
quite a nice thing.

Speaker 4 (03:32):
It is.

Speaker 2 (03:33):
Yeah, the speaker dinners are always a lot of fun.
You actually get to see the speakers kind of relaxed
a little bit. I know, I can get kind of
tightly wound and anxious when I'm getting hyped up to
go on stage, and so it's nice to have that
opportunity to just have sort of casual, very nerdy conversations,

(03:54):
which is what I love to do at a tech conference.
So yeah, if you are interested in going to that,
better buy and fast because those I bet those ten
slots fill up pretty fast. So but very cool, But
that is not why we have you here today. We
have asked you here today to talk about accessibility in

(04:15):
angular So before I know we've had you on before,
but for the listeners who have may not know who
you are. Do you want to introduce yourself?

Speaker 3 (04:25):
Yeah? Sure, I'm Maria Carneva and I'm a free lancer.
And I usually say, like, I could be CEO. I
can't make up my own positions, right, so I could
be CEO, but I just decided to call myself a
front and technology lead. I am a Google developer, expert
in Angler, and an expert in accessibility. Yeah, I'd say already,

(04:47):
I'm currently working like I'm hesitant because I started with
Angler and accessibility came then like later. But now I've
just finished a book on accessibilities. I think that's kind
of a check mark on i'm a or a point
on my bucket list.

Speaker 2 (05:03):
So yeah, yeah, yeah, yeah. I feel like that's the
situation a lot of us have been in, where like,
first we learn how to write code, then we figure
out how accessibility works, and it's hard, like it's it's

(05:24):
it's hard being a fully sighted person with full mobility
of my hands and arms to be able and I
can hear right, so it's very it's hard for me
to put myself in the position of a user who
might not have those abilities right like they may be poor,

(05:45):
you know, like low vision. You know, even if it's
although it's easier if you think about, oh, well, if
I broke my arm, if I broke my right arm,
typing would get hard for me because I'm right handed right,
so that's how I use my mouse and so so yeah,
I think it's it's important to kind of start to
understand not only the roles that we try to cover

(06:05):
for accessibility, but then also how do we actually do that. So, okay,
tell us about this book you wrote, because I actually
did not know you had a book that was coming out,
So that's amazing.

Speaker 3 (06:16):
Well, I'll start with a downer. It's in German. I'm
so sorry, it's really it is in German because the
publishing house wanted it to be in German. But it's
all about digital accessibility or how to make websites and
web publications accessible. Starting with a bit of this introduction

(06:37):
what is accessibility or what is the empathy gap? But
just briefly, because back then, a couple of years ago,
when I started to get to learn about all these topics,
I've found out there's a lot of general discussions why
it is important all the human side, et cetera. But
as a web developer, had no clue because they were
just like some checklists. But that's it, and I never

(06:59):
had this feeling I know a way to start and
where to stop. So I decided to research it by
myself and the book is more or less the answer
to the Maria of two years ago, three years ago
what I needed back then. But just to reply Laura,
I didn't know that you had a course on accessibility.

Speaker 2 (07:23):
Yes, and it was like the hardest thing I've ever done,
because I've never I like, I still need to go
back and make sure that it's accurate, right, because there
are different ways to approach accessibility, and like it doesn't
feel like there's ever like this is the one bulletproof
way to do it, and so yeah, it's it's such

(07:45):
a hard like it's I think it's very I think
it's easy to explain people why it's important, right, like
just don't be a jerk. There'll be some people that
just want to be jerks and they don't care. They're like,
who really cares if if somebody can't read my website?
But I'm like, I don't know, Like I've been on
a browser where I can't check out and like that
just infuriates me. And that's just because it just isn't

(08:06):
working on that browser. I have options. I can go
do it some other way, but like, all I have
to do is put myself in that position of like,
you can't do this task that you need to accomplish
in your life because the website is broken, and it's like, okay, yeah,
you got me. I nobody should have to be put
through that because of me, right, but it definitely.

Speaker 4 (08:26):
So I think people will care once their company gets
audited by.

Speaker 2 (08:31):
You got to do the money, Like sometimes it's got
to be the money that matters. And it's sad but true.
And then, so your book is in German, would you
say that it's written more towards like there's different accessibility
standards depending on what country you live in. Does is

(08:54):
it written more like generally accessibility or is it specifically
talk to some of the rules in Germany?

Speaker 3 (09:02):
Well, yes and no. The occasion is quite European. You'll
probably have heard about the European Accessibility Act. This is
a European directive which itself has no power in. If
I have time, I could dwell a bit more into
this because I think it could be interesting for the
US market as well, just to get to know what's
going on in Europe. So this directive has no power itself. However,

(09:28):
it obliges the countries of the European Union to introduce
the national legislation on accessibility, and every single country had
to do this till twenty twenty two. Germany did it, Austria, whatever,
all the countries, and that's the first time there are
some fines for if you're building inaccessible services, in particular

(09:51):
e commerce services, and that's something which drives people crazy.
There's a bit of even a bit of a panic
on the market compared to you, well to GDPR back then,
because people don't know how strict the rules going to
be checked, how accessible they should be. Though, well, coming

(10:11):
back to your question, it's quite clear the European Accessibility
Act sites the European Norm three hundred and one and
one and five and forty nine, and this norm sites
Web Content Accessibility Guidelines and there there we go. That's
that's the international standard. So for now for e commerce
websites in Europe are the same standards are valid as

(10:35):
for for example, for many websites in the US, or
in Canada or in any many other countries in the
world that also share this.

Speaker 2 (10:45):
Yeah, exactly, And I would say most companies, Maybe not most,
but a significant number of companies serve a global market
as well. So I when I write websites for Cisco,
our websites are available globally, and so we have to
care globally, you know, I think about products that I mean,

(11:08):
I order products from your all the time on websites,
and so yeah, it's I think it's important to understand
the rules around the globe. But I think in a
lot of ways they align anyway, which is which is nice.
But about is your book focused specifically on Angular or

(11:31):
is it just a more is it in general accessibility
on the web.

Speaker 3 (11:36):
It's general one. But I've planned to do some more
work in Angler, maybe open source. I'm searching for some contributors.
Like to build a website with some use cases which
aren't not necessarily Angler specific, for example, a sortable table. Well,
you probably will build it with normal normal web means

(11:57):
like HML, JavaScript, typescript, whatever, but I'd like to offer
those use case in English so that people can copy,
baste it or look it up at least. So maybe
next year when I have more time after the book
to powerish next project already on time.

Speaker 5 (12:15):
Yeah, so what what would you say are some of
the miss like, what are some of the the I
want to say easiest mistakes, But what are some of
the Maybe that is what I want to say.

Speaker 2 (12:30):
What are things that you see developers do that are
easy to avoid if you understand that it's a problem.
I don't know if that question made sense.

Speaker 3 (12:40):
Yeah, I'd say I see a lot of ARIA labels
and at the places where they're not necessary, and I think, like,
I love math. I know some people are scared of math,
and I don't believe you need some math knowledge for informatics. Well,
it's a different topic. But the there is a SPECS

(13:01):
from the Web Accessibility Initiative on computation Accessible Name and
description computation and this is like an algorithm. It's less
of computation in terms of calculating something, but it's also
like an algorithm which tells you which means of giving
an accessible name wins. Well, what is an accessible name?

(13:22):
It's the thing which these screen readers, readers will announce
at the end, for example, what's the name of this button,
what's the name of this link? And There are different
ways how to provide this name. Either that's the content,
just normal text within the button, or you can use

(13:43):
ARIA accessible reach Internet applications suit a set of attributes
to add some meanings. So you can use this and
then you override the contents. And there is the whole
hierarchy of how to provide this name. Either as I said, contents, ARIA,
it'll attribute, I'll attribute whatever. There are a lot of
things and if you know how they are computed, how

(14:07):
what is the winner? Who is the winner? And you
know that. If you have a link and you have
already the contents of this link and you put an
aerial label, it's you're overwriting what what other users see
on the surface, like in the UI and arial labels
are not translatable, at least not completely. And that's a problem.

(14:30):
And it works in a sense that screen readers would
announce something, but it's not what maybe it's not what
you want. Yeah, especially.

Speaker 4 (14:40):
I was going to ask, like because you mentioned something
with naming. So if you have like a checkout button
on a store storefront page, generally you would have like
submit at the end of it or checkout and it
would just read the scremety would read check out button.
Are you saying that that's different, like that shouldn't be
what it's going on? Or is that right? Like I
wouldn't add a are you label to the button because

(15:02):
it will just say that it's a submit button that
you have.

Speaker 3 (15:06):
The native way, just having your button and putting submit
or check out between the tags of button is the
easiest and the right way. If you would add are
A label on your button and say don't touch it,
then then this are a label will override the contents
of the button and the screen readers will announce don't

(15:28):
touch it, submit no, because just one can win. So
there is a hierarchy of this. And if you don't
know the rules by which the name is established, you
might think that they will add towards it, but no,
they override it. So it's it's complicated. It's more to that.
It's really it's a topic in itself, and I really

(15:49):
love it because it has some mathematical beauty in it.
An example, if you if you have a picture like
an image, and you have out attribute are a label
and title why I don't know why, but you just
decided to put anything there to make sure that it works.
Then the title. Well, in this case title will behave

(16:15):
like a description and this will add to the accessible name.
Then this green reader will announce image are real label
and title. And if you remove all the rest but
leave just the title, then the title will be an
accessible name. So it's a very specific use case, but
I just want to demonstrate that you have to know

(16:37):
what are the rules, and the good thing is actually
sorry if I'm talking too much, I'm just so we.

Speaker 2 (16:43):
Want to hear you, tah.

Speaker 3 (16:46):
So you can look it up if you open your browser,
let's say Chrome, but it's actually the same in Firefox,
and so far it should be as well, but not
you won't get so much information on it in Chrome.
If you go to the Deaf tools and go to
the inspector and then to the tap accessibility, which is
quite hidden, you will see parts of the accessibility tree

(17:09):
and therefore every single element you will see this computed properties,
and there you will see all the possible ways of
giving an accessible name and description, and then the ones
that lost because there was something else which was most
more important, they will be strigging through and just one

(17:30):
winner will still stay there. So you have always had
the means to check what the screen readers will will announce.
You just have to know that.

Speaker 2 (17:40):
Okay, that's interesting. Yeah, that's it's like how CSS works,
where it's like, okay, well I have this style, but
it's overwritten by this other one, so I'm going to
cross it out for you. That makes sense, Okay, interesting.

Speaker 4 (17:52):
Yeah, accessibility is super hidden. You know, I didn't even
I mean I think I may have known it was there,
but it is literally in the spillover. So it's as
computed layout event listeners don property or don't break out
breakpoints properties, and then accessibility. Yeah, it's deep.

Speaker 2 (18:08):
I feel like, very on brand for modern development, right,
They're like accessibility, we'll just put it back here. We
need it, but like we're not going to focus on
it's like no, stop, Like it's so hard to put
it in later because like putting it in later is
the worst.

Speaker 4 (18:22):
I mean, putting in later is literally what she's talking about.
Most most companies that I've worked for, we'll go through
an ad area labels after the fact to cover up
the missus mistakes.

Speaker 2 (18:34):
Yeah, or like the first time I don't know I
started when I the project that I'm working on now.
The first time I listened to it on a screen reader.
I needed to click on a button that said life cycle,
and it said lifecycle, lificycle, licycle.

Speaker 6 (18:53):
Like labels all the way down, and so it was
not helpful, And you know, it's like, really, that's I
think the most eye opening thing is to just go
to your website.

Speaker 2 (19:04):
And actually try to use a screen reader with it,
because it's it's eye opening, it's ear opening.

Speaker 3 (19:12):
I guess that's true. That's my favorite part of the
workshops I'm giving. I usually starting exercise, just open up
Wikipedia and start the screen reader. And the first readback
that I get that they that many people that are
not users of screen readers think that they are annoying
because they're blobbing too much. They are starting to announce

(19:35):
everything without like without stopping. Of course that's not the
way users they day by day users of screen readers
use them. But that's actually what I want them to
to feel like I feel they I want them to
be confused. I want them to realize that's a hard
job to analyze the structure of website just by listening

(19:55):
to it. I wonder how much you have to memorize
when you you try to explore a website and then
I also tell you don't have to do this, like
you you definitely should start a screen reading and know
how it feels. But luckily, and there are some means
how to check some things even before you start a
screen screen reader, for example, looking to the accessibility tree,

(20:19):
and this is also something that you have with the browser,
also quite hidden, but that that could be first step.
And if the first step is smaller, like the barriers
are lower, I hope that's likelier to check because it's
you don't have to spin up screen reader any other
assistive technologies for that.

Speaker 2 (20:38):
And to be honest, I always forget how to use
my screen reader because it's different. It's not keyboard navigation.
That was like I initially thought, oh, it's just keyboard navigation.

Speaker 3 (20:48):
No it is not.

Speaker 2 (20:52):
And I can never remember the key combinations because I
don't use it every day. And so yeah, that's definitely
that's definitely an issue. So having those tools that are
will tell you what the screen reader is going to
do without having to necessarily start up your screen reader,

(21:12):
those are very helpful, very helpful tools. So so we
talked about aria labels. I think all tags are another
thing that people get wrong. I've recently so posting on
social media like blue sky or LinkedIn. Specifically, you can

(21:35):
add all tags to your images, which you should do
because your joke's not funny if nobody knows what it is, right,
So I always try to add those, But I also
uh started writing them things like image of blah blah blah,
and that's not what people want to say. So what
is your strategy for writing a good alt tag?

Speaker 4 (21:58):
Oh?

Speaker 3 (21:58):
If that's a very tough question. Still learning, I think,
well that's regards because yeah, not too much, not to
not too many. Well, if there is an image description,
a visible one closed to me to the image, I
try not to repeat it because they say the figure

(22:19):
or the image description. The visible one usually has more
content and more explanation on how to perceive this image
and why it is there, and the out attribute should
contain the information of this image. There are some certain
rules and I that was not I opener for me.
Web Accessibility Initiative published the guidlance for that and said, like,

(22:44):
image is not the same as an image. You have
functional images, you have decorative images, you have image maps,
you have what else informative images, et cetera. And only
the decorative ones don't need any out attribute. If this
is a functional image, then you have different things to consider.

(23:06):
What is a functional image First, it is, for example,
an icon in your button. If you have a button
which doesn't have any text but just the button for example,
a narrow for the navigation or the linked logo which
brings you to the homepage, then those images are have

(23:26):
like functions, have roles, specific functions. You're not supposed to
specify what is an image. In this case, you should
say what is the function? Meaning I won't say it
is a house with a roof, et cetera homepage and
with the error, I would say forward. That's what the

(23:48):
functional ones for. Informative ones, you could also describe the
graph with more information on that. That's one where you
also state what is an image? But it depends on
the time Apple damage Yeah to.

Speaker 2 (24:01):
See Yeah, definitely, I know. Like in social media, I
treat it like an easter egg, where like I try
to think about what the story is. I'm trying to
tell with my image that people are understanding because they
can see it, and then I try to tell that
story in the alt tag so that at least if

(24:24):
somebody can't see the image they can still get my
totally funny joke. So but yeah, it's it is a
I think it is a skill too. And it's also
you know, I think, oh, gosh, I want to describe everything,
but then you realize, like nobody cares, Like it doesn't

(24:45):
really matter. If you see the kids wearing animal pajamas
on a page that's like contact us, you know, like
that's a purely decorative image. Like I think understanding that distinction,
I think is hard because visually I'm like, oh, this
is important because it's cute, and it's like cute, isn't
it doesn't really matter, Like that's not gonna help somebody

(25:08):
by like contact you better, because it does just add
chatter when you're using a screen reader.

Speaker 3 (25:15):
And that what is a philosophical question. There are some
experts that say that that say that even those little
nice things uh yeah, contribute to the overall atmosphere of
your website, and that one might also add it. So
it's totally free to decide if this is decorative or not. Well,

(25:37):
it's a really tough decision.

Speaker 2 (25:39):
I think we need another tag right to say so
on your screen reader, you can say also read me
the cute ones like.

Speaker 3 (25:48):
Well, well, screen.

Speaker 2 (25:53):
Screen readers.

Speaker 3 (25:54):
I'm sorry, sorry, nope, you go ahead. I just wanted
to add that screen readers already have AI capabilities of
announcing images, and I find it super interesting. It won't
be the same as if a human would describe this image,
because AI is still not in the place of knowing
the context and the intent of the authors. And that's

(26:17):
still like the limitation, but it's a huge leap forward.

Speaker 2 (26:21):
I think interesting. I hadn't even thought about AI in
that space. That makes sense. I can also see how
AI would be like give the absolute wrong impression of
because sometimes I pick an image that I think goes
with the content, and somebody else might think, why is
that there? So I can only imagine AI adding a

(26:43):
little bit more to that confusion sometimes. But yeah, that's
a that's an interesting that is interesting. Are there any okay, so,
are there any tools?

Speaker 4 (26:56):
Oh, you know you've sent AI tools, like you were saying,
is there any other things? Like we were just go ahead,
go ahead.

Speaker 2 (27:04):
Everyone wants to know about AI, so please tell us
it's everyone's favorite topic.

Speaker 3 (27:14):
Well that was my question too. Regarding the future of
of of accessibility, how much AI will be going to
have I don't know, to be honest, like to start
with a philosophical question on what side should accessibility be fixed.
I'm showing the quote marks because it's simplified. I guess

(27:39):
you can fix it either on the browser browser level,
or or it's just on the level of this excessive technologies,
or on the web development level. So there are several parts.
And on the browser level you can already say let's
optimize the contrasts, for example, and you can add some

(28:05):
plugins whatever AI based that could optimize the solution. Partially,
it's not it will solve all the accessibility issues. Another
thing in the browser could be plug in something like
there is one. I don't know if it's good, So
it's not a personal recommendation. I just know happen to

(28:26):
know one name. It's called Monica, and that's a plug
in which integrates on the website, and then you can
interact with the website. And that's a new interaction mode
which helps you in case you have, for example, cognitive disabilities,
you can ask what's on the website, you don't have
to read it anymore. Or if there is a complex graph,
you can question this graph like I don't know how

(28:47):
many cell phones were sold in UK versus frants or whatever.
So you have a different interaction mode with information which
is either hard to perceive or hard to understand, or
it's hard to interact with because going further you might
also have gestion recognition, and well, voice recognition is already there,

(29:11):
so you kind of amplify this things. And then there
was a quite disputable article at the beginning of this year,
I think in May or April, written by Jacob Nilsen
UI and Generative UI. Well, the title was quite controversial,
accessibility has failed the new Well, the second part something

(29:36):
with the new way of generative UI, and then the
idea in general that different people need different UIs depending
on their needs, and with AI we could cater for
different needs. For example, for screen users, not all screen
the users are blind, but those who are blind and

(29:56):
using screen readers, they don't need any UI. So you
can give more performance solution by just skipping all the visuals,
just as an example, but it comes at a cost.

Speaker 2 (30:09):
Lara, no, I that's I. I just that was very
like the idea of just not even shipping a UI
is interesting. One of the criticisms I've seen on Blue
Sky lately is that there's this big push towards server
side rendered content, and it's not great for accessibility because

(30:32):
before the like it'll tell the browser that the window
is ready before it's actually accessible to the user or
something like that. And I thought that was really interesting
because that's definitely a space where we're thinking about performance,
but we're not necessarily thinking about performance across the board

(30:52):
for everybody. And so yeah, that's that's interesting. Uh, it's
a very because I mean, it's expense of the ship
the whole website. So if you can just ship that
not like ship that knowledge. Yeah, that's really interesting. So

(31:18):
what do you I don't even know what question to ask, Like,
I want to ask about the future of accessibility. I
want to talk about I want to talk more about
your book. Are there are there tools in Angular that
you've found that you like to use for accessibility?

Speaker 3 (31:37):
Well, I like Angler full of the fact that there
are some tools that are accessible by default and we're
using them just like that without realizing that this is
an accessibility feature. For example, the things that come with
the router giving our views titles. Because Angler is a
single page application and we have this problem that I

(32:00):
always say a way aligned to our users, pretending that
they're navigating between the pages. But we're just updating the
views in accordance to the URLs and it's still the
same document. And to make our illusion complete, we have
to provide different titles for different views, and by just
giving them in our roots titles and their roots route definition,

(32:24):
we already have it and the router takes care of it.
The same goes for are a current when active, which
is a directive which you can add to your navigation items,
and then the screen readers will be informed that this
is the current page where you are at. The same

(32:45):
goes for the link active. I always forgot the Yeah, exactly, Yeah,
those things are already there.

Speaker 2 (32:59):
Yeah yeah, and those are just directives there. You just
have to import them into your components from the router module.
And yeah, there's like they're so easy to use, but.

Speaker 4 (33:11):
It seems wrong.

Speaker 2 (33:15):
Are you sure?

Speaker 4 (33:18):
One thing I'm curious about in terms of angular specific
with that stuff, because you may know the answer to this.
There's a lot of ux versus dev being accessible arguments
in terms of anchor tags and buttons. Buttons being used
to navigate instead of causing triggers and being used to
perform a route action. Do you do you typically see

(33:39):
issues with that? Like is that normally a concern with
screen reader users or is it just something that US
dev's who want to be accessible made up.

Speaker 3 (33:51):
I'm not sure if I got the question, but let
me still try to answer it. Okay, Well, in regards
to the elements, I don't see any difference between Angler
and other web applications because you still can use all
the semantic htmail there and if you use it, then
your Angular application is accessible.

Speaker 4 (34:12):
In this sense, I think the I guess the actual
question would be a lot of a lot of us
want to go with using the anchor tag in those directives,
but oftentimes UX will say you want to use a
button to navigate to a different page, But it's like,
well you, I suppose he's a button for a routing,

(34:35):
but we have to do it anyway. So is that
an issue typically? Is that a real issue or a
cause of concern or is it not really a big issue.

Speaker 3 (34:44):
It's a good question. I think it gets better. It
used to be. Definitely it used to be an issue,
especially buttons and links. However, in a couple of years
ago at least in my projects. Our UIX team didn't
care about giving us prescribing us which element take, so
we still had this freedom and we could decide. And
now many you teams are already like sensitized. They are

(35:11):
they are aware of accessibility consequences of the decisions, and
and now I see less and less of this you
have to make a button here, and they are more
listening to me or to the team, to the developer team,
and they are also making more informed decisions, where I
still see some issues as the corporate design in terms

(35:32):
of colors, and there I found a very interesting pragmatic solution.
You can cheat a bit. And for example, in in Chrome, again,
if you go and select the color that's currently used,
you have the color picker, and then if the foreground
and background colors are specified, then Chrome calculates the accessibility

(35:58):
ratio for you. But it also gives you two lines
white lines on the color space, and if you're beneath
those lines, you're either double A compliant or triple A compliant.
And they also give you the suggestions what's the minimal
change that you can do so that you're compliant, and

(36:18):
oftentimes those changes are not even perceivable by the human eyes.
This is still more of this legal compliance because you
just make the minimum effort not to get sued. But
still it's a bit of it. It's a it's a
small improvement, and if you can cheat by just adjusting

(36:39):
the color by a couple of digits after the point,
then do it.

Speaker 2 (36:46):
Yeah. Yeah, And in my experience, this is where I'm
like a hope, no, no, the UX people are listening.
Sometimes they don't go back and check on in production.

Speaker 4 (36:59):
That is true.

Speaker 2 (37:02):
So there is that. So yeah, that's and that is
I think that is hard. That's probably one of the
biggest battles I've faced. Well, I take that back. The
biggest battle is convincing the people that are writing the
paychecks that the amount of time will spend improving accessibility

(37:22):
on our website is worth the amount of money it'll
cost for us to do that, and that's unfortunate. It's
I think that's probably been one of my biggest frustrations
with accessibility, is getting everybody on board that it matters.
And that's where now, if I have the opportunity to
write a green field project, I just never shut up

(37:44):
about it because it's so much easier to put it
in from the beginning than it is to try to
go back in and retrofit it, especially when you're building
component libraries or reusable components, and you know, we we
build a bunch of reusable components an Angular, but how
do you build a reusable component that's accessible? And if

(38:05):
you nail that, then everything that uses it should be
using an accessible component and they almost have to try
to break it, break it. So I would say that's
another piece of Angular that's very useful is that it
is easy to write shareable reusable components. And if those

(38:25):
teams that are building those parts no accessibility, they can
help lift up the overall accessibility of the website by
building good pieces of it.

Speaker 3 (38:38):
But absolutely and they also have CDK from Anglo Material,
which means you don't even have to use Anglo Material
components using the UI, but you still have all the
functionality for example, for the focused trap, or there's the
whole module on accessibility with the live announcer with at

(38:59):
least team manager, with a lot of things that come
out of the box. And I was at GP a
couple of weeks ago and Ninko Getcha was talking about
the road map of Angler for the upcoming years, and
on one slide he didn't mention it, but on one
slide in the bottom right corner, I saw accessibility primitives.

(39:24):
Oh and since he had it on his slides, I
talked to him and apparently there is some work upcoming.
Work Angler already has a best practice guide in the
official documentation on accessibility, There is already a code lab
on how to make Anglar apps more accessible. They already

(39:47):
have the CDK with Anglar module, and apparently there are
more primitives upcoming. So yeay nice.

Speaker 2 (39:55):
Yeah, and I know that we've had one of the
guests we had on I guess it was a couple
of years ago. Now, I totally like time is unreal
to me. But one of my former teammates, Sandy Barr,
wrote extensive like accessibility lint rules that she contributed back
to the Angular linting. Ah, yes, lint documentary. I'm like,

(40:19):
I don't know what you call it linter, but so yeah,
all of those things definitely help because I feel like
it's one of those things where if we it's definitely
it's like anything in code, if you don't make it easy,
people are gonna make it like then people don't do it.
So the easier we can make it, the better, the

(40:42):
better we can build our websites. So yeah, all right,
so I guess that talks a little bit then to
the future of accessibility, you know, getting new angular accessibility primitives,
all of that, the opportunity for AI tools. There's just

(41:07):
I think there's so many spaces. I feel like this
is a problem that we're only just starting to kind
of understand. It definitely follows that Dunn and Krueger line
where you start learning about you're like, okay, yeah, yeah,
I just need to make sure this thing works with
a screen reader. But then you find out like, okay, no,
sometimes it's that like somebody might not be able to

(41:30):
move their mouse very accurately, or you might have provided
an area that's too small to click or to press
on a phone, or you start to learn all these
other pieces of accessibility, and then you realize, okay, yeah,
there's this is a huge topic and there's just so
much for us to understand. And then in the end,

(41:54):
when we build good accessible websites, it makes the website
itself better, which I think is actually the way that
you sell it to your company is you kind of
just sneak the accessibility in and you yes, like I'm
going to structure this website better so that it's easier
for all users to use.

Speaker 3 (42:16):
And yeah, absolutely, But two things on that sneaking in
or smuggling. I really feel like a smuggler there where
because I just make some small changes which are within
my freedom of decision. Even by choosing the right element

(42:37):
or like the most semantic element, I already I'm already
contributing to the whole accessibility, even before someone had a
ticket for me and like a very expensive feature, et cetera.
So yeah, it's definitely starts with smaller things, because I
think accessibility can be overwhelming if you just switch on

(42:58):
all the linter, all the browser extensions, and then you
see hundreds of apps that all are read and then
you don't know where to start. And I always say, like,
just start small and try to improve it little by little,
and don't thrive for one now, because even if you

(43:20):
are twenty percent better, it's already twenty percent more people
that you can make happy or at least make allow
them for access and off to your website. And I
like the idea that, of course we have like the
official numbers of VHO regarding the people with disabilities, they're

(43:40):
like roughly sixteen percent. But if you if you count
all the friends and all the family members that have
to support because the websites are not accessible, because this
person cannot buy a ticket by himself or herself, then
you already like buy one billion I thing. So it's
it's it's a lot. If if you think how many

(44:02):
people are affected by those decisions, it's a different business number.
And regarding this darn Krueger effect, I really like the
idea that accessibility is the unknown unknown. Many of us
don't know what we don't know, and I think many
developers just start now by learning what to learn. But

(44:24):
it's a good thing, and I think we are now
more in a more aware space of making decisions and
developing the spects. Further, I found a document from Web
Accessibility Initiative and they said that this the image spec
is actually a mistake accessibility wise, because ideally an image

(44:45):
without out attribute shouldent render. The same goes for the
list item, which wouldn't The ordered or unordered list won't
render if you try to put a differ inside. That's
how the specs work. And thought about the semantics of that.
But for the image it was back then, I don't know, nineties.

Speaker 2 (45:07):
Like look at this when you put an image on
the page.

Speaker 3 (45:09):
Cool. Yeah, well, and then you can use images to
as a dividers and then images as spacers whatever. So
and it's not I'm not blaming anyone, it's just a
natural evolution. I'm saying that now we are able to
consider more people, more topics, and I just hope that

(45:30):
further specs be it HTMLCSS, javascrip, whatever, they will have
more accessibility in mind.

Speaker 2 (45:36):
And yeah, I love I love what you said there
when you were talking about being a smuggler, because we
can be smugglers now. As a developer, even if you're
a junior developer, brand new on your team, you have
a great deal of power actually because we have the ability,

(45:57):
we have the ability to write accessible code and nobody
has to know we're doing that, right, Like, it's not
like the product owner is going to come and look
at your pull request and say, oh, I don't think
you should use semantic HTML. I think that you should
just use all divs. So I think, as a if

(46:20):
you're a junior developer and you're trying to figure out
what role to fill on your team was. That was
actually one of my biggest tips to people early in
their career is figure out what roles are missing on
your team. And a lot of times it's accessibility expert
or even accessibility novice, like somebody that understands anything about accessibility,

(46:41):
and you can go out and read books like Maria's,
take courses. There's so many articles online. What's the I'm
trying to think of the website. I think it's the
the ALLY say. Oh no, that's not it. That's what's that.

(47:04):
There's the kag Gag. There's the CAAG guidelines. Oh, I'm
just trying to remember which.

Speaker 4 (47:14):
I the the A one one y one, but I
forget the full Uh I gotcha.

Speaker 3 (47:23):
There is a project I'm not sure if this one.

Speaker 4 (47:27):
Yeah, that's the ALLY project one.

Speaker 2 (47:32):
Yeah, thank you. I was like, I can't remember, but yeah,
there we go. That is I'm gonna put that line
in the show notes. That's a great place to start,
you know, if you don't know where to start, start
somewhere right, like, just pick it, start it, get going
on it, because every little piece that you learn is
like you said, it's if I can make it just

(47:55):
a little bit better, then that's great. And so yeah,
it's it's it's something that we can do as a developer.
It's the power that we have to use more inclusive language,
to write more accessible code, to understand that our users,

(48:16):
you know, have different backgrounds and different abilities. And yeah,
it's like we kind of get to be superheroes because
we get to shape the Internet that everybody else is using.
I think that's really important. And even if it's as
much as like like, let's just protect our most vital flow,
like I want to make sure that anyone that comes
to this website can buy my stuff, Like do that

(48:37):
start there?

Speaker 3 (48:38):
You know, my favorite statistics is four percent and this
is the number of disabilities that like four percent of
babies are born with disabilities and sixty nine percent of
disabilities come throughout the course of life, meaning that it
can happen to everyone. And though getting older is not

(49:01):
a disability, and an official like me, it's not officially disability.
Even a WEAP accessibility initiative has a post on it
comparing some accessibility features which are still relevant for the
elderly population, and at least in Europe, the population gets
older and older, so some things. What we're doing now,

(49:22):
we're doing for ourselves and the future as well.

Speaker 2 (49:25):
Yeah, it's true. Yeah, and because you never know what's
going to happen tomorrow. You know, we're never promised tomorrow,
and we never know what tomorrow is going to look like.
And I find that. I find that one of the
most frustrating things to do is like, oh, so now
you've got a disability and you've got to fill out

(49:45):
forms on your health insurance or you've got to fill
out forms with the government, and if those forms aren't accessible,
then you do. You have to get somebody to help you.
And I've definitely been that person that has to help
an elderly f only member accomplish a task. I know,
in the United States, in order to visit the there's

(50:06):
a national park called Mesa Verde. We were able to
go in twenty twenty. I had to get online practice
using their website so that when the tickets went on sale,
I was able to get the ticket purchased within ten
seconds to be able to go with my family. So
how is that fair to somebody who's using a screen

(50:26):
reader or who's you know, has trouble with mobility, and
those are the kind of things that like you don't
really think about until you find yourself literally practicing using
a website so that you can go fast enough to
actually get to do the thing that you want to
do with your family. And so yeah, it's like, yeah,
important topic. So I saw that I actually posted a link.

(50:50):
You gave a talk at NNGBE about accessibility adventures. So
do you have any other speaking engagements coming up?

Speaker 3 (51:01):
Yeah, I gotta be at ENNG Venice in March to Venice.
That's really nice. And this is it's a new conference
which is striving to be community driven as well, so
I'm really looking forward to this one.

Speaker 2 (51:16):
Yeah, this is the literally the first I've heard about it,
so that's really exciting. Europe has there's a lot of
angular conferences and meetups and just events happening. It feels
like all the time and I'm over here, like my
little heart is like, oh man.

Speaker 3 (51:35):
Well for that, the US has the biggest one, so
it's a balance off of it.

Speaker 4 (51:41):
I mean, but it is only in Salt Lake City,
not in Venice's.

Speaker 2 (51:47):
Utah is pretty cool if you get like if you
get to drive around Utah, but you know, it's as
far as accessibility goes. Uh, the United States is not
very accessible to people because the distance between play is
pretty great and so it's hard to get you know,
like me, me going to Venice from where I live

(52:08):
would probably be like driving to Minneapolis. I wouldn't even
get very far. But yeah, that's the nice thing about
Europe is that you can you know, you can get
on a train and be somewhere pretty quickly and connect
with a different community. So yeah, awesome. So that's great.

(52:30):
So we'll see you there and then your book. Where
will your book be available if we have German speaking
developers who would like to read your.

Speaker 3 (52:38):
Book, Well, it will be available on Amazon for sure,
but also Riley. So it's not published yet. I just
submitted it. Now it's being reviewed. It's like a big
pluricfest being reviewed like a huge feature. Right, have a
lot of comments that I have to resolve, So I
think am next year next nice.

Speaker 2 (53:02):
Yeah, we will look forward to your posts saying that
it's out and available, and then I will contact you
to read it to.

Speaker 4 (53:10):
Me in English, to get an audiobook of it in
English or something so we can make.

Speaker 2 (53:15):
Yon do it. We will have Yon translate it live
on the podcast or.

Speaker 4 (53:20):
We could do that.

Speaker 2 (53:21):
Yeah, he will love it.

Speaker 4 (53:23):
We'll do it. He's not here to argue against it.

Speaker 2 (53:25):
He's not here.

Speaker 3 (53:27):
Gon.

Speaker 2 (53:28):
If you don't agree, join the call and tell us no,
oh he didn't, So yeah, I guess this is what's
absolutely definitely happening. It's also great, though, to write that
there is content in German. Like we've talked about this
before on the show. It's very easy to take for
granted that English is my first language and I did

(53:49):
not have to learn a different language, and I don't
have to try to talk about technology in a different language.
Do you this is my question, do you find it
difficult to write technical content in German since a lot
of the talks that you give would be in English?

Speaker 3 (54:08):
Oh yes, oh yes, Well I was already complaining that
about that at some previous meetups and conferences. Well, first
of all, in German you have like a female male
or neutral gender for words, a meaning. If you have
a media query, you have to say if it's like
der di das meaning if it's a female media query.

(54:30):
And I have no clue because it's just media and
media query. So there are a lot of Germany terms
which I've never heard in German before, and they don't exist.
We had a nice discussion about your the European Accessibility Act.
What is this in German? Even in German articles they

(54:50):
all call it European Accessibility Act. So there are a
lot of things which are not translated by default, which
are just English. It's really hard. And and then another
thing is accessibility is part of inclusion in general, and
being inclusive means also respect respecting several well gender personalities, orientations,

(55:14):
et cetera. And in German there is no no general
word for female and male developers. You have to be specific,
and it's really hard to say like dear female male developers,
and then I'm excluding all the non binary. So it's
it's really hard to just buy the language you choose

(55:37):
to be inclusive. So yeah, that was a hard exercise,
how to how to phrase.

Speaker 2 (55:45):
It, how to say yeah, yeah, definitely, Yeah, that's something
as a I think that's one of my biggest fears
as a English native English speaker trying to speak something
like German or French, is that I'm going to misgender
the word I'm talking about and I'll just sound like
a toddler because I'm I called the garbage can a

(56:08):
girl when really it's a boy.

Speaker 3 (56:12):
Well, the meaning is what matters. The same with the
expression how do you call like users of screen readers,
how do you call people with disabilities? There are a
lot of ways to articulate it, and some of them
might be even offensive, Some are less offensive. Some are
allowed as a self identification. But I shouldn't call people

(56:33):
like this. So it was also a hard choice. And
I think this is international and universal human It's I
decided to say people with disabilities to put people on
the first place. That's like an word by word translation
from German. I don't know if it's it's the same
in English, but in German, especially if you if you

(56:54):
explain why you put it like this, then it's if
I explain my motives. I hope that that would be
something that many people could live with.

Speaker 2 (57:06):
So yeah, that was actually something I really struggled with
with my course. Was I was so worried I would
inadvertently say something offensive because the word for people with disabilities.
In my lifetime, how people are called has changed so much,
and I feel like every day you learned something, you're like, oh,

(57:29):
I did not realize that term was rooted in extreme racism.
I like the being grandfathered in. I didn't know in
the United States we use that to say, oh, if
you're how if this building is zoned for commercial instead
of residential, or residential instead of commercial, but if there's
been a commercial business there, it's grandfathered in so it

(57:52):
doesn't have to comply to zoning. Well, the origin of
that term was based in the extremely racist voting laws
that were initiated in the South after the Civil War,
where they would make it so they were like black
Americans were allowed to register to vote, but in order
to do so, they had to pass these like ridiculously

(58:16):
difficult tests. That tests like tests that it turns out
a lot of white Southerners also couldn't pass. And so
they made a new law that said, if your grandfather
was able to vote, then you are grandfathered in, and
therefore you don't have to take the test. And since
most black Americans grandparents were enslaved and they weren't able

(58:40):
to vote, they weren't grandfathered in, and so they were
subject to these extremely racist tests. I had no idea
that that term was rooted that way, and now that
I know that, I try not to use it. But
then it's yeah, so it's like little things like that,
You're like, oh boy, there's so many stumbling blocks out there.
So yeah, so now listeners, you've learned what's that?

Speaker 4 (59:02):
You know that one? I didn't know that one, and
I'm and I'm not grandfather that way.

Speaker 2 (59:11):
Exactly exactly, and then it's like and all it takes
is like, yeah, it's it's once you learn it, You're like, Okay,
I will I will try to remember that. I will
try not I will try to use a different phrase
to say that. But yeah, it's like there's so many
ways to just kind of not like, I'd rather care
about people and like you said, put people first. And

(59:32):
so yeah.

Speaker 3 (59:34):
The same post with the word disability is itself in German,
they're even too, the like the medical term and the
more broader turn of a barrier. And in this respect,
if we're divide, if we're designing and implementing for someone
to limited the barriers. In German, the word for accessibility

(59:56):
is actually barrier less, lacking barriers. Okay, removing barriers for
someone who tries to access my website, then I actually
don't care about the properties of this person. I'm caring
about the barriers, and then I started to talk about

(01:00:18):
not about people with disabilities, but in general, these users
of the screen reader. I don't care what brought you
to the screen reader. If you are using it, I
want you to be able to have a comfortable user
experience on the website. And in the in the positive sense,
i'd say, I don't care. What are the reasons?

Speaker 2 (01:00:41):
Yeah, yeah, I like, I do like that. I mean
sometimes I use screen reader just to read me text
on the screen because I I learned better if somebody
is reading it to me while I read along. So yeah,
it's just like there's there's so many different ways to
use the tools and so many barriers. I mean, maybe

(01:01:05):
you're just cooking dinner, and you know, like you need
to be able to get content easier while your hands
are occupied. You know, like just dumb, dumb things can
create a barrier that make it harder.

Speaker 4 (01:01:19):
To use a website.

Speaker 2 (01:01:20):
So so yeah, definitely, I know, and I guess the
best way to figure out. I mean, I I it's
hard to know what terms to use, and I just
try to listen. I actually follow quite a few people
who are disabled in the disabled community, people who write

(01:01:43):
and care about accessibility on social media so that I
can read their posts because I often like the service
side rendering thing I hadn't thought about, And now that
I'm kind of aware of that, I can kind of
think about that and maybe, as if the community is
more aware, maybe we can solve these problems. But like
you said, not knowing what you don't know? How do
you solve a problem that you don't realize as a problem.

(01:02:05):
So well, very cool, We are coming up here on time,
but I wanted to thank you again for joining us.
If a user, a user, I'm all on websites now
a listener, they're called listeners on podcasts. If a listener,
if a user of the podcast would like to reach

(01:02:28):
out to you, what's the best way to get in
touch with you.

Speaker 3 (01:02:32):
Well, I'm on blue Sky recently, I'm on Twitter still,
and I'm on LinkedIn, So I think those are the
three easiest channels to reach out. And I'm really glad
to answer all the questions. I'm really learning on by
the questions what are the real use cases? What is
the accessibility problem in this? So I'm really looking forward.

Speaker 2 (01:02:56):
Yeah, I love that. So, yeah, reach out to Marie
if you have questions. If you are in Venice or
anywhere near Venice, it sounds like, uh, you should definitely
check out Energy Venice. Do you know?

Speaker 7 (01:03:10):
I assume the tickets are on sale for that, but
if they have they are, yeah, so get your get
your tickets, because otherwise you're gonna be on social media
watching all the posts about it, being like me at
home bank thinking oh darn, I weren't there.

Speaker 4 (01:03:30):
Don't let Maria plug anything. I guess her plug is
her book.

Speaker 3 (01:03:33):
But oh yeah, yeah.

Speaker 2 (01:03:34):
Is there anything else you'd like to recommend to our users,
whether accessibility related or otherwise.

Speaker 3 (01:03:43):
Maybe it's just a recommendation and it's quite a long link,
and usually I'd love to refer to it, but I
rarely have the chance to provide the link. The German
government created guidelines case by case basis on the case
by case basis for particular elements, so you can look

(01:04:03):
it up. If you are developing I am implementing a table,
what are all the we success criteria which apply to
the table. If you're implementing button, what are all the criteria?
Usually we just concentrate on the specific criteria. For example,
I don't know for the forms it's era identification, but

(01:04:24):
they go Germany right all the start type to go
and say no, you have to remember the color, you
have to remember the keyboard navigation, et cetera. So it's
a really really nice, very practical web deef oriented guidelines
which I'd like to recommend if you are just starting
with accessibility.

Speaker 2 (01:04:43):
Nice and I'll have you just give us that link
and we'll put it in the show notes.

Speaker 3 (01:04:48):
So absolutely excellent.

Speaker 2 (01:04:50):
Yeah, I will check that out myself because I Yeah,
I feel like accessibility is one of those things where
every day I'm like, I just learned something. I again,
I learned something new, Like I actually hadn't used the
accessibility tab because I've never found it.

Speaker 4 (01:05:06):
Yeah, that's that was new to me. I feel so
silly that I didn't know that. I know, I can
write an article about it. I'm sure most people don't
know about it.

Speaker 2 (01:05:15):
Feel like I'm feeling this like burning need to go
update my course now.

Speaker 6 (01:05:20):
So so yeah, every day you learn something new and
that's a good thing.

Speaker 2 (01:05:28):
Maria, thank you so much for joining us. I hope
you do find some time to rest over the holidays
that are coming up. It sounds like you've been very
busy this year and you definitely deserve it so and
I look forward to just the massive amounts of accolades
you'll receive for the book that you've written. And I

(01:05:51):
am excited to uh hopefully see you again in Germany
in twenty twenty five.

Speaker 3 (01:05:56):
So thank you, thank you for having me and out
of the chat was really pleasure.

Speaker 2 (01:06:03):
Definitely.

Speaker 8 (01:06:07):
Hey, this is Prestoma. I'm one of the NNGI Champions writers.
In our daily battle to crush out code, we run
into problems and sometimes those problems aren't easily solved. NGCOMF
broadcasts articles and tutorials from NNGIE champions like myself that
help make other developers' lives just a little bit easier.
To access these articles, visit Medium, dot com, forward Slash,
n GCOMMP.

Speaker 1 (01:06:28):
Thank you for listening to the Angular Plus show in
Chicoff podcast. We'd like to thank our sponsors, the NGCOMF
organizers Joe Eames and Aaron Frost, our producer Gene Bourne,
and our podcast editor and engineer Patrick Kay's. You can
find him at spoonful Ofmedia dot com.