About the Topic
Thanks to Our Sponsors
About the Meetup
Learn more about WordPress Accessibility Meetup
Watch the Recording
If you missed the meetup or would like a recap, watch the video below or read the transcript. If you have questions about what was covered in this meetup please tweet us @EqualizeDigital on Twitter or join our Facebook group for WordPress Accessibility.
Links Mentioned in This Video
The following resources were discussed or shared in the chat at this Meetup:
- WordPress Accessibility Facebook Group
- Equalize Digital Web Accessibility Resources
- Equalize Digital Focus State Newsletter
- Equalize Digital Website
- Equalize Digital on Twitter
- WordPress Plugin Accessibility Checker
- Empire Caption Solutions Website
- Empire Caption Solutions on Twitter
- Pokemon Seizures Linked to Epilepsy, Not TV
- Pokemon Episode: Dennō Senshi Porygon
- Photosensitive Epilepsy Analysis Tool (PEAT)
- Game accessibility guidelines
- Seizure and Vestibular Disorders
- Web accessibility for seizures and physical reactions
- HeadingsMap Chrome Extension
- An alt Decision Tree
- IBM’s open-source design system for products and digital experiences
- Seeds by Sprout Social
- Material Design
- Atlassian: Foundation to Accessibility
- Alex on Medium
- Alex on LinkedIn
- Dacey on LinkedIn
Article continued below.
Stay on top of web accessibility news and best practices.
Join our email list to get notified of changes to website accessibility laws, WordPress accessibility resources, and accessibility webinar invitations in your inbox.
Read the Transcript
>> AMBER HINDS: A few quick announcements. If this is your first time here, we do run a Facebook Group that allows people to connect between the meetups. You can find it if you go on Facebook and you just search WordPress Accessibility. It’s a great way to ask questions, get help. I’ll admit we’re not strictly WordPress. I actually helped someone, they had posted about a question about something they were seeing in wave and it ended up being on a Shopify site, and we helped them with that.
We do have a WordPress Focus, but we occasionally handle Accessibility stuff outside of WordPress. If you want to connect with people between meetups, please join the Facebook Group. If you want to find the recording of this, it is being recorded. It takes us about a week where we can have to get corrected captions so that we can have accurate captions on the recorded video and then we post it up.
You can find those if you go to equalizedigital.com/meetup. All of our past recordings are there. That’s where this one will be in about a week or two. If you want to get notified when recordings are available or about upcoming events, we highly encourage people to join our email list. You can go to equalizedigital.com/focus-state to subscribe. We send maybe two emails a month, sometimes only one depending on how busy we get.
It’s a roundup of upcoming events ours but also other people’s links to the recordings when they’re available and some other links to interesting accessibility news or resources that we found around the web in the past few weeks when we send those up. We are seeking additional sponsors for the meetup. If you are interested or your company is interested in helping us cover the cost of live captioning and/or ASL interpretation, please contact us.
You can email myself and Paula at meetup@equalizedigital.com, that will go to both of us. We also invite people if you have any suggestions or if there’s anything that we can do to make the meetup work better for you, you can also email us and contact us there. We are looking for speakers for the fall as well. I am Amber Hinds. If you’ve been here before, you’ve probably seen me but if you’re a new face, I’m going to do just a quick introduction. My company is Equalize Digital. We’re a Certified B Corporation and a WordPress VIP agency and a member of the International Association of Accessibility Professionals.
Our goal really is to create a world where all people have equal access to information and tools on the web regardless of their abilities. We make a WordPress plugin called Accessibility Checker that puts accessibility auditing reports in the WordPress dashboard. There’s a free version of it on WordPress.org. We’ve mostly just organized this meetup because I really wanted to have the opportunity to learn from more people in the Accessibility field.
I always am so honored by our speakers and the people in the community who come and share their knowledge here. I feel like I learned everything, something every time and so that motivated us to start the meetup. Today, we also happen to be the live caption sponsor because we don’t have a separate sponsor for that. We do have a sponsor who helps us with our post-event transcription and creating the SRT file for having accurate captions on our videos and that is Empire Caption Solutions. We highly recommend that people check them out at Empirecaptions.com or you can Tweet a thank you to them @EmpireCaption on Twitter.
In addition to doing posts, like video transcription, they do audio descriptions so that they can describe verbally what’s happening in a video for people who are blind, and they do ASL interpretation. They have been great to work with and they really have saved us a ton of time in transcribing our videos. We’d very much appreciate their sponsorship, and encourage people to just tweet a quick thanks to them so that they will want to continue that.
We have a couple upcoming events. On Monday, July 18th at 7:00 PM we’re going to have Meg Miller, Meg “Memi” Miller talking about Alt Text. She’ll be talking about when and how to write good alternative texts. This is something that comes up a lot in conversations. We’ve had a lot of questions about it at past meetups when we’ve had some speakers touch on a few elements of it. People always said, “Let’s go more in-depth.” We’re going to have a whole meetup that’s all about alternative text and how to write good alternative text for images.
Then the next day right away, this is not a WordPress Accessibility Meetup event officially but my partner, Chris is going to be moderating a discussion with myself and an attorney, a developer who’s been working on WordPress VIP platform to make it more accessible. Then Alex Stein, who has previously presented here for us, who was on the WordPress Core Accessibility team and is a DevOps engineer and is blind.
We’re going to be talking about what businesses need to know about website accessibility. It’s going to be a panel discussion. That will be held on Tuesday, July 19th at 10:00 AM. I will put it up on the meetup so that people have links to where to go and register. It’s not going to be on our Zoom. It will be held via Zoom, but it’s going to be on WordPress VIPs. You’ll need to grab the link off meetup or join our email list and you can get the link that way.
Then the next meet-up in this specific time slot is Dax Castro, who will be talking about the impact of accessible web documents and different requirements for accessible PDFs. Which is a big thing that comes up because web content accessibility guidelines don’t just apply to websites. That will be Thursday, August 4th at 10:00 AM. I am very excited to introduce our speakers today. We have two great speakers. I first got introduced to Dacey Nolan, because I heard her on The Accessibility Rules Podcast.
I reached out and I asked her if she’d be interested in speaking for us and she so generously agreed to come on and brought Alex as well. Dacey is a self-taught front-end software engineer. She’s a Women in Tech, mentor and is passionate about making the web accessible for all. Alex is a product designer that specializes in design systems. Before transitioning into design, he worked in support and quality assurance. I’m going to remove my spotlight and let them take over and also stop sharing my screen.
If you have any questions while they’re talking, please put those into the Q&A if you can. Sometimes, they get a little buried in the chat, and then we will address them towards the end of the talk. Welcome, Alex and Dacey. We’re so excited to have you here.
>> DACEY NOLAN: Thank you so much, Amber. We’re very excited. I’m going to briefly introduce myself and then Alex will introduce himself. My name is Dacey Nolan. As we heard, I’m a front-end engineer on our design system squad at Trainual. My background is with JavaScript and React. However, the things that we’re going to talk about today can be applied to any language, in spin and spack. I am a self-taught engineer with a passion for web accessibility. A little bit more about me, I do have a disability.
We’ll talk about that a little bit later. I’m mostly working on getting my certification as a web accessibility specialist. I’m still learning but that is something that I’m striving for. Let’s see. I used to work with students with cognitive, auditory, and visual impairments. I do know a little bit of American Sign Language, also referred to as ASL. A long-term goal, I’m trying to be more fluent in ASL. Just so I can share with you all today, I’m going to introduce myself in sign language. Note that I’m not good enough to sign the whole thought.
My name is Dacey. I’ll go ahead and hand it over to Alex.
>> ALEX ZLAKTUS: Thank you, Dacey. As was discussed a little bit earlier, I’m a design systems designer at Trainual. I’m Dacey’s partner in crime. I’m from Providence, Rhode Island. Getting into the software industry, I was in support and Q&A and slowly moved over to design. Once I moved into the design systems, I got hit in the face by inclusive design and learning and being taught inclusive design. A lot of people in the industry saying you can’t have things be pretty and accessible just really aggravated me.
I think that’s been the fuel to the fire for me. Definitely, a lot more humble beginnings. Dacey don’t have as much of a resume, but I know that a lot of people in this talk. I think the biggest thing is just to continue to learn about the subject. Dacey, do you want to take it away with your talk, just to begin to talk about epilepsy?
>> DACEY: Yes. I always ask people do you all remember MySpace? Because I can’t see all the participants, I hope some of you all do you remember that. If you’re not familiar with it, it was a social media tool, but before Facebook and Twitter. I guess the claim to fame is you could have your top friends list, you can have music playing whenever you logged on and you could customize the background. That’s where I fell in love with the CSS is trying to go in and plug in different hack codes to see how that looked.
I think somebody asked what it was it’s MySpace. It was right after Xanga right before Facebook. One of my friends reached out to me when I was 16 and said, “Hey, I had just made a whole bunch of updates on my MySpace profile. Do you mind going and taking a look?” I got reached out a lot from friends because I was already introduced to working with that CSS. I was a good friend. I said, “Sure, I’ll go ahead and take a look at your MySpace profile.”
Immediately just went to the computer, logged in, went to her profile page. The next thing I remember, I was waking up in the hospital bed. I had just had my first seizure. What my friend had added to her background was an animation of a strobe light. She really thought that it would stand out and so many more people would visit her side and she would have more traction. That animation is what had gave me my first seizure.
A week later I was playing a video game with my brother and had my second seizure and I was diagnosed with epilepsy. I’ve had epilepsy since I was 16, I’m almost 30, [laughs] almost 15 years. There’s a lot of things that I’ve learned over the years and really because of my background and not being able to interact with websites and video games like a lot of my peers, I decided to go into web accessibility.
It was really hard being a 16-year-old and not being able to use social media and then hearing your friends talk about it at school. I felt deflated, I didn’t feel normal. That’s really why I went into web accessibility. Let’s go ahead and talk about what seizures are? A seizure is an abnormal electrical impulse in the brain that interrupts the normal connection between nerve cells and the brain. People tend to say, it’s like an electrical storm inside your brain. Things are misfiring and because of that, a person can experience some involuntary movements.
They might even lose consciousness. It’s really going to interfere with a person’s ability to process information as well. Now, seizures can be brought up by many triggers. Some of those could be, alcohol consumption, head injuries, stress, lack of sleep. When I was going through college, alcohol stress and lack of sleep, those are the big kickers for me. I would have eight a day. Then there’s one called that seizures can be triggered by light.
Now, this is called photosensitive. This is when content flickers, flashes, and blinks. This can trigger a photosensitive seizure. Things like natural light, if light hits the snow, when it’s falling, it could cause someone to have a photo-sensitive seizure. One of the most well-documented cases of flashing light seizures was from a Pokemon episode in 1997. I’m really big into Pokemon. I did see this episode way after the fact I don’t recommend y’all Youtubing it if you do have a history of seizures, because it is pretty bad. This episode had a scene with Pikachu who was the lightning Pokemon.
There was a battle scene that scene sent 685 children to the hospital when they experienced seizures as a result of this intense flashing light scene. Not every seizure is going to look the same. You might have heard of the infamous type called grand mal. We also refer to it as tonic-clonic. These types of seizures are when the person is going to lose consciousness and they’re going to have rapid body movements. You might have even seen them like Grey’s Anatomy, episode one, they have a person who has lost consciousness and they’re seizing up.
It’s not as floppy, like a fish that we tend to see on TV. It’s more like steady jerks. When the person wakes up, they’re going to feel very sore. They might have a whole lot of bruises on them and they’re going to be very disoriented. Some other types of seizures, they used to be called absent seizures. I don’t remember what they got renamed to, but that’s going to look like a person’s just daydreaming. They look like they’re just zoned off in space and a lot of times people will get in trouble for daydreaming, but they could be having a seizure.
Some others are going to look like maybe a spasm. When I do my makeup in the morning, sometimes my arm slows like slides up in the air and that’s just because of this electrical impulse in my brain that’s misfiring so a seizure. What is epilepsy then? Epilepsy is a seizure disorder. Typically someone is diagnosed if they have recurring unprovoked seizures. Let’s take a look at some barriers that somebody with epilepsy might face. As I mentioned I wasn’t able to be around a computer because of the constant flashing lights, as well as play certain video games.
Now it’s really good video games have a warning whenever you go online. I have been seizure-free for about 10 years, I am able now to like interact with the computer and video games, but I’ve been playing a Star Wars Lego game recently. Of course, there’s all these warnings, that it could trigger a seizure. Some of the other things is again the websites. The websites pretty much are accessible as far as for people with epilepsy. However, it’s the developers or the designers that decide that they want to add a flashing light that makes it not accessible for someone with epilepsy.
Some other flashing lights can also make somebody have a migraine, maybe nausea, vomiting. It’s definitely not a good feeling for your users to have when they visit your site. Then they’re going to associate those bad feelings with your site so it’s not good. Some advice for creating websites for people that might have a seizure disorder is try to avoid creating videos and animations with tenth flashing lights, but something I see a lot on Instagram right now is because we’re trying to grab people’s attention with reels and then TikTok and they’re using constant flashing lights and I immediately start feeling very ill.
That’s something not just for developers, but also content creators to make sure that they are not using those flashing lights to try to grab someone’s attention. We should really avoid flashes that are more frequent than three times per second because anything that’s quicker is going to potentially cause that photo-sensitive seizure. There’s a lot of other triggers such as music for some people, things like that, but really just talking about the photosensitive here and how light can play.
You definitely take a look at what colors are being used? Red with white and depending on the patterns, if someone’s moving their head, it really does cause this weird behavior to make it look like there is a flashing light. That’s pretty much my talk about epilepsy. I’ve seen a lot of questions coming through the chat. We’ll go ahead and open the floor for questions.
>> AMBER: I wanted to start by asking you, do you feel like the web content accessibility guideline about what is it? Three, not more than three flashes per second, is that sufficient, or do you think that it should actually be a higher or a lower number?
>> DACEY: That’s a great question. I feel like I talked about this on the Accessibility Rules podcast here. Whenever they’re testing for a seizure it’s called an EEG. Unlike an EKG which is your heart, your EEG, they’re going to put these electrodes all over your head. What they’re going to do is they’re going to do a series of different tests to see when you’re going to have a seizure. The first one is they’re going to test if you’re photosensitive.
They’re going to look at your brain wave and they actually show light slower than three seconds. People have had seizures. Whenever I was first diagnosed, that was something that right when they turned that light on, I immediately started having the brainwaves that showed I was having a seizure. That’s a good question. I would say, yes, it needs to be way slower than the three seconds. I feel like this is probably just a good meeting point.
I don’t know, the background of why they chose that number, but just from my experience, I feel that it should be a lot longer or not used a flashing light at all. I’d be curious to know why they chose that number.
>> AMBER: Yes, I don’t really know the background on that either as well. Caroline was asking, do how you can check if your animation has flashes more than three times per second? Is there an easy way to test that for the general public?
>> DACEY: There is a tool. I should have looked this up to test websites for flashing lights. I’m going to try to look it up really quickly and see if I can find it, but there is a tool out there that it’ll scan like a lot of the automated accessibility tooling. I will try to find it and let y’all know.
>> AMBER: I think that covers the second question, which someone else had asked about if there was a tool. I know one thing that we’ve done. If we’re creating a GIF, for example, in Photoshop, you can see how long your GIF is and where the changes of your different layers are when it’s making more layers. Those aren’t really lights per se, but that it’s changing or flashing of different things certainly. That’s something we can look at the timeline just in Photoshop when we’re creating the GIF and be like, “Are we having more than three changes per second?”
If so, then probably the layers need to be stretched out so that the timeline is just longer. Let’s see. I think Caroline was asking if that tool would work on social media too? I don’t know if you know if it works on a social media site or just on websites?
>> DACEY: I don’t. I haven’t used the tool personally. As far as when I’m going through content, it is hard. I don’t know of a good way for me to be able to scroll and not really see those flashing lights. If you all do know I’ve shared my LinkedIn, please let me know. Because even though I have been seizure-free for a couple of years, I still get really, really bad migraines because of these flashing lights.
Depending on if I know the content creator I’ll reach out and just say, “Hey, I probably would change this.” I give advice out of love and not really trying to attack them because people don’t know what they don’t know. If you all do know of a tool that can help me determine if there is going to be flashing light I definitely would want to know.
>> AMBER: Do you know, and I don’t know if you know this? If you turn on prefers reduced motion on your computer operating system, does that stop some of those things if they’re coded appropriately?
>> DACEY: Yes, I have heard. You never want to override the system preferences, but yes, I’ve heard that does work. I haven’t done it on my phone, I should probably do that.
>> AMBER: Jean was asking, you said something about the color white and head movement. Could you go back to that and explain a little more?
>> DACEY: It’s really, depending on some of the color contrast such as white and black with a zigzagging pattern. If you’re looking, people don’t really shake their head like this while they’re on looking at it. However, some of those patterns especially if you’re scrolling, depending on where the pattern is oriented, that can do a strobing effect almost. I know a lot of this has been previous– we’ve had a lot of advancements with our screens for computers and stuff. Some of this could have been a lot longer, but definitely the use of patterns and colors with those patterns if that makes sense.
>> AMBER: Yes. Stripes or checkers or almost that kind of stuff can really cause weird effects?
>> DACEY: Yes.
>> AMBER: There was a follow-up question about stickers on Instagram stories. Can those cause problems?
>> DACEY: I don’t know what that is. I’m sorry. I try not to get on social media a lot. If somebody could explain the sticker?
>> AMBER: Instagram stories, you can take a video or a picture and then you can edit it and they have stickers, which sometimes they’re animated. I think they’re, I’m pretty sure it’s just like–
>> DACEY: Yes. The animation–
>> AMBER: The animation sticks onto it, right?
>> DACEY: Yes, I would say–
>> AMBER: Would that be the same scenario?
>> DACEY: I would say any kind of flashing. It doesn’t have to be super big to cause a problem. It could be something very, very small. Like I said, things that you don’t realize, the most interesting for me is snow falling and your headlights hit it just right, definitely, can cause a seizure. Even just natural light depending on how it’s coming into the house because it’s not just flashing lights, it’s just a mix of light in general.
>> AMBER: Let’s see. Alice is wondering, are there warnings on social media, like there are on video games?
>> DACEY: I have not seen any warnings on social media. I’m sure whenever I signed up it’s probably in the terms of use somewhere. This is where I’ve heard that social media because it’s the person that’s creating the content that let’s say it’s Facebook for example. I don’t think Facebook’s going to get in trouble if I decide to put a flashing light for my content. This is where it’s, I think the user whoever’s creating the content.
I’ve not seen where content creators are adding any disclaimer like, “Hey, my reel or my stories has flashing lights.” I haven’t seen that, but I’m probably sure it’s probably listed in terms of service of there might be flashing lights. Especially, like I said, with so many constant creators trying to grab attention and that’s what they use a lot.
>> AMBER: Let’s see. Caroline followed up and she’s actually wondering if you can use Instagram stories, but I think you said you don’t really follow Instagram.
>> DACEY: I don’t. I rarely get on it because of the, just not knowing. I’d rather just like not use it. This is why it’s so important content creators, and then whenever thinking about websites and front-end engineering. You never want somebody to not be on your site because they’re having a bad experience or they’re not having the same experience as everyone.
I’m having to take myself away from TikTok and Instagram and Snapchat, just because there is that level of fear of I don’t know what’s going to happen if I access this and it’s not accessible. That’s definitely not good because I love taking pictures and stuff and I feel like I would be a good user, but that’s something that I don’t get on it as much as I think a lot of people because of that fear
>> AMBER: What do you think those of us that are on those social platforms can do in order to bring more awareness to this to make for content creators. I’m sure the platform itself knows, but what can be done to encourage more content creators to realize?
>> DACEY: I definitely think it starts with people with epilepsy that have had a seizure to speak up and advocate. Then of course then it’ll do a domino effect of more and more people are talking about it. I would just say if you’re on this call and you have a friend that’s creating content or maybe you know an influencer and you’ve seen those types of content in the past. Definitely, reach out to them with love and just say, “Hey, I just wanted to let you might be able to reach more people if you actually take this out or maybe starting it with a disclaimer.” Just coming out informative and not an attack full way. Even if you’re creating content, think about those things of how can I grab their attention without using a lot of flashing effects?
>> AMBER: Also, one of the things I’ve been trying to do a little more is when someone shares a video or without captions may be saying, “Hey, it’d be great if you could put captions on this or an image without an alternative text or description saying, use this feature.” Let’s see. A couple of people shared traces tool for a photosensitive epilepsy analysis toolkit is that the one you were thinking?
>> DACEY: It is that one. Thank you so much. I’m not a good multitasker. Even though I had my search engine up on the left side, yet. I have not used that tool a whole lot. I experimented with it briefly when I talked on the Accessibility Rules Podcast. Very briefly. I don’t know how user-friendly it is and how accurate it is, but that was one that kept popping up in my research.
>> AMBER: Great. I think we have two more questions and we’ll probably pause on questions and let you guys do your next thing and then we’ll sort back to more questions. Andy had asked are zigzag striped, checkerboard patterns always dangerous or is it the combination of patterns and high contrast colors?
>> DACEY: I would say it’s a combination of yes. The colors. Let me see if I can find where this was documented. I want to say it’s probably Mozilla that had written a little thing about it or WebAIM had like an article about it, but they did say it was the combination of colors with a pattern.
>> AMBER: Awesome. Maybe you’ll find that and stick that in the chat for us. Then the last question, before we move on are there social media platforms that you do find to be accessible or that you’re not worried about going on?
>> DACEY: Definitely, Twitter because a lot– I haven’t seen a lot of people post a lot of GIFs. Especially the people that I follow, they don’t really use a whole lot of GIFs. The ones that they use, don’t affect me, but yes, that’s really what I use. Then LinkedIn too, I don’t have a whole lot of videos. Another thing that you can think about is if you’re going to use a GIF or any kind of video on your website, maybe allow the user to pause and then play. Don’t play it right when the page loads, allow the user to either play or even have the ability to pause that. That one’s huge. That’s the stuff that I try to look for is like, “Am I able to pause this or is it just stuck on my screen constantly repeating itself?”
>> AMBER: I don’t know if it’s a setting that I turned on and I just don’t remember it, but at least for me on Twitter, GIFs don’t auto play. They have a picture. It says, “GIFs on them.” I have to click on it if I wanted to play, which mostly I never do. [laughs] I feel like that’s helpful. All right. I’m going pull out, back up here and take myself off.
>> ALEX: Cool. Thank you, Dacey, for that super inspiring, insightful, powerful. I finally, I think learned not to tear up during that talk. I think this was the first time on that, but thank you again. We’ll just move it over to design systems and how they can be accessible too. I think Dacey and I both agree on this in terms of working in design systems is a very powerful position to work on, on accessibility. We’re totally psyched up about that.
We’ll just go into design systems a little bit more. I’ll start off with just defining what a design system is if people are unaware. Go over a little bit about Trainual, just very briefly, and the tools that we use, and the maturity or design system. Then we’ll really dive into what we’re doing on a day-to-day basis to make sure our product’s more accessible. Design systems. I’m going to steal a definition from Brad Frost and Nielsen Norman and make my epic design system definition, but how I would define it is it’s a system of systems intended to help your company consistently manage design at scale or manage your product at scale.
The key there is system of systems. It’s not one system, you’re not going to just get a component library and Figma and call that your design system. On the other side, you’re not going to just have Storybook with all your dev components or wherever you hold your dev components and call that your design system. It really is everything and all of the documentation aggregated together to make up how you make your product. This includes again, components themselves, but also patterns inside of your application. How do you create an object?
How do you delete an object? The writing, your voice, and tone. Do you use sentence case? Do you use all caps for your buttons and what’s the tone? Do you keep your messages short, long? That kind of thing. Then also just all the documentation that comes with that. Even if you have documentation on how to document your stuff, that is part of your design system. Things that are inside Slack, that’s your design system.
It might be informal, but that’s part of your design system. I think opening that design system up to the entire breadth of what it is, I think is very powerful. Because I think you can add accessibility in all of those things. At Trainual, our company that Dacey and I work at, in a very short sentence, it’s a documentation learning and training platform. Similar to the notion but has more accountability and stuff like that. What I usually define design systems as at Trainual is I just say, it’s a Trainual on how a Trainual makes Trainual. That’s a lot of Trainuals, but the idea is it’s a documentation or what we call a Trainual documentation on how Trainual, the company makes Trainual the product.
It’s very loose in terms of definition, but that allows people to understand design system makes up a lot more than what people might think in the beginning. For further background, I’ll discuss again, the tools that we use at Trainual, and then also the maturity of our design system. The tools that we use at Trainual start off with Figma. I’m a designer, so I use Figma a lot. Storybook is where we host our component library on the dev side.
Then we have Zero Height, which is a really good software that can hold your style guide, what people deem as your style guide, which is a big component of your design system, where you can host that. It can also take snippets from Storybook and Figma. Using Zero Height, Storybook, and Figma has been awesome for us. I think it’s saved hundreds of hours. Those three things are big ones. I know we use chromatic for testing and we’re going to start to be using that more and more. Then we use Trainual again, our product. We make Trainual content on how to use Figma, how to use Storybook, how to document things in Zero Height.
More of the how in terms of the what that goes inside Zero Height. The maturity. Dacey and I have been working at Trainual for a little bit less than a year. I would deem our design system to be in the acknowledgment phase. I consider that to be between two and three-phase of a phase five approach where phase five would be something like an IBM design system or something like that. I’d still say that we’re in the infancy stage in some aspects. I say acknowledgment because our company is aware about it and we’ve both been hired, those are huge hurdles to go over.
They acknowledge the importance of it and why it can really ramp up our development process. I’d still say that how much people follow the design system is still up in the air. That’s something that Dacey and I continue to work on day in and day out to get more people to follow the design system. People are generally aware of what it is and how it generally works. We have all the software that we need as well.
We have a two-man team right now, I think it’s in a very good state, but we still have a long ways to go. To have more of a tangible knowledge of our maturity, we’re working on our fields right now. It’s always cute to talk about that we’ve worked on our colors, and our buttons, and more foundational things like icons, but we have yet to actually finish our most basic text field. With that being said, there’s still a lot of work where people aren’t able to leverage our components yet.
That creates difficulties that we have to meet every day until we get to that point where we have at least all of our fields, we have all of our models and things like that. I’m going to go over some inclusive design best practices from the design side, and then I’ll hand it over to Dacey to talk about the same thing, but on the dev side. This is really what I’ve learned, through working at a couple of different companies with design systems, and also just reading things from different websites, and where can I and all that stuff. I like to break up my best practices between foundations and components.
Foundations from a design system definition, those are your colors, your typography, your icons. Basically, the building blocks for all of your other components, so if you’re making a text field, you’re going to need color for the text, you’re going to need the text size, and you’re going to need the border and all that kind of stuff. When we’re talking about foundations, I like to really consider really just the big things of sizing, when you are talking about the size of your text and then the colors, the contrast, and stuff like that. The foundations, it’s intuitive from the sense of you want to obviously make sure it’s big enough and has enough contrast, but it’s mostly on how it’s used.
I guess the idea up front is easy to understand, but the application of it can be a little bit harder. Your color palette is never going to just be accessible off the bat, it’s how you use your color palette. If you have two different yellows that are very close to each other, if you never use them together, then you’re going to have an accessible palette. If you do use them together, they’re not going to be accessible. That’s something that requires a little bit more planning upfront of when you’re creating your text, when you’re creating your colors and icons, you got to just say like, “Where am I going to use it? Can I use this really small icon if it’s only going to be used in an area where it’s not necessary to the design or people don’t necessarily need to see it to understand the context?”
Switching gears over to components. This one, again, a lot more tangible. This is again, just for me right now, where we are with our maturity contrast, size and focus. When we are building something like a button, does the contrast of the button background with the text past AA or even AAA. That’s always easy when you’re building out your components, you’re saying, “Okay, what is it on hover? What is it on default state?” We’ll talk about focus state a little bit more. What is it when it’s disabled? Which the contrast is not as important there, but it’s good to know all that.
If you have dark mode, you want to combine all those colors and say, well, what does it look like in dark mode? What’s the contrast there. You can plan that out when you’re building your components and before it gets to dev you say, “Okay, is it contrast accessible? Not to be a dead horse on size, but again is the text too small, or is it even the tap area on your buttons too small?” Those are easier and again more tangible to think about. Lastly, I always like to throw in focus if any of your components are interactable always think about, what is the focus stake going to look like?
Make sure that it’s going to be except keyboard navigable when actually gets inside of the tool. Those things are always good to look or think about if it’s just an icon component, that’s never going to be focusable. You obviously just throw it out there don’t worry about it. If it’s anything that’s going to interact with either your finger mouse or whatever software you’re using to put focus on it, you got to understand what that experience is going to be all about. I am sure I miss things, but those are the big ones I look for when I’m designing my new buttons or my new icons and things like that. I’ll pass it over to Dacey to talk about it from the dev side.
>> DACEY: Awesome. Thank you, Alex. I don’t know if Alex mentioned this, but our design system is called Saguaro. Even though our company is trained well, that’s what our shirts are. It’s the name of our design system. There is probably about 20 engineers at our company. Alex, how many designers would you say?
>> ALEX: We have five designers.
>> DACEY: Currently, it’s just Alex and myself on the design system squad so we have to communicate all of these best practices through, for the whole PD and E teams. That’s product design and engineering. That’s over 30 people that we have to try to communicate. Documentation is key, also what’s really important is not everybody’s going to be an expert and that’s totally okay.
Whenever I’m looking at best practices for developers, I’m making sure I’m documenting it somewhere and I’m making sure that we announce that to the whole team, so they know best practices as well. Some of the things that we’ve been looking at is the first one’s going to be alt text. I’m not going to go into my alt text feel knowing that y’all are going to have that amazing call.
I think it’s next– I don’t even want to say next week if I’m wrong, but I will be hopefully I can attend, but alt text is so important. There’s a lot of different considerations for alt text. When I was first starting out, I thought it was just describing what the image looks like. However, there’s a lot more moving pieces such as does this behave as a link? If you want to put the destination of the link. This is something we decided to create a decision tree about what alt text should be, and that is documented. Know we know whenever we are creating something for the marketing site or our application, we know that with alt text or with the image, everything should have an alt text.
That doesn’t mean that [chuckles] every alt text is going to have content inside. You can have an empty alt text. The screen reader will just skip over that. However, we made sure that we documented what alt text is needed and when. Again, because not everybody that’s going to be working on the dev side or the engineering side are going to be accessibility experts. Some other common ones or buttons versus links. Something that we’re really trying to communicate on our team is when to use a button and when to use a link and making sure that you’re using those semantic HTML or that semantic markup to explain the story. For example, any interactive element should not be coded as a dev if you’re using HTML, you should really look at those semantic elements and making sure you’re using the correct thing.
If on click the user is going to get redirected. That’s going to be a link. If on click a popup is going to appear or a form’s going to get submitted, that’s going to be a button. It’s very important that on our engineering team, and even on our marketing side, that we are clear of what elements are being used. Making sure that we’re not adding a lot more JavaScript and a lot more things by creating this clickable dev, that’s going to behave like a button it’s not going to be correct.
Also, it’s important that you’re coding those correctly because the screen reader user is able to navigate through all of the link through all of the headers, through all of the buttons and if those are not coded correctly, they might not know what’s there. Some other things that we look at is even though we want texts associated with icon buttons maybe there’s a youth case where we don’t necessarily can put text with it. Making sure that there is a title or an aria label, something that’s describing the purpose of that button or link, however, that’s something on our team.
We’re making sure that there are texts associated with every button and link. We also need to make sure that we’re not saying the words, a button, and link in our description because that’s going to be read out loud as well of the element for screen readers. We also have to look at I like to say different words, cancel versus close are going to be very two different things in regards to buttons. We have to make sure that it sounds correct.
We do a lot of screen reader tests, a lot of manual testing for accessibility, and a lot of automated tests focus ring that is something Alex mentioned. We need to make sure that our focus is when using the keyboard. Sometimes if you just add focus state, it might just show up on click, but you really need to make sure that if a user is using keyboard navigation, they know where they are in their screen. That’s why I wanted to talk about focus. There’s so much more that we document and we look but those are some of the big things that we’re looking at currently at Trainual and how we are communicating.
Because we’re such a small team trying to communicate with all of the product design and engineering. We’re trying to focus on one new thing a day or a week. This week is okay, let’s work on focus state, last week it was, let’s look at alt text. That’s important because accessibility is a marathon and not a sprint. If you just come out of the gate, swinging, hoping to get everything accessible overnight, you’re going to get exhausted.
It’s not feasible. Then trying to tell your team, all of these new things is just going to get very daunting for them. We like to lay it out as one new thing a week because I think it’s more maintainable for the whole team.
>> ALEX: Dacey, if I can just jump in there, I think that’s important. For the designers on the call or people that are aware about design systems and how to build them out. We look at it the same way, when you’re just starting off a design system, you don’t want to make a modal before you’ve created your buttons and your colors and stuff like that. When we’re looking at this one thing a week kind of thing, we’re not trying to be super ambitious and tackle something that is going to have a lot of dependencies. We’re taking something that makes sense at the time.
As much as we’ve wanted to get to restyling, our focus rings, maybe hasn’t happened quite yet. We’re still working on buttons, but looking at other components that we’re currently working on that would be super, it would go a long way if we like tackled it at that moment. Picking your battles at the right time. The last thing Dacey, before you can jump back in is for these best practices between design and dev, you can see there’s definitely overlap.
I think again, with where our maturity is we’re handling a lot of this, but especially design leads, designers always talk about how empathetic they are. Put them to the test on that. It’s not rocket science to learn what’s the difference between a link and a button is or even what the best practices of alt text is? We all know that designs first start off with designers so instead of throwing these designs over the wall, so to say the dev and them making sure what alt text to have upfront, maybe they should be defining the alt text.
Maybe that’s a little bit farther in your maturity process, but it’s better to have an idea of the alt text and a developer to come in for approval or tweaking rather than just saying, I need alt text in all these areas or even worse, not mentioning anything and just leaving it up to the developer.
>> DACEY: Bruce had a really good call out because I briefly talked about it, but I didn’t go into a lot more depth. There’s so much more with accessibility. I know we’re not going to cover everything about every way to use a semantic markup or semantic HTML. Definitely is a really good call out and that’s with headings. That’s going to be using an H1 through an H6. I know I’m guilty of this when I first started off as engineering, I used those for styling purposes. H1 out of the box has really large text. H6 is really small. When I was looking at a design, I’m like, “Oh, okay, this looks to be this amount of pixels, so I’m going to use the H3, and that’s not correct. We should not be using H1 through H6s is for styling purposes. They need to be in numerical order. They need to tell a story. That H1 is going to be your title of your whole page. Then, each sub-header is going to be maybe an H2. Maybe they have a sub-header underneath that. There’s a really great Chrome extension that I use called HeadingsMap. You can run it through your website, on a page, and it’ll show you the number order. Then, it’ll alert you if you have more than one H1. You’re not supposed to have more than one H1 on a page. It’ll let you know if you’re not going in descending order. Really, really, really good tool.
I highly recommend, if you are familiar with screen readers, or maybe you’re just starting off, go ahead and try to navigate your screen with just headings. They will put them in numerical order for the headings. Again, as somebody using a screen reader, they might say, “Okay, that heading one is the most important topic. If we’re not coding it correctly, it’s not going to be correct.” You also want to make sure you are using headings. Don’t use [inaudible], don’t use [inaudible]. You want to make sure that they can orient themselves on the screen. Landmarks as well. You want to make sure that they can skip through content.
When I use my screen reader, it’s so annoying when I have to hear a whole page before I can get to a place that I’m looking for. We won’t talk until a lot more landmarks, but these are some things that we look for on DEV side and does a really good job on our design side of pointing these things out and making sure it’s communicated across the team. Okay, I’m going to talk briefly about testing at Trainual and how we test all of our components. If you’re not familiar with Storybook, that’s where we are showcasing all of our components. These are going to be very foundational, such as just a link, and then we have just a button.
Then, we also showcase the different states. What does that button look on hover? What does that button look on focus? What does that button look for the different sizes?
This is really important for our design team to be able to see the options that we have, as well as engineering to know what kind of recipes they have that they can play around with, and then great for product as well. At Trainual, we use their other tool called Chromatic, and this is allowing us to test for visual regressions. This was really important for accessibility as well because we are a large team of over 20 engineers.
Even though I might change this color to be accessible, another squad might come in and say, “Oh, no. I want this color to be different,” because we are quite a bit of squads and it’s hard to communicate with all of us on a weekly basis. Chromatic allows me to get notified if anybody does alter one of our design system components, and I can see exactly what that regression is. It’s going to give you a difference of your actual image and not the DOM, which is very, very important if you’re using a tool maybe your class names will change each time the page loads. This is very important to make sure that once we put something accessible in place that it stays that way because color is a really big one, and it’s so hard.
We need to make sure we’re not using color to explain meaning, and making sure there’s a good color contrast. We just want to ensure that other squad members– not saying that they would. Things happen by accident. We all know CSS, cascading style sheets. You mess with one thing, and something else completely changes that you might not want. It’s definitely our safety net. I definitely talked about I test with a screen reader. We’re starting to train all of our QA team to also test with screen readers as well. It’s an ongoing process, we’re not perfect, but that’s something that we’re slowly getting into.
Same with we use some automated tools, but we also manual test. Whenever we’re creating a new feature or maybe a component, we’ll write out all the different types of manual tests we need to do, so buttons, make sure that focus and hover state look different than just the normal states, so things like that. We have our own testing checkbox. If you’re looking for that, you can definitely search online. There’s a lot of great checklists for manual testing. I don’t have brand loyalty or test loyalty, you can Lex. I use so many different softwares because they all have something that’s going to benefit them. I think it’s best for you to test out what works best for your team.
Communicate that because not every tool is going to be the same. If you’re testing with one tool, and QA is testing with another tool, you might have some conflicting things because some tests might not test for everything. For an example, Lighthouse is used on our marketing site, but we use something else on the engineering. Whenever I’m looking at our marketing site, marketing is like, “Well, nothing failed.” I’m like, “Oh, but this tool, it does.” Then, with manual testing. It’s just important to stay consistent. That’s something you can document in your style guide or your design system as well of what testing tools you’re using internally. Okay, I will switch it over to Alex.
>> ALEX: Yes, for the last part of this, we’ll talk about just the buy-in side of things, so how do you get people to get engaged and jump on board for accessibility within your company. Just an initial disclaimer, I think the ideas that I’m going to bring up are probably good in theory at every company, but it’s going to be a different mix depending on the company if you’re working remote, if you’re not. It’s just going to be different for every company. Take all these ideas with a grain of salt, but also understand that some form of this is probably a good idea. The first thing I’d say is definitely speak people’s language.
If you’re bringing up accessibility to someone from the finance team, you don’t need to say how much better the UX is going to be or anything like that. That might be important and that person might understand that, but you can also talk about how much money it’s going to save in the long term, and stuff like that. When you’re talking to designers, obviously, talk about how pretty or how the user experience is not going to take an effect, and if anything, the user experience is going to increase. The second part, I’d say, or second idea is really to just promote and engage. We have a accessibility Slack channel at our company. We’re mostly remote.
I know Dacey and I are fully remote, so having a Slack channel and posting new things about what other companies are doing or what we’ve done inside the channel is a great way to get people to engage. Also, on another side, Dacey was just talking about the T-shirts earlier. Dacey and I are wearing Saguaro T-shirts for our company’s design system name. If people want a t-shirt, or they ask, “What is that?”, it’s a great way to start talking about accessibility at the company. Do whatever you can to promote, and then engage people with accessibility and inclusive design.
The final note I’ll have on this and probably the strongest argument from the design system perspective is it’s really easier to bake this in upfront. I know Stark is an accessibility tool for Figma, and they always talked about baking in accessibility from the beginning. It’s going to be tremendously easier to do what Dacey and I are doing upfront in V1 of the design system when we’re building out these components than it would be for V2. Obviously, that means the accessibility is going to come into your product earlier.
That argument might not always make sense, in terms of– It’s always better now than later, I’ll say that, but it especially makes huge amount of sense to do it upfront if you’re starting from scratch or you’re moving from a legacy code base to a newer code base or you’re starting at a brand new company and they need a design system. It’s been a privilege, a huge increase, and ease of use for Dacey and I to start from the beginning when we were building out our foundations. Some of the things that were inside our tool before we started with the company we’re still tweaking right now because there’s so many dependencies on them.
It’s very easy to see the stuff that we created ourselves, it’s been accessible from the start. While the things that were there maybe even a year earlier still aren’t accessible because there’s just so many dependencies, and it becomes a spiderweb. That’s all I had on that. Dacey, did you want to chime in and give more buy-in tips?
>> DACEY: Yes. Let me just finish this one link, sorry.
>> ALEX: No worries.
>> DACEY: Okay, awesome. Yes, for buy-in. Definitely agree with what Alex stated. It was really important that we found somebody in our corner to really help us advocate for accessibility. Luckily for us, the VP of engineering actually wrote his dissertation on assistive technologies. When he came to Trainual, he always wanted to make Trainual more accessible. However, Alex and I, there’s a saying, force something down someone’s throat, and so we definitely were just like, “Hey, we’re making this accessible. Hey, we’re making this accessible.” Definitely just do and not ask for permission. Because of that, there’s another saying, the squeaky wheel gets the oil. We were definitely very squeaky.
Because of that, we’re going to start training all of our engineering and QA on accessibility best practices starting at the end of quarter three, which is a huge win, especially since it was not something that, it’s not that the team didn’t want to do it, it was just when do we prioritize this. That’s the big thing. We’re changing languages right now, we’re implementing a brand new design system, so there’s a lot of moving pieces. The fact that we were able to find someone in our corner to help advocate for that, and it being on the leadership team, that was a huge win for us. Definitely recommend just talking to people on your team.
They might not know what accessibility is, but if you advocate and explain it to them, how can you not get on board with making a website or an application more accessible? That ties into the education piece. Again, I mentioned not everybody is going to be an accessibility expert. Just talking about it to people one-on-one, they say, “Oh, yes, this is great. However, I’m just afraid,” or, “I’d heard that the documentation is scary,” or, “I just don’t know where to start.” Just allowing them to know that you’re going to be in their corner to help explain. For us, we used our Trainual, which is our internal tool that–
I mean, we used our actual product, and that allowed me and [inaudible] to make content depending on the different teams. An example, we have a training manual [inaudible] Trainual, the name, we created a Trainual manual just for customer-facing roles. How should they talk to people that disclose that they might have a disability? What do you do if somebody asks for an accessibility feature? We created this training content that whenever a customer-facing role, somebody switches to that role or the new hire, they automatically get assigned this. It’s so important and we can end that session with quizzes, and we’re making sure that people are consuming that information.
We’re also doing the same thing for QA, engineer, design. We’re making sure that everybody knows their piece of the puzzle. With the education piece there’s also documenting. You can’t just tell people, okay, this is how you make an [inaudible] more accessible, you really want to document it somewhere, make sure that they have access to that documentation. Especially you might not touch or text for several months and you might be like, oh, I forgot, how do I do this?
It’s documented somewhere, it’s your single source of truth. What we do is we just research the documentation for accessibility and really try to put it in more layman’s terms, provide a lot of code examples, a lot of design examples, just to make sure it’s very clear. We also do a lot of lunch and learns. This is when we get together, all of product design and engineering, for an hour every other week, and so people can sign up. We decided to create lunch and learns about accessibility.
Part one to get buy-in was why does accessibility matter. We brought in the statistics of the 15% of people around the world have a disability. We also brought it down to, because you might get told, well, maybe our users are not disabled. I bring in the piece that I have a disability because it’s a really shocker piece because just by looking, I have a hidden disability is what it’s called, just by looking at me, you might not know. We also talk about the marketing piece.
How if you increase your accessibility, SEO can also increase organically. We know who’s coming to this meeting and we want to make sure that we’re advocating for every single team member, and why that they should say, oh, yes, we really need to do this. We also talk about the product side of if it’s more accessible, then we can have more users. There’s that Field of Dreams movie. If you build it, they will come. If you build it more accessible, you’re going to have more users be able to use the product. Lunch and learns were very important. We created a lunch and learn a couple of weeks ago for just testing, why testing is important, and then how we test.
It wasn’t a, okay, now go home and go and test this. It’s just so it’s on their mind of, okay, a lot goes into testing. We do a lot of information through Slack, making sure that we showcase some before and after of why it’s so important. [inaudible] was a big one, I also record a screen reader. Maybe a lot of people at our company don’t use them but I’m like, “Listen to how a screen reader is going to read this. It’s horrible. It’s reading the path of the image. It says unlabeled image. I have no idea what this image means. Now that we’ve added Alt text, now listen to this. Now, you definitely understand.” It’s very important that we constantly advocate.
It’s an ongoing process to try to get buy-in. Again, the ask for forgiveness, not permission. Lex and I decided that we’re going to follow WCAG’s AA requirements, even though we’re going to try to do AAA whenever we can. We decided that between ourselves, and then we just said, “Oh, hey, company, this is what we’re doing.” We didn’t ask, can we make the site more accessible? Because product was probably going to say, “Well, why should we?” You might have a lot of questions. We just went ahead and did it anyways. Again, each team is going to be different, each company’s going to be different. You know your company based on some of the things in the past. It wasn’t a lot of effort on us.
Like I said, we already had a lot of these things in play like using Slack for education, the lunch and learns were already in play. Yes, each person and each company is going to be very different. This is what worked for us. Please don’t do this and say, “Well, Dacey and Alex told me to do this,” and it just doesn’t work. You definitely know, but these are things that worked for us.
>> ALEX: Even say, Dacey, the question asking your manager or anyone above you like, “What standard should we follow, AA or AAA?” I’ve never ended up getting an answer back. They always say like, “Oh, we’ll get back to you.” Understandably, the state that we’re in right now, it’s really hard for them to answer. I see it might be very obvious to us and people on this call, but I see their side too of just they don’t want to commit to something. I think that one’s super important in terms of just going with it and saying, “Well, we’re just going to do it,” and especially just bake it in in the beginning and it’s really not too much extra work. If it is, we just won’t tell him. [chuckles]
The last thing I’ll say that you inspired me, Dacey, on finding your allies too. We’re talking about the VP of engineering, it’s always a good one to get. It might not sound as poetic and it’s probably more practical, but finding people who care I found isn’t really the easiest thing. It’s like finding people at your company that like to learn and also who are perfectionists. I’m sure people know the perfectionists at the company and people that are willing to learn, it is a lot to learn. Someone that might care might fall a little bit short.
I think we found the most success on people that are really good developers, are really good designers, people that are perfectionists and just want to do the best job that they can.
Those people are going to know that accessibility is for the best.
>> DACEY: I had a question from May that said, “Any objections to aim for AAA?” No. That’s something that we said whenever we can aim for AAA, that’s what we’re going to do. There were some things that when looking at AAA and AA and just A, the conformance levels are going to be very different, but the standard or what you have to adhere to is very different as well. You’re going to hear a lot of opinions. Some people say that AAA is not obtainable, and some people say that just A is you shouldn’t ever do it. I think that’s going to be an internal question of what you want to do.
Like we said, we’re going to try to adhere to AAA whenever possible, but if not, then we’re just saying that AA is our guideline but knowing that we will look at AAA and try to hit that whenever.
>> ALEX: It’s definitely never a no to AAA, it’s just again with the dependencies, it might just be like, we just we can’t do it now, it will be so much easier later kind of thing. Always on the back burner for sure. Looking at more of these questions.
>> DACEY: I will say depending on who all you have to communicate with that, we did have to talk to product about this is what we want to do and what level of conformance should we adhere to, and the first question was, well, how long is it going to take? Because you have to think of revenue, and that’s why it was so important for us to just have the huge meeting with the whole company and say, this is why it’s important because you might have questions of like, how is it going to tie into revenue? You want to make sure that you come to those meetings well prepared because you don’t want to sit there install and say, I don’t know.
Definitely that’s why we did the research of the accessibility and SEO. What I did there, I ran a Lighthouse report because you can run it on SEO and accessibility and you could see where there’s some overlap. I also made sure I got documentation that it was said that things that are more accessible have higher rankings for search engine optimization, so there were things out there that tell you that. I just like to come prepared for any type of question, but even then try to beat the question by just automatically saying these are some of the benefits that we can provide.
One of the things is if you’re trying to get your company to accept accessibility, let them know that it’s not just people with disabilities this is helping, it’s going to be usability. Maybe you have a user that’s a brand new parent that’s holding a baby in one hand and trying to navigate a computer with the other, there’s going to be situational limitations such as that. Maybe they’re in a library and want to watch a video but they forgot their headphones. How are they going to get that information? Include subtitles or at least a transcript. Maybe there’s a temporary disability, broken glasses or you broke your arm. These are things that you can advocate for or push when advocating for accessibility.
It is that my last company when I tried to push accessibility I got told our users are not disabled, straight out flat. These are things that I just wasn’t prepared for to have that response, so I did not know how to counter that comment, and so if you’re trying to, like I said, advocate for your company, just be prepared to have a whole bunch of different questions because you’re going to get asked a ton. Even our recruiter asked me a couple days ago, “Oh, why should we focus on this?” It’s going to affect people on the team that you don’t really necessarily know it’s going to affect, but that’s again just really important, do your research ahead of time.
>> ALEX: I’m trying to think of a running list of things to prepare people for. You mentioned just a flat answer of our users aren’t disabled. I’ve definitely heard from the design side, like, “Oh, it’s not as pretty,” or something like that. I’m trying to think other ones like money comes up, extra time putting into it, it’s complicated.
>> DACEY: Oh, yes. I get told, “Well, should we make a separate product that’s just more accessible?” Well, who wants to deal with two full websites like carbon copies except one’s successful and one’s not? Then people would say, “We’ll deal with it when we get asked to make it accessible,” and you should just say, “Well, we could be losing people now.” As a matter of fact, we are getting people to reach out, luckily, saying, “Hey, where are you in accessibility and making this more accessible and say, ‘This was just really helpful for me.'”
Again, coming prepared, I reached out to our customer-facing roles and said, Hey, are we having people bring up accessibility? Are people asking if we’re accessible whenever they’re a prospect?” These were things that I just went ahead and ask to help prepare my case, my proposal, you want to make sure you’re covering every base, and so it’s just very important.
>> ALEX: I probably think too– Oh, sorry. Maybe, are we out of time?
>> AMBER: No. Well, I just thought I’d jump in. I don’t know if you have a lot more prepared, but there are a few questions that I noted down. Do you want me to hold a couple more minutes or [crosstalk]–
>> ALEX: No, no. Please go.
>> AMBER: Okay. I know there’s a little conversation in the chat, but just in case someone couldn’t see the chat, I went to get this. Sounds like you all don’t have a public decision tree on Alt text that you mentioned, Dacey, it’s not publicly available. Do you want to talk about the one you recommended if someone’s looking for one of those?
>> DACEY: Yes. Currently, our design system is not public. We’re still a lot of work in progress. We just started this back in October. I think eventually some of it will be public, I could be misspeaking, Alex, but yes. I submitted in the chat one from w3.org, and it is an Alt decision tree. This is not for every single use case, but this was a great starting point for the decision tree. The first one is going to be like, does the image contain text? If no, then you continue to the next one, and if yes, then it’s going to say, well, if it’s associated with text nearby, then you don’t add the Alt text. This is how you use it.
There’s quite a bit of, like I said, use cases, but it’s not the end all be all. I’m sure that next week’s talk they’re going to talk about a lot more, and hopefully, they can provide you with some other resources, but this was just one that I saw. This is what I got the idea to make a decision tree internally. We just again rephrased a lot of the questions, we added a little bit more things like that. Hopefully, that answers [crosstalk]–
>> ALEX: Probably maybe even got rid of some things if we just simply don’t have that scenario inside of our app.
>> AMBER: It’s good to take these tools and modify it so it actually really applies to your organization, otherwise, it’s less useful. Do you have other design systems? I know one that you mentioned, which we’ve spent a bunch of time looking at, is IBMs. Are you aware of other open-source design systems since yours isn’t available yet that you might recommend people look at if they’re trying to get inspiration?
>> DACEY: Oh yes. We have so many bookmarked. I’ll let Alex share some of his favorite, but yes, IBM with Carbon, that’s on our top list that we always look at, and that’s a great point is if you don’t know where to start, take a look at those and you can see some of their documentation. I think Carbon has a great accessibility portion of how to make this component accessible. I know they have their own testing tool as well for automated test. Can we link to carbon? Yes. Awesome. Thank you for linking that. Lex, do you want to talk about some of the other favorites?
>> ALEX: I probably won’t list any specifically, I’ll put some in the chat, but the biggest thing is some of them are definitely low key similar to our design system. They might have an accessibility section in their documentation, but they also might have it specific to each component. It might be at the bottom of the buttons, they might have five or six bullet points on accessibility, so I think IBM is like that too. If you have your favorite open-source design system in general, I’m guessing it has some accessibility stuff.
I can also put more links in terms of ones that maybe emphasize it a little bit more than others, but I definitely would say a lot of them will have some piece of it and they just might be a little bit hidden down at the bottom of the page.
>> DACEY: You’re going to probably find your own favorites. Some of the ones that we look for we make sure documents how to use the component, some of the best patterns, accessibility. We also look at examples like do they have Storybook as well because that’s a way that we can look at how should we organize our storybook. There’s some really amazing ones. There’s one called, is it [inaudible] or Sprout? I will put it in the link. Theirs too, I look at it a lot.
>> AMBER: Nick asked a question and it’s possible that you don’t know the answer to this because it’s a little bit WordPress-specific, but he was wondering if you could share a little bit about the workflow of design systems to a digital product, which I know your product isn’t specifically WordPress, but he was asking about a WordPress theme, but I don’t know if there’s things you can draw. He asked, how would you keep the WordPress theme files in sync with Storybook and your Figma toolkit? Do you have any thoughts about keeping code in sync with what you’re doing or modifying in either of those places?
>> DACEY: I don’t have experience with WordPress, but what we do is whenever we’re coding and creating the component, we immediately add the Storybook [inaudible], so that lives with our code. The moment we update the styles for that component in React and JavaScript, it’ll automatically update Storybook. Then, once we commit a pull request to get our code looked at, then Chromatic runs and says, oh, hey, there’s a visual change, so we do rely on a lot of automation to get that to work. With the Figma side, we use Zeroheight, we call it Saguaro. That’s where we can actually embed Figma and Storybook. Zeroheuight is our single source of truth.
It’s going to have all the documentation about that component, all the different states, so hover and focus. Then, they can see the Figma examples, as well as the Storybook example all there, they don’t have to worry about going to three different tools to find out how this works. It’s just that one place, they can see everything. Hopefully, that made sense. Lex, you can probably talk about the Figma side because you all make components within Figma to try to make sure it’s standardized between all of the designers.
>> ALEX: Actually, sorry, I was busy with sending in links. Could you just quickly rephrase the question?
>> DACEY: Yes. Whenever you’re creating a new design, you’re using our pallet system and type system. You’ve already created foundational things inside of Figma that makes it just easier for you to I guess plug and play. In that way, it’s standardized across all design of like, hey, these are how our buttons always look. You’ve created a foundational component within Figma to do that, right?
>> ALEX: Yes, exactly. Figma is great with those foundational styles. I think some things that they’re probably still even investigating in the future are probably things like spacing and having padding and margin variables, but they have color is great. We always tell each each designer, never use a hex color, you’re always grabbing from what we have in the tool belt, and you can make your textiles as well. You can make your icon components. I’d say icon, text, color. Trying to think what other variables you can add in there.
Other than that, they’re still trying to bridge the gap a lot with development in terms of how can we, again, make it so that they’re only choosing from the variables. In those senses, for that practical example of there’s no padding variable inside of Figma, what do we do, we just shove it down designers’ throats that you’re only supposed to be using the spacer variables that we have documented inside of our Zeroheight documentation software. That combined with using the styles is the biggest thing, or even that that was a big thing even just this week was telling designers like, “When you’re making anything, use only our colors, use only our border radiuses,” and things like that.
>> AMBER: I think we could definitely probably try and find a speaker to talk about how to do this in a more WordPress product. Thanks. I’ll put that on my to-do list for people who are interested in that. We have just a couple minutes. I’m trying to look back and see if there were any other questions. Let’s see. Beth had asked more about Alt types, but I’m wondering if maybe it makes sense to save that for next time. Then, I think mostly, we’ve answered all of the questions unless I missed any.
>> DACEY: If anybody uses Medium, Alex writes articles about our process creating a design system, so some of it’s what we’ve talked about today, but definitely take a look at Alex’s Medium article because there are a lot about design systems. I’ve seen in the chat where some people are wanting to start a design system. That is a good resource. There’s a book that both of us read about a design system. Again, I don’t know how much WordPress is going to be different, but it’s about design systems as a whole. There’s so many resources out there. We’ve had to be very resourceful being just us two. There’s so much out there.
We live in a great age where there’s so much information for free on the internet, so really awesome there.
>> AMBER: If anyone wants to follow up with you or get a hold of you, what’s the best way to get ahold of each of you?
>> DACEY: Probably LinkedIn and Twitter are my favorite two. I am Dacey Nolan on LinkedIn. I think it is– Oh, Dacey-Nolan. I can share my link. Then, in Twitter, I am Dacey_Nolan. Just my name. I’m not very creative I like to tell people. I can also share my Twitter as well. I don’t really post a lot as much as I used to. I do offer free mentorship as well. If you reach out to me and we’re compatible, I offer free mentorships.
>> AMBER: Is there [inaudible] [crosstalk], Alex?
>> ALEX: Oh, for me, yes, LinkedIn is perfect. I just posted that in the thread as well. [inaudible] Alex Zlaktus on LinkedIn.
>> AMBER: Okay. Well, thank you both so much. This has been phenomenal.
[] [END OF AUDIO]
