Be A Digital Ally: Styles and Style Guides

Jay McKay: Good evening, everyone. Welcome to Be A Digital Ally. Today, this month for November, we're going to be doing styles and style guides. Welcome. Welcome. We have some slides available for you if you are interested. I'm going to go ahead and put those in the chat again for any new arrivals. That is a Bitly link, it is bit.ly, and then slash capital N, and then O-V, then capital S-T-Y-L-E-S and then capital B, capital A, capital D, capital A. If you have any issues with the slide formatting or accessing any of the links on those, please let us know and we'll make sure we get you a better copy sent to you later.

All right, we're going to go ahead and get going. Just some quick introductions. I am Jay McKay, director of community programs. I am a white female in her early forties. I have short brown hair, and I'm wearing my big huge gamer headset with my microphone.

Melissa Green: Hi. Great to see you this evening. My name is Melissa Green. I'm a digital accessibility specialist with Knowbility. I'm a white woman in my early forties. I have shoulder length red hair, and I'm joining the meeting from my home office in Tuscaloosa, Alabama.

Jay McKay: I think Julieanne, who is one of our community engagement specialists, will be joining us shortly. We'll hear from her later. All right. Our agenda for today, if you are not familiar with our Be A Digital Ally series, we always try to do at least a brief overview of what happens here, what is accessibility, just because we know everybody comes to accessibility at different times. We didn't want to give the overview of accessibility and then never do it ever, ever again. We will do a brief introduction on what accessibility is, and then we will jump into our topic for the month, which is the styles and style guides, talking about what is a style guide.

There's lots of definitions, so we'll talk about it from how we will be referring to it going forward, and then really giving you some ideas on how to develop good style guides for your own organization and how to apply those styles in common authoring programs. I think you're going to get a lot out of this. It's one of those things where I think this is those easy to do accessibility things that we forget to do or we didn't know it was possible. I'm really excited for this month. Just some quick housekeeping. First, of course, thank you for letting us be a part of your journey. Like I said before, everybody comes to accessibility at different points in time.

We're glad to have you here with us today. If you have any questions, and really that is one of the biggest joys of this program is having these conversations with you, having these discussions, if you have questions, please feel free to type them in the chat. We will usually monitor those throughout the evening. Sometimes we'll answer it in the chat. Sometimes we'll bring it up for the whole group at the end, or at times we may say if anybody has any questions, we'll give you the opportunity to jump on the microphone as well. I mentioned earlier that we do have the auto captions enabled, so that feature is available.

And then for future BADAs, when you register with us, if you need additional accessibility features like American Sign Language interpretation, just let us know when you register so that way we can make sure we have those services in place. And as always, please, please ask for help. We are happy to do so. All right. Just a brief overview of what Knowbility is. Knowbility was founded in 1999. It is a nonprofit based in Austin, Texas, but we operate globally. Melissa and I both live in Alabama. We actually live in two different parts of Alabama, so it's kind of fun that way. And then also a lot of our employees are across the country.

Headquarters is Austin, but really we work everywhere. Our mission is to create an inclusive digital world for people with disabilities. We do that through educational programs, awareness, advocacy. As I mentioned before, we are a nonprofit, so we do encourage you to visit our donate page. We are doing our end of year fundraiser right now, and really every dollar helps to put all these community programs for you, such as our Accessibility Internet Rally that we just wrapped up. That's our web competition. We have AccessU coming up in the spring. We'll talk a little bit more about that later.

Our AccessWorks program, which is usability testing, and then our Digital Accessibility Programming for K12, so students, parents, administrators learning about how to create those inclusive classrooms. And then of course, Be A Digital Ally. Really donating helps us make this programming available to everyone. Let's talk about what accessibility is, right? We say we want to make things more accessible to everyone. What does that mean? Because when we hear the word accessibility, it can mean different things to different people. Before we start, we want to make sure we have a common language for it.

When we talk about accessibility, we want to refer to it as that somebody with a disability would be able to access and utilize it as fully or as independently as somebody without a disability. Can they hear and see the content? Do they know where to go or what to expect when they're navigating a webpage? Can they independently navigate using preferred tools? Do I have to use a mouse and keyboard? Can I use a touchscreen? What if neither of those options work for me? Can they independently complete the tasks and explore all the areas? Just because I can do some things on the website, can I actually do everything that somebody without a disability can do?

And then lastly, can they fully participate in an authentic manner? And really when you have all those other points covered, that really does allow that person to be their true self when they're interacting. Next, we want to talk about why inclusive design is so important and why we do things like make sure we're looking at accessibility and considering it. 15% of the world's population lives with some form of a disability. Many people who may not consider themselves disabled are defined as that by the World Health Organization. This could include things like visual impairments or a hearing impairment.

I know for some of my family, as they get older, maybe they have to wear a hearing aid, but they don't necessarily consider themselves disabled because of it. But who is defining it as such? But the other big reason to look at inclusive design is because several people without disabilities benefit from accessible design. Think of curb cuts, not just wheelchairs, but strollers, skateboarders, me just because I like to take walks really, really early in the morning, not having to shuffle my feet along. I don't have to pick up my feet to hit those curbs, things like that. Close captioning when you're watching your streaming services.

Those are things that we all benefit from, but not necessarily have disabilities. The next term we want to talk about is assistive technology. The reason why we want to bring it up is because we will talk about it later. Assistive technology enables and promotes the inclusion and participation especially of persons with a disability, aging populations, people with non-communicable diseases. The primary purpose of assistive products is to maintain or improve that individual's functioning and independence, thereby promoting their well-being. The idea is if I'm somebody with a disability, having that assistive technology lets me maintain or improve my quality of life.

I'm able to complete those tests. I'm able to access my information, my healthcare. I can do banking, right? Next, we want to talk about what are some examples of assistive technology. Assistive technology can be any product, equipment, software, or system used by people with disabilities to increase, maintain, or improve functional capabilities. When we say anything, it really does mean that. If you're somebody who needs to have a slanted surface for writing, or some students need to have pencil grips to hold onto their writing utensils better.

