Developing a Semantic Component
Article 19 explores user-friendly web components that improve accessibility
In this podcast, the Tamman team welcomes Mark Dane, a successful user experience engineer with Cesium. He is a professional designer and a developer since high school who even holds a patent! Mark discusses his latest project, a web component for semantically better organization of lists of business objects and actions associated with them. This web component is intended to allow the developers to focus on the presentation of business logic rather than the technical details on the page. Tune in to listen about the invention of this web component and how Mark approaches his universal design thinking.
Meet our guests:
- Mark Dane Mark is Senior Resident User Experience Engineer, crafting intuitive workflows and elegant interfaces within Cesium ion and custom applications. Passionate about designing for mobile devices, Mark has designed an Android app and two open-source web components.
Listen to more Article 19 Podcast Episodes
Full Transcript
Access the PDF Transcript
Voiceover:
Expression is one of the most powerful tools we have. A voice, a pen, a keyboard.
The real change, which must give to people throughout the world their human rights, must come about in the hearts of people. We must want our fellow human beings to have rights and freedoms, which give them dignity.
Article 19 is the voice in the room.
Marty:
Hello and welcome to Article 19. My name is Marty Malloy, chief of staff and catalyst at Tamman, and I am the host for our conversation today. I’m so excited because joining us is Mark Dane. Mark is a user experience engineer with Cesium. He’s a professional designer and developer and has been programming and designing since high school. He comes by this very honestly. He also holds a patent for a CAD drawing with touch devices, which is cool because I can speak for myself, I’ve never met anybody who actually owned a patent in real life. He’s here to talk to us a little bit about a web component that he’s been working on, and one quick fake fact about Mark, he once danced with former president Bill Clinton, John Travolta style. Let me introduce my cohost, Amanda Roper, program manager of Tamman’s accessibility initiatives. Hey, Amanda.
Amanda:
Hey, Marty.
Marty:
And as per usual, Michael Mangos CEO and cofounder of Tamman is here with us as well. Hey, Mike.
Mike:
Hello, Mr. Molloy.
Marty:
So for some context, I just want to set the stage for listeners before our conversation begins that this podcast is born from a decision at Tamman to state clearly and plainly that access to information is a human right. The developers and the designers at Tamman work hard to make sure that no matter what use constraint a user may have, be it due to a temporary, situational or permanent condition or disability that they will always be able to access information designed and built by Tamman. This podcast is a call for others to join in a bigger conversation with us. We work to build the inclusive web, but to do that, we need all of us working together and learning together. Thanks for listening today, and let’s get the conversation started. I’d like to bring in our guest, Mark Dane. Mark, how are you tonight?
Mark:
I’m doing good. Thanks for having me.
Marty:
Yeah. We are really excited. We like to start off all of our interviews and conversations with something nice and easy after a long work day, so my question for all three of you, Mark, Mike and Amanda, if the universe conspired to allow you to choose only one place to vacation for the rest of your life, where are you going? Mark, go ahead and kick us off.
Mark:
I’m going to go with Budapest. It was the last vacation that I took, and it was great. They had good coffee, and the weather was nice, and there was lots of activities. I’d love to go back there again.
Marty:
I like that you prioritized coffee. That is very, very important. Good job by you. That tells us a lot that we need to know about you. How about you Mike? Where are you going for the rest of your life?
Mike:
You know what. I would do Yellowstone. I just love it there, just kind of, all the seasons to experience and so many fun things, and I kind of never get tired of thinking about returning. I’ve been out there twice and can’t wait to go back a third time.
Marty:
Amanda?
Amanda:
You know, this is a hard question. I’d probably just go back to Utah. It kind of feels like Mars there, and I love being surrounded by the desert.
Marty:
The whole state of Utah, you’re not limiting to just Zion or Arches, you’re like, I want the whole state.
Amanda:
You know, yeah, Zion and Arches is too crowded so there are a few places outside of Zion and Arches. There’s a place call Coyote Gulch, which is a great place to go to, or there’s just a few different place that are a little bit more off the grid than Arches that I’d like to stay at, pending like the WiFi situation there of course.
Marty:
Awesome. Off the grid, only so much. Well, that’s awesome. I want to visit all of those places. For me, my ultimate vacation, I’m going to take a little bit of something from all of you, and that’s the purview I get as host, which is the coffee, the hiking, the weather, I would go back to Jamaica over and over and over again. I loved everything about it, and I was able to do a little bit of the caves. I was able to do a little bit of the beach, and the coffee is phenomenal, so for me, it would be Jamaica. So, let’s get into our second segment. Really, Mark, we want this to be about you and the things that you’ve been working on, and I’ve heard you speak before. I’m so excited that you’re here. Can you give us, the listeners, a chance to say who you are in your own words? Orient them to what it is that you do.
Mark:
I’m a user experience engineer, so that takes the sort of design and user experience aspect of figuring out what our end users are trying to do and how we can best accomplish that and combines with the development aspect of actually implementing the software product that’s going to help them do that.
Marty:
I’ve heard you speak, as I said, most recently at one of our lightening talk events, and there, you were talking about a web component that you’ve been working on. Can you tell us a little bit more, specifically about that web component?
Mark:
Sure. It’s a web component for basically managing lists of business objects, so a lot of times when you’re building web applications, you have a list of objects like users or devices or could be just about anything, and you want to display that information to the user, and typically, there’s also some actions that go along with those items, like being able to edit them or delete them and maybe some other actions, depending on what exactly the item is. And so, the web component that I’m working on is to make a list that is more semantic, I guess, than just the traditional way of implementing it where you’d have a bunch of list elements with a bunch of button elements and kind of all this stuff that gets hooked up together by the developers, but it may not be obvious to someone just looking at kind of, well what is the bigger picture. So I’m looking at taking that and saying alright let’s zoom out and describe this list of business objects as, in a more semantic way, basically telling you what are the objects as well as what are the actions and then, underneath the hood, the web component will then figure out, OK here’s how it would actually display all that information to the user, so it becomes a lot easier to write and read for the developer working on it and also hopefully will be better for the end user cause we’ll be able to refine that component and make sure it works well for the end user.
Mike:
Yeah. Mark, I have a follow-up question for you. Is the developer trying to structure that semantically then, using sort of the techniques or the features of your web component? Or is this something where they’re trying to describe it a little bit more broadly and then you’re component is doing, I don’t want to say machine learning, or maybe it is, but what is it doing to try to create that semantic structure to unload the burden of defining all the semantics for the developer?
Mark:
Machine learning’s a interesting idea. This component isn’t going to go that far though. What it is going to do is take input from the developer in terms of what are these actions that the user can do, basically giving each action a name and a callback that says, you know, here’s the items that the user is working with. Now, you actually do the action for me, or depending on whatever the business logic is. And then also just providing a list of items, so that is going to make it more structure than just saying, boy, I have a bunch of buttons and the buttons are harped up to do things and then maybe there’s also a context menu or some other types of input and they also go to those same actions.
Mike:
Yeah. That makes perfect sense. Is this something that you think developers would need to have less rigor around their semantic, like modeling, for the data where they could lean on the web component to maybe guide them through that? Is that really the idea?
Mark:
Yea. I think it’s more so that the developers don’t have to worry about all the details of the interactions, and they can just focus more on the business level logic of what are the items that I’m trying to present as well as what are the actions I can do on them rather than figuring out, OK, well I need to do delete. Should that hooked up through a keypress? Should that be hooked up through a button? Do I need to have a context menu on this? That give the user a list of items. Things like that.
Mike:
I love this idea of empowering developers or even the designer developer ilk, like yourself, where you don’t have to go reinvent the wheel every time. You can kind of lean on things that you know are tested and that compensatory becomes like reusable. It speeds up development, certainly, but I think more than that, it creates a consistency of experience, and I think a lot of end users appreciate and developers like to lean, so that’s great.
Mark:
Yeah. Definitely. I’m very excited for the aspect of, you know the consistency from the development side of just not having to go back and do all that wiring again for all those details because that’s kind of where this started was realizing, oh, I want to have this list and I want to have the actions, and I want to have keyboard handlers, and I want to have a context menu, and after hooking that up once or twice, you go, I went, oh, this is a lot of work. It’d be nice if I could just kind of say, here are my actions that I want to do and have it all hooked up for me without having to worry about, oh, I might have forgot the keyboard handler on this one list, or I might have forgot the context menu on this other list.
Mike:
Is this something that you are open sourcing, or is this something that’s part of like a paid package that people can get ahold of it in the future?
Mark:
Yeah, so while Cesium does do a lot of open source software, this is something that will be used for internal Cesium developers only at this point. However, I do want to share the idea of making these more semantic web components so that hopefully other developers can take advantage of this idea and improve their development efficiency as well as hopefully get some more reusability out of the work that they’re doing.
Amanda:
So, for our audience, I’m curious. Can you elaborate a little bit more about how this component is innovative for accessibility?
Mark:
So, the advantage for accessibility, certainly at Cesium is that the developer who’s working with the component doesn’t have to know all the details about how to make things accessible. They can rely on the component to do that. Compare that to an example with a developer who has to kind of implement and hook everything up themselves. They’ve got to be aware of, these are how all the interactions should work and even what happens a lot, that I’ve seen is people don’t realize, oh, I need to have keyboard interactions on this. So, this component will take care of hooking up all those interactions for the developer.
Marty:
So, components are something the developers use all the time in a lot of different spaces. In your observations, as you look out into the community, specifically the accessibility community, do you see more and more components that are accessible being used or do you see that as an opportunity for any developer to start thinking about, well let me do something the right way. Let me make sure that it’s fully accessible and then put that out there. What’s your observations with that in the wild?
Mark:
Yeah. I definitely think that’s a great opportunity. I know one of the projects I worked on in the past was building a accessible context menu for web applications because, kind of similar to this list component, I’d implement it, a context menu going with the area roles and all of that to make it accessible. By hand once or twice, you realize there’s got to be a better way. I don’t want to keep trying to reimplement, so let me build a component that will take care of all of the wiring under the hood for me, and I can focus on just providing more of the higher level – hey, I need a menu with five items, and here are the names of the five items and here’s what you do when you click on each one.
Mike:
That sounds like a pretty standard, a developer has to do something once. They do it by hand. They have to do it twice, they’re considering automating it. Third time, it’s automated.
Mark:
Yeah, it just definitely keeps it interesting when you’re not rebuilding the same thing over and over.
Mike:
Yeah. Sure. Of course.
Marty:
So Mark, I’m curious. As you’re thinking about – you’re still in the process of building this component out, correct?
Mark:
Um hm.
Marty:
So as you’re doing it, who are the end user personas that you’re thinking about, specifically as it relates to people who may be using assist-tech in different ways?
Mark:
So certainly one of the end user personas is the person who is going in with the mouse, that’s sort of who our applications are typically targeted at. Or I’d say, oh he’s given the current limitation of who they work best for, but also considering people who are going to be using a keyboard. So being able to not only navigate and click on things, but to navigate with a keyboard, and then as well also trying to make sure it works will with the screen reader are the main, sort of three constituents that we’re looking at, making sure it works well for.
Mike:
Mark, I want to go back to the semantics because I think the web component you’re building, I have a couple more questions in that space if can go back to that for a second. You’re talking about stressing or emphasizing the importance of semantics in accessibility, using this web component as a way to either guide or enforce it, where it takes sort of the mental load off of the developers and the designers in that interaction. But I really do want you to talk a little bit about the importance of semantics and accessibility, at least from your perspective because I think it’s a really important topic that those in the space, that are in this industry know a lot about but that people that are new to it sometimes don’t understand just how important the semantics are. In your words, I’d love to hear your take on that.
Mark:
Yeah, so the semantics are basically what give the application structure from my perspective. You could look at it and say, “Hey, I’m going to build an application. I’m just going to kind of put a whole bunch of div elements around and have click functions, and it works great for a user with a mouse.” Or maybe you’ve even hood up the keyboard interactions, but when you look at it from a more programmatic level, or from an API level, you’re kind of like well what exactly is going on here? It’s a whole bunch of the same thing, where the semantics give you that structure and give you some more hints about like what exactly is going on. How are things grouped together and let you put some more, basically structure around that application, instead of just saying, hey, it’s a bunch of generic components and I don’t really know what each one does. You kind of have to already know what they do. It doesn’t give you any clues about how they’re used.
Mike:
That’s great because I agree with all of that, and when I think about semantics anyway, I know there’s a time and a place for having sort of a wandering walkabout of information that you don’t necessarily need a ton of structure and sort of the serendipity of coming across something that is wonderful and fun. But there’s also a lot of times when you just, as a user, regardless of ability, you need to consume it in a certain way. You’re looking for something specific or you need something important, and I think that structure that you’re talking about, like creating that structure for everybody and rooting both the design and the development in semantic structure to begin with becomes crucial to having accessed information. We talk a lot about accessed information as a human right, and without providing guideposts and wayfinding through that information, right? Like there’s just now way that it becomes useful at scale, you know. And I love how the idea of your web component, if used consistently or appropriately in larger data store or in larger lists or groups of lists even, you know, suddenly becomes this like interesting wayfinding tool that people don’t think about. It’s more than just having a navigation. It’s more than just having some buttons that take you places, but it’s actually about creating a predictable pattern that people of any ability level can find their way through. Does that resonate with you and does that make sense?
Mark:
Absolutely. I especially like how you kind of talked about users consuming the information, specifically. That definitely speaks to the design side of my role of when I’m looking at the application kind of figuring out, like what are the things I am presenting here on this screen, as opposed to just, hey, I’m going to put six buttons and twelve list items on the screen. I think about, well actually here’s a list of users or a list of websites, whatever the business entities are, I kind of think about it at that level as opposed to, oh, well I need a button and I need a piece of text here. So definitely it is very important to kind of think about that higher level, how is your application structured.
Marty:
So, I want to switch gears here for a little bit. As I alluded to in talking about you in the opening, I’ve never spoken to somebody who had a patent before. I need to know. What is that like? And do you walk around with a sign or a tattoo that says, “I own a patent, so haha.” Can you describe that a little bit?
Mark:
I think the best thing it’s good for is kind of the professional introduction that gets you some street cred. I know it was a very drawn out process. I had done a bunch of work on the project and then I worked with patent lawyers and they kind of sent the stuff off. Didn’t hear anything for a while, and then maybe a year later, I get in and say hey, the patent’s been approved, so it was definitely a drawn out process and then by that time, of course, I had kind of moved on and was not thinking so much about the project. So it was kind of anti-climatic getting the patent itself.
Mike:
That’s so funny.
Mike:
Was it a patent around accessibility, and if not, do you have any ideas for things that you’re thinking about building that you’d love to see patented in the accessibility space?
Mark:
So it was a patent related to taking a very keyboard and mouse oriented system for doing CAD drawings, which is computer aided design, so basically drawing lines and rectangles and things like that on a computer screen and figuring out how do we support that on a mobile device that has touch and doesn’t have keyboard or mouse, and also at the same time be able to have a system that users can kind of switch between using a mobile device and a more keyboard and mouse oriented setup without having to relearn everything. So while not specifically dealing with inclusion, I think it really made me think a lot about universal design and how do we make things work best for people in the way that they are able to use them and realize that it’s maybe not just always, oh I’m always going to have a keyboard, or I’m always going to have a mobile device. But maybe I’m going to be switching between the two, or even if they are available in some cases, like I might have a mouse and a keyboard. Maybe I prefer a keyboard for some reasons versus the mouse.
Mike:
You know, I love that because I came to that similar thinking not that long ago, like embarrassingly late in my experience with digital accessibility or inclusive design. Like, it’s not always just about, we’re going to make our most perfect, beautiful, streamlined user experience, and then we’ll come up with a bunch of ways that allows assistive technology to use it. It’s more like, hey, sometimes things like a mobile device become its own kind of assistive tech based on your unique situation, you know, as a user. And so having met a number of people that go through periods in the day, where parts of the day, they’re feeling like they need to be using one kind of input. And then, another part of the day where they need to use a different kind for either medical, cognitive or whatever, those kinds of reasons. It’s just really interesting to say like more than one way is essential. I’ll declare on your behalf that it was an accessibility feature that you built into your patent.
Mark:
Interesting because one of the interesting kind of things that happened in my braid was realizing, you know, the keyboard isn’t just for accessibility. Actually, one of the main reasons we needed to do keyboard access for this feature was that that’s what the power users wanted. That’s how the people who spend eight hours a day doing CAD drawings wanted to work, or needed to work even, because going back and for between the keyboard and the mouse – if you’re doing that over eight hours a day, that ends up draining a lot of your time. It was much more effective for them to stay on the keyboard and be able to do input that way.
Mike:
You know it’s really, it goes back to that same thing, which we’ve heard talked about a lot in the past few years in inclusive design, right? Like designing for the stress cases, where on the bell curve, instead of designing for the middle eighty percent, you’re designing for the ten percent at either end, right? And those are not only your users who need accessibility features, but they’re also your power users. And often times, they need the same things, you know? So it’s really interesting. It’s cool.
Marty:
So Mark, I want to draw us a little bit to a close, at least a segment with a question of is there a challenge down the road that you’re really looking forward to tackling?
Mark:
One of the things that I’m looking forward to doing is exploring how to do drawing and other things in a 3D space. That’s one of the areas that Cesium’s currently focuses, and it’s 3d/geospatial, so looking at how do we do things like drawing or navigation in that – a 3D world and also ways to make that accessible so it’s not just, oh, I have to go use a mouse pointer or my finger to navigate about this world, but I can do it with a keyboard or, you know, my finger or my mouse cursor, depending on whatever device I’m on.
Marty:
That’s so cool. I can’t wait to have you tackle it and have you come back and talk to us about it. That is really neat. So, our next segment is something that we do with each of our guests where we ask them three questions. Are you ready for your three questions?
Mark:
I am.
Marty:
So what is one personal accommodation that you make?
Mark:
I turn on the closed captioning when I watch TV, which annoys my wife because she’ll come on and realize that I was watching TV because the closed captioning on, and she has to turn it off. But I find it very helpful, especially when the volume can be all over the place, where sometimes there’s loud explosions but then also the next scene somebody is whispering and I can’t quite make out what the person is saying when they’re whispering or there is something very quiet going on.
Marty:
I love that. I mean I don’t love the closed captioning. I’m with your wife on that, but I love that answer. Wonderful. So what is something about the world that keeps you up at night?
Mark:
I would say income inequality and also kind of the power inequality that goes with it and how to make the world kind of a little bit more balanced place.
Marty:
Yeah. You have a ready audience.
Mike:
You mean it’s not robots? Robots don’t keep you up at night? I don’t understand.
Mark:
No, that’d be easy and then you just pull their batteries out and problem solved.
Marty:
You’re in the clear, Mike. There you go.
Mike:
That’s mine. I’m afraid of robots.
Marty:
We’re going to end up on a high note because it would be really depressing to end on killing all the robots. Is what is one recommendation that you have for us? It could be a game, a book, a movie, a TV show, any podcast, whatever it is that you’re listening to or playing with or doing right now. What’s something you go for us?
Mark:
So one of the shows I just recently finished up, I know I came to it a little bit late, was ‘The Mandalorian’. I really enjoyed watching that one, especially kind of seeing the change of the characters through the series.
Marty:
Solid. Solid choice. Anything within the Star Wars cannon is always welcome here on Article 19. Mark, I appreciate you. I love having you as part of our broader accessibility community. Thank you for the talks that you’ve done. Thank you for sharing and spending time with us today, and I’m really looking forward to talking with you down the road. Thanks so much.
Amanda:
Thanks, Mark.
Mark:
It was my pleasure to be here. Thank you for inviting me.
Mike:
Thank you, Mark.
Amanda:
If you like what you heard today and want to explore more about digital accessibility, inclusivity or to schedule a time to talk with us, you can find the whole Tamman team at TammanInc.com. Or follow us on social media at Tamman Inc. on LinkedIn, Twitter, Instagram or Facebook. We’ll talk to you again next time.
