00:00 Hello everybody, I'm Kent C. Dodds and I'm joined by my friend Katerina. How are you, Katerina? I'm doing great. I'm so excited to be here, Kent. I'm excited to have you. So I met you in person this year, actually, at React Conf. And that was a pleasure to meet you there. It was a really awesome conference.

00:19 You were a speaker there, which was really awesome, speaking about accessibility. And yeah, I would love for folks to get to know you a little bit. So could you give us an intro to yourself? Yeah. So I'm Katerina. I'm Ukrainian. I live in Estonia.

00:38 I've been a web developer for over 10 years already. And most of this time I've been mostly focused on the front end. And I've been working with React since, I think, one of the earliest releases.

00:53 So I've seen all of the stages of the evolution of React APIs and ecosystem. I also founded React Kyiv community back in Ukraine. I've been active in the community field.

01:08 And in the past few years I've been growing more passionate about accessibility and design systems. I'm super excited to chat to you, Kent, and meet everybody who is watching this.

01:19 Yeah, absolutely. I'm glad to have you on with all the awesome things that you've been doing for your own community and to spotlight that. So thank you for what you've done.

01:32 And I was actually thinking, you mentioned that you've been a software developer for 10 years. I graduated from Brigham Young University 10 years ago as well. So officially a software developer for 10 years as well.

01:48 I guess I did a little bit before, but officially, like a professional. And I actually just had a dream last night that I was sitting in a room. It was a workshop type of setting. There were a bunch of people there. And the subject came up, like how long we've been in the industry.

02:06 And I was like, how many of you have been in software for two years? Two or more years, lots of hands went up. And then five years, seven years, and everybody's hands went down. I was like, oh my gosh, I've been in this industry longer than all of these people.

02:22 And I don't know, it just dawned on me that I'm starting to transition from being one of the younger ones in the room to one of the older ones in the room in lots of settings. And it's odd. Yeah, I share that. It doesn't feel that way, right?

02:40 Yeah, also, I still remember times where I was usually kind of like the youngest person in the team. And yeah, not anymore. Yeah. No, I know there are probably people who've been in the industry for like 30 years listening to this or like 20 years. And they're like, oh, you're still young.

02:58 But like, let us have this. Well, Katerina, being one of the early users of React probably gives you a really interesting perspective with all of the changes that have been coming over the years. What's it been like to evolve and adapt your applications and your own skill set

03:18 as React has evolved over the last like 11 years now? Yeah, I know it's definitely been a journey. I think I really like where React is going and moving and a little bit more,

03:34 especially with React 19 currently towards like creating a lot of utilities and tools to build kind of like delightful and usable user interfaces. I think that's great. I'll have some APIs involved to kind of become more complicated

03:51 and then towards like more simpler things. I think it's definitely getting both easier and harder to get into. Because I remember when there was just a bunch of APIs and there was just like two main libraries for state management.

04:08 It did still feel hard because it was really different from maybe a lot of the other things that people used at the time. But currently, the ecosystem is so vast that you can kind of choose your path. But then there's also so much depth in whatever, like whatever even like framework

04:26 or set of libraries that you choose. I find it personally fascinating and I'm really excited where it goes forward. Yeah, it's interesting how over time software seems to like it starts with a pretty niche use case

04:44 and it's pretty simple and then it needs to handle more use cases. And so it broadens, the API service area can broaden. And like it shows the, I don't know, that like it hasn't thought through everything I guess. The React team does a pretty good job of thinking things through.

05:03 But like there are some examples of like the context API wasn't like totally great at the start. And it took a couple of years. I mean it has, right. Yeah, yeah, exactly. Stuff like that. So like those sorts of things, they kind of show. And then over time like you can kind of narrow it down to fewer primitives

05:22 and hopefully reduce API service area a little bit. Though I suppose with React 19 we are getting a lot more API service area. But we're exchanging some of that because those use cases are important like forms

05:41 and optimistic UI and things like that. Like those are important things for applications. And so if React doesn't have it, then the framework you're using will. And so now you're like splitting the ecosystem. And so even though the React API service area may be growing a little bit,

05:59 it's reducing the surface area of the frameworks that are built around it, which I think is a good thing. It's interesting to see the evolution of things. And also like quite interesting how React has managed to carry people along with it even as it has evolved.