These are some kind of higher tech, especially when you're looking at web access, so things like screen readers, JAWS and VDA, where it reads what's on the screen to the user. Refreshable Braille displays. Alternative navigation methods, which can include only using a keyboard, not being able to use a mouse. Using a switch or voice command because they're, again, not able to access with a mouse, can't touch the screen. They've got some other way to access. We mentioned close captions, transcripts. Again, that's that text-based file of what was on the video. Magnification, using that zoom feature on your computer. Excuse me.

Dark mode and high contrast. These are all examples of assistive technology. We also have a link for you to explore later from our friends over at WebAIM. They have some additional examples that also include some pictures and some videos demonstrating it. Before we start our journey, we always want to remind you, it is a journey, right? We always seek to improve. It's not about perfection. We love this quote from Maya Angelou. It says, "Do the best you can until you know better. Then, when you know better, you do better." Really it's that idea of we want you to feel comfortable in starting somewhere.

We'd rather you start and start small than to not do anything because you're not sure where to go next. With that, we're going to go ahead and start our journey with style guides. I'm just going to check the chat because I know we had some questions pop up there. It looks like we got the slides. Jonathan Katz, yes, definitely. Please, please, and hopefully we'll see you again. We just opened up our call for proposals, Jonathan, so I hope to see your proposal in the next couple days in there. I just put you on the spot and I'm kind of not sorry about it.

Jonathan Katz: No worries. It'll depend on our federal travel budget this year. But if not this year, then future years. But yes, AccessU is 100% awesome. Y'all should go.

Jay McKay: Excellent, excellent. Bringing endorsement. Love it. Let's talk about style guides. Even when we were prepping for this and having conversations, when you hear the term style guide, sometimes people will talk about style guide is something that's strictly about writing conventions. However, in the extended research I was doing, I would see things that would say style guide or they would call it a style brand guide or a style/brand guide, or sometimes they would call it a style branding guide. Really we are going to be using the word style guide, but there will be some elements that might be more in those styles/brand guides that we'll be referring to as well.

When we're talking about these style guides, it's really a document or a resource that is available to your organization to set those expectations and standards. Having something that everybody can go to. They know where it is. They know how to find it. They can access it. It's readily available. What it's going to cover are different things. These are just a few examples. Writing, grammar, word usage, tone. Should your writing reflect a professional tone, or do you want the tone to sound more friendly? You're going to look at formatting. What kind of layouts do we want to use for certain types of documents?

What is our heading structures? What type of font? And then also looking to add some design elements. What colors do we use? What are our brand colors? How do we utilize our logos? When do we use the full logo versus the small logo? That's really what we're talking about today is that document, or it could be web-based, wherever you want it to be stored. I know some people that just make it as a Word document that lives in a drive space. Some companies will make it a webpage that everybody can access. Just something that's readily available. Next, we want to talk about why it benefits you and your organization to have some kind of style guide.

And really the big thing is it's just consistency across the organization. It provides that uniformity. It's allowing people to not have to second guess themselves or try to ask eight different people. It really just keeps that consistency. It also reduces the cognitive load for staff. If you're like me, I can spend way too much time deciding what I think is the perfect font for an announcement, or maybe a coworker created something and I really like the font that they used, but maybe I'm not sure which one they used and I'm not sure how to look up that information. I, again, will just start scrolling through my font list until I find the one that's the best match.

That takes a lot off of my plate in having to make those decisions because it's just there. These are the fonts that I use for this type of writing. This is how it's structured. And then also it's a way to reinforce and support your commitment to accessibility. When you're creating your style guides and you have that accessibility baked in and you're considering things like what are appropriate font sizes? When I'm looking at colors, do they have good color contrast? You're already building in that support for accessibility because it's there and you're letting your staff know accessibility is important to us because our style guide reflects that's important to us.

Next, we want to just talk about some typical items and just break them down a little bit more of what they mean. Excuse me. The first item is topography. This is the art of arranging letters and text in a way that can make the copy legible, clear, and visually appealing to the reader. We want to make sure that it is readable, but also appealing. There's always that saying how accessibility can't be pretty or it's boring. It can be pretty. It can be attractive. Again, when you look at it from the beginning to say, "We really like this font. This is a good font. It's easily readable," now we've got it. We don't have to second guess and find the next one.

Your style guide can include those examples of fonts that are used for various purposes. Instead of just one font for all of your text, you may want Roboto for your main or your general text use. And then maybe you use Times Roman for quotes. As you probably guessed, I am not a designer because God only knows what those combinations look like. That's why you have somebody else make those decisions and not me. Again, cognitive load. I don't have to worry about it. But that's what you're doing when you're talking about your typography. You're letting people know, when there's a heading, this is the font size to use.

When you're doing main text, this is the font to use. When it's a quote, we want you to use this type of font. When you're looking at color palette, we'll actually go a little bit into some tools that you can use to help you make those determinations. But you want to look at what are your brand colors and how are those colors being used for different functions. This could include different web elements such as buttons on your webpage or how you want your links to look. Next, you could be having some information about your logos and the images. Your style guide can include guidance on how to use your logo.

For example, in our Knowbility logo, we have this Knowbilitree. I call it the tree of knowledge because Knowbility is very hard for me to say, but our little tree of knowledge before our name. Most of the time we will just use the whole logo, but there are times where we find it appropriate to just use that little tree. The style guide can let us know when to use either. And then because we're talking about logos and images, having alternative text and talking about alternative text in your style guide is useful too. You want to make sure they understand, if you're going to use an image, if you're going to use our logo, make sure you have the alternative text and having it available for them to use.

Again, big cognitive load saver, because then I don't have to think about how am I supposed to write this alternative text. It's already been provided for me. Let me go on to some examples here. We have some really great links that I'm going to try and click through, and hopefully my computer doesn't crash too much. We, of course, provided just a screenshot of our website that we have. This is our style guide. At the top you can see on the left side, we have Knowbility, and then it breaks it down into we're going to talk about general, and then we have colors, buttons, and topography. Then it goes onto the next item such as navigation and components forms.

