Presenter: Nikki Massaro Kauffman
Description
“I love how my CMS lets users create accessible, responsive tables!” said no one, ever.
No matter how many things a WYSIWYG editor or an author interface gets right, we still don’t have a UI that helps novices create accessible tables… until now. This session will highlight the pain points of creating tables on the web, how I created the table-editor web component, and how you can use this open source project.
Video
Transcript
OK, so, geez. Now this has decided to go to sleep. So, we’ll just try it this way.
I’m Nikki Massaro Kauffman. You’ve probably seen me tweet a lot as NikkiMK.
My pronouns are she, her, and hers.
And this is INN8.
It’s taking me a while to get used to these new track letters.
What’s on the table for today is why accessible tables are hard and how I created editable table, and then, finally, how you can use it.
But because I’m the master of self-distraction, at some point or another, I will take detours along the way, like when I tell you how much I really, really, really love food, and that anybody who knows me ends up gaining ten pounds just by being around me, because I’m talking about food all the time.
I get really excited about mega carrots. And kohlrabi as big as my head. And the reason I bring up that I like food is that I think food, at least the way that I was raised, with care packages and Sunday dinners and grandparents who wouldn’t let you leave without food no matter how many times you refused, is that I learned from them two things.
One is that food is how we show we care, at least in my family, probably why I don’t have a healthy relationship with food.
And the other thing is that who is at the table is a lot more important than what’s on the table. The thing is, we use tables to get together as a community for a shared purpose, and some of you at that table might . . .
How many first-timers do we have here? OK, so if you’re new, pay attention to the back channels, the Twitter and the Slack, and try to make friends on shared tables ’cause you might meet your HighEdWeb family.
And, if you know me long enough, I’m going to lure you to another table, and that would be the volunteer table.
So definitely, if you fall in love with this community, there are many tables you can share with us, and what makes this community really, really special is our shared purpose. What’s our shared goal? Well, it doesn’t matter if you’re in social media and marketing.
It doesn’t matter if you’re a developer or a designer. We all essentially have the same goal. You know, the purpose of the web is to share content with more people, right?
Things are better with more people. The purpose of higher education is to share knowledge with more people. And the purpose of HighEdWeb is to share expertise with more people.
You see where I’m going here? Sharing with more people is actually why we’re on the web in the first place, so why wouldn’t anybody want to do that, if you’re on the web? Share with more people. That’s our whole point. That’s our job.
That’s what our metrics are for — sharing with people. And yet, there’s a table that sometimes shares with fewer people. Because it’s very inaccessible, and that’s a problem, and so what some people end up doing when we’re trying to share with more people is we put stuff in a table and not everybody can access that information. And if you’re worried about those inaccessible tables, how many of you work somewhere where you advise content providers not to use tables?
OK. One of the many hats that I happen to wear in my world with tables is as . . . I’m actually on the online content side. I work with online interactive course content. I’ve done it as a programmer, a multi-media specialist.
I’ve been in a user experience group with some accessibility people. But we’re all about education and a table is a great way to educate people, except for, I have to choose between using a table at all, and having a table that doesn’t fit everybody, and that’s a problem to me because I’m in online education for that reason, share with more people, and I have no choices for sharing with more people.
So, since I am in education, one of the ways that I try to share with more people, as opposed to saying no on tables, is I thought, let’s just stuff the authors with accessibility training and so a few years ago, what we decided to do, because I work with instructional designers and they were . . . and I love that this really fits with the theme of my thing, but instructional designers started talking about this idea called snack learning. Now snack learning is where you, you don’t want to overload people. You give them tiny little bite-sized pieces that they could use that day, and we came up with the BYOLs, Bring Your Own Lunch. They were brown bag accessibility trainings.
We set them up so they would be 15 minutes of training and then it would be another 15 minutes of just hands-on “go ahead, try this with one of your tables.”
I actually took everything that I knew about making a good table and instead of throwing it into that one 15-minute session, I even divided it in half. I really snacked that snack learning so that they would have time to practice some skills before they got more skills.
And since nobody pays attention to training emails, I decided, we’re going to meet people where they are, and why not go to the lunch room? This fits well with this theme. I told you, food’s been on my mind for years. So, when I went to add these posters, I knew that most of the people I worked with actually ate in the same lunch room. Now, we had some remote people, but for the most part, it’s the same lunch room. And I have a remote person who works where I used to work and an in-office person. And I bet she eats in that same lunchroom today, even though I don’t work there anymore. Yes.
And so what we did, to try to meet people where you are, is we created these posters, and since these posters were about tables, I started putting them on tables. So, go ahead and sit here. This table is accessible.
Here are all the ways that it’s accessible. And at the bottom of it I had, like, a link to where they could get the information for the training, but it was taped right to the table, so they would eat, they would see it, and they would say, hmm, this is interesting stuff. But I didn’t stop there and I had another table that said, oh wait a minute, this table is not for everyone, and, you know, there’s a nice way to look up whether or not you’re allowed to sit at this table, except for it’s not very nice and it’s kind of hard to follow and it’s not really for everybody, because it’s a complex data table, which, you know . . . there’s a spectrum of accessibility.
You could say, if I marked it up right, it is accessible, but it’s really hard to follow and it doesn’t always work with all the screen readers. So, there are better ways to do it, both for accessibility, and actually, for cognitive load, and that would be to split that information up into smaller tables.
All of this was on a lunch table, right? And then finally, how many of you have a work lunch room with a table that had all of the fundraisers’ papers on it?
Does everybody have one of those tables in a work lunch room? Seriously, nobody? It must just be our office and we’re weird.
But, we had this table that had everybody’s fundraisers, and of course since it’s full of things on display, people just took the chairs away from it eventually to use on the tables that were actually functional.
And on that table, I put, stop. You can’t use that table. It’s for display only. And here’s why. So, we had these tables now set up for table training.
I did these great sessions, or at least I think they’re great. You might have to ask somebody else. Basically, it took me two of these snack trainings, and about six posters total to try to communicate these 6, maybe 6 and a half, ideas about tables. Go ahead and actually take a picture of that because you might need to use that later.
But as I’m aging I’m finding that if I want to be vain and not wear my glasses
I have to bump that up if I want to sit in the back. So, we have 6 things. We have, you know, using the tbody and we need caption, thead, and tfoot if the table has headers.
If you’re not using it for display, pretty much you might have headers on your table. That’s why we have tables. Blank cells can really mess somebody up on a screen reader, so having something that fills in the blanks, even if it’s an N/A or a dash, or a 0 if the table’s numeric.
And then obviously, no empty headers, and don’t have the double headers, and that’s where the complex tables and the merge cells come in.
So, you would think that giving everybody these snack-sized trainings, these posters, all this information, first of all, they’d see that table and everybody would come to training, right? I tried. I did. And in fact, eventually, what I would do, because I work in higher ed, I can’t call people out for not going to my training, so I would do this thing which is a reverse call-out, where I would send an email to everybody in the unit and CC all their managers and say,
“Thank you to this person, this person, and this person Who attended our training,” so that they would all want to get on my nice list that I was publishing. So no, not everybody came. Did everybody remember those 6 things? Does anybody here . . . you don’t count [laughing.] Does anybody here remember all 6 things at this point? I mean I did ask you to take a picture.
Some of you probably do this from day to day. But our users probably didn’t remember all 6 of those things and that’s because we’re stuffing them full of training, and maybe that’s the wrong way to go.
Maybe the problem has nothing to do with the fact that we’re stuffing our users with training. Maybe, if we want them to make good tables, we should stop giving them junk!
Maybe it’s the wiziwigs, so let’s take a good look at wiziwigs. How many of you use Tiny MCE? Alrighty. So, what we’re gonna do is play the Tiny MCE Challenge. I have a link to just the most basic Tiny MCE I could throw up in a space as quickly as possible. If you go to bit.ly/heweb19-McCue for Tiny MCE, go ahead and play around with it.
See what you can do to make that table accessible, just from what you know of Tiny MCE. Hopefully, we don’t kill the WiFi.
If not, we’ll have to pretend. You’re not playing seriously. [Laughing.] Do I have to keep you after class? [Laughing.] Takes one to know one. Now see, I was gonna yell at you for having cheater’s knowledge, but . . .
How’s it going? [Whispering.] You can whisper to me. No one will hear.
[Audience members laughing.]
[Whispering to audience member.]
Do our users like to edit HTML? Are you . . . inspect an element! Yes, because all of our users know how to inspect element! And they’re just gonna . . .
[Laughing.]
How are we doing? I like putting you people through abuse. So let’s take a look at Tiny MCE, and we can unpack some of that. Here’s the interface, right? Where exactly do the captions go? How do I get captions? If you look at this . . . I mean, if I were looking at this, I would think, maybe that one? I don’t know.
Let’s see what that table thing does. Maybe that’s where it goes. OK, it pulls up a window. I would want my captions to probably be somewhere easier than that, but it had to pull up a whole window to show my caption.
And where is it? It’s this little tiny check box. I mean, this is a thing we might need on our tables, and it’s a little tiny check box in a pop-up menu.
Is that where my . . . I wonder if that’s where my headers might be. I mean, let’s see. So, going into that box. Advanced tab. Who would put headers and footers in an advanced tab?
That should be like a basic thing you see right on the interface. Oh wait. I don’t see it. I do see where you could really do some damage with colors, though.
[Audience laughing.]
I could probably style something and think it’s a header. That’s probably not a good idea. Alright, so we’re going to play this game again.
How many of you have CKEditor? Only a couple. Alright, the joke I sometimes make about CKEditor is I started using it back when they called it CKEditor and then they dropped an F, and I dropped quite a few a CKEditor. So, we’re gonna try CKEditor. Bit.ly/heweb19-ck5. Try editing it. See if you can make it accessible.
We’ll watch JC cheat, Cindy do whatever work she’s doing that’s not the work we’re supposed to do here, and we’ll watch Rachel, who has all this extra knowledge and apparently really bad tools.
Who said useless? You don’t like CKEditor? Oh, the WiFi is useless. Uh oh. You were talking about the editor and you don’t have WiFi. I think you just faked the WiFi incident because you don’t want to fail at CKEditor. Alright.
Oh, by the way, I didn’t mention this before, but if you get the chance later, on the bottom of each of these is a link For you to go to Github, for each of these tools, and I don’t care if it’s my table that gets better, or other tables. My goal is to push everybody’s tables to be good, because sharing, more people, get better tables.
And you can up-vote some of the things I’ve already put in or put in some of your own issues, because why not start pushing where we can? So, let me Ms. Pac Man a little water and check my time.
For those of you on the live stream, ,I have a series of tiny, tiny cups,and I wanted to make sure I had enough.They’re in a line and they’re white. And they look like the dots from Pac Man.
[Whispering to audience member.]
I’m good, friend. Nice trying to suck up to me after you’re doing other work. So, let us take a look at CKEditor. [Laughing.] Oh, just wait.
So you figured out the header row. Can I tell you something I learned about the header row? I could make a couple of header rows. Can I keep my PG-13 rating if I say I can make the whole damn thing a header row? It’s all headers. Everything’s important. Exclamation mark, exclamation mark. I need a read receipt.
OK. The other thing I can do that I said is probably not a good idea is merge. So we can make header rows. There’s no . . . do we see anywhere for a caption? No, but we can merge things, so guess what I’m gonna do when I get into that table as a user. I’m gonna create one big row, merge everything, and call that my table caption. And, I could probably set multiple table rows and I’ve got a table. I’ve got a table. I did this. This is what our users are doing, and I thought I was lucky enough to have accessibility experts in this room, and it’s even difficult for them.
And we have content authors using this stuff. So, I’m gonna change a little bit of the pace here. I have a particular set of skills. I’m not the most skilled at things, But from working in education, from working in instructional multi-media, and from working as a programmer, and working along accessibility people,
I thought, well, I know about interaction design, and how things work together. If I want something done right, maybe I’ll build my own. I’ve got all these skills right here on the table that I can bring,and have this great table experience. I was seriously excited about this. I mean, I was like, yes, I’m gonna make this table. And I started making it like two years ago when I finally joined the new team that I had and I could do all of my dreams that died before. I was like, I have skills, I have the tools that I wanna use. I wanna make this table. I’m excited.
And I had in mostly, you know, in a good state when I put in the proposal for this. So I thought, yes! Table! I’m great! Yay! And then shit happens. And all of a sudden, things became literally out of reach for me in a way. It’s not easy for me to do the personal thing, but you know me as this person, and that’s usually the person I like to show people.
It’s a lot easier to say, yeah, things are great. I’m fine. and this is the part that you see. And yet, I spent a large part of last year, parts that you might not have seen, like this. And believe me, it’s taking a lot to put a really unflattering photo of myself up on a big screen, and then find out it was gonna be live-streamed.
So here I am, lying flat, head with an old towel. I do have nicer towels in my bathroom, by the way. But anyway. I digress.
So, here I am lying flat. All we could tell from most of the year is some kind of my neural disorder and I’ve always had trigeminal neuralgia, which is intense, stabbing pain that comes randomly and then goes away and then gets worse the next time it comes back and goes on for a long, long, horrible, horrible time.
And then all of a sudden I developed this thing where the longer I sat upright, the more the trigeminal neuralgia happened, and the more it felt like my brain was sinking into my skull. And so, I got to the point where I couldn’t commute to work, I couldn’t sit upright for the whole day, I couldn’t concentrate, and I started missing out on a lot of things. I started missing out on tables, and it helped if I lay flat, and so there was a point where I was trying to do the . . .
But eventually, your arms sort of get tired when you do that. I’ve been very fortunate, not as fortunate in that I had Tom Morello tickets and I was supposed to take my kids. Missed out on that.
But I’ve been very fortunate in the sense that I’m lucky that I work in a job in higher ed where people were able to give me some level of flexibility. I could work from home. I could work a few hours, take a long lunch break of lying flat, and then finish out my day as best as I could. I could, you know, adjust my schedule at the drop of a hat to go to a specialist in another city if I needed to.
And even when I was sad that I was gonna miss out on the HighEdWeb board retreat (And we all know I love HighEdWeb; It’s all through my slides), they still allowed me to participate in the conversation by having a Google hangout. And the Google hangout had captions, ’cause sometimes having a headset on was really affecting it. And I was thankful I had captions and a way to participate in things.
You know, I had started out the year where I wanted to remove more barriers for other people, and I ended up facing some myself. And while I’ve always cared about accessibility, I really started learning things about it that I hadn’t thought of. There’s this level of including people that, yes, is for them, but there’s a part of me that knew I had a lot to contribute and felt kind of trapped lying flat for a few hours, and knowing that I couldn’t participate, so yeah. There was that participating for me.
But I actually did get pretty far on some things and I did contribute, so I like to think that at least where I got here, when I hit my barriers, is actually not that bad, and the perfectionist in me is still kind of struggling with it not getting all the way there, but I think about, if my work hadn’t been flexible, if I had, you know, lost the opportunity to participate, I wouldn’t have an editor that creates accessible tables.
Now the part that really broke my heart was the fact that through the couple of rounds of accessibility testing that we were doing, I hadn’t quite gotten to the accessible user, or accessible usable point, for people who had no vision. That really devastated me. I had to deal with the fact that I thought that I had failed because it became so important to me to make sure that everyone had a chance to contribute.
That’s where I wanted to get, is, you know, not just make a table that everybody could consume, which is good, we should make that, but I knew what it meant to want the ability to create. So when I think about who benefits when everyone’s at the table, it’s not just me. It’s not just you. But it’s everybody, even the people who are already, by default, included. We can all benefit from these different perspectives. It’s that bigger table. It’s that thing that we mentioned at the beginning, that this is what we’re on the web for — it’s to share things with more people, and this is why we have analytics.
Are we reaching more people in the right ways? Why wouldn’t we want to reach more people? Alright, so this is the part that’s gonna hurt me the most. [Laughing.] It’s that I do have an attempt at an editable table, at bit.ly/heweb19-inn8. It is not perfect, but I’d like you to edit it. You can feel free to share your thoughts as you edit. There’s also a link to my github repo for this, because I really, genuinely care about making things better, making interfaces better for more people, even if I have to hear some negative feedback, which I did with the accessibility audit.
Sometimes it’s good. It hurts, and then sometimes you have to take that breath and tell somebody thank you. Thank you for making my work better. We all have to get better at when somebody points that out, we can realize that maybe we weren’t thinking in the right head space. If you decide to screen shot your table, and tweet it, or put your opinions on tacos and sandwiches, I do ask that you provide an image description, because you’re in my session on accessible tables and I’m gonna look like a really shit teacher if you don’t put a description. So at the bottom what I did was, there’s a button that’s not part of the table interface, but is part of the table API, where you can hit CSV, and that would be a quick way to help get you started on an image description of your table if you needed it. Thank you. See, I feel good now!
I was worried when you sat up there. I’m like terrified to do this in your presence, Rachel, Like terrified. And I mean it — If you want to put in what you think is a taco or a sandwich, don’t forget to make it really accessible when you get excited about tacos and sandwiches. Oh, you’re using it on a phone! Pressure’s on. Feel free to play with some buttons. There are already things I got from that, Ryan. It was like a wealth of knowledge, and all for free. That’s the beauty of HighEdWeb. I love this. It’s like when the rock star actually notices you. You’re actually doing it? Hey, I know we’re working on our tables, But can we give Cindy a round of applause for actually participating the way she was supposed to? [Applause.]
Alright. Feel free to toggle between edit mode. See what it looks like. Play with window size when you toggle some of those modes. I know it’s not perfect. It’s at least my hope that I’ve taken it a little bit farther than CK and Tiny MCE. So I don’t have my notes, so I’m ad libbing this. It was kind of awkward working between this. You’re tweeting me! Nice. You better include the description. Nobody’s allowed to make me look bad on the internet. How did I not know you were here? That is weird! Librarian.
Alright, I’m gonna move on a little bit, but if you’re still playing and figuring out stuff in the table, I’m cool with that. I will only make fun of Cindy. [Laughter] So, what do we know about editable table, aside from that I put my heart and soul into it? Well one of the first things that I really hated about table editors is that there’s like no obvious place for a caption and the most obvious place for a caption would be right on top of your table. So there’s a very obvious place for a caption. And in case you don’t think it’s obvious enough, I put a giant red arrow there. Where are my headers and footers? You don’t have to be an archaeologist and dig through menus. If you toggle those buttons, you actually get visual feedback on headers and footers, and nice little toggle buttons. I don’t know why you’d need a footer row for taco, but hey, I’m going with it. Borders and striping.
So remember in CK, or formerly FCK, they allowed you to make some crazy styles that you had no control over if you were trying to deal with your users? Well what I’ve done is I’ve given them a little bit of style, just a little taste, like these tiny little cups of water that I’m Ms. Pac Man-ing. They can do things like condense the cells or give them a little more padding, do the alternating row thing, add borders. And so it’s like the illusion of choice, so I’m tricking them into thinking they have control over their lives.
Did anybody toggle the mobile friendly and try it out? There’s actually a little visual feedback. I was trying to figure out how to give visual feedback To people editing, and maybe this isn’t the right way, but I’m really interested in feedback. You can pick on me on the internet. I lied. But there’s a line right through here that’s trying to show, like, this cuts off on the second line on mobile, and when you toggle that you’ll see that tiny little line. and then when you see on mobile, what you get is the column selector, and you can pick. You can change it to the other columns. I’ve thought about other options for mobile. This one was like the easiest thing I could get into for now. Then I thought, well, for shits and giggles, let’s add some sorting and filtering.
And so, if you’re using your row and column headers, because you can’t really sort a column unless it has a header, and also to encourage people to actually use the headers, if you have that on, you’re allowed to do the sorting and filtering. Those options have a little bit of visual feedback, as well. If you see it in view mode, you’re gonna see that you can sort it by orientation. You can filter it by only the things that are horizontal. You probably thought you were just testing something That was for me and me only, right?
Maybe you didn’t. I love you people, and I really wanted to share, and I really believe in sharing with more people, whether you use my table, or whether you go back to those github links, and tell all the other tables to catch up. So I chose to make this thing open source. Now if you’re not a techy person in the room, you can, like, cover your ears and go la, la, la, but I will try to explain as best as I can some of the reasons and how I’m doing it. So, editable table, this open source project, is actually built on the one platform that everybody uses, and that is the web browser. We’re all on the web. The browser is the platform. Anybody in the native web components community uses the #webcomponents along with #usetheplatform. What they mean is, use the darn thing that everybody has. Right? There’s this idea Jeremy Keith has of pace layers. You should solve a solution at the lowest, most negative layer possible, because those things, standards, take forever to change.
Frameworks change, and I stepped out of programming for a couple of years to just work in the user experience group, and it was like the whole internet changed when I got back. That’s how fast frameworks change. But web components are about putting some of these functions back into the browser. And it’s basically allowing you to create these individual, interface pieces as single, HTML tags that are interoperable. They can be used on top of each other, like Legos with each other, and it doesn’t matter what you use to write a native web component. We can all use them. We can all share. That’s because they’re baked into your browser.
You’ve got — and this is where non techy people don’t have to listen — but these are like 4 things that are baked into your browser, that basically specify how these little Lego bricks are gonna work. And right now, the latest versions of all the browsers, you can see that the green check marks mean stable. So if you’re a non techy person, that means we’re good on all the recent browsers. And you have to do a thing called a poly fill. Non technical people, that’s just a little extra script that tries to modernize something that’s lagging behind. But they’re not gonna lag behind for long. Edge is moving into the world of web components, as well. This is becoming more and more stable, more and more browser native, more and more the way to do things until you find something that can’t. I just built an entire table in it, so you have to get pretty far before you can’t do something in a web component. You can use it with any framework or platform, and this Lego is here for non techy people. That means that — and non techies, if you don’t know this, this is like all the stuff that devs use that they think is really cool and then they’ll come up with another one. Doesn’t matter. You can use web components. And they all think theirs is the most important and they will fight you to the death for it. And, you can use it with Drupal or WordPress, but the best part is you can be completely old school, and you know you have some rogue departments that try to do this — you can actually use them with Static HTML.
That’s the power and beauty of web components. Basically, all you do, just like in old times, the long, long, long ago, back when I was a developer the first time around, you would just download a thing, put a script somewhere, read the documentation on how to use it, and use an HTML tag with some properties and stuff. And so, if you think that I’m like a far-out edge case, BYU has already got something like this going. They have a thing called a CDN. For non technical people, it’s like this mothership where they house all their web components, and anybody can use them on their sites. That means the Drupal people, the WordPress people, the Static site people, and the whatever else is new and cool and crazy, can use the same design elements, and they look the same and act the same. You just basically do what we did in the old days — include a script, use a tag, there we go.
Look, oh, it’s HTML! Even the non techy people kinda get it, right? So, then I started doing these free camps, HAX camps for the project we’re working on, to get people excited about web components, and I met this guy. He has no idea I’m doing this, so we’re gonna flood his Twitter, Aiden_KS at Boston University libraries, because librarians like semantics and making things organized, don’t we, Carrie? Yes we do! And so you can actually see his pattern library of web components at that URL. Again, flood him. Tell him Nikki says hi. I made him internet famous. And then, this is the one that I kind of like, when life got in the way, and I really cared more about the table than about showing off all my stuff — I say that now that I’m showing off all my stuff to you — but this is where I started doing the same thing, trying to document all of mine. But there’s also a better place to get this stuff. It’s called — woo, I’m running out of time! That’s OK. I think I’m good. So this is webcomponents.org. You can actually search for all the components that people share with other people. And there’s a getting started piece. Some of this is more geared toward developers because you can also then develop on somebody else’s.
But non techy people, you can just tell them about this, and you can always shoot me an email and I can get them started. But you search for my table and you do the thing where you get the documentation. Now, you may think that, that’s it, OK? There’s a table, you know? And that’s pretty impressive that you can do that with like these little components. But actually, I did mention a couple other projects where we’re just getting cooking, so my editable table component is actually part of this giant repository of a bunch of tags that we’re building, a whole library for ourselves, that are shareable. One of them is the ally-media-player that has an interactive transcript. You can download . . . one of our users who is blind actually suggested, Hey, can you download a text file? And so now you can download the captions as a text file with an ally-media-player, and it’s a single tag, because that’s the beauty of web components. There’s a collapse, there’s tabs, there’s a fields thing that basically takes JSON and renders a whole form for you, and then you can get the values back as an object. That’s for techy people, obviously.
But the lrnwebcomponents piece is like this whole library, and even that is part of something bigger, called haxtheweb.org. It’s a very new project, and again, I’ve been nerfed, so the people working on it are a little behind the types of things I do on interface, but idea is with HAX-the-web, we’re doing a block editor out of web components. Now, you might say, well that only affects you, Nikki. It might be open source, but we use Drupal, we use WordPress, we use all of these things. HAX-the-web is a block editor that you can put on top of anything. And that’s our ultimate goal, Because developer me, educator me, HighEdWeber me believes that every user, content author, or visitor deserves a place at that table. Sharing is why I’m on the web. Sharing is why I develop web components. Sharing is why I work in higher education.
And sharing’s actually why we’re all here at HighEdWeb. So, thank you. [Applause.] Go ahead. Can you walk up to the mic for the live stream folks? Ah, OK. Do you know if anyone’s working on a WordPress plugin for this? Funny you should ask that. So we actually did kind of create one for a demo for shits and giggles and we’re getting a little pushback getting it listed, but I might have somebody I can hook you up with on my team who could show you where it is. It’s just a really rough proof of concept, but we wanted to able to show you could do it. We have one for grav, too.
You obviously care about accessibility. Do you feel the general web components community does, and do they have any standards or education? Are they trying to push that as a priority in the community? So that’s a good question, because a lot of my web components friends are very much in higher ed, doing this, although I have noticed that many of the people who care about web components care about it in the same way that people who care about it in accessibility do. I’m sure you’re gonna find outliers. I feel like the community is really . . . To be honest, as a woman in tech, I was really scared when I first joined the . . . They have a polymer slack, and I was like, uh, guys (because I work with guys), I’m like, I’m the only one like me in here, and you know, it kind of turned me off at first, but it felt like a very supportive and inclusive community, and they really all just want to make things better. So I don’t know if that answers totally where they are on accessibility, but it does feel like they care, And the beauty of web components is if you have something that’s inaccessible, and because they build on each other, you can just swap out the inaccessible component and everything that’s built on it just bubbles up.
I love what Brandon Sparks said, that web components are like object-oriented front end, and so, one of the problems we had in HAX before I got there and they did accessibility testing was they had kind of like an accordion form interface, where you could add new items, and there were fields like in those accordion panels, and that came back as inaccessible, and that was used throughout HAX. All I had to do was fix that one component, and because everything in our architecture points back to that one, even though I could style it and customize it and it might look different from other parts of HAX, it immediately pushes out the accessibility. Cool. OK. I also want to add, and I’m gonna be jumping on the bandwagon with some of the sites that we’re doing. I just had a little bit of a leadership change before we did it, but it’s also really great for static branding. Everything will be in the same place. You just call it up and you know that it meets all the guidelines.
Yeah, so somebody changes your logo, you don’t have to worry about getting to all the departments, if they’re all using from like the BYUCDN. You switch it centrally and they’re just pointing . . . they’re all pointing in HTML tag. As long as you don’t change fundamentally how that component works it just goes out everywhere, because everybody’s pointing back to the main source of truth In that repository. Anybody else?
Thanks, Nikki. That was awesome. I was wondering if the BYU example, when you include the script, does that include the poly fill, as well? I believe what they’ve done is bundled it up To include the poly fill, so that that way it’s there. In our world, in our system, we do include the poly fill. We do a little bit of, like, progressive bundling, though, because we have a massive library of hundreds of web components that we’ve done. This is how fast the development goes with them, is there’s a team of four people, essentially, and we’ve made 300 components, but in our case, we are bundling all of our components scripts that are pretty common to every page, and then we do some kind of progressive pieces with the poly fill as part of the main bundle.