06:16 Like the people who started right at the beginning, I was in like late 2015 is when I started using React. And so for us who started pretty early, we had this object that we created to configure a component and we had classes. Create, create class.

06:35 Yeah, yeah. And then functional components came in. Everybody, oh, yes, let's now move everything to the functional components and then the hooks. And there's like different eras of React, it feels like. Yeah, yeah. And it's interesting that like for, I don't know.

06:51 Like I just think it's fascinating that people have stuck with React even like when those types of changes are happening. Lots of times I find that the things that I'm drawn to seem to involve just like the way that I like to build software.

07:09 And I guess it turns out that the specific APIs or the syntax that you use isn't the core part of what makes React, React and what makes it so pleasant to work with. What do you think is, like what does make React, React?

07:27 Well, like what do you like about React? I personally like that it is quite, it's not like, React itself doesn't feel kind of convoluted.

07:46 Like it doesn't feel like, even though like, for example, you mentioned surface area has increased, it's not, it doesn't feel like it's like the whole new kind of like language. It's still built with JavaScript. You can still understand things if you understand JavaScript.

08:02 And I like that some things are kind of like getting simpler and the fact that you kind of learn React and also that it is so widespread right now that knowing React is kind of like really opens you like doors to so many different things like mobile development with React Native

08:20 or any other like for TVs and whatnot. You can build web applications and both with like Next.js or Remix, not Remix anymore, right? Kind of like more of that, but there's just so, so, so much.

08:39 It feels like that you, that it kind of unlocks for you. At the same time, while React itself maintains its kind of like core idea throughout this whole time. Yeah, like the composition. I think like if I had to sum up what a single thing

08:58 or React in a single word, it would be composition because like it just pushes that everywhere it goes. Yeah, and I love how it kind of simplified the development of applications, especially larger applications, right?

09:14 Because it used to be that if you have something that is more or less large and has a lot of functionality, like it would have been anyways like hard to some extent to reason about the code or like test it or even develop like new functionality. But the composition of components and something that kind of existed before,

09:32 but I think React kind of surfaced it so much better and it became mainstream. It helped to make building larger applications so much kind of like easier, where you can just build those kind of building blocks

09:50 that can be used in different scenarios when you think about their APIs and so on, yeah. Yeah, it really is special, something special for sure. So, Katharina, you also are very interested in accessibility

10:08 and something that I remember hearing quite a bit back in the day with people who were kind of against React is that React is not a very accessible framework, which I don't know made a whole lot of sense to me,

10:24 except like if I remember right when they introduced React to the world, the snippet that they had of JSX was a div with an onclick. So, maybe that's why like people got that impression.

10:39 But what's been your experience working with React and accessibility? Yeah, I think that's, I guess there's sometimes that impression that when something goes a little bit further from, let's say, the kind of HTML, let's say, then it is less accessible.

10:56 But I think the way that React kind of gives you power to implement accessible or non-accessible experiences, so it's a little bit more of a choice, but it needs to be kind of a conscious choice, right, of how do you implement, let's say, you have a component with a button,

11:14 you wouldn't put maybe div with an onclick, but you would use an actual button, right? But now also with some APIs like use ID and so on, accessibility kind of becomes a little bit more of a part of the just normal way of building things.

11:31 Because I remember in the past, it was kind of normal to build like UIs with divs and things. There wasn't really a lot of information. I love that kind of accessible UI has now become a little bit more mainstream. You even look through React docs,

11:48 and everywhere where it is needed is mentioned how to make some of the things accessible, different libraries in the React ecosystem tailored towards accessibility, which I think is great. But I think it still needs to be a choice.

12:07 I think with time, it became much easier. We have so many tools right now and so many techniques that exist that building accessible applications became, I feel, easier. Because all the knowledge and tooling is really available. But you still need to choose to do that. Yeah, that makes a lot of sense.

12:30 And it makes me think that you can build a really inaccessible API or web application with raw HTML as well. Yeah. Nothing about React that makes it less accessible. I would say maybe React makes it easier to make something not accessible.

12:48 Maybe, I suppose. Yeah, I'm not sure I'm totally sold on that thought that I just shared. But yeah, like you said, use ID. There are now things that make it so that we can make reusable components that are also accessible. Because before, use ID was actually kind of difficult to make a component. It's kind of a pain, yeah.