But in the color palette, when you look over to the right side, it's showing you not only our different colors, but we'll talk a little bit later about things like hex code and the name of the colors as well. This is the way that we have our color palette arranged, and it's just a very quick way for us to reference. What I also like about our style guide is where it says that colors and then again, like I mentioned before, buttons. What color do I use for our website buttons? And then the topography when I click on that will take me to this is the font for the headings, this is the font for general text. Let me go back to our other examples here.

I'm not going to click through all of these, but I do want to just highlight some things here. MailChimp content style guide is really interesting in how they talk about creating that consistent brand messaging. I thought that was a good example to share. The A11y project content style guide really provides some good examples of language use. Let me click on that one. Like here, they're saying here's an active tone on their website. They say we prefer an active tone, but then they provide examples, so do, and then they say some people navigate via keyboard, don't. It was discovered earlier that some people navigate using keyboard input.

By just leaving it to where it says tone, we provide an active tone. That might not be enough information for somebody, but by providing these really clear examples, then all of your users understand more fully what the expectation is. I really like the National Center on Disability and Journalism Disability Language style guide. If I click on it, we will go down a rabbit hole and I won't get to the rest of this content today, but it is good in-depth reference of how to refer to people with disabilities when writing. It's not just here's how to do it, but it gives you some more context into why you want to consider using that type of writing style.

And then A11y style guide, it's really just a good resource to make sure that you've thought of all the possibilities of what you should be including in that style guide. Another really good tool for you to navigate and explore on your own. Here we go. Some tips for how to build your own style guide. I thought this was a really interesting one where they talked about revisiting your mission statement. Because when you look at your mission statement, that might help you figure out or help clarify what your tone is or what your writing style is by looking at how you've written that mission statement. That way if it doesn't feel the way that you want to write, maybe you need to rewrite your mission statement.

But it's a good place to start. Pick a base style guide or manual and build from there. There are several style manuals, right? There's the Chicago Style, APA. The idea is that you could pick one that you feel the base will suit your needs, but then you can customize it as needed. For example, maybe you want your style guide to be based off of the Associated Press style guide, but you also want to use an Oxford comma, which typically is not enforced in the AP style guide. That's an example of taking the base, but then adding from there. We talked about providing examples. This was another one that I modified from that A11y style guide and it's talking about acronyms.

They say the expectation is you spell out the acronym in full before using the shorthand version, and then they provided the example which says a user interface, UI, is the space where interactions between humans and machines occur. The goal of UI is to make it easy, efficient, and enjoyable to operate a machine. Again, just providing that really nice, clear example, so that way there's not too many questions. And then also we want to talk about having that document and email structures being part of that consideration. Julieanne, I think you were going to walk us through some examples of that.

Julieanne King: All right, I'm going to talk to you a little bit about ways you can start testing your template for developing your style guide. One of the things you can do is develop it in a document. I've developed one in a Google Doc trying to understand what works best for us. For me, when I construct it, I think about... Sorry, I'm lost myself. I think about how to build it, how you are putting your pieces together, so using this top navigation. When you want to build it, you want to build it in the order from left to right and top to bottom when you're developing your style guide. It's like, okay, let's play around with what could go into a document.

The first document I'm showing you is a Google Doc to help a team explore options for a document template or style guide. You can test elements out in a regular document to find out what you like and what is accessible. It can also help new team members to orient themselves to your process. In the test template, I've included heading structure, font choices with various weighted strokes, line and paragraph spacing, and other normal text options for my team to explore. When developing a test template, it's a good idea to get those settings that you want included for consistency. It also makes it much easier for setting up your template or style guide once you determine what you and your team want.

It's also a good practice to increase line spacing even above the 1.5 as it provides more visual breathing room for reading and reducing eye fatigue. I personally custom set it to 1.25. 1.5 is sometimes too big. 1.25 seems to be a better breathing space. Let's start at the top. I include a key for the markup to anyone arriving at the template can understand the elements. We have the name, test template heading structure and documents. The first thing I have in brackets is key and it says [Key: Square brackets and yellow highlighting are the instructions for the document, allowing new staff to understand our process.]

Next line down. [Copy to use. Make a copy and rename your document. The title I have it bolded should be using the H1 heading. The following setting should be set within the style or template and copy instructions.] Those are the instructions for the document. My first heading beyond the title is document styles heading and normal text, because that's the first thing you're going to usually hit up here at the top where it says styles. That's the first one you're going to go through. Again, I'm starting from left to right and then top to bottom.

In the instructions for this section, I have, Naming key: Styles (heading and normal text), that's what's under this section, colon, Font with a possible subcategory or dropdown of font weight. I'm going to go up and show you an example of Roboto because that's the heading structure we use. Oops, I think I have to go to the headings first for that. When you go to headings, how did Roboto not end up in the top anymore? You can see how it has a dropdown menu over here for those that are cited. For those that aren't, I'm not quite sure how it conveys to you. They have multiple levels. From the top, they have thin.

Next one down is light. Next one down is normal. The next one is medium. The next one is bold, and the final is black. The thin one is very thin stroke on the letters and it's very light colored. It increases in thickness of letter and intensity of color. I decided to go with Roboto. I really like Roboto as a heading structure. It's bold, it's dramatic, and it really makes you find your headings quick. So then I have the styles and I go down from heading one to heading six. Each one listing what their font is, the heading level, the weight, the point size, and the color. I'll give you an example of heading six because it incorporates everything I listed.

H6, Roboto, weight medium, 14.5 point, italicized black. And then for my normal text, I chose normal text, Tahoma, 13 point, black. By listing this, that helps us be able to look at how they all look sparsed out on the page, or not sparsed out, but laid out on the page and see that we can tell a difference as we go down in each heading size so that we can differentiate the heading levels as we go. Next across the top, you select your heading, you select your font, you select the font and the sub weight, the points, italicize if you're going to use it. For the line in spacing, that comes all the way across to this particular dropdown.

