 Hello everyone, how are y'all doing? Thank you for joining us. This is obviously a very full house in a very small room So hope everyone has enough elbow room here. Thank you so much for joining us. We're really excited to talk to you about this topic today Our talk is called keeping that new car smell tips for publishing accessible content, and it's only slightly about cars So we have let's see if we can figure out how to advance the slide there we go We have the slide in here because we're supposed to I'm sure lots of us are marketers and have no technical abilities whatsoever But if you can contribute to the Drupal community, please do it's very important to give back to the open source community Alex and I are both actually in Drupal camp organizations locally and Found out that you can actually get Drupal.org credits as marketers helping out with that sort of thing So in case you all didn't know that as marketers you can get that street cred I recommend you try it out if you can So quickly before we begin I just wanted to let you know where we're from Alex and I are both from Palantir net Palantir is a full-service digital consultancy That's based out of Chicago, and we actually all work fully remote So Alex is based in Portland, and I'm based in Denver We work with clients in the health care the nonprofit higher ed government spaces and help them create Beautiful digital experiences and empower them to achieve their missions So I'm the sales manager at Palantir net my name is Nelson Harris I work with our clients and lia's with our team to help figure out the best solutions for our clients problems Hi, I'm Alex Brandt the marketing manager at Palantir I've been in the Drupal world for the last five years, and I've been publishing all Palantir's content for the last three years on our website And elsewhere online My background is in journalism So a lot of my prior knowledge about content marketing was more relating to SEO rather than in Publishing up to accessibility standards. So now as a non-technical member of a highly technical team It's been pretty enlightening learning from our team of accessibility experts I'm by no means an accessibility expert myself, but today I wanted to share some of the things that I've learned along the way Today we'll be talking about what excess accessibility is and why it's important We'll go over a couple of the ways that users might be consuming your content We'll share our 10 tips for publishing accessible content and then we'll also talk about how technology helps So some of the parameters that Drupal has built in and then some of the tools that we use So let's start with the basics web accessibility means that people with disabilities can perceive Understand navigate and interact with the web and that they can contribute to the web One in four Americans are disabled. That's 61 million people Some of the common disabilities you might think of as people who are affected by web accessibility might be people with low vision Or blindness or deafness, but web accessibility also affects those with temporary or situational disabilities This might be someone who's working from a crowded coffee shop and has a slow internet connection Or someone who's working from a crowded conference area and they're either surrounded by distractions Or they don't want to become a distraction themselves by playing audio out loud So why is accessibility important to us as marketers? A lot of us in the agency world work on pretty lean marketing teams at Palantir You could consider our marketing team to be one and a half people That's me and then Nelson whenever I can steal some of his time That means that every aspect of our efforts needs to be optimized in order for us to reach our goals So if someone isn't seeing a blog post or a case study that you published or listening to a podcast you don't want to Use a marketer don't It doesn't mean that you as a marketer don't care about delivering that information to those audiences It just means that you have to adapt in the way that you are delivering them So accessible websites have better search results reduce maintenance costs and increased audience reach and then there might be legal Remifications for ignoring accessibility So yeah, if you decided to join us today for this talk, I assume you probably realize that accessibility is really important Perhaps you were tasked within your organization. Sorry if you can't hear you let me know But I got to kind of do this thing These mics are not tall enough for me So maybe you've been tasked with publishing accessible content within your organization And I think a lot of these kind of talks and in those kind of environments We talk a lot about WCAG standards and to the letter sort of how to follow accessibility standards But we wanted to do in this presentation was just contextualize it a little bit and talk about Some of the ways that people are actually consuming your content when you're publishing for the accessible web So two ways that people with disabilities are going to consume your content are through what's called an assistive technology Or by using an adaptive strategy So an assistive technology is something like a screen reader or a screen magnifier and an adaptive strategy is more of a technique That they might use to make the interaction better like zooming in or reducing their mouse speed or or making the text larger on a page so Since we're about to share a bunch of those to the letter how to follow accessibility rules Thought it might be great to take a look at actually what it looks like to use an assistive technology How many by a show of hands in this room have actually ever seen a blind person interact with? With a screen reader before okay, so a little looks like a little less than half I actually had never before we started the preparation for this talk and I found this short YouTube video It's just gonna be like a 20-second clip But I wanted to share it because I think it's really critical to actually if you haven't seen this to see how it works So let's let's watch example. I could just keep reading banner three items visited link image home Line by line and we could be here all day Or I could jump to the first heading on the page heading level to search for heading level two You are here heading level one make videos accessible So as I'm moving down through the page I can look for the category that interests me So super short clip But you can see how the screen reader is actually focusing on different heading levels and calling them out Goes to the things we're gonna talk about about semantic markup and heading hierarchy and all these things which get really just sort of become Like oh, yeah, of course you're supposed to do that But I thought this was so great to kind of see how how somebody actually interacts with that stuff If I can find my cursor will proceed So how do you keep that new car smell? Say you're just handed the keys to your new website and after months of your team of designers and developers working really hard to make sure that they're Building and designing everything with accessibility in mind now It's up to you to maintain that level of accessibility for your users We compiled our list of tips from a few different resources online and including the WCAG standards W3C and then our team at Palantir Our first tip is to provide meaningful text alternatives Text alternatives should help your audience understand the content and context of each image video or audio clip It also makes that information available to technology that can't see or hear your content like a search engine So for images you can provide alternative text This is especially important if you do a lot of email marketing because accessibility aside If you have an email that you're sending out with a lot of images and someone has images turned off to preserve data You want to make sure that your email still makes sense for audio You should provide a transcript one resource that I've found really helpful is rev.com You can upload an audio or video file and then it charges you a dollar per minute and usually within one business day They'll send you back the transcript and then you can just give it a quick proof read and upload it to your piece of content and then for Video make sure that you're providing captions and video descriptions in action Our second tip is to write proper alt text Alt text is a brief text description that can be attributed to the HTML tag for an image on a web page Including that alt text enables users who can't see the images on a page to better understand your content It also provides that meaning to screen readers and other assistive technology So when you're writing alt text be as descriptive and accurate as possible provide context Especially if your image is serving a specific function People who don't see the image should have the same understanding as if they had and then if you're sharing a Chart or other piece of data make sure to include that data in the alt text So people have all the important information Avoid using phrases like image of or picture of it's already assumed that the alt text is Referencing an image and you're losing precious character space most screen readers cut off alt text at around 125 characters The caveat to this is if you're referencing a piece of art Or an illustration and then no spammy keyword stuffing So alt text does help with SEO, but that isn't it's primary purpose So don't abuse it find that happy medium between providing all the context someone needs and also maybe one or two of those keywords that you're trying to target So Nelson, how would you write alt text for this image? Red car in the sky Right, you might say red car in the sky But an even better version of alt text for this would be Illustration of red car with flames shooting out of the back flying over a line of cars on a sunny roadway You want to provide that extra context Our third tip is to establish a hierarchy So far we've given you a couple of examples relating to the text on your site But accessibility is more than just making everything on a page available as text It also affects the way you structure your content and how you guide users through a page So when you're drafting content put the most important information first groups similar content and organize Different topics with headings. You want to make sure your ideas are organized in a logical way to improve scannability And then use structural elements to support that hierarchy Users should be able to quickly assess what information is on a page and how it's organized By using headings subheadings lists sections and other structural elements It helps establish that hierarchy and makes web pages easily understandable by humans and screen readers So a quick little story for you whenever Palantir relaunched a web our website a couple years ago with a new theme I was publishing a blog post and I decided that the h2 styling was really big and I just didn't like how it looked So I opted to use the h3 instead because I had this personal preference. I use this in this one blog post I used it in case studies event listings all over our website It was a real accessibility blunder on my part and once I realized that what I had done It took me a whole entire afternoon to go back and fix things But then it also might have been really hard for users to navigate those pages during that time Here's an example of a tool you can use to catch mistakes like mine It's called wave and all you have to do is enter in a URL and it pops out this handy little sidebar Where it'll flag any accessibility errors. So you can see it shows that I skipped a heading level Here's that same page when the headings are fixed But you can see that wave will also show you an outline of the structural elements that you've used so you can better Visualize how someone who might be using assistive technologies is navigating through your page The main point here is that your page title should always be your h1 and Heading levels should never be skipped for your personal styling preferences And then our fifth tip is to write a descriptive title for every page This one's pretty straightforward Users should be able to quickly assess the information and purpose of each page and screen readers announced the page title when they load a page So writing a descriptive title helps those users make more informed page selections Tip number six is to be intentional with your link text So when you're sitting down to write link text you want to think about how you can make each links purpose really clear and Obvious to the user you want links to provide info on where the user will end up If they actually click on the link and it's 2019. So I really hope no one is still using click here as their link text Make sure that you're providing context about your links before instead of after the links So that if somebody is using a screen reader and they're actually reading through a page And they're skipping to that link by the time that that screen reader hits that link They'll feel comfortable knowing where it is that they're actually about to go if they click on it Don't be lazy and put URLs as link text. I'm sure we can all imagine the The hellish nature of having a screen reader read a hundred unique characters Off it looks like it's an auctioneer Avoid writing long paragraphs with multiple links peppered in throughout if you have multiple links to share on a topic Instead try to group them all at the end in a bulleted list and keep your paragraph on its own So this is an example of the right way and the wrong way to write your link text So obviously want to learn more click here is is a no-go and learn more about accessibility does what we're trying to achieve by explaining some context there Number seven is to avoid images of text in place of actual text and you'd be surprised how often this actually happens So the guideline here is by the w3 is to make it easier for users to see and hear content Including separating foreground from the background So there are exceptions as as for everything there exceptions to this rule If you have a logo or something like that has text on it, that's that should be fine But in most cases we want to separate the two make the text selectable and highlightable and detectable by a screen reader There are actually other reasons that this is good and should be intuitive for people in addition to the fact that it's an accessibility thing For example SEO benefits the fact that if you're doing a find on a page with a command F or something like that as a user You can find it and then obviously Selectable copy paste that sort of thing editable within the CMS So this is a client that we worked on recently to do an accessibility audit for and this is that the after of Kind of us helping them, but they would do these hero images of their campus And they would put this white text overlay on top of it or another color And there's a couple of reasons that this is is an accessibility blunder Partly what I talked about where we're you know, we want to keep that text highlightable and separated but also the contrast was Varying depending on what the background image was so right you want to actually have what we instituted was this kind of Semi-transparent green background so that we're maintaining that contrasts ratio across everything and also that's Editable within the CMS that you can change that apply to NDSU thing to whatever you feel like it. It should be All right number eight is avoid idioms jargon abbreviations and other non-literal words Or as I like to say of you know, no blah blah blah Just get right to the content This is important for us as marketers in the Drupal world because it's easy to include a bunch of jargon That your client audience might not be familiar with You know, I think when when you're writing it's a good rule of thumb to sort of ask yourself Would my friend or a family member know what it is that I'm talking about even if they don't fully understand the Subject would they use that kind of language and if you think about it this way when people are searching Obviously on a search engine or something like that They're going to be searching in their natural language, so they're not going to use your your super Technical industry abbreviations that you think we're super smart for including So be accessible and client friendly And if you have to use those jargon or abbreviations, which sometimes we do Try to provide a definition Link to that definition somewhere or include an explanation of any abbreviations the first time that you're using them Number nine is to create clear content for your audience's reading level So don't leave them looking like this poor woman and asking what's going on This means writing to a lower secondary education level actually So even if you're marketing to a group of savvy technical individuals as many of us maybe in the room are You know, we want our individuals to be Reading this material in a way that is easy for them big words are stressful and a lot of us are reading quickly and well We're busy. Maybe we're at a conference And so we want to make sure that we're not over complicating things from an accessibility standpoint This affects folks with cognitive disabilities or reading disabilities likes like dyslexia And if you need to include technical or complicated material to get your point across once again Provide some sort of supplemental content like an infographic or an illustration or something like that To kind of show the key points There are a number of online tools that you can use to determine the readability of your content actually so something like web Aim has a really great way of kind of giving you guidelines on how to write clearly and we're gonna link some resources for you All at the end so you don't have to take copious notes on what I just said if you're interested in checking that out Last but not least of our tips is number ten clearly label your form input elements So as as marketers forms are our best friends, and I'm sure many of you have written forms before I really like this illustration in this gift because it kind of shows not only do you want to really clearly label those elements But you want to show kind of an indication of exactly what you're looking for I love those icons of like the plane landing and the plane taking off It's just very visual and very intuitive and it works well with People of kind of all types of disabilities from an accessibility standpoint mark your required fields that should be pretty obvious and As a bonus it's just gonna be better data for you as a marketer if you're if you're being really clear and obvious with your form fields Okay, so this is a recap of those ten tips I will pause if people would like to take a photo of this but again We are going to be sharing all this stuff kind of at the end for you guys We're gonna publish a blog post so you feel free to take photos now, but also, you know, we'll make sure you have access to this See some cameras still clicking. All right. I'm gonna gonna move on So since it's Drupal con wanted to touch on just a couple of things that Drupal specifically does to support accessibility There are a few features that actually enable Visitors to skip around with something like a screen reader or if they're tabbing through on their keyboard To find the information that they're looking for a little bit more easily So some of those things are there's a tabbing manager that's built into Drupal 8 Which is essentially allows you to keep the focus of what somebody's tabbing through or set the order of what that is So for example on a form if somebody is tabbing through that form You can make that tabbing manager lead that person correctly through the form as opposed to sort of bopping around all over the Place on the page and getting lost Drupal 8 also provides a framework for audio or oral alerts Which is basically when a screen reader is Focused on a web page and something dynamically changes on that web page that isn't within the focus of the screen reader Like we saw on that example It still gives the the person that's using it an alert saying hey heads up something actually just changed on this page And you should pay attention to that which is pretty great And then there are these things called aria landmarks that split the page out into chunks so that it can be skipped over more Easily so that here's kind of an illustration of how that works It's sort of like semantic markup where you can put different sections and sort of Boxes around these things, but it's a little bit more built for accessibility specifically It's so that a screen reader can pick it up and read it and it's kind of ahead of the game as far as Allowing folks to use this from an accessibility standpoint so you can kind of see the containers here You should still use semantic markup. It supplements it essentially It's kind of like an attribute that you put on your HTML tags So then I wanted to also mention specifically for content editors There are some things that I like to call guardrails that Drupal kind of allows and and adds some of these are out of the box And some of them you have to configure But a few things out the box is that alt text is required by default for images Which means at least you won't forget to add alt text You might still make a blunder on how you do your alt text So make sure you following the tip that we gave you about how to actually put the alt text in correctly Then also Drupal eight outputs semantic HTML five markup Which you know kind of does the same thing as the aria thing from the perspective of a screen reader and kind of moving around and as a bonus It's good for SEO and then from a configuration standpoint. You can use the workbench module To create like a publishing workflow. So if you're a larger organization, maybe you have a junior content editor That's putting in stuff and making some accessibility blunders And maybe you've got someone that maybe it's you at your organization who is learning more about accessibility and has Some of the understanding of how to to make those things better and improve on them And so before that stuff goes live that would be sent to you as a draft that you could approve or or make changes to So you have all these tips now and you're probably wondering where do you start We recommend starting by assessing where your site currently stands So there are a handful of tools out there you can use to measure your site's current level of accessibility We recommend site improve which has a free Google Chrome plugin and then a more extensive paid option as well We use site improve at Palantir to scan our site on a regular basis and it flags things for us relating to the WCAG standards as well as Broken links missing alt text or other editorial issues and then create an editorial style guide This is especially important if you have multiple content authors It might include your own tips on writing alt text or special use cases for your company But it just makes sure that you're able to communicate how content should be published in a consistent manner to all those different content authors And then begin with incremental improvements once you have a good idea of what needs to be fixed You can kind of gather the human resources needed to make those changes and divide and conquer as a team I'm sure we all wish there was a magic moment where we could be hands-off on a site and know that everything We've ever published over time is completely accessible But the truth is accessibility requires constant monitoring and awareness So the best thing you can do is establish a process and appoint someone responsible for championing accessibility for your users And then here's the list of the resources that we use to put together the presentation And like Nelson said we are more than happy to send those out to anyone who would like them Thank you and come see us in the exhibit hall at booth 709 and join us for trivia night tomorrow night It'll still be fun. Even if you're not a developer and don't know a lot about Drupal I have done Drupal trivia twice now, and I think I knew at least a few of the answers And if you guys want those tips feel free to just come up We'll give you a business card or something we'll send it to you You can give us your business card and then also check out Palantir.net Which is our website and Alex is gonna post a really pretty beautiful blog post that summarizes this whole talk and gives you All the links that you need Yes, thank you