13:11 Yeah. You either create your own little kind of tools to make sure that all your IDs are unique. And IDs are used a lot in accessibility, right? So you often connect your inputs to your little error, like text with an ID and so on. They're used so much.

13:29 And especially with the components, in a way that you want to be able to reuse it several times on the page, it used to be a bit of a point. You either always need to come up with something and then use some kind of things and define them manually, or you would create your own utilities.

13:46 And I think right now, becoming part of the React core API is great. I think it also pushes more people to learn about accessibility, like what it is for, which is amazing. Yeah, well, and the web platform itself is evolving as well to make it easier to build accessible things.

14:04 I cannot wait until the web platform has something for a combo box. Yeah, everybody's waiting. Combo boxes, yeah. Yeah, it is a hard component to get right. Yeah, in fact, even I believe Radix still does not have a combo box.

14:21 Yeah, they don't, yeah. It's not easy. I've written a couple in my day, and getting that to be an accessible experience for screen reader users and keyboard-only users and everything, and mobile as well, it is a tough one.

14:41 But the web platform is evolving, and eventually they'll come up with a combo box, but now we have drop-downs that are fully stylable. Pop-overs. Yeah. So things are getting better, and it's an exciting future.

14:56 I think that I at least am pretty optimistic about the future. Yeah, me too. I think it's overall, I love how a lot of things, especially like CSS, like lately, and generally a lot of things in the ecosystem are evolving and where the web is moving.

15:14 It's, yeah, amazing to see it, and I'm so excited for more of the new stuff that's coming out to become part of the day-to-day development and be more supported in the browsers. Yeah, absolutely.

15:33 Like with component libraries that we're already building on top of, we get a new version of the component library that's now built on top of these primitives from the web. That would be really, really cool. We get these upgraded experiences for free. Yeah.

15:49 So another thing that I know that you're interested in as far as accessibility is concerned is testing those accessible interfaces. This has always been a pretty challenging thing because I don't know, like,

16:06 you cannot get 100% code coverage on accessibility. Our tools aren't quite good enough to tell us, yes, your application is accessible to everybody. But yeah, what success have you had in testing accessibility?

16:25 Yeah, I think it is, I guess, a crucial part of the development. How do you know what you build is actually accessible? Even if you follow maybe some rules or guidelines that exist, how do you know that it is actually accessible? And as you mentioned, automated tools, and there are quite a few, right?

16:44 There's different automated checkers and auditing tools. They're quite limited in what they actually can catch. They only can catch what can be caught in an automated way. So the way that I approach it,

17:03 usually whatever I build is a component or a page. I try to first navigate it, let's say, using the keyboard with just tabs, make sure that focus doesn't disappear somewhere. Sometimes you have some content that is, let's say, off the page or hidden, but it actually stays within the focus order,

17:20 which creates a really confusing experience. So I think that that check on its own, and if, let's say, you have an application, and you want to, oh, I want to make this more accessible, I think this test on its own can already surface some of the issues. Make sure that whatever, like, you tab, you see visual, like, focus indication,

17:39 and that everything that is focusable is actually interactive. And then something that I also usually try to do is, and I really recommend all, like, web developers familiarize with, like, some version of a screen reader, like on the Mac. We have VoiceOver, which is really easy to trigger.

17:58 It's, like, built in into the operating system. And testing something, I just, I think screen reader is really, is quite maybe overwhelming sometimes. Like, when people just start using it, you just, you trigger it and you don't know how to exit. It is, like, it can be a confusing experience.

18:17 Yeah. But there's actually quite, I really like, there's this series on YouTube called Ally Casts from Chrome Team by Rob Dodson. And there they have the guides for each of the screen readers. They're really short, like, five to six minutes,

18:36 but it gives you, like, all the main tips. So whatever is your screen reader of choice, if you're using Mac, then it's VoiceOver. There's, like, a bunch available on Windows. And then kind of just kind of learning a little bit how to use it and then just trying to use whatever you've built with the screen reader,

18:53 would really be really, I think, enlightening for a lot of folks. Then, of course, like, looking at the general kind of semantic HTML structure, because assistive technology doesn't interact with the page that kind of, in the way that you interact with it.

19:12 It works with the accessibility tree. And in order to understand which element is supposed to do what, it uses semantic information, right? This is a button. It has, like, a semantic role and so on. So I think ensuring proper semantic structure is important. Something that I really like to do, by the way, is, like,