I'm listing the selections I made specifically for application to this particular document in order from top to bottom. Now, I did a custom selection on the spacing, but that doesn't arrive until further down where you set that. The first item I have is select add space after paragraph text all. That means all the headings and settings and the normal text all received that element. Next, I have spacing. Custom spacing set to 1.25. I went into custom spacing. I made my change here, and I applied it. Next, keep with next headings all level so that we don't have separation.

Keep lines together, headings, all levels and prevent single lines, normal text so that you don't have single lines hanging off as a lone wolf on the other page. Finally, the last section I have here are other normal text options. To give my team a chance to see where I'm going from, I listed actually 11 different texts all set at 13 point all in black so that you can see them right next listed out how they look, how the appearance is, the ease of reading, sorry I got lost, the ease of readability, the look and the spacing. You can see the space between the individual letters. You can see the height. Again, Calibri is at 13 point and so is Lexend.

It's quite a difference. Normal text Merryweather further down is really big and they're all 13 points. That gives you a sense of the variety you can have. But this lets you play around and look at things, see how they compare, see how they look. Do we need to make the point size go up? Do we need to make the point size go down? You can practice all of this before you decide, and then you can move on to creating your style guide. Melissa, we'll do that in just a minute. I'm going to show you one other quick document. For templates for email headings and structure, this is another thing that became really important.

We just wrapped up the AIR competition where the judging has started, but we were sending out weekly emails to our teams. We had important information that was sometimes repeated, sometimes not, but there were times when they needed to refer back to other information. It's like, okay, how can we communicate this clearly? Well, let's try setting up an email template heading with heading structures so that people can navigate and find the important information and see the nested level and ideally that screen readers can also follow that within going through their email. We did it the same as I did on the previous document.

I set up heading structure, I only went four levels this time, and put the point sizes, the weight, the color. The most important piece here was the subject line. In the instructions, I have inner subject line with starting context and key terms for recipient quick search. The example was AIR 2022 9/27. That's the context. Week three. That's the main context. They know it's from AIR when they get their email boxes flooded with information. I know mine's super full, and it's every day so many things. Having that context tells me at least I can know immediately who my client is or who the person I'm working with is.

Next, we have key terms of things that are covered in the email. We let them know it was week three. It was the checkpoint, usability testing, and Knowbility logo. By having this context set for anybody writing an email, that helps us provide the recipients with better information so that they can find the information they need quickly and easily. They can do a search and ideally find it faster than if... For example, I've had clients I've worked with where the email chain when I printed it out was 17 pages long and I had to go back and manually try and highlight in order, number it in order to be able to follow the conversation.

By creating separate emails and then putting the context in there, that helps people find their information quickly. The body or content, again, you enter the body and information there. If you have organizational specifications, you would go ahead and list those, the things that you need to include in the body text if that's important for your organization. Finally, closing salutations and sign off. If they have a specific way they want you to end it or anything like this is privacy or donate or here's how to catch us on LinkedIn, you can specify all of that.

And then again, when new team members come in, they can quickly orient to your process and make sure that their email signature line is set right, that they're structuring the subject line. Again, you don't have to do it this way, it's however you want, but this is a way that we found has been helpful. Those are ideas for setting up a style guide for emails to help both your recipients and your team understand better how you're communicating. Now I'll let Melissa take it away and show you how to build style guides.

Melissa Green: Great. Thanks, Julieanne. Yup, Jay, thank you so much here with the slides. Excellent. We talked a bit about what style guides are and approaches for developing them. Next, I'd like to talk a bit about how you can apply these styles in your favorite content creation tools, popular tools for creating digital content. After determining your organization's style, namely the fonts, the font formats, and the colors you wish to use, you can use features in the tools you use to create digital content to save those formatting options and apply them to text in new and existing content. Next slide please, Jay.

In many of the tools we use to create digital content, whether that be documents, spreadsheets, emails, slides, content for the web, we can use built-in styles to enhance accessibility and quickly apply a set of formatting choices throughout our content. Styles are reusable options, sets of formatting options, you can apply to text. For example, say you want the headings in a document to appear in bold and in a particular color and font size. Although you can manually set each formatting option individually for each heading, it's much easier to use a style that applies to all these options at once. For example, in Microsoft Office, there are built-in title, subtitle, and heading styles.

In Microsoft Word, these styles are located in the Styles gallery, a visual menu located on the home tab depicted in a screenshot on the left side of this slide. In addition to enhancing accessibility and making it easier to apply formatting throughout a document, using the heading styles in Microsoft Word makes it possible to go directly to content of interest in that document. Using the navigation page, which is depicted in a screenshot on the right side of the slide. Using the headings has the additional benefit of allowing you to move entire chunks of the document around.

Generate an automatically updating table of contents for your document, as well as ensure accessibility to the widest possible audience when you export it as a PDF. We'll revisit Word shortly. Google apps such as Google Docs, Google Sheets, Google Slides also offer the ability to use built-in styles. As with Word and other Office apps, Google Docs users can organize a document with text styles like titles and headings and you can customize the font and size of the text styles and set your styles as defaults. Julieanne gave us a hint of that, showing us the Google Doc that she used to create a style guide for her team.

Also, as with Word, adding headings to a document allows you to create a dynamically updating table of contents. Google Docs also offers a document outline feature that detects the headings in your document and pulls them out to help you organize your content similar towards Navigation pane. Next slide please. This slide includes a screenshot of paragraph styles in Adobe InDesign, which is a popular program for creating digital and print layouts. Just like Microsoft Office and Google Apps built-in styles, using InDesign built-in styles allows you to quickly apply formatting choices throughout your document.

Consistent use of the InDesign paragraph styles throughout a document is also critical for exporting the content to a tagged PDF. If you use both Microsoft Word and InDesign, you can map your Word styles to InDesign styles and use them in your InDesign files. Many of us use content management systems to administer, organize, and control our digital content. Most content management systems feature pre-made website templates and themes and visual interfaces that allow users to customize their website's design and manage its content without coding. The templates or themes you choose for your site define many aspects of your site's design, colors, text size, spacing, and more.

