 Hi jokes on you. I can't hear out of the seer, so I didn't hear any of you I'm gonna get started. I Flew into Nashville last night. I have never been at anything like Drupal con before or to be honest anything like Nashville before This is like the biggest Conference easily that I've ever spoken at again because I can't hear just tell me to get closer to the mic if I need to I Admit that I spent way too long trying to figure out what a dreast note was last week Like I got this email from some dude Doesn't have a last name and I don't know you probably all got I mean I got 17,000 emails from Drupal con. Let's be honest So I was like oh cool another weird email and then the developers I work with were like no, he's a thing You should know who that guy is so that's how you kick off your Drupal con talk You talk about how you don't know who the guy is who created Drupal Hi, my name is Corey Villhauer. I work at a place called blend interactive in Sioux Falls, South Dakota. We are We handle large-scale content heavy Development implementations both net and PHP side I'm typically there to handle content strategy in the user experience side of things Often though I end up helping people figure out what they're supposed to be doing with with accessibility after the site has already launched I'm also an avid biker, which is notable because Sioux Falls has been incredibly active in the in bike advocacy Over the past several years. We spent a lot of time building kind of slowly But we're building up an infrastructure that can maintain a healthy bike community, but It's not really happening overnight because we like cars and If you think we like cars just as a nation You should see how much we like cars in the Midwest where all of the cities are 17 hours away from each other and the closest Ikea is like a whole state away so It brings us to this sort of funny impasse where we are really lucky to be in an age where there's a there's a swell of Sustainability and fitness that really sort of coalescing around bicycle groups in our community, but Some habits are really hard to break So you end up with bike lanes These I put these pictures off the internet, but literally there was one of these outside of my hotel when I walked out I didn't have time to change the slide so Pretend these are all from Nashville because they might as well be We still struggle understanding that that even the basics of you know bike lanes aren't parking spots or that The things you need to do to make roads better for cars are also the things that you need to do to make roads better for bikes And I wish this was a thing that we could simply assign to Bicycles in existing roadways, but in reality the separation of intent of building and infrastructure and then the actual action The the use and education around that infrastructure It's it's present wherever any level of accessibility is found You know we see this when wheelchair ramps are built into a storefront But upon entering the aisles are so skinny you can't really get around we see this When somebody has made a big effort to bring Some sort of translators or sign language interpreters in but they're placed in an area where not everyone can see them If I dare segue into a conference talk, this is what happens To our websites, you know, we do all we can to make sure the site is built To pass all of the technical accessibility tests, but we don't give enough thought To how accessibility will be maintained on the editorial side, and that's what I'm going to talk about today I'm going to talk about web accessibility, but I'm not going to talk about navigation patterns or or color contrast I'm going to talk about the parts of accessibility that we as editors have control over And that we often find gray areas within Areas where language takes over where we're checking a box no longer really cuts it when we have to depend on judgment calls and The fact is judgment calls are really scary. I hope after this they won't be as scary Through this talk, I'll dive into what it means to be an accessible editor We'll talk about the scope of what falls under editorial accessibility, you know the things that we can do To provide a more accessible site using the editing tools. We hopefully are provided through our CMS We'll talk about the actual structure the individual fields of a site but we'll also dive into the art of writing as well and then finally We will touch briefly on what we can do to promote it within our organizations. This is ultimately a talk for editors site managers for project management But if you're a web developer in here and you haven't rushed out the door screaming I hope that it will help you get a better idea of the types of things that editors will will need from from a Drupal site So first let's dive into what we mean When we talk about web accessibility On the web accessibility is the practice of removing barriers for people with disabilities so much like New building construction must provide accessible and entrances and businesses must provide Reasonable accommodations to employees with disabilities websites must be created in a way that allows access to information Despite any existing or future disability Sometimes especially during web presentations like this one. You'll see accessibility Written as as a 11 y this is a clever little abbreviation and I always have to bring it up because we give this Talk to we give this as a workshop to our clients once we've launched a site and none of them know what this is I'm so Inside myself. I assume everyone knows what a 11 y means but it's a clever little abbreviation It conveys two things it represents the word accessibility You know a and a y with 11 letters in between But more importantly It provides insight Into the purpose of accessibility You know that we are being an ally to those with with differing needs purposely making things better For those for example who cannot see or those who are colorblind or those who are unable to use a mouse This is in essence the idea of inclusive Design accessible design I don't mean strictly the structure and graphical design of a page or a piece of content I mean the entire scope of how a website is made from from designing user interfaces that an editor Will use to enter content to the content itself Because most websites rely on written and visual communication accessibility issues are most often seen as visual issues affecting those with temporary or permanent vision problems these Situations often require things like screen readers, which will read the content to you depending on how the site is structured But it also affects those who have motor or mobility disabilities, you know people who may not be able to use a mouse who Will tab through the page instead of instead of scrolling through it. It affects those auditory Disabilities such as deafness or airplane rides apparently who require captions and transcripts of Audio content and even encompasses those who have cognitive disabilities or language barriers who simply cannot understand What might be overwritten page content? And additionally, it's worth noting that not every disability is life-changing not every disability is permanent I alluded to it earlier, but somebody who is permanently deaf is much different from somebody who has an ear infection like I do But our websites don't know that, you know, there's an obvious spectrum of disabilities There's a different definite difference between these things But to a website all of us all of those disabilities are ultimately equal somebody who can't hear at that point can't hear at that point and Finally, there's one Additional gray area in accessibility and that's the simple need and promise of Information and what we can do to provide it in less than optimal conditions You know according to the Pew Research Center just over one in ten American adults are smartphone only and just over one in four Lives without a broadband internet connection and for those 65 and over it's one in two Additionally four million people which doesn't sound like a lot given the grand scheme of the nation But it's roughly the size of the audience that watched the series finale of Parks and Recreation They classify themselves as immigrants with less than a good grasp of the English language So these aren't image. These aren't issues of whether or not an image has a certain contrast or if a page can be tapped through these are Issues of needing sites that can load on slow-speed connections sites that can be easily read with an in-browser translator I know sites that can conform not just to those who have a visible disability But those who can't afford the best computers or the fastest connections or are under represented in some other way So how do we make real change happen? I think ultimately it comes down to two almost psychological truths that we have to embrace First is understanding that the potential audience of a website or app is anyone human This is a quote by Hayden Pickering in his book Inclusive Design Patterns It's about 50% development the book is a 50% wonderful thoughts on the editorial side of accessibility It boils down to you don't know who might hit your site So at least make it welcoming when some of that stranger shows up The second is that websites are made of code and code is translated by robots And when I talk about robots, I don't mean actual robots But I'm talking about the systems that have been created over the past decades to help read and translate code They are not like real people their programs. They don't understand nuance. They don't understand sarcasm They don't understand anything that might be implied through language or color So we have to provide that context and this comes in two forms it comes in The things that we assign to a page template, you know This is the stuff that hopefully is already baked into to development once an editor receives it and it makes up What we would call the content model I like to steal Jeff Eaton's description of a content model because it's a million times better than mine And it breaks out into three things a content model is the kinds of things that we make How they are related to each other within the CMS and what bits of information they contain and in terms of accessibility This is what we can use to make content that is able to be read by a screen reader This is how we make content that can be tapped through using a keyboard. It allows us to assign alternative text It parses into something readable The other side of that is the blob of stuff that we put inside of the content model and This is tied to the writing conventions of the web What we write needs to be just as accessible as the navigation and the design and this is done through the gray area of writing through Clear heading structure through links that are clear videos that are captioned, but also a bunch of stuff that doesn't really have rules So let's get started section 2 My wife when she watched me do this talk said you need to be clearer when you switch to a new section So I made the text orange In this section we'll talk about how to write and When to ignore things that might relate to the things of the of the content model We'll talk about images and alternative text We'll talk about video and podcast transcriptions and we'll talk about the title field of our pages Now this is typically something that we do as a giant workshop. It's like a whole day thing So really this is kind of like the high-level view of these things. I Also usually talk about PDFs here, but in an effort to save time I've summed that into two rules on number one don't use them and Number two if you have to use them then at least make sure they're as accessible as an HTML page all right next alternative text ends up being the heavyweight of the Accessibility world especially when it comes to what editors can do because it deals with a major portion of The accessibility audience those who cannot see and it deals with a major part of the website the images more so Alternative text can be easily tested by browser services like like wave So it becomes sort of the base level of am I accessible and what do I need to fix? It gets thrown into being a yes or no answer Which is incredibly frustrating because Alternative text is anything but a yes or no answer. There are a lot of gray areas within the world of alternative text The rule to the letter is that every non text element Requires a text alternative So that it can be read using assistive services An example of that. Let's look at this page. There are four main areas on this page that require alternative text There's the site logo the header image the social icons and the products because without the images the content is simply not conveyed If these were not assigned some kind of alternative text the social the somebody who cannot see this page would have no idea of what is on it outside of the headings So in essence what alternative text allows us to do is it provides an alternative to every image that is necessary for Understanding the content we provide text in each of these areas So as they were encountered they still convey the same ideas very bright In Drupal alternative text is most often added in one of two places First you can add the alt text to the image itself when it's uploaded. So that would be right there and Then whenever this text is or whenever this image is added to a template in Drupal unless it's overwritten for some reason This is the text that we read by a screen reader If you're adding something to the what you see is what you get or a whizzy wick field You will have the opportunity to add alternative text as well right here It says short description for the visually impaired and you just drop your text in there You have to confirm that these are in your install, but I don't know why anyone would take them out And what this actually does is it creates a little snippet of code that screen readers can read alt equals Something whatever text you want it to read instead of instead of the image That's how you add it, but in order to write it. It's a little bit different Ultimately it depends on the context But writing alternative text boils down to this alternative text conveys necessary information at a level That someone who can see the image might get now we'll get into the idea of information in a bit But first a few examples in this case. It's pretty easy. This slide has text in it So the information we need to convey is the text within that slide This is long, but we'll get to that Otherwise this is pretty obvious We're going to say at first time on vinyl in 15 years the promise rings Nothing feel good feels good remastered from the original source tapes also by the way This is sold out and I'm pissed about it Another example is a table or a chart charts can be tricky this image actually shows data in it And so the data needs to be integrated into the alternative text in some way The best the easiest thing to do would be just to type out all of this text But that's obviously going to get incredibly long if you try to relay all of this information in one alternate in one alt text field So a lot of times in this case what you'll do is you'll provide an alternative This is they did not provide an alternative So I just gave them one which is a copy of pasted Wikipedia chart But in this case the alt text can be chart of the percentage of times an artist appears on a post-punk playlist See following table for data and then that table below is able to be Accessed through screen either and through by tapping through the content. This is able to be read You're not hiding the content within an image anymore Sometimes you can host that information on a separate page or further down the page with an anchor So in this case it might be something like chart of the percentage of times an artist appears on a post-punk playlist And then a link to where that data is if you don't want to put it on the actual page Either way these are going to be rare. Your best bet is to make sure that data like this is just actual content within the page Not not trapped within an image Those are kind of edge examples though when you think about it Let's get to the more common example. Just a plain old ordinary image no text no data just the image Writing this kind of alternative text can land in a bit of Blurry area because it depends solely on us interpreting The details required to make the image useful. It goes back to what I mentioned earlier We're not tasked with describing the image itself. We're tasked with describing the information that image is attempting to portray In some cases, that's easy a plate of pancakes is a plate of pancakes But in this case It's just it's just a sort of an abstract image. So what do you say do you say all Equals a bunch of boxes. Well, no, that's not helpful. You might as well just not put the image in at that point Or do you go the opposite direction and you say five columns of non-symmetrical boxes in between 10 and 12 boxes in each Column with randomized colors including green blue white red black yellow on a great background. Yes, I did practice that No, because that's also ridiculous and now this has to be read and it's way too long It said we and you're gonna find this is a common theme throughout this talk. We land someplace in the middle a grid of differently colored boxes illustrating order among chaos Now we know what that image is there for we understand the purpose of that Awesome final quick hints on writing alternative text. There's no need to write Picture of or image of this is already implied because it's alt text Also keep things short Screen readers can actually cut off the text and so make sure you keep it roughly around 100 or 125 characters That's a guideline. That's not a law Use your best judgment in this case here. We this alternative text is way too long But there's no way to make it shorter because that text is in the image in this case The answer isn't make the alt text shorter The answer to this one is make the slide better so that it actually can be you know conveyed Finally make sure that your Drupal install isn't allowing for file name fallbacks If you don't know if it is just make sure you like ask a developer and say please don't do this because What this means is that if if there's an image you'd rather have a blank alt tag Your system doesn't see that blank spot. It says it says, oh, no, they can't be blank Man because I read a blog post about it once and then your Drupal install says I'm just gonna put whatever I think should be in there How about the file name? digital art one four four four nine nine oh underscore six hundred and forty This is bad In a lot of ways You specifically wanted the alt tag in this case to be blank And so you don't want the CMS like under the guise of helpfulness to jump in there and provide a fallback of That of that image file. So just make sure that that things are that that option is is available And I'm sorry wait hold on I just spent a bunch of time talking about how alt tags are necessary And you need to put text in them etc. Etc. And now I'm talking about Sometimes you can leave them blank and yes, that is the troublesome part of alternative text the exceptions This is literally this was the longest part of this talk for a while. I had to cut a lot of stuff out This is really our first foray into the it's the really gray area of Inclusion which can be a tricky line to balance. It's it's not as easy as just blanketing every image with alternative text Remember the idea of alternative text is to create an experience that mirrors the visual experience But in order to do that we have to understand how images and graphics are used on a website So first off we have to understand that not every image is necessary for the site itself Some images are what we call decorative some are structural These are things that we roll right through and we're looking at a site with our with our scanning eyes We don't see them they offer a level of graphic ambiance But they don't present any actual content and therefore we don't encounter them outside of a general feeling For example, there is structural content which is This is this is my old blog this is the design two designs ago And I put little graphical flourishes in between all of the blog posts and they don't need to be read by a screen reader Please I don't want this to say graphical flourish every time my blog post ends But we do still have to give it an alt tag And so what we do is we give it an alt tag equals blank And the reason we do that is because otherwise the screen reader is going to look at it and say Ah, there's something here. There's something here and it's gonna get really angry This way says hey, there we know there's something here just Just don't read it From an editor side of things you probably won't have to worry about this too often These are things that should be built into the built into the template But then there's also images that are already Nestled next to some identifying text so examples of this include a directory that includes the name of the person next to their image or a Caption on an image within a publication or an icon that sits next to a heading And the reason we don't need alt text on these goes back to the reason behind alternative text in general it Provides explanation for images that cannot be seen for whatever reason in all of these cases That text is there. It's just not it's just not in the actual image. It's related to the image In fact, if you were to read alternative text for the image and then also read the text itself it starts to get really noisy It's an added layer of noise. It ends up sounding like this Red panda next to a bamboo tree a red panda next to a bamboo tree in a red panda next to a bamboo tree Or a panda next to a bamboo tree on and on Until the world dies Finally alternative text can be skipped if the image provides no communication value outside of page decoration And this this will be completely honest another time during this talk when my wife got into a large argument with me because This is ultimately an editorial issue This is a matter of opinion and judgment. There are some that believe a university carousel slide Or a page hero of students underneath trees. They can that conveys Important information it provides a feeling for campus life. It helps students visualize themselves on campus And there are others and I find myself in this in this camp that feel that while these are nice accent pieces They they provide a way of breaking up the page for those who can see the page They are they have little to no contextual value to the content on the page So ultimately what the answer to this is I don't know it depends But thankfully you don't have to make these decisions alone. There's the Alternative text decision tree Thanks to the web accessibility initiative This describes how to use and when to use alternative text in various situations So like on the highest level is it's gonna say does the image contain text? And if you think the answer is yes or no, you're wrong because the answer is actually yes, yes Yes, yes or no There are lots of different versions of what you would do with alternative text depending on the type of text that has that is inside of that image So this is actually an incredibly useful tool I have a slide at the very end of this and they'll be posted all of the things I talked about the tools the links the articles And so you'll have that at the end. So don't worry. Oh, you'll have access to all these tools What you're gonna find out with this is that a lot of times and I find this out with a lot of new sites Especially if there's a lot of hero images being used especially with university sites 90% of the images that we put up there don't need alt text. They're all purely decorative They're there to provide some level of decoration. They don't provide context a lot of context the page But if you were to put alt text in a lot of those heroes, it's still okay So it it's a being a judgment call enough about alt text. Let's talk about transcriptions With captions and transcriptions we shift in focus from visual media Toward audible media, but that's sort of a bit of a misnomer because the idea that videos are Captioned and transcribed for the deaf or hard of hearing is kind of become an outdated thing Now videos are captioned because you have your computer sound down or they're captioned because you're on the quiet car Or they're captioned because the text itself is just easier to search an index And because not everyone consumes information in the same way When it comes down to it videos are no longer captioned just for a disability they're captioned because having Multiple options is always the best option as I lean web says in her talk Which I linked to in my notes integrating accessibility your video and on audio content is not ready for the web until there are captions or a transcription There's a difference between the two types And it largely depends on how you're using that video or audio and what you want to get out of it Captions are useful when the video is meant to be viewed in real time with the text a live event or Something in which the video is closely tied to the audio, you know a video on college humor calm that has lots of arm waving and physical motion along with the slapstick comedy along with The the the actual words is probably not going to do as well transcribed as it would with captions But in most other cases videos we find them. It's easier to transcribe them Transcriptions separate the text from the audio and they provide what is essentially an article view of the content the benefits being You know the video is actually no longer the focus that the content is the text is You know this obviously won't work for live events It won't work for those those examples earlier the slapstick comedy or things like that But for the most part it's it's usually the best option and it's not all about videos either any medium that requires sound Should have a transcription attached to it unless again, it's leaving that dealing with live sound So podcasts like Paul Ford and rich dad's track changes, which is a wonderful podcast And also they do a great job on their blog of transcribing the entire episode The full conversation is listed there including background sounds the great example of how to do podcast transcription correctly Or even conference talks, you know, it's a no-brainer for me to transcribe the talks that I give on my blog Especially if it been taped, but even if it's not being videotaped. I make sure to post a transcript of it It's just you know good content. That's not even an accessibility thing. That's just I don't know why you wouldn't Transcribe the things that you were talking about it in public Both transcriptions and captions we used video service a hosting service to do it We let them do all the work essentially YouTube you can upload a video to YouTube and after about half an hour It's there and then what you start doing is you start typing it and it's it's actually fantastic because It allows you to type type type in it will pause the video while you're typing It still takes a while and so if You don't have the time or if you have like extra money and you just don't want to take the time You can easily outsource the stuff to someone who can professionally transcribe it to you for you It's obviously going to take a little bit of cleaning up Because you know no one's going to know your brand terms Nobody's going to know the people you're talking about nobody's going to be able to pick up all of the Accents or any sort of money voices in the same way that you would but it's going to save a lot of time if it's if it's worth the the cost to you Finally, we'll talk real quick about one last thing in this section and that is the title field Which gets up getting used in about 70 million ways depending on how the site is set up It can be the navigation title. It can be the title that's that's pushed for search engines to pick up It can be the title of an article. It can be the title of the piece of content itself within within Drupal All of these uses have one major thing in common. They all contribute to Wayfinding Especially for somebody who is using a screen reader to navigate content The title field is important to accessibility because it is what is announced when a new page is loaded, you know This is sort of your time to shine. This is what's that? This is your introduction to the page content It should be concise and it should be accurate and it should be clear The title field is not a time to like get wacky It's a time to make things understandable It's not a time to to really push a lot of brand terms time to say this is exactly what's on the page And so here's an example. This is actually from our site The basics are you give an informative title that is short but understandable So this is our this is the page that it lists all of our employees at one interactive Well, we call our team and so I don't know we just called it our team We don't have any other pages on the site called our team. This is clear when you're navigating through you understand what our team is and Then what we do is we we actually appended the name of our company at the end of it for all of our all of our URLs, this is automatic We put it at the end and I've seen a lot of organizations put it at the start because I don't know SEO or something But what that is what ends up happening as as you're tabbing through things when you hear this name when you go to the page It starts with the company every single time when you're going through your browser history It starts with the name of your company every single time You've actually lost an element of wayfinding in that case because every one of the pages look the same Especially if your company name is too long and it pushes everything else out here if you've slapped a bunch of keywords in there An example here is this is a university site that we worked on It's the University of Sioux Falls, but for some reason I decided to hide the name of the university in the examples So just I don't know why There's no yes or no answer for what the title should be and fortunately like all of this editorial writing there's really no There's no There's guides, but there's no rules You can say degrees for this page which again is probably way too short You probably the university probably is in multiple pages that relate to degrees and so this isn't even a differentiating title Or you can go really long and this is what this university had Before we jumped in there and tried to help them Under undergraduate programs and majors liberal arts college University of Sioux Falls Sioux Falls, South Dakota Yes, it did have Sioux Falls in there twice This is the reason they have this is because they want to show up in search engines for liberal arts college They want to show up for Sioux Falls. They want to show up for South Dakota Ultimately again, what it probably should be is something in the middle And we ended up changing this to undergraduate programs and majors University of Sioux Falls If this sounds a little bit like we're just straight up talking about writing you're you're right So let's just go to the next section of the presentation when we talk about writing for accessibility We're talking about writing for the web, which is essentially a mix of Copywriting in the traditional sense and and writing for a purpose designed to you know make people make decisions and and and take action and Plain language, which is the art and I mean that 100% it is an art of providing Access to people to access for content Access to content for people with a with a wide variety of reading levels To the center for print for plain language plain language means the target audience can read understand and confidently act on The information in your content, which means the definition of plain is a definition that shifts with the audience What is plain language for one audience may not be plain language for another audience content that is specific to a Biology teacher is going to reach a different level of plainness than content meant for their students This takes a lot of work to figure out and I'm afraid it takes a lot of time not just Time in that we will spend more time writing content But time that we will spend years gradually trying to figure out how to get things More plain without losing the actual meaning of what we're trying to say Until we get there many years in the future. Let's look through some rules to make things a little easier First writing text so that it's scannable is is Incredibly important to help people better parse the information within a section But in this case it's we get this and it's like intimidating for anyone who doesn't have a really high reading level And it's there's a lot of text in there. It's just it's got a lot of information just bursting from the seams But it's used also doesn't really say anything at all It's like the sort of those weird like middle of the rap Lin-Manuel Miranda lines that just you threw in just because it rhymes This text is daunting It's inaccessible. It's it's it's an example of bad content design So instead content should be built in a way that's a bit more dare I say airy and free You can see that there are different sections. There are sub headlines bullet points There's five things that we've done to make this content more accessible We've made sure that there's a relevant headline instead of acute headline because somebody who already has to navigate all of yeah Also, it just says relevant headline People who have to Navigate everything else on a site using assistive technology. They don't also have to try to figure out what you mean by your title We're writing in shorter chunks of content Meaning we're making sure there's just one thought for per paragraph So people can quickly understand what we're talking about. We're not hiding things within a big wall of text We're using subheads that further break down the body of content and to signify to the browser Where content concepts are located? We're using bullet points to say this is a list of things you should know about and we're using clear and actionable Actionable links, which we'll talk about a little bit later The positive to writing like this is that by assigning headlines and properly labeling links and using fewer but more important words We're doing two things We're being deliberate with our language We are also remembering that search engines Just like assistive technology rely on understanding the structure of the content so while we write things to to be read easier by by Assistive technology. We're also writing things that are easier to understand for for search engine optimization Sometimes you're gonna get asked about reading levels like I we had we have a client right now That wants all of their This sounds ridiculous, but I promise you it's true. They want all the legal documentation to be written at a fifth grade level So that's a thing we're working on We're when we're diving into the readability of words we tend to want to slink over to like automated tools to get those numbers The reason for this is that writing is a really difficult task And it's hard to know if you're doing it right and so we hope that tests like the like the flush concave test Readability scores will help us like okay. Well, at least we're getting closer and that's really what they do I mean, for example, this is a page from gov.uk about bringing animals into the country if we Take this page and throw it into a Readability tester, which I link in the notes we can see it's been written at roughly an eighth to tenth grade level Depending on the score that you're using Even more visually you can see that it's been designed in a way. That's easy to read. There's lots of bullet points obvious headings short short paragraphs This page from the CDC here in the United States has similar content. It's the same it's the same Concept it's asking about how do you bring animals into the country, but it looks more complicated It has headings that it's got some bullets, but there's more blocks of text and according to the readability testing It's roughly three grade levels higher from 11th to 13th Essentially a college level is required to read this page These are nice to know But you know in fact reading scores are just that their scores their numbers They can help you make a point they can help you see if you're improving on things They don't actually accurately represent your content in the way that actual reading or testing will represent your content There's still a need to make sure you're taking the things that you write for your site and testing them with actual people To going to your audiences and say hey, would you read this and see if this makes sense other people in the audience? you know ask Teenagers who aren't connected with it to see if they understand it not knowing your brand guidelines not knowing the jargon of your industry But I rarely use reading level scores anymore when I'm looking at content I said I go to something even more basic which is called simple writer. How many people are familiar with simple writer now? Everyone is simple writer was created by Randall Munro of XKCD fan. It's uh, it's based on the concept of up go over five Which was a cartoon that he drew to explain the mechanical workings of Saturn 5 the rocket that sent astronauts for the first lunar landing using only the top 1,000 words in the English language so What it ends up doing is it ends up pointing out the words that you're using in your text that are above those Thousand most used words in English language. It's not telling you to replace them It's just saying hey, here's a bunch of big words. You're using maybe I don't know think about using something else I took a before and after from plain language gov. Which is a wonderful site a wonderful resource for learning about plain language And they had some examples in there one example was an application for federal assistance They use for their training purposes and you can see that like you know a third of the words are above that that Thousand word level There's a lot of other writing issues here as well But the definitely the words that I mean it's got it's got passive Sentences in there. It's not clear enough all of the actions are referenced from the agency and not the actual user but then they also give an example of of what it would look like after you've written it using plain language and It still uses some of those some of those higher than thousand words But it's written in such a better way. It's it's focused It uses words because it needs them not because it's just kind of I don't feeling space like like we do on our first and second drafts of writing It's not perfect But I mean those words in red are a lot less scary than the ones in the first Example and that sort of brings up a point, you know, sometimes you can't simplify to a perfect level We can't always rely on tests or tools to make sure that our stuff is written Perfectly to a reading level test because these tests don't understand our audiences. They don't understand our context, you know Sometimes they don't even understand whether or not it needs to be in words or not This is the code of federal regulations for warnings on a vehicle that could roll over at high speeds This is the rollover warning label that it's underneath your your your your what are they called those things? Thank you. Wow This was written in 1987 according to our testing It's roughly 10th to 12th grade level of reading score I threw it in simple reader and like 50% of the words are above that thousand But in this case the solution wasn't to make the text more simple It was just to say like I don't know if this car might roll over so wear your seat belt And even the text itself is simpler, you know It's a ninth grade level instead of a 12th grade level One thing that we really need to work on especially those of us who consider ourselves native speakers of the English language Is that our language is filled with a lot of like one-time use words and this garbage that serves a really? Incredibly specific use if they serve any use at all These words jargon Idioms weird metaphors they can be important if you're writing like a blog post And you want to add some sort of creative cache a to the longer articles or pros But when we're writing informative content for actual site users We just want who just like you don't want to they want to find information or they want to buy shoes or they Want to you know bring their dog into the country? We need to understand that the best words are always the clearest words, you know words that could be understood both by us and by robot translators, I Mean I want to idioms are the worst possible thing you can put in your text I love this example because this is what have that's all the cookie crumbles if you translate that into French It's this and I don't know French, but I do know that it isn't this That's how icing on the cake is what I always say so don't use idioms We've talked a lot about writing for humans to understand And we've talked about the fields that they need to sort of keep track in order to make sure that web browsers can understand But that sort of blob in the WYSIWYG editor It's a bit of both, you know, you actually are creating titles within there And that's the heading structure and I want to touch on heading structure here quick For those who don't know headings in text are most often seen as section headlines and sub headlines They identify what a specific section in in the body copy is going to be in fact We see it most oftenly most often most oftenly most often on a long form content These are two blog posts that I have read written and I write incredibly long blog posts So I always have sub heads in there Your H1 is typically the first level heading. It's going to be your title And then you've got H2s and H3s to sort of filter things down and the reason that we need to do this is because They provide a really deep level of understanding for web browsers to To structure and figure out what you actually wrote I mean, we have to think back think back to middle school You know where we all learned the basic construction of an essay where introduction three supporting paragraphs the conclusion And by constraining to these five sections, we learn how to move beyond those sections We better understand how arguments are made. We we learn how to create subsections within our within our text We use how to use like we learn how to use language to stall a conclusion for just a little bit longer Web browsers RSS feeds search crawlers accessibility tools They don't learn that stuff. They just know the text that you give it. They don't know the context They don't understand What's important and what's not within this and so we have to tell them and we have to tell them in a Way that follows the same outlines that we might make if we're giving a giant thesis So seeing how one heading and one chunk of content feeds into each other You can begin to see how scannability Is harmed when we don't use headings in the right order, you know When headings are used as visual cues instead of instead of structural cues we start creating problems We end up with out of order headings, you know If we think that the H3 just looks better there And so we slap an H3 in there and we don't really like the H4 style So we're just gonna do H5s from there on out We have now just said I don't care anyone who isn't reading this with eyes. I don't care What order you read this in because clearly we're gonna go from section one to section three to section five and Skip around and a screen reader gets confused by that and somebody who uses a screen reader who? Expects H2 to be a list of all those headings people will cycle through these headings if you use jaws on Microsoft machine pressing the one will take you to the H1 pressing to cycle through the H2s Here's a quick example. It isn't just within the body copy So there's a mix of this there's a body copy text And then there's also all the blocks and things that you sort of throw in at the bottom or or in between In this case your H1 is typically going to be the title of your page the only exception that I've ever really Sort of allowed is if the the homepage of your site where the title might be the actual your Company's name or organization's name And then H2 is going to be all of your sort of sections within that body copy But once you get into the blocks itself Those also should be H2s because while we see them as just blocks slotted in Really what they are is they are an extension of the body field It's just we're providing structure for that for that section So these still need to be H2s and that's one of the things that we see development wise that really causes problems People will create blocks that end up being H3s and H4s because that's what the style dictated Writing these headlines is going to follow the same rules. We talked about with titles This is that same blog post from the now defunct but still very much live contents magazine On how to create a content strategy methodology. I had four main second-level headings on that Methodology a definition why methodologies matter Methodologies are personal great. So how do we do it and in doing that? I was able to I wrote things that weren't just you know methodology this methodology that although I did use the word methodology three times They were also Creative enough that they didn't that they weren't boring But also I had to really focus on making sure that people understood what this is because not everybody understands the concept of creating a methodology The way I usually write this just a quick tip is I do paragraph to outline I write my entire blog post or my entire chunk of content first and then I assign headings based on where I see the breaks in ideas Same thing a newspaper editor would do with headlines You can also do it, especially if your contents really highly structured You might create the outline first and then right fill in from there either way This shows you how headings are essentially an outline on the page The last part of this is just descriptive text links I'm not going to get into this like idea of of hey You shouldn't write you shouldn't make your links a click here Or you shouldn't make your links say read more because we're just going to assume that we all know that that that doesn't mean anything But we have to understand that sometimes people especially if they're if they're filtering through a page using a screen reader They will only hear the text. They're gonna cycle through to hear the text of those links None of the contextual information around it. They're just looking for a specific link So when someone tabs through they might hear something Neil Armstrong link buzz Aldrin link lunar module link I know that when I click on buzz Aldrin, I'm going to get buzz Aldrin that link has made a promise to me This is what you are going to get when you click on me or when you interact with me Sometimes though and we see this a lot on in publications and blogs will do this sometimes But I have seen it on product pages as well. We start to get cute with the way we are writing links This is an example a specific article from the ringer magazine. It looks like it has three links But in reality it has 13 different links What they're doing is they're attempting to show The idea of the link by linking to it. They're not even putting the actual information you need Inside of this and what this sounds like is the link most link Successful link Genre link. I won't go through the whole thing But the whole thing is up there in case we have 45 seconds to get through that one set of links Ultimately what this should have been what those links are is there links to different Different procedural dramas that have been popular over the years when they could have just done something like this So somebody who didn't want to click on the links could still understand what they're trying to say, you know It's arguably arguably the most successful genre in the history of American television is shown by classics Like in my pd. Blue law and order CSI and NC is and then there's the opposite side of things where if we are Writing this I just pull this off a metaphor. Just a fascinating story but This is one link and there's a lot of text there and it's just the text of the tweet We all do women came in and said quote. I have a question. Why does page seven in all the books? I take out has the seven underlined and again, I'm not going to do the whole thing but What the thread tells is the story of like this old library secret code. It's fascinating That people will use to track their books before there was you know computers apparently And there's a whole thread there and what I would have liked to have seen on a link on that is you know The full thread tells the story of what you're going to go read instead. I don't know what this is It's just a it's just a it's just a thread All these examples are taking users to text pages and that's cool But text pages or text pages, but what happens if we're linking to a PDF? What happens if we're linking to a video? Simply we just have to be honest again. You'll see this a lot. This will be added into certain websites It's something that usually I don't think it comes standard on Drupal at all. It's something that's developed into it but this idea that when you are going to going off site it will give you the little you're going off site link item or PDF download will show you a little PDF icon and there's alt text attached to that icon so that when you read that link It says you know in this case Excel spreadsheet. It would say Excel all the alt would be Excel download If you don't have the setup Currently what you can do is actually just add it into the link itself. That's totally okay This is what we had to do for a few clients where we were helping them fix their the editorial accessibility on things But we they didn't have the budget to do a giant overhaul of of some of the conventions. So You know external resources new window well, I know what that's I know what's going to happen There's a promise made there and I know that promise will be kept student body profile PDF Okay I'm going to use the rest of this time to talk about change and the accessible environment because at the root of Nearly every web problem is the idea of change Change in how we handle things internally change in how we work through problems change From what we were taught or what we were assumed Ultimately in order for accessibility work to be handled in your editing process. It has to become Something that is a priority company-wide in almost every sense updating and creating content For accessibility is an issue of time, you know, it takes extra time to review content It takes extra time to think about somebody beyond your own mind. It takes time and so time needs to be allocated Which can be a tricky thing to bring up in essence asking for better support for editorial accessibility It means asking for more budget. It means asking for more attention It means it's asking someone to take this on their shoulders and champion Not just the obvious examples, but but but everyone who comes in contact with your site Not just enough to pass tests, but enough to provide a true positive user experience And it doesn't help That accessibility is a lightning rod. Nobody wants to admit that they've made a mistake and willingly or unwillingly Excluded someone be through through non-inclusive design So I guarantee there will be a tendency to get defensive on those on those mistakes I look back on some of the first projects I've ever worked on and it's not the spelling errors or the bad strategy decisions that I made I'm most embarrassed by the fact that I have things that was so self-centered in my worldview that I unwillingly included non-inclusive language and design and sites that I helped build But that's the past We can't worry about those mistakes. We have to fix them and make them better And we have to worry about the mistakes that could come in the future We have to protect ourselves against those, you know, there's nothing we can do to fix the past So we have to start walking toward the present and beyond So when non-accessible content or writing comes across your desk, just help make it better, you know, explain why it matters Don't get mad or hotty. It just help everyone get better, you know Even if through sheer repetition and will this is something that will get fixed We can start by doing things that feel really commonplace, you know, and from there we build things into our workflow We implement a checklist if your organization has a checklist of like these are the three things you need to do before You post this content one of those things should be make sure this is accessible and Then run it by somebody even if you don't have questions Even if you think you've nailed it ask someone else to take a look at it as well Even if it's just a quick read, you know Make sure you get second opinions on things to make sure that more minds are solving the problem part of this process is also making sure that it has a champion like an accessibility guru or Ninja or whatever LinkedIn terms we were using These days Someone who's responsible for the main details, you know Even if you train everyone that group if unless you're doing it every day, they're gonna forget They're not gonna pay attention to stuff. So you have to have somebody whose job it is to take care of that stuff Part of that is making sure that that person is stayed it stays up to date that you're supporting that person Not just by saying hey, you know, you're our accessibility person cool Send them to training make sure that they have time to continue learning new technologies All right, there's so much more accessibility is not a thing that you can tackle in an hour. They've already clapped over there I'm sorry In a day or even like over the time Things are gonna continuously change and update even if you could learn it all in an hour It probably would be changed in a few weeks All you can do is just get better and better at what you do and what you need to do But understand that nothing can be perfect. So I've referenced a lot of tools in this talk I will put a side up at the end that has all of those tools in it But I want you to come away with three things from this talk First I want you to Understand the reach of accessibility That is not just for people who are blind and deaf but anybody who's in an environment that might differ from yours Someone who's just learning English someone who has a broken arm somebody living in poverty with it with a slow broadband connection I want you to see that really accessibility is all about options You know, it's about understanding that providing both a video and a transcript adds a benefit that that images aren't the only way To convey understanding that we need multiple ways into our content Just like we need multiple ways into buildings for different ability types and I want you to understand that the most Accessible content is clear and concise. It can be translated better. It can be understood by multiple Reading levels. It can be it's just it's just easier to take care of I'm sorry. I'll throw a fourth one into Be okay with gray areas, you know accessibility isn't a checkbox. It's not a binary issue and that's really hard When we learn to write we learn rules We learn rules and writing because knowing the basics is important It's what helps us shape language, but the basics can't solve every problem creativity and judgment are needed to make Decisions to take chances And while we don't often see web writing as a place where chances are taken we have to Understand that there is a balance to what we do. There are the rules and then there is the interpretation of those rules You know and that interpretation frankly scares the shit out of a lot of people It doesn't have to be hard All we need to understand is that the gray areas are only gray areas to those of us living without disabilities Someone who can't see there's no gray area. They know exactly what works and what doesn't Someone with a broken arm knows exactly why it's difficult to key through a site and someone who grew up in another country Understands exactly why the complicated instructions on their insurance company's website are difficult to translate We're afraid to be wrong But we don't have to be For years the bare minimum was enough But not anymore instead we need to put ourselves into the minds of those who will be encountering our content and Say that the bare minimum isn't enough anymore. It doesn't have to be perfect. It just has to be better So thank you so much and let's get out there and make better websites That's the link right there eating elephant comm is my content strategy blog at Drupal 18 Is the link so thank you very much for your time I know I didn't leave any room for questions because ha ha no if you have questions Just come talk to me after this and thank you very much I do in my workshop Okay Yeah I'll be honest we're doing the link to another page thing a lot what we've been doing is Creating almost like a glossary page for stuff like that and so the long description might just be like you don't fully understand from this image You could put a link to it and says for more information or for the data Yeah, well, and it's like a giant long page and That's anchor links on and so you just click on that it goes to that anchor and brings you back to where you need to be That table I just I just I just Yeah, so in the talk in the alt what you're doing is you're just saying hey there's no This is a table If you want the data go below or go like the table the table is going to follow We're not the table is not in the alt at the table is on the site. Yeah, the table is on the site itself Yeah, yeah, we didn't put the table in the authentic. Oh boy No, you don't you don't do that. I'm glad you brought that up because I'll need to make that clear It's already weird enough. I just slapped a table from a completely different page Slides are up there. Yep everything everything's up there slides links to books stuff like that Oh I I've got a card Two years I had to make some up I'm gonna come down here This So was it like for like developers Oh That's I Thought it was definitely interesting Walking Out of like the corner of my eye So I wouldn't like disturb it That one I Greg is the he's actually part of the Like Oh Oh Oh I My mom Like You know Oh Oh Sorry I Don't want to take So I I I Like All my instincts I was But everyone's like Is That could still be like No I mean I have been So I'm not just standing here Killing two invasive species of birds with one stone that's that's that's how I like to use that Animal lover but like also conservationist you're like well okay if we're gonna kill birds because we have to use this Idiom And so Which is really interesting because I have And they do It just makes me feel better What doesn't seem like Like suffering right so I was really afraid of it like still being alive. I was pretty sure I was like I don't have to worry about this. But if I did I was like, I don't know how I would Be able to like put it out of its misery because this is like a large They are pretty fuzzy big it was a little gross with like the teeth and the claws Yeah, they're definitely Yeah And now exactly I'm like it was the one time that I was like Maybe I should have a gun like I know I'm a liberal hippie. I can't have that but I was like Out of the bed because I don't know where else so But it's exactly everything's like that and it's like I I like it Like uh And Exactly, but I mean I I guess because from like New Hampshire's perspective is that we don't really have