19:31 I think testing library kind of revolutionized a little bit testing in the accessibility sense, because the way that there is, like, a lot of selectors that push you to create, like, to query elements by their semantic roles, I think that's really good.

19:49 Maybe a starting point for all people. You write automated tests, try not to use, like, let's say, get by test ID, unless it is absolutely needed, and try to find, like, semantically test it. And then you can learn, okay, maybe this is actually not accessible, and you can find a way to remove,

20:06 improve semantic structure of the whatever component or a page. Yeah. And, of course, there is also color and contrast, but I feel we talk about it already a lot. But there's a lot of automated tools for that, like different browser extensions and so on,

20:22 to find what is, even, like, it is built inside Chrome DevTools. You can just, what is it, inspect the element and see the contrast ratio. So those are just some things that come to mind in terms of testing. Yeah.

20:41 I see, because I'm not an assistive technology user, I don't see issues with, like, forms not being labeled properly, or, like, form elements being labeled properly or whatever. But I do find color contrast issues being, like, the biggest thing that affects me personally.

21:01 And that is super annoying. So, yes, people, like, definitely, like, I have pretty good eyes, and so I can typically, like, figure it out. Or, like, I'll select the text so it has the background in blue so I can read it.

21:15 But I see stuff like that, and I'm like, man, this would be really hard if I had poorly typed. Yeah. So you've got to have some empathy. Yeah. Yeah, and I think it's also, as far as I remember, there's also different types of disabilities, right? There is permanent disability, but there is also situational disabilities.

21:34 Like, for example, you're, let's say, carrying heavy bags, right, and you would appreciate if the doors were automated, right, in a way that you cannot perform that action. And the same with using UI. Let's say you have, like, a really bright screen, or maybe you're just really tired, and you just strained your eyes or in a dark room.

21:54 So a lot of those things can generally affect the perception, and when you build interfaces with accessibility in mind, it's not only for people with disabilities, but it helps to make it more usable for everybody. Mm-hmm.

22:12 Yeah, it's interesting, like, thinking about dark mode and light mode. Those are actually accessibility features. Yeah. Like, I know lots of us, like, as developers, we're, you know, working in a cave, and we like dark mode. But, like, there are actually lots of developers who work in light mode. I work in light mode most of the time. I change. Like, if it's daytime, it's light mode.

22:31 But, like, my friend Ryan Florence, he has, like, a visual thing that makes it very difficult for him to read text on a dark background. And so, yeah, light mode, dark mode, it's not just, like, a fad or something, a thing to do to be cool. It actually is a thing to do to, well, yeah, to be cool.

22:51 Yeah. To people who need that. And also, like, when you start thinking about accessibility just being, like, the ability for people to access your thing, then you start considering things like performance and bundle size and, like, image size and different things,

23:10 because we want to think about people who don't have unlimited bandwidth or have slower, lower-end devices and things. And so accessibility is actually a pretty broad topic. Yeah. Yeah. I mean, it is also considered part of the overall overarching theme of inclusive design.

23:29 And there's, yeah, there's definitely a lot. There's also, like, the different translation features. Like, even if, for example, your application doesn't support, let's say, different languages, a lot of people use – I, for example, I live in Estonia, but I'm still learning Estonian.

23:47 I have to use browser's translation feature. And so it's really frustrating when certain parts of the webpage don't translate. So, you know, there's just so much in terms of, like, lower- and higher-end devices and different things in browser built-in features that people use.

24:05 Even, like, motion preferences, right? Sometimes, like, we all talk about implementing really nice UIs, and there's, like, a lot of animations, but it can make some people feel sick. So, you know, respecting some of those motion preferences is, yeah, also important.

24:22 There's so much right now also that is available in the web platform to help us respect people's preferences, like similarly to the dark or light theme. A lot of others for, like, high contrast and motion preferences and so on.

24:37 Yeah, well, and thanks to CSS for evolving as well and making lots of those sorts of things a lot easier to do. Media queries for light and dark mode preference are really helpful for – if you don't want to bother with, like, a light-dark mode preference switcher or something,

24:55 you can at least just have it automatic based on their system preference, which is quite nice. Yeah, so there's a lot to do with accessibility. How do you learn about, like, maybe somebody is coding along, they don't even realize that what they're building is inaccessible.

25:14 Like, how does one gain knowledge on and, like, change their brain to start thinking in a more empathetic way? That's a really good question. I think something that really helps, and especially if you're working, let's say, on consumer products