This slide features an example from the WordPress content management system. This is a popular content management system used to manage websites. When editing a page or a post on a website, WordPress users can access a style dropdown menu to apply the various headaches and other predefined styles built into the site's theme. It's very similar to how you apply text styles in Word, Docs, and InDesign. I should note that your ability to customize elements in a content management system varies by the platform and what your role is. For example, WordPress offers full site editing capability for users to customize their theme's typography, colors, and layouts.

However, even if your organization uses WordPress, you as an individual user may not be able to change theme or template files if you're not the site manager. That's something to keep in mind is your access to the various capabilities of your content management system. Next slide please. You don't have to use WordPress or a content management system to define styles for web content though. If you're working directly with HTML, you can add heading elements and other markup to define the semantic structure of the page to define the navigation and meaning of the page.

This slide features an example of content hierarchy with corresponding heading levels, with HTML code on the left and how the content might be presented to a visual user on the right. The H1 or top level heading describes the page as a whole. Plant foods that humans eat. There are two H2 or second level headings in the content, fruit and vegetables. Under the subheading of fruit are three H3 or third level headings, apple, orange, and banana. Under the subheading of vegetables, there are three H3 or third level headings, broccoli, Brussels sprouts, and green beans. I want to say thanks to the W3C for providing this example in their techniques for WCAG success criteria.

What determines how these elements are displayed? In other words, how does the web browser know to present the text marked as H1 in any particular way? In this case in a slightly larger and bolder font than text marked as a paragraph, how does it know to present the text marked as H2 with less emphasis than the text marked as H1 to present the third level heading in smaller font than the second level? Next slide please. Cascading style sheets or CSS are one way to format the layout of a webpage.

With CSS, you can control the color, the font, the size of text, the spacing between elements, how elements are positioned and laid out, what background images or background colors are to be used, the different displays for different devices and screen sizes and much, much more. All web browsers have a built-in style sheet that defines default styling for webpage content. The table on this slide shows the default CSS browser values for four HTML elements, link, body, H1, and H2. They and other tags are defined in the style sheet which specifies their size, color, position, and other characteristics.

Unless the user or the site owners specify otherwise, this is how these elements will be displayed with their default values. This approach using CSS to style HTML is sometimes referred to as separating content from presentation. Content means the text, headings, lists, regions, images, other elements that we define with HTML markup along with their inherent semantic or meanings. Presentation means the way in which that content is displayed as defined by CSS. By ensuring our content is in HTML and our presentation is in CSS, if someone disables or overrides the CSS, the content and the semantics or meaning should still be fully accessible.

This is the most popular method these days of defining visual styles. Next slide please. Why would a page author or end user override the browser's default styles? Our colleagues at WebAIM explain. A user with low vision may define a much larger text size. A user with color deficiency or low vision might override page colors to enforce certain colors or high contrast. A user with cognitive or learning disabilities might override positioning or disable images to ensure a more basic presentation. A user with dyslexia might change fonts and text spacing for better readability. Next slide please.

The CSS that defines how our elements look visually while keeping that content separate from the presentation, it can be added to web content, to HTML documents in three different ways: in line by using the style attribute inside HTML elements, so that essentially refers to putting content in your HTML file that defines how the HTML should be displayed, internal, by using a style element in the head section of the HTML page, or external, by using a link element to link to an external CSS file. This is the preferred method because it enables you to quickly make changes across your site.

It also offers additional benefits like improved load times because the CSS file is downloaded once and applied to each page on the website as needed. This external approach is demonstrated in a couple of code snippets on the bottom of this slide. The page has created an external style sheet named styles.CSS. The snippet on the left shows the head section of an HTML page containing a link to the style sheet, and the snippet from the style sheet itself is shown on the right side of the slide. It defines styles for the body, heading one, and P, paragraph elements. Body elements have a background color of powder blue.

Text styled or tagged as H1 will be blue, and text styled or tagged as P will be red. Once you've defined your organization's style, an external style sheet is a great way to apply that style across your website. Next slide please. Just talking about using some external styles to define colors. Speaking of color, as Jay and Julieanne shared, guidelines for visual style typically address color. Whether you're using office software to create documents and presentations, a content management system like WordPress to create word content, web content, or working with HTML, color is a very important factor.

Colors are displayed combining red, green, and blue light. On the web colors can be specified in different ways. For example, by color names, red, yellow, blue, cyan, magenta, and so on. Another way that colors can be specified on the web is with RGB, red, green, blue, or hexadecimal values. These are alpha numeric combinations, combinations of numbers and letters that define how intensely the red, green, and blue colors should be displayed. The tools we use to create digital content also use RGB and hexadecimal values. In the example shown on this slide, there's a swatch of soft orange color.

The hexadecimal value for that color is 4BAF4C and the RGB value is 251, 175, 76 or 251 for red, 175 for green, and 76 for blue. You may find yourself needing to determine the RGB or hexadecimal color values for a color you're using or a wish to use. There's a lot of approaches to this. I like using TPGI's Colour Contrast Analyser and its eyedrop tool. Jay, if you'll stop your share, I'll go ahead and switch to my desktop for a quick demo of that. All right, so right now I am on the Knowbility website. I've opened the Chrome browser and navigated to the Knowbility website. Let's say I like the purple that Knowbility is using and want to include it in my style guide and use it in my document, web, and other designs.

I would need to determine the color code used to represent that color. I navigate to the webpage that contains the color, so in this case the Knowbility site. Then open TPGI's Colour Contrast Analyser tool. I have that open in the foreground of my desktop. This is freely available tool that you download from the TPGI website and install on your computer. Its primary function is to check color contrast, so to ensure that combinations of foreground and background colors meet accessibility guidelines for color contrast. But I like using it for other color related tasks as well. I usually have it open anyway, so it's kind of come to be my primary color tool.

