 This is a presentation about accessible websites. I used a non-accessible word on purpose that basically means it's a primer, you know, it's a one-on-one accessibility course. My name is Amy June, all one word title, Camelcase, Heinlein. I am on the editorial team at opensource.com. But who am I to speak about accessibility is I'm a hospice nurse by trade. And so I really understand how challenging it can be for folks to do simple things like maintain privacy while checking their email. And Volkswagen Chick across all of the stations and media. This is a picture of Spotty McSpotsalot, he's my cat. He goes by Spot for short. And the reason I have him up here because he likes to code. So if there's any typos in the slides, it's because he's been laying on the keyboard for a little while. And then I'd be remiss not to mention Pantera, but we don't see her. This is where she's supposed to be, but we think she's sort of a ninja and she's in the closet. I think anything like the clickety-clackety or a Zoom call scares her off. So why are we here today? We're gonna talk about a couple of things. Obviously accessibility, but the first thing I wanna explain is why we wanna design and code for accessibility, especially in our open-source projects. I'll go over some terms and definitions just because this is a primer. I don't wanna assume anyone's skill level, so I do more give links to how to find information later, but do mention some terms and definitions. And then we'll go over some accessible components, tools and resources. And if we have time, we'll talk about images and slideshows because I have a lot of opinions about those. So accessibility is essential for developers and organizations that wanna create high-quality websites and tools and developer tools and offering tools and not exclude people from using their services. According to Common Look, 15% of the world's population live with some form of disability. And we need to remember that not every disability can be seen. There's debilitating fatigue, there's headaches, there's chronic pain, there's head injuries, there's brain injuries, there's mental health disorders, along with the two common ones that we think about hearing loss and vision loss. So with 15% of the population living with a disability, that's what one in six. My math is probably really wrong because I'm a nurse. But that number is really much higher if we take into account all of the different types of disabilities that there are because when we do these reports and these questionnaires, people self-report and they assume they're self-reporting about permanent disabilities. Remember, as we get older, we become more disabled with time or eyesight deteriorates or hearing deteriorates. But there's temporary disabilities like going in for Lasik surgery and having your eyes dilated. It could be that your screen is super dimmed depending on what environment you're in. There's situational disabilities. This could be like at my house, I can never find my mouse. And so a lot of my work is done keyboard only or there's a mom on the bar holding a baby who has one hand and one thumb to scroll. So that's a situational thing. But we also have episodic disabilities and this is something I just received. I've been a nurse for 30 years, but this is just something, a word I've just now come across. We're talking about disabilities that are lifelong conditions that sort of ebb and flow like diabetes, your eyesight can ebb and flow depending on your sugar level. Periods of fluctuating health and ill health, proper care and all that kind of stuff. So remember, you know, that 15% is much higher. I recently switched jobs and I am hard of hearing and I wear glasses and I'm on a meeting and I turned the closed captioning on and the slide deck got really small. And so I mentioned it to the manager that I couldn't read the slide deck because of the captions. And they said that you were died with an edge case. And I found this quote later on in his slide deck that said, when you call something an edge case, you're really just defining the limits of what you care about. So think about that. You know, there's, there may be three people with one disability, but you know, we should really be caring about everybody. Terms and definitions, we're just gonna kind of slide through these. On the node, on the session node for this session, I have my slide deck in there and it has all of these links that are selectable and clickable. So if you wanna find these links, they're on my session page. I usually present in North America, so I talk about two or three of them, but I'm talking to a global audience today. So I just threw a bunch up here on the slides with a link from Common Look. These are the international web accessibility laws and guidelines. There's a lot more guidelines than this. You know, become familiar with who your audience is and where your website is. But remember accessibility is for everybody. And some of these laws are different from, you know, sovereign place to sovereign place. But that doesn't mean you don't have to adapt to them just because they're a law in one place and not another. But the World Wide Web Consortium, the W3C has developed the WCAG guidelines, the Web Accessibility Guidelines. And this serves as sort of a single purpose to normalize how we measure accessibility internationally. It's developed with the goal, with that shared single standard. And it meets not only the needs of individuals, but it meets the needs of governments internationally and it meets the needs of organizations. And these are success criteria and set up like guidelines, but they're not an end all, but they're a really nice starting point to begin with. And these guidelines are really set up. Right now, we're on WCAG guideline 2.1, but 2.2 is on the way and so is 3.0. But they're really intended for web content developers, you know, our page authors, our site designers. They're developed for the folks who are developing our tools, you know, not just the front end of accessibility, but the back end of accessibility who's coding it, who's entering your content. They're written for the accessibility evaluation tool developers and again, for anyone who needs that single shared standard. And then the guidelines are broken down even more. You know, we have the A, the AA and the AAA. The A is minimal compliance. If your website does not meet at least this level, your website is really challenging for folks with disabilities to use. The AA, when we talk about compliance levels right now, you might hear WCAG 2.1 AA is the acceptable criteria. And that's what it is. It's an acceptable compliance level. It means that our websites and our assets are usable and understandable by the majority of people. But then we have this AAA and this is really our optimal compliance, which means that your website is accessible to the maximum amount of people possible. And this is whether or not they live with disabilities. That AAA level really indicates the highest level of usability because accessibility and usability hold hands really well when they walk on the beach. So that AA is your minimal compliance and that AAA is, you know, designing for everybody. And it's sort of broken down into four high-level principles that they call POR, P-O-U-R. You know, we have perceivable, operable, understandable and robust. They're much to their names. Perceivable means that we can use the website by means of our senses. Operable means that we can have access to buttons and interactive elements easily. Understandable means that we can understand and comprehend the content from page to page and not have to learn something new every time. And then robust. Robust is really about how people interact with your site using assistive technology. We don't wanna limit what the tools that people access your website. And we need to remember that accessibility is always a moving target. It's dynamic, it's static. Especially when we're entering content. When we're entering content into our project pages every day or, you know, we're changing up our readme's. We're changing up, you know, how the JavaScript works in our websites. So just because our digital asset was accessible yesterday doesn't mean it's accessible today, especially when you have a team of engineers working on your project or content authors. I have two resources up here that I think if you're gonna continue learning about accessibility, the W3C has a blog and a Twitter account and that everything that's happening that's current gets mentioned through those two outlets. User agents, continuing on with definitions. This is assistive technology. Sometimes we'll see it abbreviated as AT. I'm gonna take a drink. It's really any device or software or equipment that helps people interact with a web page. It works around the challenges that people might have, you know, in learning and communicating and functioning on that digital asset. The first one we might think about is screen readers. They're much true to their name, you know, they're used to listen to the content of the web page. They convert text to speech. We should keep in mind that screen readers can be used along with visuals on the web page for folks with cognitive challenges too. So we don't just have low vision people using screen readers, we have people utilizing screen readers in a multiple number of ways. In the eighth iteration of the web aim survey, they asked how and why people use screen readers. They found that 87, almost 88% of people use screen readers because they live with a disability. And of those, 71% rely on the screen reader audio alone. And that's an important thing to think about that people aren't, that people are using that audio aspect of your website. So if something isn't live text, they're not gonna have access to that information. Screen magnification software. Well, it's true to its name, you know, it magnifies what's on the screen. And for me, every year it seems like I have to do a control plus plus or I've lost my glasses. It's used to enlarge the screen content. It makes it easier for people who live with partial sight impairment like tunnel vision or blurriness. It's used to enlarge the text, but sometimes screen magnification software has text to speech functionality as well. And I just wanna go through a couple of these because it's important to understand that there's different ways that people access information. And sometimes if you don't know someone, you would never know that these things exist. So we have eye tracking software. This is a system that monitors eye movements to control the mouse pointer and engagement with the digital asset, but it also detects blinking to initiate, you know, clickable or selectable elements on your page. Accelerators will reduce the effort needed to type and click. Lots of us coders have keyboard customization, you know, we have sticky keys, we have shortcuts to make our life easy. Some people use keyboard customization to support single-handed typing. Pop-up and animation blockers, these are my favorite, these are either plugins or extensions that you have on your computer that stop those pop-ups from popping up or redirecting you to somewhere else because this can be jarring for some people who are working and not being able to find where they were on the page. So making sure that we have software that stops, pauses and continues our alerts. Refreshable Braille display, there's a picture of one right here. The text is red and then the keys, the pins are dynamically pushed up to read Braille, usually 80 characters at a time. And then we have reading assistants, these are things that customize our font size, you know, or our spacing. They can hide less relevant parts of your website. And page maps, that's the last one I'll talk about. They display a smaller image of the website of the entire page with a visual indicator of where you are. So if you're highly distractible and you look away, it's highlighted that you can go back to where you were. So questions to ask ourselves when we design our digital assets or we're redesigning or thinking about a product. Users with mobility disabilities, including repetitive stress injuries, you know, they may not be able to use the traditional mouse pad. So can keyboard users navigate your site? Are there any keyboard traps? You know, if a user can get into a component or a modal, can they get out of it using the keyboard as well? Does your page have a means to skip features? You have a mega menu, is there a button that says skip to main content so your keyboard user doesn't have to go through that whole mega menu just to get to your page content? Pages with a lot of content, you can break those up in the smaller chunk using anchor links too, you know, just making it easier for that person to navigate through your content. Do all of your elements, which should receive focus, receive keyboard focus? These are menu items. These are all levels of the site that should be accessible to the keyboard user. The keyboard user needs to know where they are with an element on focus. Sometimes I'll be scanning through a page using my keyboard and I've lost myself because there's no focus. So make sure that all of those interactive elements or headings or anything you find important are highlighted on focus. Do all of your images contain alt text? Are there any images of text? If you turn off your CSS or turn off your style sheets, can people read through your content and not get lost? This isn't only for screen readers, but these are for people like me. I live rurally outside of San Francisco and I have just above dial up. So I don't have images enabled in my browser because it would just take me all day. And of course, some images don't need alt text. Some are icons or decorative images, but make sure that if you have an image or a visual aspect of your website, if it brings any value that you have an alternative text for folks. Are you using tables for more than tabular data? We're not using DreamReverie anymore. We're gotten away from like table layouts. Remember that tables are for data, not layout. Tables should include our headers and our rows and our columns that explain how the cells correspond with each other. Does your screen reader read all the content as it's presented on the screen? This includes modal dialogues that open up, pop-ups, overlay, light boxes, air messages, page updates. Be sure that those air messages or alerts are read in real time. Do your colors have enough contrast? Are your fonts accessible? And then I like to throw this one out there. Is your content accessible and inclusive? So inclusive is something y'all need to think about what that means to you, but is your content accessible and inclusive? So I'm gonna break it down. Again, those four parameters, you gotta make it easy to see. So we accommodate visual needs. The CDC approximates at 12 million people, 40 years and older in the United States. Let's live with some sort of vision impairment. Over one million people are blind. Remember, we have cracked cell phones. We're working out on the porch and our screen. Maybe one of our kids has an old CRT monitor and the color calibrations are off. All kinds of things to support visual needs. Motor needs, we need to make sure that our websites are easy to interact with. We have people who live with Parkinson's or palsy from ALS or maybe they're paralyzed from the waist down from a car accident. And again, there's that woman on the bar with her baby in the one-handed scroll. We need to accommodate everyone's motor needs. We wanna make sure that we make it easy to hear. So we accommodate auditory needs. And this isn't just for people who are hard of hearing. This is for people who are in noisy environments like the bus station and don't have their headphones. So maybe we need captions or maybe it's quiet and you don't wanna make any noise and you need the captions on. And then that last parameter is, of course, making sure that we accommodate cognitive needs, that we make sure that things are easy to understand. And this can help people who are highly distracted too or have a difficult time focusing. So components to an accessible website. This is why we're here. Color contrast. Here's a picture of some color wheels just to kind of give it in the lighting's kind of weird in here just to give it kind of an idea of different color combinations that work and don't work. Color and contrast are essential to accessibility for our visually people who are looking at our assets visually. They must be able to perceive the content on the page. Be sure you have a strong color contrast between the foreground and the background. And as your background changes, remember that your foreground might not. So if you have an image in the background or a slider that changes, remember that your white font might not show up on all of those different color slides. Users of adaptive technology like screen readers can change the way colors look on their personal display, like high contrast mode. So when you design, think about high contrast mode or dark mode. Again, someone may have one of those older CRT monitors. We hope not, but not all of us have the privilege of having modern equipment. So I recommend sticking to solid backgrounds. With color, we never want to use color for emphasis alone because someone might not be able to see that color. Make sure your colors have strong contrast between them. And I like to use this as an example because it was way back in the 90s, people started to do the gray on the gray and they're starting to do that again. And it's just so horrible for contrast that light gray or the dark gray on the light gray background, horrible. Fonts, to improve accessibility and legibility and avoid confusion, websites should not use 1,000 fonts. You wanna limit your fonts. Consider the expected audience when choosing your font size as well. If you know your website is for the geriatric board, you might wanna have that default font size be 14 or 16 instead of 12. You wanna avoid using the appearance of a font to convey meaning. This goes back to making it bold and italic should be only when necessary because a screen reader won't read it as necessary or emphasis. So we wanna do that programmically with our tags. And to make our text more readable for colorblind users, we really wanna limit those combinations like reds and greens and make sure that the text color has high contrast within the background color. There's also something to say about the readability of your text too. Lots of times we don't know what it says because an O might look like a C or your fonts look backwards. So be very aware of the fonts that you use. According to that web aim survey we talked about earlier, keyboard accessibility is one of the most important aspects of web accessibility. Many users with motor disabilities rely on the keyboard alone. So you should think about your navigation order and how you do a tab index here. Your order should be logical. It should be consistent from page to page. Remember, going back to you don't want people to have to relearn your web page or your digital assets from time to time. Depending on where you live, how the page go left to right or right to left depending on the language. You have your header first, your main navigation. Make sure that you follow scan patterns because people don't read. So make sure that you have scan patterns in place like headings. That way when people leave the page they can enter it back easily. If you have complex menus, sliders, dialogues, tab panels, be sure that it's presented in an intuitive and predictable way. Don't have your mega menu one way, sideways on one page and then vertically on the next page. Try to keep it consistent. And as a sighted keyboard user, it's really nice to be provided with a visual indicator of the element that you're on. And in this image here it's a row of social icon bars that I'm tabbing through. And I can see that my focus right now is on the Twitter. So if I was to hit enter, I know I'm on the Twitter key. And that focus is visible that I can see it. And something to keep in mind for web designers is the people who use these visual markers are the ones who need it. Typically someone who's just scanning your page isn't gonna see this. And so if you have some like product owner pushback about like bright purple or yellow, these people who are using this visual key, they appreciate that because it makes it easier for them to see. And also, again, if you have elements with your keyboard, if you can get in then make sure that you can get out. Headings, headings are not for style. I hope most people know this. They have a function and people who rely on adaptive devices depend on a good heading structure to navigate through the page. And again, I know I say this a lot, but people don't read. They scan and they see those headers and they can see what part of your articles they wanna read. They can see what part of the read me they wanna do, what files they wanna browse through. So we have the H ones being the most important down to your H sixes and we always nest them in order. Links, links should not be identified by color alone. Think about someone who has low vision and they have a page of a block of text. It's a black text with a green link. They might not be able to differentiate that link when it's only color alone. So we actually have special rules about that. If your link is not underlined, remember Craigslist, links are underlined. If your link is not underlined, you should have two distinguishable factors and one should be a non color component, like a bold or an italic or an underline. Something to think about with links for screen readers, we wanna make sure that people know where the link is taking them. So without context, when a screen reader reads through the links, you shouldn't use words like read more, hear, learn more because that doesn't give them any context of where those links are taking them. And just simply using the URL doesn't tell them where it's taking them either. So use descriptive link text. This is taking you to another website, something like that. And remember links can be used for pagination. We sometimes use images when we have a view of articles. We use the lead image as a link. We have anchors and we have menu items, forms. We wanna be able to provide labels to identify all of our forms, all of the form controls, all of the fields, all of the check boxes, all of the radio boxes, all of the dropdown menus. We wanna group related form controls together so it's more understandable when we're going through the form, especially using assistive technology. We wanna provide instructions to help users understand how to complete the form and use individual form controls. But we also wanna make sure that we validate user input to help avoid users making mistakes, having inline form errors versus errors that show up across the top of the page and then they have to search which field it was. So think about inline form errors. And wherever possible, divide your long forms into multiple page forms that constitute a series of logical steps. It's a lot easier to get through three pages of six questions than 18 questions on one page. Forms can be really challenging for people who are visually and cognitively complex. For someone with attention deficits, they can be really challenging to use. Accessible forms are easier for everyone, including people who live with disabilities. People with cognitive disabilities can better understand the form and how to complete it and make less mistakes and be able to provide better feedback. People who use speech input can use the labels via voice commands to navigate to the specific fields that they wanna fill out. Folks who live with limited dexterity like a palsy benefit from large clickable areas to activate controls, especially for those smaller controls like our radio boxes and our check boxes. And then people using screen readers, they identify and understand form controls because they're associated with labels that are read to them out loud. If possible, avoid time limits on forms. We wanna allow our users to complete the form at their own pace. Not everyone is a dynamo at the keyboard. Sometimes they have to go get their credit card or get their insurance card. Sometimes they have to do two factor authentication on their phone and translating numbers from their phone to their computer might take them a little bit longer. So if you can, avoid time limits. If you can't, for security reasons, think about the option to turn off or extend the time limits. Videos, how are we consuming videos? How are our consumers consuming our videos? Captions is a great way to make your video content accessible. Captions are text versions of the audio content that are synchronized with the video. Again, for people who are in silent environments that don't have their headphones, they wanna have the captions on. People who are in busy airports that can't hear the video and wanna don't have their headphones. And then transcripts. There's a difference between captions and transcripts. As a hard of hearing person, I appreciate transcripts because captions only stay on the screen a couple of lines at a time where transcripts I have more of a memory that I can go through. And maybe I've missed something or something didn't process right. I can go back into the transcript and look a little bit further and understand the conversation. So a transcript is a text version of the media. It should capture all of the spoken word plus any dogs barking or people laughing. Transcripts also allow anyone to access the content to read the text instead of having to listen to the video too. I have some friends that would rather not watch the video that just reads the transcripts because it takes them half of the time. So it has multiple use cases. Audio descriptions. These are separate tracks for visual content like ballets or plays. It's a separate narrative audio that describes the important visual content making it accessible for people who can't see. You know, this is Cirque du Soleil. You know, it would be very challenging to describe all of this, but you know, there's a visual appeal and they're evoking emotion. So having that audio description really helps convey that mood of the play. When choosing your video, consider options that are fully accessible. Are closed captions supported? You know, are you, whether you're selecting a media player plugin or a module or a widget for your site and iframe, you know, selecting a service to host your videos, there's a couple of questions to ask yourself. Number one, can you toggle the narration on and off? Not everyone wants to see that content and sometimes it obscures the view of the video. Can the player's buttons and controls be operated without a mouse? So can that keyboard person be able to get in there and push the pause button when necessary? Can someone using a switch on a wheelchair be able to push play? Can folks who use assistive technology distinguish between the buttons? Are they labeled? And can your media player be fully functional across all of your platforms and in all major browsers? Someone talk about WYSIWYGZ, these are our editors. You know, content and editors are active participants. In many cases, they're in our websites far more than our coders and our developers. So we wanna make sure that we train our content creators in how to form a WYSIWYGZ that way they're set up for success because there's a lot of bells and whistles. There's a lot of things that you can change when you have everything in a WYSIWYGZ. You know, put in tool tips, do training. If you take the time to train your coders and your designers, you know, take your time to train your content authors as well. So it moves me into accessible content, you know. Remember that content is entered at every step of the life cycle of your digital asset too. So know your audience, you know. When we talk about code versus a website, you know, there's two different audiences. You wanna make sure you fit your language to your audience. So stick to predetermined reading levels. We wanna put information in logical order with important details first. Provide alternative text, you know, it's to describe the image for those who are unable to see them. Use familiar language. In our code and our open source projects, you know, this is very relatable to the project that you're in, but think about that person who's first reading that read me for the first time. You wanna use familiar words and familiar combinations of words for folks. You wanna choose language that your users can relate to. So buzzwords and jargons sometimes are unclear or don't translate globally. And often they're too general and void and they can lead to misinterpretation. And then be consistent with the words that you use. If you use a word several times in your text, you know, use it the same way. And then think about acronyms, abbreviations, special characters, they might not be familiar to everyone. And language that's difficult to read and understand as a barrier for people. So make sure that they're not held, people aren't held back by complex language. And complex language also does a disservice for folks who are not native to the language that you're writing in. And so using plain language benefits people who are, you know, English as a second language. Sentence and paragraph length, you know, you don't keep your words short. Sentence is short, paragraph short. No one reads anymore. So now what? You know, accessibility, it's a role, it's a responsibility, but it's not a role for just one person. It's not just the onus of the QA person, it's the role and the responsibility for every life cycle of your digital asset, from wireframes to documentation, to graphical user interface, to developer backend. So make sure that you talk about roles and responsibilities when you're first developing a product. And I'm at time, which I knew I wouldn't have enough time for everything. So I wanna say thanks. I'm gonna have these slides online because I also go into different types of images and how you would write alt text for different types of images. I'm just gonna quickly go through these as sort of what you can find online. And I have speaker notes and with bullet points that makes it real easy. And then I also talk about slideshows and how you shouldn't use a slideshow because no one gets to the content anyway. So I wanna thank everyone. Again, sorry that I kind of breezed through things, but there's some really nice links to tools and resources, how to audit your digital assets, not just your websites. And then there's also documentation on open source tools and then documentation on resources of why these things are important. So thank you. Do I have time for a question? Does anyone have any questions? Sure, I can't hear. You mentioned not using bold and italic to draw attention to certain text. What would you suggest as an alternative? So don't use it alone. You would wanna use the tag for it, so that way when a screen reader, so visually people will know that you're emphasizing something. But for someone using assistive technology, you wanna do it programmically with the bold and the italics. Thank you.