25:30 and you have, like, a wide, let's say, range of users, it is – there's a high chance that some of your customers are people with disabilities. And finding them, for example, and doing some kind of user interviews with them, like, using your product is actually super enlightening.

25:49 It's something that we do at Buffer, for example, with one of our customers, and it's really helped a lot of engineers to understand those issues on a deeper level. And as you said, kind of build the empathy. There's also, like, a bunch of general steps you can go through, you know,

26:07 like to ensure whatever you're building is accessible, right, can be. But if you're, I guess, not feeling, like, empathetic to try that, I think that probably could be the first thing to start with. And, yeah, there's also a bunch of different really good interviews or videos online

26:27 with people who use certain, like, different types of assistive technology, which I think can also help. And some nice things to do is sometimes also do no-mouse day, you know, like not use a mouse at all, for example, and try to do everything with a keyboard,

26:47 which also can help uncover some of the issues. Doing that can also make you more productive. Yeah, actually learn more about shortcuts, you know, and, yeah, indeed. Yeah, and actually, now you're making me think I should add some shortcuts to my own personal website.

27:07 Like, tabbing around is cool, but, like, having some shortcuts would be kind of neat. Yeah, you know, to navigate especially to, like, certain parts of the page, to, like, navigation, let's say, and so on. Or, like, if you have, like, some play, pause players, like some kind of global shortcuts, something like that. Yeah, yeah.

27:26 Yeah. Well, cool. Like, Katarina, is there anything that you were really hoping we would talk about in this chat that we haven't had a chance to bring up yet? Yeah, I guess we could maybe talk a little bit about the design systems

27:45 or, like, kind of different, even, like, component libraries in a way. I find that it is a topic that is kind of connected to accessibility because if you, let's say, build your own component library by, first of all,

28:00 designing APIs with those components in a way that would push whoever is consuming it to implement things in an accessible way, but also by implementing the building blocks themselves accessibly, you can drastically boost the accessibility of the whole application. Mm-hmm.

28:18 This is one of the things I really appreciate about the size of the React ecosystem as well. Yeah. Because it's just there are so many people working on this problem here,

28:29 and because the web platform isn't quite there on its ability to deliver customizable components that are accessible by default, we need to fall back on what the community has built.

28:43 And if you join up with another community or another framework that isn't quite as popular, your options are very limited there. And so one of the best features of React is the size of the ecosystem.

28:58 And we have Radix is a really great one, React Aria, or Spectrum from Adobe, and actually there are a couple that I'm forgetting. What was it called? Yeah, there are a couple others that I'm thinking of. Yeah, yeah.

29:16 There's a bunch of headless ones. But I think React Aria and Radix are the most popular and have a wider range of different components. But generally you don't need to commit to one. So, for example, if something is not implemented in one, it might be implemented in the other.

29:34 There's a lot of standalone components that are also not part of an existing library, but can also help you to provide some kind of headless primitives to build out whatever UI you need. I really love this move towards more of a kind of like headless component libraries

29:53 that you can build out your own components with. They don't limit you. You don't need to go and override. And then every time the new major version comes up, you need to always go and change the styles because something got changed. So I really like the move towards it.

30:10 And it makes implementing custom components a lot easier. And with things like ShardCM, for example, it is even next level easier. Yeah. Which is great. It means that there will be more applications built with more accessible primitives. Yeah, absolutely.

30:28 And then hopefully one day those primitives will be able to adopt some of the primitives that the platform has created and make it even more accessible. Yeah, absolutely. Well, Katharina, it was awesome chatting with you.

30:44 What's the best way for people to keep up with the things that you're doing? Oh, I'm not very active on social media. But I have a Twitter, I guess, X account.

30:59 And anybody who wanted could also reach out to me on LinkedIn. I'm happy to chat about accessibility or design system things. And so, yeah. Sounds great. That'll be awesome. Thank you so much.

31:16 And thanks for all that you do in your community as well. And we'll look forward to the next time we see each other at another conference. Thank you, Kent. It is amazing the amount of things that you do.

31:30 And I think the Epic React course is going to be really transformative for a whole new generation of engineers. So I'm really grateful to be a small part of it. Well, that's so nice of you.

31:50 Thank you. And thanks, everybody, for watching. We'll see you all in the future.