To use this tool to identify the color, I'll go ahead actually and just clear that color out from where I was using it previously. The way I would use this is to open up Colour Contrast Analyser, select the color picker, which is represented by an eyedropper icon. Hover the color picker box over the color that interests me, in this case it's the purple, and either click my mouse or hit enter. Colour Contrast Analyser has identified the hexadecimal color code for this purple as 6E2F75. If I need another value for the color, like the RGB value let's say, I can get that using the dropdown. Where it currently shows hex, I'm selecting the dropdown and switching to RGB.

The purple color is now represented with the RGB values 110, 47, 117. Once I have this code, I can do a lot with it. I can put it in my style guide and I can use it to specify colors in a document or on the web. I'm going to get this out of the way and navigate to a Word document now. I'm switching to a Word document. Let's say I want some of the text in my document to be the purple color. I grab from the Knowbility site. I can select the text I wish the style as purple. In this case, I'm choosing the first word in the document, fruit. Yo u choose the text you wish to style as a particular color. Select the font color button either at the ribbon at the top of the page or in the small dialogue box that appears.

Choose more colors, choose custom, and here's where we enter the color code for the color we wish to use. Newer versions of Office support both RGB and hex code entry. You could put the hex code in right here. The version of Office I have doesn't support that. It supports RGB, so I'll put that other set of numbers in. I found out using Colour Contrast Analyser that those are 110, 47, 117. I'll say okay. If I want to use this color as the basis for a color scheme, there are some great tools that can help me create combinations of colors that are visually appealing and meet accessibility guidelines for color contrast.

I'm going to switch to one of them now. In my Chrome browser, I've navigated to the website for the Accessibility Rocks color palette, an accessible color palette tool. It helps you visualize a palette of color combinations with accessibility in mind. To use it to generate a color scheme, you paste in the hex codes for the colors you're interested in working with. For example, when we visit the page, there's a number of colors that are kind of already specified, giving us a visual example here. If I want to use this with my colors, I would enter them in the space for colors. I'm entering my purple, represented by the hex code 6E2F75.

That soft orange color, let's say I want to include it in my scheme as well, I would after a comma enter its hex code as well, and then choose create palette. This allows me to see the color combinations that provide sufficient contrast, white on purple, purple on orange, and those that don't, black on purple, orange on white, and vice versa. Another tool that I'll sometimes use is called Adobe Color. I'm navigating to the Adobe Color website now. You can use this tool freely online to generate color palettes. If you also use Adobe products such as Photoshop or Illustrator, you can save and use these color pallets via Creative Cloud Libraries.

We saw a screenshot of the Knowbility style guide which defined the colors used for Knowbility publications. If I were doing graphic design for Knowbility using my Adobe tools, I would create a palette and import that into my Creative Cloud Libraries. Something that I really like here is the ability to extract colors from an image. I'll show you what I mean. I really like an image that I have open on my screen. This is a promotional image for Knowbility's Accessible Internet Rally or AIR. It includes a cute illustration, as well as some text in various shades of blue, purple, and yellow. I really like this color combination, but I don't want to try to track down the original file to look up the color codes.

But using Adobe Color, I can select extract theme from the toolbar at the top of the page, which I'm doing now, select the file, the image file, upload it, and Adobe Color will then extract the hex codes for the colors in the image. This not only gives me the codes I would need to build my pallette, but also allows me to check them for sufficient contrasts and other useful tasks. I'll point out the addition of accessibility tools in Adobe Color. Again, if you want to work all within one space, you can extract your colors, define your schemes, and do your contrast testing all in one spot. I'm going to bring it all together now using Microsoft Word as the content creation tool.

I'm switching over to Microsoft Word now. When creating Word documents, Outlook emails, Excel spreadsheets, PowerPoint presentations, other Microsoft Office content, you can enhance the accessibility of that content by applying the built-in title, subtitle, and heading styles rather than simply changing the text that you want to be perceived as a heading to look like a heading. I'll explain what I'm talking about. On my screen are two Word documents.

They each contain the same text from a simple English Wikipedia entry on fruit. In both documents, fruit appears at the top of the page and under fruit are five sections, types of fruits, botanical fruits, non-botanical fruits, area of agreement, and seedless fruits. Some of these sections have subsections. For example, under the second level heading types of fruits, there are listed several types of fruits, berry, pepo, hesperidium, palm, and droop. Similarly, botanical fruits has another heading falling under it, accessory fruits. Both of these documents contain the same text and have those headings.

The headings visually look similar, but only this first document uses Word's built-in styles versus simply changing the text appearance. Word styles are located in the Styles gallery, a visual menu in the home tab. I'm moving my mouse cursor over that area now. In this first document, the text introducing the document, fruit, and each section, types of fruits, berry, has been styled as a heading. Headings are particularly important style when it comes to accessibility because they help people scan your document both visually and with assistive technology.

When you use heading styles in Microsoft Word, you make it possible for assistive technology users to go directly to a section of a Word document using the keyboard and other shortcuts and for visual users to do the same using the Navigation pane. I'm going to open the Navigation pane now by selecting view and then Navigation pane. In the left sidebar, the Navigation pane is now open and headings are selected. We now can see that this document includes several headings. Fruit is the top level heading. Types of fruits, botanical fruits, and so on are the next level headings with some additional headings following under those, berry, pepo, accessory fruits, and so on.

Once we've added those headings, a visual user as well as an assistive technology user can go directly to the section of the document that interests them. Let's say accessory fruits, which I'm going to click on now. That'll take you directly to the section of the document, which can benefit all users. The best way to add headings is with heading styles. I'm switching to a version of the fruit document that does not have any headings, really any visual formatting slide. I'm going to quickly add some headings to this document by formatting the appropriate text as headings. First, let me go ahead and remove the formatting I applied when demonstrating color.

I'm going to add some heading to this document. First, I'm going to select the text I want to format as a heading, and I'm going to start with fruit, which describes the contents of the entire document and should be the top level heading or heading one. On the home tab, I can point to the various styles to preview them. As I mouse over the different styles with that text selected, I can see how their visual appearance would change if I selected that style. If you don't see the style you want, you can select the more arrow to expand the gallery. I clicked the heading style I wish to use. I'll go ahead and do that again, heading one.

