Thanks to Martin Feineis for the outro music!
Tessa and Murphy talk about accessibility, why it's important, and what Tessa is doing with her Elm libraries (accessible-html) to help people write accessible HTML more easily.
- (00:04:32) bridge-troll
- (00:04:46) elm-bridge twitter account @elmlangbridge
- (00:11:12) tesk9/accessible-html
- (00:11:54) Web Accessibility Initiative
- (00:14:59) Tessa's elm-conf talk
- (00:26:01) accessible-html-with-css
- (00:27:29) Black Odyssey
- (00:27:35) The Penelopiad
- (00:27:39) Lavinia
Automated transcription: 00:00:00 Hello, everybody and welcome to LA town episode thirty. Today we're going to be talking about accessibility with Tessa. Kelly. You wanna say, hi, Taza high. Excellent. We'll get back to test and the second right after I think our sponsors day one, which is the company I work for a beautiful journaling and life archiving map for MAC, and I O S and Android as well. And we're always working on web technologies there to keep your eye out for future possibilities. And I love day one and I'm really grateful to. They went for making it possible for me to do this recording while I'm at work. Daily drip is our next sponsor which makes keeping up to date on programming skills. Easy daily drip will save you a ton of time by providing quality lessons and resources for you right off the bat. Some of the topics that eligib- offers include elixir crystal react native, go HTML, and of course elm all these super cool hot languages, especially crystals brand new to learn faster and more efficiently with daily drip and be a better developer every weekday. You'll get a short video about five minutes or so delivered you inbox. You can sign up today daily drip dot com. And use the coupon code elm town, all lower case. All one word L town dash two zero one eight for the year. Two thousand eighteen and you'll get a fourteen day free trial last but not least on our sponsors list. We wanna send a big. Thank you to Ellie elm. Live editor for sponsoring the bandwidth for this podcast. Elliot's a great way to get some small examples in elm up and running on the web right away. It's a good playground, good place to experiment and a great place to put up examples. Reproducible examples if you're looking for help on slack or on the elm forms. Fantastic. Thank you to Ellie. Now. I have a special announcement to make. I am organizing co organizing in event called the framework summit in Park City, Utah on October second. And third, this is a place where representatives of different frameworks will come together and in a non-toxic, a constructive kind and happy way help attend.
00:02:00 Fees to learn about the different aspects of different fronted frameworks and learn helped them to make educated decisions as to what's going to be best for their team. So this is not going to be a framework Throwdown where people are going to go to argue and and be derivative of one another. Rather it's going to be a constructive environment where people attendees can go. There companies can send them or they can go individually to come and learn more about the different options that are available in different frameworks and Y one would be used and not another at cetera and kinda choose what's best for them. So that's gonna be on October. Second. Third, hopefully Richard Feldman will be there. I say, hopefully because you never know what the future holds, but he is on the speaker list. So I'm feel comfortable saying that he'll be they're talking about Elman we all love the way Richard talks and guess what you could be there too because the CF is open the call for papers. So if you are interested in attending and listening or speaking, go ahead and head over to framework summit dot com. All one word and check it out. Let me know what you think. But it would be fun to see you here in Park City in you. Utah on October second. Third, I don't live in Park City, but it's close to me anyway who that was a lot, but we're going to wrap it up with a big, thank you to Fergus Meikeljohn who produced this episode. Thank you so much. Really appreciate your contributions and your help. Now to the real reason we're here Tessa. Let's talk. Let's talk a bit about accessibility, but first one since you haven't been on a few episodes, why don't you give us a recap, introduce yourself a little bit and let people know who you are.
00:03:28 All right. Hello, I, I'm Tessa. I'm an engineer at no red ink right now. I'm a team lead and we're working on expanding and modifying an improving the writing product that we offer for helping teachers teach students to improve their writing in express their ideas. And I'm also the creator maintain our of the accessible HTML library. And I'm often involved in umbrage which has a curriculum available for anyone to Peru's on get. Have that focuses on running events to help get and represented people into the community. Very cool. So there's so there's some free training material online, but mostly it's about organizing events to go. And I mean, who who would be interested in these events who's kind of encouraged to come in? How would they find out more about it? Yeah. So to find out more go to bridge troll. 'cause Hombre is part of the rails bridge umbrella organization. So our events are all posted on ritual or you can follow the. Ondrej account on Twitter in terms of who were trying to reach when people of color creepy fall. Just people who are generally not particularly while represented in the elm language community. At this point right now, we only have rents in San Francisco, but the curriculum in the materials are online. So if people want to start additional events, there will come to brilliant. All right. Well, let's let's talk a little bit about accessibility. First thing that's just a word that not everyone knows what it means. So what are we talking about Tessa? When we mentioned the word exists ability.
00:05:28 Yeah. So I think fundamentally we're talking about, you can see the information and you can use the information you can interact with the site. So for for many people at a website, being accessible means that they can use their mouse and click on things and. Listen to any sound or watching videos or see notifications. But that's not true. That's not the primary mode of interaction for everybody. So like accessibility is about making sure that everybody actually can interacted news of application. So what are some specific examples of someone who would have a hard time using a normal website that's designed for clicking and pointing, etc. Like you said. So if you're someone who has trouble using a touch pad, maybe because of tremors of some kind or a mouse, you might prefer to navigate using your keyboard. So you have like discreet actions to to navigate across the page. And so for that particular user, it's very, very important that they can see like focus styling. So when they're selecting their, they have focused on element like a button. They see the little blue outlined deal of that you can stop at hover, you want song is apparent. They're able to to use enter or space. Or arrow key to interact with that element. For other users. Maybe they are not able to distinguish colors with low color contrast or aren't able to differentiate between reading green enough actually quite common that people aren't able to make those distinctions. So for for them, it would be more important that your if if you're presenting chart were information that's distinguished color, that there's either other color options that are higher contrast or uses textures like.
00:07:41 Visual textures to distinguish different different parents. Yeah, that's the word. Thank you. Yeah. What's the word for texture that you just look at. You have to feel with your fingers right? Yeah, we're not. We're not there yet as far as computer screens. That's right. So there's, there's just there's a lot of different use cases that. A developer has to keep in mind when trying to to design like alternative user flows on the news, the big world of like, how does your web page sound for those who don't even see right? Who can't see Keller's or graphics or shapes at all? How how does the information get into their minds to absolutely. That's a lot of work. I mean that that's a huge task because you're not just aiming for one group of people when I say that I'm referring to exit -bility in general, because really what you want is you want the site to be accessible to everyone including people who have the ability to use a mouse, but also those who don't. And those who can't see. I mean in general, you're just trying to make it so that the information you're presenting and the tools you're presenting can be used by many different people with many different challenges. Right? So I mean with such a huge task in front of as like, how do we even start to chip away at this. Yeah. Well, for one thing, I think it's kind of a familiar task as front end developers for people who do mobile I or who are supporting, really varied browsers. You're already part of the way there in terms of supporting different user agents like you're not just supporting, hopefully a single version of chrome. You've got all of these even browsers in all of these different modes of interaction ready you. You're already dealing with detriments and.
00:09:46 Maybe scroll events are are different. So I think that the like from my perspective, it's just keeping in mind these edit user segments as well, but it's already a fairly a fairly familiar problem landscape, I guess, so that that makes a lot of sense. I'm gonna come at it from the view of having been a developer in in recent years. I feel like there's a lot of kind of anxiety around accessibility in places that don't have someone who already knows a lot about how exists ability works. At least as I experienced in the past like this, this kind of feeling of a moral obligation to make our stuff accessible, but nobody knows how and it sounds like a big hard challenge because also nobody knows how to test to see if they actually if it's working, like if they actually are accessible, those are some challenges that I faced while trying to start to get into the world of success ability. I'm guessing as the you weren't born with disability skills already in your brain. Right? So. Can you kind of taken on this challenge voluntarily or you assigned to it? How have you learned what you know now? Yeah, I think I definitely started with the feeling of anxiety that you mentioned like there is this moral obligation. We all want to do right by our users. If it we don't know how. So I actually started the accessible accessible HTML library partly as a learning exercise to just to try to distill down what the spec said so that it was in a format that I could personally work with in try to apply and.
00:11:34 To put the documentation and the information that I needed as a developer where I could really use it. Yeah, that's if you pause for a second. Can you give us an idea about what kind of documentation you're meaning like, what? What are you refer to in you say that. Yeah. So if you check out the web accessibility initiative, there's guidelines, examples, recommendations, designed constraints, checklists for evaluating accessibility, considerations of how to present it as a as a business case. If that's something that's important for your team, a lot of information as that's the web accessibility initiative is part of the W three C, so W three dot org. Since part of the standards, the standards of the web is like, it's the web is also built with the consideration in mind for how to make these things acceptable to the largest number of people possible. Correct? Yeah, yeah. Yeah. And so like any other part of the web different parts of the spec are met to varying degrees. If that, if that makes sense. You mean by browser vendors or by developers or both? Everybody like the various user agents have different levels of of implementation of the various attributes and definitely different web developers do very job on implementing. But I think my theory is that if we all buy into the spec and follow, the spec will be moving towards a better world for the web abetter better roles web, I think that makes sense. Is the is the spec hard to read for you? I mean, was that something for you to get through its long? I mean, there's just a lot of considerations, and I think generally people tend to learn better when working with the problem so problem that I made for myself his distilling the spec down to smaller components that related to the ATM Al pieces that I already knew, but it's it's very workable to go to the spec.
00:14:02 When you have a question about associating a label with an input, or should I do such and such or I'm making a modal what you do now, it's it's very useful for that kind of. Specific use case. I think reading it all could be helpful just to have an idea of like the general landscape of what's available and to have some offensive like design considerations in in what to keep in mind. Like what questions to ask when you're starting a project, but I think the high level view? Yeah, I think like reading an exempt example code for a slider when you don't want to make a cider or have a slider in mind, it won't stick with you. So it's a lot of sense yet, not not quite as useful. Yeah, that makes a ton of sense. So with that in mind, then let's talk about the library that you created in heaven working on and that you presented on elm com. Some drop the link for that in there for your talk at your library, you've been working on his acceptable dash HTML right in is that is that under your name? Spacer? Is that under neurotic? That's under my name's face. So t- esque nine tests. Nine. Okay. So tell us more about it because it seems super cool to me. It seems like what you're doing here is trying to like big the concepts of accessibility into the PI so that it's not. So it's not. The problem with HTML is that it's kind of designed for non accessible. I in a way it's like the easiest way to use HTML is to not worry about accessibility, and you just go for it and designed for people who can see and use a mouse.
00:15:43 And it seems like the awesome thing about your library to me is that the API is changing around say, no, let's not take that approach anymore. But let's say from the beginning using the type system, let's always look at these problems with accessibility in mind. Is that correct? Yeah, I think so. I mean, I I think it's to mallet was very forgiving it. It lets you do whatever you want. If you don't close tag, it's like, all right, that's probably fine. On. That could be really nice. But it also does mean that you don't know if you've accidentally got a property name slightly wrong, or you pass something just like the wrong information. It doesn't make sense or you didn't properly associate elements in the tree with each other. Yeah. So those pieces. So then the library that you're writing is taking care of a lot of those kind of like manual tasks of did I did. I make sure to have a label that's connected with the name that goes to the right input. Does that a lot of what gets automated. Yeah, some of it, some of the changes for the alma API too. The mandate specific specific properties alike with with images, say all text is optional in HD L that user agents, if you don't provide all texts will still think that probably you want to provide some information about about the image to to users. I'm so instead of reading out the techs it'll read out the file on him, which is maybe fine unless you have like jewelry, controlling your name.
00:17:54 So one of the things that the accessible HTML elaborate does is rather than following the beautiful L Mrcina pattern where it's always a list of attributes Senna list of children in the for the API to make an image. There's an image helper that requires all text, and then a list of attributes in produces just image. Images can't have children so dropped the job, the children per victim. Or a decorative image which is explicitly not gonna gonna set the text to an empty strength on your behalf so that you don't need to know that that funky detail about the. About the actual spec. But actually the bulk of the library is probably pulling over all of the attributes and properties that the that the aria spec describes so roles end status end describing the information hierarchy of the page, providing just other options that aren't in the main HTML said a possible notes at this point in elm HTML in that library currently, is that what you mean. No. I mean in each to in general, there's there's things that you might want in in H amount to use as it's Mantech element that you can't yet. I don't know. Maybe you want a tab. Right. Tab semantic element, but you still want to communicate the meaning of tab. And so there's a role tab animal tablets when ruled tab panel, or there's toolbar or a tree. So in some ways, in my mind, the accessibility is head of the main. It's Jamal spec back in terms of the semantic options. It provides.
00:20:02 Does does accessible HTML expose those components functionally, or does it just expose the naming for those things? I mean, is there like a tab component like tab view function that I can use to have need HTML pads? Or is it just like us this to name some bring our tab. Days. A module within the library that's excessively role and the the role section, it's pretty much a straight, make an attribute helper. Vibrate, that maps to how how roles work. In the in a spec. And then there's also some of those have additional helpers that will make the HTML for you. But it's the the work done, adding the the helpers for actually making extremo's a little slower because you get into associating items with each other, like the tab and tab panel ideas. They need to relate to each other in a meaningful way and making a good API for that is a little bit harder than making the component pieces. Right. That's just a little bit behind. The dream is definitely to have really easy to use and clear HTML instructors. Sounds wonderful. Some of the challenges that you've had while you're developing it's. I mean, I imagine that bears Bryn, hasn't this been straight shooting from the beginning that you're like, oh, I know how to do everything perfectly. Like what some of the stuff you undone or changed or discovered, or you wanted to shift. One thing was the initial name was owned dash HTML dash, a one one. Why that.
00:21:51 That's hard to say allowed because I always panic when I get to the ally or a one bed accessibility. How do I set us? Allow people won't understand it. 'cause it's communicated what a terrible. At. Every named the amid a new repo and renamed it. And then the follow up challenge from that was. Turns out if you move, if you like coffee every pow. Oh, it takes your tags with you. So had had some fun with like my my get tags being a little bit messed up initially. So that was a challenge that was resolved. I just really wanted to quickly throw in for people that a one why is kind of an English convention because accessibility is such a long word to say that people drop all of the letters in between and there are eleven letters in between. So they just said a eleven Y to say, accessibility for short, which is funny because it's totally inaccessible, like whatever saw that I was like, what on earth does that mean? They'll somebody explained it to me, so that's a years. Ain't Tessa. You got rid of the confusing name and used a non confusing name, correct? Yes, yes. And I think it's it's been much easier to communicate what the library is actually about and what the library name is. That makes sense. So what about the API have you kind of stuck with the same patterns since the beginning or have you had any major changes in the way that you've approached solving the problem?
00:23:23 Yeah, they've definitely been some changes. One like really awesome in Ryan improvement was suggested by Evan, I, and that was it. The library copies aliases I guess at aliases all of the HTML helpers in homage GMO like David span button and just everything. But it only leverage is the tape system to prevent the compiler from allowing like a random did say to be click -able. So you can't actually attach eventless Nur's two elements that ought to have event listeners. Kinda by default. So if you import the accessibility library and then you expose everything in the mic addictive, it won't let you put an event listener on that. Dave. Which is awesome because it's so easy to do that in real HTML life and east isn't accessible. So that's great way to make impossible or states. You shouldn't do impossible right. Yeah. Well, it's not. It's not quite impossible since you can still import the regular HTML. Trent. Eventless around there, but I'm not recommending that. Yes. Doesn't mean you should use escape escape patch just because you can't doesn't mean you should. That's right. Good points. Yeah. Yeah, we'll so that's great. So we're almost at our time, so I wanna see if there any other points you on a highlight, rather cool things you wanted to shout out about the library. So the newest version of CSS actually also kind of wraps the helmets Tim L but it does a little bit more fancy stuff.
00:25:28 That means that the the each styled it Shimono like the CSS HTML node and the elm HTML Shimao node aren't actually the the same type and there's a conversion within CSS can get you from one to the other. But what that would mean is if you're using accessible HTML than you would need to be doing a conversion back and forth everywhere it would be terrible. So instead of being terrible. There's an additional library that that wraps accessible HTML end CSS for exactly the use case of I'm using CSS and I want to use accessible. HTML I'm boomer knows that library called is Axial. It's Tim out. It's yeah, it's task nine accessible HTML with CSS. So nice. Lazy name, I hope. Yeah. Okay, that's great. So there is a way to use both libraries. I was gonna ask about interrupt, so that's a neat way to go. That was that. Do you have to keep those up to date in lockstep or is that kind of a small ship. We do have to. We do have to update them, but I think the neither almost assess Nauru accessible each Tim L should be dependent on each other as it assumes a fair amount about what potential users of the libraries would actually want. So does seem like it makes the most sense to have a third library that makes it nice to use them together. We'll see what happens in the future. Well, excellent. I think that about wraps up on our our time. I keep tripping over my words today. Abadi boop do wraps up our time. So let's get to the part. Where do you have anything? Any picks any suggestions you want to make to the audience Tessa before we say goodbye.
00:27:20 Oh, man. So I think that some themed literature type stuff from this year. If you haven't seen black odyssey, you should see black odyssey Anani should read the Penelope add by Margaret Atwood. A nanny should read Lavinia by Gwen, and that will be a lovely mixture of re tolls. Old stories. While eight ago. Okay. Cool. So those are your picks. I do not have any picks for the moment. So I think that's the end of the show. Thank you so much for coming on to talk about accessibility Tessa. Really appreciate it. Inkster happy is really absolutely. All right, everybody until next time. Thank you.