Hacking Digital Styleguides for Accessibility: Type, Color, Imagery

1. Introduction: Hello, I am Tatiana Mac, and I am an interactive art director and designer, currently based in Portland, Oregon. I am really passionate about reflecting the diverse communities that we live in through my work, which means creating designs that are both inclusive as well as accessible. I've always really been intrigued by the role that art can play in reflecting our social landscape. I realized I could be doing Maura's a designer to follow that ethic, so I started reading about Web. It's possibility as well as the conditions that are affected by an inaccessible web, and I realized a lot of style guides don't consider accessibility or outright break it. I'm really excited about talking about accessibility today, but I do want to mention, but I'm not an accessibility expert by any means. But I hope that my work and dozens of interactive style guides to create different experiences will help to provide you with the unique beginners perspective so that you can learn to make your designs more accessible in a digestible way. Today's class will cover some fundamentals around Web accessibility. You'll leave today's class with the baseline understanding of Web accessibility guidelines , how to work within restrictive, incomplete or inaccessible guidelines on the common mistakes made as well as how to fix them. Specifically, we'll discuss why you should care about accessibility, how to make a business case for accessibility in your company, the main categories of disabilities, as well as breaking down a style guy into its constituent parts of typography, color and photography and imagery. Then that foundational knowledge. We'll look at the common mistakes made that make the Web inaccessible. Then we'll cover how to fix those mistakes so that you can start affecting your next style guide or website project. I've also included a checklist that you can run against for your next project in the resource of section, So I'm excited that you're here and let's get started. 2. The Case for Accessibility: So you might be here because you've heard some buzz around hashtag ally or a 11 Why? Which is a neuron imm for accessibility? Or you just might want to do more in order to create accessible designs within your team. Regardless of the reason, I'm just excited that you're here and hope to equip you with some key ways to improve accessibility in your designs and encourage you with reasons why X ability matters. Reason. One accessibility is for everyone, not just disabled folks. In fact, accessible design improves experience for everyone. For those who don't require special needs, it just makes the experience easier to use. So it's of a universal benefit. Accessible design is often conflated with the term universal design, and they're not equivalent. Universal Design expresses that a design should be as universal as possible and work for as many people as possible, recognizing that some designs won't work for everyone. Accessibility, on the other hand, starts with a specific special needs of different folks, and designs from their first accessible design is often synonymous with inclusive design and effectively. Both terms mean that you're starting with a special needs and building from there so that you're including everyone. So the end goal is to make sure that all designs are accessible and eventually accessible. Design and universal design will be one in the same. But until we reach that level of saturation, it's important to consider the unique needs of people in order to maximize their experiences. There's this misconception that people who require accessible design are a small subset or in each population. That's not true. Of the seven billion people in the world, roughly 15% of people require some sort of accessibility considerations because they suffer some sort of impairment. That equates to being about 1.14 billion users who are affected and who could be having a negative user experience. Because you're not considering accessible design, that's a huge number. Reason Teoh accessible design can provide huge economic gains at little to no additional cost. Accessible Web standards intersect with a lot of other standards, such as a CEO or search engine optimization, legal considerations, technical considerations to make your site more performance and responsive web best practices. So if you're making improvements to your S. E O that are accessible, you'll gain the benefit of both at little to no extra costs. I think that's what we call a bogo. Accessible design also increases the number of overall users, which can lead to increase engagement and increased conversion, which ultimately leads to more revenue. I think that's what business folks call a good return on investment reason. Three. Unfortunately, because a lot of brands neglect accessibility standards, the brands that consider accessibility are set apart. So, for example, if you have an e commerce site with a smooth shopping experience for people who require accessibility considerations, they're gonna notice that you're a brand that seems to care enough to provide them with a positive experience. And ultimately people care about brands that first care about them. Reason for As modern designers, we need to understand the critical role that we can play in affecting positive social change at our core. What designers are meant to do is to improve the lives and experiences of our users, all of our users. So we must acknowledge our privilege as designers and understand where our users air. Coming from part of being an ally is not Knee Shing, a specific group of people, no matter how small the group an aspect of our industry is using the term user or market share to describe a group of people who used a specific browser device or operating system . We use this term in order to prioritize and de prioritize different issues that occur because there can be so many. It's a necessary and pragmatic approach when talking about devices and browsers and clients because of all the permutations that can occur. But when we're talking about humans, this becomes highly problematic. While people can typically choose what device or browser they use, they can't choose to not be affected by their conditions. So we need to make sure we take care of them and provide them with good experiences. So the four reasons we just covered or four of the largest. But there are numerous other benefits to providing accessible designs. If you're looking for a specific one in order to make a business case for your stakeholders have included, a list of resource is in the description of the class 3. Understanding Accessibility: before we dive in the style, guides will want to late a basic foundation of accessibility. We'll start with the categories of disabilities, modes of disabilities, the types of assistive technologies or 80 that folks rely on, as well as the Web standards against which accessibility is measured. Laying this foundation will help to ensure that we're asking the right questions as early as possible within our projects. Let's start with the main six categories of disability visual. Auditory, motor, physical, neurological, cognitive and speech. Users who are affected by visual impairment typically rely on screen readers or screen magnify IRS or adjusting their browser settings. Auditory users are hearing impaired, so they usually rely on visualizations of audio content, such as closed captioning. Users who have motor or physical disabilities typically rely on assistive technologies or eighties that allow them to navigate the Web with limited mobility, such as mouth sticks or eye tracking software or alternate keyboards. Neurological conditions convey very greatly based on the specific condition your user has, but a common one to consider in terms of accessibility is seizures. Folks who can experience seizures can be triggered by access motion, so law often rely on reduced motion on their devices, which is a setting in order to prevent these instances. Cognitive disorders such as autism or down syndrome can vary greatly, like neurological disorder, so it's important to understand how these users are affected by the flow of content. For example. Lastly, it's important to note that this list of disabilities is not exhaustive and that users can be affected by more than one. Thes conditions aren't mutually exclusive, so users can have very compromised experiences. So as designers, we should ensure that we're maintaining that empathy and understanding and always seeking to learn better, more accessible ways to improve our designs. So the conditions I just described are all permanent, which means they'll affect the users for the rest of their lives. But as we mentioned before, making designs accessible helps everyone not just disabled folks, so it can help people who are temporarily or situational e affected by that disability. For example, if we create a design that's navigable by one hand, that can help someone who is situation Lee in need of that assistance, such as someone who's holding a baby or it can help someone temporarily, such as someone who has recently broken arm and, of course, someone who is permanently affected. So someone who only has one arm now for people who have access to both arms using that site will just be faster and easier, and they probably won't notice any difference at all. And I'm pretty sure that's what we call privilege. 4. Breaking Down a Style Guide: here, I want to mention that there are guidelines against which to measure our accessibility standards. The World Wide Web Consortium or W three C publishes the Web content, accessibility guidelines or W C. A. G, and it is a really robust set of guidelines that could fill up an entire class. But for today, what you need to know is that they exist, that they're the North Star for accessibility, and they are ultimately what we will be going over in our recommendations today. So now that we've established your baseline understanding of accessibility, the what and the why let's talk about how we can implement accessibility into our designs by way of style guides. Something important to mention here is that I am a believer in design as a part of design systems. And what that means is, I believe that design should be treated like a framework instead of a set of rules and regulations to abide by. And I believe in maintaining the spirit of the style guide as opposed to the letter law. The style guide. This dude does not abide, especially in the name of accessibility when designing for Web accessibility and digital design in general, it's impossible to maintain control of all the different combinations of devices and browsers, so we'll probably be breaking some rules in the following section. And that's okay. Style guides can range quite a bit in terms of how much they cover. Large corporate style guides can be 200 page tones that are really great for getting too high shelves, whereas your local bodega might only have a five page style guide. Or maybe that's only here in Portland. Regardless, style guides cover the same types of sections today will be going through typography, color and photography and imagery. We'll discuss the common types of mistakes made within those three sections, as well as ways to fix them and make your designs more accessible. 5. Style Guide: Typography: type is typically the first section of a style guide well after the 17 or 18 pages of appropriate logo usage and its importance and priority makes a lot of sense. Type is the way that we receive our content and Foncier like the close of our content. But type convene complicated because its origins come from print. So many of the nuances that were created for print don't come across very well digitally and can cause accessibility issues. The main purpose of type is to provide you with the content so it needs to be legible and clear. The W three c W C A. G calls her type to be perceivable and understandable. That's the main measurement against which we will measure are examples today. Example. One. Your style guide calls for your paragraph type to be size 12 which is too small. The first thing to do to fix that is to increase your paragraph. Text to 16 or better yet 20. Then from there, make your header tags proportionally increase. Based on the criteria outlined in the style guide, it's important to remember here that your users ultimately have control over how large the tax renders on their device. So you don't want to hinge the success of your design based on having a specific font size , because it'll break as they increase the font size example to your style. Guide calls for fun waits Letter to thing, which can be hard to read, particularly for non retina displays. My first recommendation would be to avoid using any thin type settings within the style guide. Now that might not be possible, particularly with brands that have an affinity for using all thin weights across their entire Fahnestock. Can't we just be a little bit more font weight positive here and include all font weights? Regardless, If you have to use Finn fonts, make sure that you increase the font weight from 100. Say to 200 Urban 300. The visual difference is somewhat negligible, even to brand teams, and you'll increase legibility ton fold. Second. If you can't do that, then I would recommend relying on the fallback fund. I found that a lot of style guides are written by print designers or environmental designers whose solution to digital type is just use. Helvetica, which, while not a very interesting choice, at least ensures that your content is legible and that's ultimately what's most important. Example three style guide calls for centered, text centred text is difficult to read because it changes the starting point of each line. This causes a huge cognitive load and is inaccessible, so a way to capture the spirit of centered text is to center the container and to left, align the text within the container. That way you'll maintain the spirit of centered text without causing accessibility issues. Center text is not the only problematic type of text, and in fact it's any text where the starting point changes. So for left to right languages that includes right alignment for right toe left languages like Arabic that includes left alignment. Also sorry to you newspaper fans. But justified text is also problematic because while it works well in print, it changes the amount of space between words, which causes a lot of issues and responsive design. For people who have cognitive disorders, it can cause something called blurring, which makes it very inaccessible and difficult for them to read. So way that you can capture the spirit of justified text is to wrap your text in a container and out of background color or an outline so that you can capture the spirit of the justified text without causing accessibility issues. Example. For style Guide calls for a lot of all caps. Text all caps Text is first of all, difficult for people with cognitive disorders to read. Second of all screen readers will read any text that's been typed out as all caps. So if you set your caps lock key on as an abbreviation, so respect would be read as R E s P E C T. If you need to make text all caps for some reason, ensure that you're respecting sentence casing or title casing when you type it out and then rely on the text. Transform uppercase property. But use it sparingly because, remember, it's difficult to read. Example. Header tags are usedto Onley, convey visual differences and not to convey content hierarchy. People with cognitive disorders rely on heading tags in order to help them understand the content architecture of your page. People with attention deficit disorder or memory challenges will rely on header tags to quickly skim the page or remind them where they are, so if you're just using it to convey visual differences. This can cause a really confusing user experience for these users. So by all means avoid using header tags just to convey visual differences. Make sure that your contents is in sequence and utilizes all of the heading tags in order. Additionally, HTML five included some very helpful HTML attributes that helped to clarify different types of sections. This is super helpful for screen readers because it provides additional contacts for what type of section the user is in. For example, article or section can help add additional hierarchy to the heading tags So used, um example ling stylings are only differentiated by color. Now there are a small subset of colors that you can use to differentiate your link stylings from your body copy and from the background. But that window of colors is very narrow, and it's likely that your style guide doesn't include those colors. So instead, I'd recommend you avoid that all together and ensure you're adding an additional styling to differentiate links from body copy. The most common and widely understood is the underlying. The underlining will ensure that your user knows that it's a call to action which will help to differentiate it from the body copy. Secondly, you'll want to make sure that you don't use the underlining property for anything else, because that can create a lot of confusion for your user. From a content perspective, you want to ensure that you're linking an appropriate part of the phrase. The reason for this is because users can utilise the screen reader to gather all links from the page to gain a quick overview of all of the links that you've included. What that does is it removes links from their context. So it's very important that isolated those phrases can describe two things. One, What is it and to where are you taking me? 6. Style Guide: Color: color is wonderful because it can help to differentiate or classify information and overall out a lot of personality to your design. But for somebody who suffers from color blindness, they won't be able to see that differentiation. So it's important that you use color in an additive manner in order to enhance your story. There's also color contrast consideration, So the W three C W C a. G includes levels of color. Contrast accessibility. You'll want to take thes accessibility screens into consideration for your design, and a really helpful way to do this is to download the stark plug in for sketch. It's a highly simple but effective tool that will screen your designs for accessibility and tell you how you feel. Adobe Creative Cloud also includes in built in accessibility filters as well, so make sure that you're reviewing your designs because it's way too easy. Not to example. One. The style guide calls for light type on light background or dark type on a dark background , basically any instance where there's not sufficient contrast. As I mentioned before, there are many tools to help you with contrast ratio, but a fun fact because I know designers love great type on white is that hex code 767676 is the lightest form of gray that you can use against a white background and still gain level a grading at size 16 text. So if you'll remember from before, that's the very smallest, you should be making your body copy so you can still have those sexy graze. Just do it an accessible way. Example to But style Guide calls for color combinations that vibrate color vibration or chroma. Steri Op Sys occurs to colors that fall opposite of one another on the color wheel and effectively, the two colors air just competing, which causes a visual vibration. Some examples include blue and red, red and green, blue and orange. You should avoid color vibration because it can cause cognitive overload and be dizzying, which is a really negative experience for all users. 7. Style Guide: Photography & Imagery: imagery like photography illustration and iconography can really help to enhance your story . They can provide emotion, personality and helped to articulate your brand beyond the content. There's an old journalism principle that applies to accessibility here, which is is the image providing further context and additional story toe what is already there? If it's not, you shouldn't include it. But if it is, let's make sure that we do so in an accessible way. Example. One style guides lack criteria around halt text for images. All Texas. The copy that is rendered when an image is still loading has failed to load. And what a screen reader reads in lieu of the image. All text can help to provide the context that the image includes. So when we assess whether or not an image is helping to articulate our story, we need to make sure that our all text describes how it helps to articulate the story despite being one of the most widely known aspects to a Web accessibility due to its intersectionality with a CEO or search engine optimization, implementing all text appropriately can actually be very difficult. There's tremendous literature around the appropriate nuances, and I really suggest that you read up on those because there are many and they're all very important for today will cover a few basics. First, you need to determine whether your image is providing content or a function. If it's providing content, then you should assess whether the image is besides a description that can help to describe it already. So, for example, on a museum website that has a painting encompassed with a long description that describes the painting The artist that year it was painted then you don't need to include all text in this instance because it would be redundant. But in most instances, this is not the case. Images require that content. So when that is the case, make sure that you are being as concise as possible because users air trying to quickly skim the content using their screen reader and long flowery descriptions will interrupt that experience. Second, if your image serves as a function, you should always include all text. It would provide a confusing user experience if you omitted it. So always, always, always if it is linking somewhere, which is the most principal function that an image serves, make sure you include all text. If you find that an image is highly complex, say a graph where there are a lot of aspects to describe and all text might not be appropriate because we want it to be concise. So in those instances it may be more appropriate to use the HTML attributes of long desk or long description. We'll talk a little bit more about that later, so that covers some of the most basic aspects of all text. Before we move on, I think it's important to mention that all text is frequently something that falls on the hands of the last person who touches it, which is typically a developer or NSE Oh specialist. And that is problematic because it's usually a rush to the finish your in Q. And they noticed that the all text is missing instead. This is a great opportunity to encourage your teams to start integrating all text as part of your overarching information architecture, because with accessibility, you can't be the only person on your team who is paying attention to this. So all text is a great way to equip other members of your team into considering it. Earlier on such as during the content hierarchy phase, because when done properly, micro copy like all text, can really enhance the story. You're telling, um, and provide a lot of additional context. Example to Raster. Images are used when S. P. G's or scalable vector graphics could be used instead. S P G's are really awesome because they provide so much more than what raster images can. So, for example, SV G's allow you to pinch and zoom for users who are vision impaired to gain more detail without requiring the bloating of large raster images. SPG is also allow you to customize certain CSS properties to help make your image more accessible. And there's tremendous amounts of animation and other additive properties that you can do that are really cool. So we'll cover a few basics for today. First, you'll want to make sure that your SPG includes title and description attributes similarly , toe all tags. This will help the user to understand the content of your SPG, particularly for screen readers. Second of all, you will want to ensure that for more complex Suggs, such as those that include a landscape or a graph that you group like attributes and provide them with their own titles. So, for example, ah landscape image with house and a car and a corgi should all have their individual titles . This will help for the user to gain an overview of these complex layouts. And like with photos, you'll want to make sure to include all text now. One exception for S P G's is that if they're decorative, that is, they don't really. They aren't necessary to your content flow. You don't need to include an all text, but you'll want to make sure that you include what's called a blank all texts to ensure that the SPG renders properly. These are just a few basics. There is a lot of literature about S P G's, and I highly recommend that you take some time to read much of literature's out there. And one of my favorite SVG experts, Sarah Sweden, has written dozens of articles and conducted lots of talks around Suggs and accessibility. Plus, she loves birds so you can put an SVG bird on it. Example. Three. A brand guide relies heavily on data visualization in order to tell his story. Now this in it of itself, is not a bad thing. I don't know if you've noticed, but we're kind of in the age of data right now. And lots of companies, especially tech companies, rely on data visualization in order to provide a visual context for their highly complex information. Without it, they wouldn't have a lot to visualize. So it's wonderful that data visualization is having its coming of age right now. But we want to make sure that we're including data visualizations in a very accessible way . Data visualization is excellent because it can take highly complex data and transform it into a digestible visual format. But want to remember that for those who don't have access to seeing it visually and ensure that we're providing them with helpful descriptions along the way. So there's two main ways that you can do that. The first is to describe a clear and concise description within your SPG or image. If your data is highly complex, like, let's say, there's lots of bar graphs or complex systems that are hard to describe Concisely, I recommend using an HTML attributes called Long Desk, and what that effectively does is it links you to a separate page where, then you can fully articulate the image and to provide all the contextual clues so that someone who's vision impaired can still gain all of the context of someone who can see the data visualization example for a style Guy wrote lies heavily or exclusively on motion in order to help articulate or to enhance its stories, I've seen some style guides that use motion in every instance possible. I'm sure you've seen sites that rely heavily on Parallax, and this is problematic because it can cause a lot of motion sickness for people who have for Tego. Or it can cause cognitive issues for people who have disorders like autism. But motion, when used in moderation, can really provide a lot to your story and and a little bit of whimsy. So there's two basic rules that you'll want to consider around emotion. First, does it enhance the story you're trying to tell? And second, can the story hold up on its own without it? If you answered yes to both of those questions, then by all means proceed. But the reason why it's important to make sure that the story still coherent without it is that users have access to turning off motion in what's called reduced motion. Effectively. What that does is it removes interactions like parallax or bouncing all of those interactions that we've become so familiar with today in order to reduce some of that motion sickness that can occur. So you'll want to make sure that your experience still stands true even without the motion . We just covered a lot of information they're of, but we really only focused on three main aspects of style guides, which are funds, colors and photography and imagery. There's a wealth of information out there that we didn't cover today, and I'd highly recommend that you deep dive into it. I've included a couple of my favorite links in The Resource is Section, but please read evangelize, ask questions, accessibility communities very welcoming and excited by anyone who is excited about accessibility. So onward 8. Defending Rule Breaking: So you've possessed your design against these accessibility standards, and now you're ready for the next step, which is to send your design off to the powers that be for agency side. That can mean sending it to your client's brand team. If your software brand side sending it to your sea level stakeholders Regardless, you are probably a little bit nervous because you've technically broken some rules. There's two scenarios that can happen, and I'm gonna walk you through both scenario one. You send it off and it gets approved. Nice. You're just stuck it to the man scenario. Two. You get caught. Luckily, I have spent a lot of my life watching Lee old procedurals, and that's gonna come in handy here because you're going to treat this like a legal transaction. First, assess the rule of the style guide. Check that you actually broke the rule. If you did, then site the W three c W. C. A G accessibility guidelines that have been broken by the style Guide Express How this negatively impacts your user. I find that it is really helpful here if you can fund access to the specific data for the company because that allows you to turn the user into an actual tangible number. And if you can associate that number with engagement or better yet, revenue, then you can associate a specific dollar amount. Sometimes you just gotta show them the money lost. And if you still find that you're getting a lot of pushback, I find that it's helpful to try to strike a compromise and to get on the phone with the brand team. For example. It's important to note here that with accessibility, it's not about the quest for Level A a perfection, though that would be great. So if the brand team is pushing back heavily on a specific shade of gray that you know not to be accessible than try to make it as accessible as possible while getting it through. Because access is about ensuring the user gets the information, and if it never goes live, they won't get the information at all. This process can seem like a lot, especially if you're the only person on your team that seems to care about accessibility. But I promise that with each conversation that you have in a each rule that you describe to your team, it will get a little bit easier each time, so keep carrying on 9. Designing with Accessibility in Mind: so a lot of what we've discussed today has been in the context of working within an existing style guide. But if the opportunity presents itself for you to create a style guide from scratch or website from scratch, that's awesome. I highly recommend that you take the following approach first start with a clear skeletal wire frame. Your wire frame should have clear content Hierarchy. Express your content in a coherent manner and be highly accessible. Now would be a little bit worrying if every single website looked like a college thesis. Paper times New Roman size 12 Double spaced. So a top this we should feel free to use color and imagery and type in order to enhance our experience and give personality tour brands. We just need to make sure that as we add each of those additive properties that the wire frame and it's success of user experience gets maintained each and every step of the way. That way, everyone receives ah clear user experience, and for those who have access to those improvements, they're still getting a great user experience as well. If and when those extras love being extra are stripped out by assistive technologies. Your users air still left with a coherent user experience, and your design won't be broken. And that's aces. I highly encourage you to start with your next style guide in the wild. That can be for your own brands, internal Style guide or your next client project. But regardless, I've included a checklist for you that covers all the material from today in the resource is section. So please share your work and I'm excited to see your process and what you've learned I can't wait to see. 10. Conclusion: The Future of Accessibility: I want to mention that today, most of the accessibility considerations that we've made have been primarily for physical and mental disabilities. But there's a whole host of other considerations to be made in the name of social inclusivity. Social inclusivity can include everything from including non binary gender options in your form fields to reflecting underrepresented races in your stock photography choices to creating a more performance site that functions on two G Internet speeds. It can be easy to be overwhelmed by the number of considerations to be made, but I like to remember that it's not about perfection. Instead, it's about taking small, incremental steps each and every day, so it can be as simple as improving a form on your website or starting a conversation about how to be more accessible with your team. Every stuff that we take moves us forward in this fight for a more accessible web, and with the technology ever evolving, we really need to keep this quest of perfection in mind. And in fact, the W three, c W. C. A. G, will release its 2.1 release later this year. It's been about 10 years since the last one's been released, so there will be a lot of new information toe learn and new ways to innovate within our space. Other ways that are innovating for fun that are accessible are CSS grid of the work they're doing to create editorial and dynamic designs will allow us to have our cake and eat it, too. Designs will be interesting, but more importantly, maintained their accessibility through their content hierarchy. And that's a really great thing. Being a good ally means being resilient as we continue this quest for making a more accessible and eventually universal Web. As the role of technology expands in our users lives, it's important that we make sure we bring all of our users along in a way that's both equitable and responsible. Thank you so much for watching my skill share class and congratulations on becoming an ally