And that applies the visual formatting to make the text look like a heading, as well as the behind the scenes information that enables assistive technology and other users to navigate directly to that heading. I'm going to quickly apply some styles to other instances of text serving as headings. Since fruit is the top level heading, the next level of headings in the hierarchy should fall under it as heading two. That's types of fruits, which I'm selecting the text and selecting heading two from styles. The other second level headings are botanical fruits, accessory fruits. I learned a lot about fruit in preparing this document.

Actually accessory fruits is a different level of heading. Heading two. Area of agreement, heading level two. And then the things that fall under these categories should be styled as a third level heading. Because berry comes after types of fruits in the hierarchy, it'll be a three, as will pepo, hesperidiums, palm, droop, and accessory fruits. I can see that these headings have been added by opening the Navigation pane, view Navigation pane. I can now quickly go directly to a section of the document that interests me. When the document is exported as a PDF, these headings will be carried over as H1 and H2 and H3 tags.

Let's say we've got this semantic information here, we've got the headings, but we don't like how they look. We've selected the style for our organization and defined it in the style guide. We need to make some changes towards built-in styles to make sure that things appear in a way that isn't keeping with our style guidelines. If you don't like how the heading text looks, or if it's not in keeping with your organization's style, you can change the formatting of that text and apply it to the style in the Styles gallery. I'll do that now. This, I'm selecting the text and the document that has the heading one style applied.

That's the title of the document, Fruit. Next, I would format that text with the selected attributes that I want. Let's say that our style guide says that titles of documents should be in 20 point font. I would go ahead and change that here or in the ribbon. I'll also go ahead and make this bold and change the color to Knowbility purple. With this formatted text selected, I can go to the Styles group, right click on the style in question, in this case heading one, and choose update heading one to match selection. What that will do is change all of the heading one text in the document to have those visual characteristics.

There's only one top level heading, so this isn't very impressive. I'm going to quickly do the same for our second and third level headings to have a little more of a visual effect. I'm selecting text styled as heading two, right-clicking on the heading two style, choosing update heading two to match selection. Sorry, I'm selecting the heading two. I need to first change what I want it to look like. Let's say I want this one to be purple as well and underlined. I can right click on that style in the Style gallery, choose update heading two to match selection, and all of the heading twos in the document will be updated.

Botanical fruits is also now purple and underlined, as are these other second level headings. I'll do the same really quickly with the third level heading. Highlight or select text that's styled with that heading, right click on the heading in the styles area. Sorry, make the change first. I'll just do purple for this one. Right click. Update the heading to match the selection and all instances of that heading are updated throughout the document. Again, very useful for quickly applying a set of formatting changes throughout the document. You can also modify a style directly in the Style gallery without using the text in your document.

You might do this let's say if you've defined your organization style and you want to set up a template, a Word document template where all the styles are in keeping with what you've defined for your organization. You don't have to have a document to work with. You could start with a blank document. You would do this by right-clicking on a style in the Style gallery, choosing modify, and in the formatting section making any changes you wish to make, so the font, font size, any emphasis or underline placed on it, the color, the spacing, and so on. You can choose whether those changes apply just in this document or to all new documents based on this template.

If I were going to create a template for my style guide to write documents that are in keeping with my organizational style guide, I would choose new documents based on this template. That would mean that any new thing I created, it's already going to have that built-in purple and other formatting. I won't have to adjust that for each and every new document. You don't always want to do that, so it's nice to have some choices there. I'll quickly demonstrate two additional benefits of using built-in heading styles in Word. One is that it allows you to generate a dynamically updating table of contents in your document.

I'm positioning my cursor where I might want to add that table of contents. I'm going to the references tab in the Word ribbon, and I'm choosing in the table of contents group to insert one of the automatically updating tables of contents. I'm choosing automatic table one. This automatically inserts into my document a table of contents comprised of each heading and the page number on which that heading appears. If I make changes to my document, I can update each item in the table individually, or I can update the table as a whole. That's a great feature to provide some additional navigation within documents.

Finally, I've mentioned several times that consistent use of headings throughout a document is also critical for exporting the content to a tagged PDF. This is the PDF I created from the version of the Fruit document that contained headings. I'm opening up the tag panel for this PDF now. When we look in the tag panel, we can see multiple heading tags. There's H1, H2, and H3 tags that correspond with the heading levels in the Word document. If we look at a version of the PDF I created without headings, so I took that Word document that only had visual styles and no headings, open up the tag panel, we do have some tags for paragraphs, but that's all we have.

We have no tags that would allow the user to quickly see what a document is about or directly navigate to that section of a document. In addition to allowing you to quickly apply formatting changes throughout content, the presence of headings and other styles is a vital part of ensuring that document is going to be accessible if it's exported as a PDF. I'm going to stop my share. Jay, would you take us back to the slides and into our practice slide?

Jay McKay: We had a couple questions. Somebody wanted some clarification. At one point, you had used the underline for one of the headings and they just wanted clarification if that's a good option because in terms of WCAG and things like that, usually underlines are limited to link.

Melissa Green: Oh yes. That's a great feedback. I see your response to that. My thinking there was what you said, just for the purposes of the demonstration, I was trying to pick something visually distinct. But it is important, whether you're creating web or other content, that the parents of links be different than the parents of the body text. Usually people do this by having them appear as underlined or in a different color. If I had my links presented in this document in that way, I wouldn't want to also present the headings that way. It could be confusing for the user. I think that's a great point.

Jay McKay: If somebody is a content creator and they're working with a designer, if they are creating their content to feed to the designer using just a MS document with these headings, is that sufficient for the web developer essentially to recognize, "Oh, okay, this section is supposed to be under heading one. This section is general text," because they can see the heading structure in that Word document.

Melissa Green: I think that would be a good way to communicate with your developer or designer if you're not using other web development tools for that, wireframes and so on. Having a document where you as the user figure this out, determine what you want it to look like and identify those characteristics, that could be very helpful. You might have to do like Julieanne did in her example and not just format the different headings as how you want them to appear, but provide some textual explanation of that.

For example, rather than just having texts that says heading two, making there be texts that also says heading two, Lato font, bold, 20, and so on. Being sure to include those characteristics like Julieanne did, I think that would be important if we use the Word document approach.

Speaker 1: Can you hear me?

Melissa Green: Yes. Hi.

Speaker 1: I wonder if the MS Microsoft Word has a really powerful and really neat capability to say, "Add a note." Let's say we want to say, "Jimmy, should this be underlined? Is this sentence too high on? What do you think?" And then Jimmy can write back and say, "Yeah, it looks fine." Is that the type of thing that I would be able to use and shoot to my designer person, so that he doesn't have to sit there and talk to me on the telephone, he can read it at his leisure?

Melissa Green: I think that's a great way to communicate that information and start that conversation. Now, as far as I know, Microsoft Word is still not at the point where you could say export that content to create a style sheet for your website.

Speaker 1: Oh, that was the big question that I had. Can you tell us, is this actually used, I mean, for people that are building content to feed to their designers? How many people are in the universe who actually do this to feed their designers?

Jay McKay: I did. I am not a coder at all. When I worked with a team to work on a website for another organization that I volunteer for, I did exactly what I described. I just created a Word document. I said, "Here's this level. Here's this regular text." That way they could just plug it into the website. Because it was structured with this is my heading and giving them the examples of this is the type of font, et cetera, then they had that to just build from.

Melissa Green: Great. At this time, it's about 20 minutes after 6:00. We've started with questions. I think it's a good time to maybe continue with a couple more questions. We've offered some suggestions for next steps if you wish to practice what you've learned today. Some of the steps that you might take taker using the Color Contrast Checker to find the code for a color, using one of those accessible color palette generators to create a palette, or open up Microsoft Word and take a stab at applying some styles to text.

Jay McKay: Well, if there's any other questions, please go ahead and start plopping them into the chat. But Julieanne, you want to take us out for our remaining slides?

Julieanne King: Oh, sorry. Headed up by my hair. Try to keep it out of the way of my cat.

Jay McKay: They're picky like this.

Julieanne King: Drop your comments in. We would love to have your feedback. I've dropped the link into the chat. As we come to the last bit of our time today, yes, feedback please. Please fill out the survey so that we know how we're doing and where we can further support your journey. Next slide please. Our next session, What's New in WCAG 2.2. Thursday, December 15th, 2002 from 5:00 to 6:30 PM. Jay, will you drop that link in for us?

Jay McKay: Got it.

Julieanne King: Awesomeness. This one we're going to be covering some of the changes that are coming. WCAG 2.2 is supposed to be released early next year, early 2023. There's a couple of criteria for helping out with cognitive. There's other ones that are making some changes, but they've got about nine new criteria that they'll be coming out with. Giving y'all kind of a heads up of the direction it seems to be heading. It's not finalized, but it's good to know where we're almost at. We'll be going over that in December. Remember to sign up, register through Humanitix so that we can see you then. We know it's close to Christmas, but we hope you'll join us for that.

Jay McKay: Sorry about that. We will fix the links in the slides. I think I just copied them down wrong. Sorry about that.

Julieanne King: It happens. AIR, AIR, we've been rounding up AIR, wrapping up AIR. Next, we've got Toolkit Tuesday, our free monthly webinar focused on making K12 spaces accessible. Again, this is the future. If we get the accessibility going well for our K12 group, hopefully that brings that forward and encourages shifts in the general webspace, making it more accessible for everyone and inclusive for everyone. That will be November 29th, which is the Tuesday after Thanksgiving, from 4:00 to 5:00 PM Central Time. That's a new time. It's about making STEM more accessible. We hope to see you at Toolkit Tuesday. Whoops!

Jay McKay: Just a heads up on that one, it's also a little different than our usual Toolkit Tuesdays. This is hands-on. If you got a paperclip or a box of paperclips, you're going to want those. But really looking at those low tech ways to make STEM accessible to students with disabilities. We're really excited to have that one.

Julieanne King: Woo-hoo! Love that. Love that. Love that. AccessU 2023. Yay! May 9th through the 12th. It's here in Austin. It's a hybrid event again, so it will also be available virtually through Zoom events. The pre-ticket sales are available now. Let me tell you, they won't get cheaper than this. You want to get them now if you can. We're also calling in for proposals. If anybody wants to do a presentation where it's definitely a little bit different this year, it's definitely more hands-on as our goal to have really active hands-on elements this time now that we've got through the first chunk of the pandemic. It's like, ah, back to doing things again. Join us at Knowbility.org.AccessU. That's the link, and that's also being dropped into...

Jay McKay: That should probably be a slash.

Julieanne King: Sorry. After .org/AccessU.

Jay McKay: There we go.

Julieanne King: Knowbility, K-N-O-W-B-I-L-I-T-Y, .org/AccessU, A-C-C-E-S-S-U. We hope to see you at some or all of our come upcoming events, and we hope you have a very nice holiday.

Jay McKay: All right. Apologies, Zoom keeps autocorrecting. Apparently autocorrecting turned into [inaudible]

Julieanne King: The last bit, thank you all for being here, for your questions, for your interests, for your comments in chat. It means the world to us to let us know that we're helping out, hopefully making an impact. The things that you ask and comments you make help us brainstorm better ideas and more ideas for upcoming sessions. Because of you, we are able to do this. Knowbility's community programs, including today's workshops, are funded by donors just like you. Your generosity supports our work in digital equity for people with disabilities.

If you're inspired to make a gift, please visit Knowbility, K-N-O-W-B-I-L-I-T-Y, .org/donate, D-O-N-A-T-E. And lastly, thank you, thank you, thank you for being the best part of BADA. It was great to have y'all join us today and we'll see you in a few weeks.