Speaker 1: Hello. Today we're going to talk about web accessibility for content editors. Before we get into that, let's talk about what is accessibility. Accessibility is the inclusive practice of building websites usable by everyone, regardless of their level of ability or disability. What does that actually mean? Well, it means building a website that is accessible and usable by everyone. That includes those that may have disabilities. Some examples of those disabilities might be poor eyesight, hearing loss, mobility impairment, or maybe users with epilepsy that have to avoid flashing content. Those are just a few examples. There's definitely a lot more. So let's talk about a few common terms that you'll hear when dealing with accessibility. The first one is the W3C, which is the World Wide Web Consortium, and they're the group that make most of the guidelines that we're going to talk through today. Next is WCAG, and that's the Web Content Accessibility Guidelines. Those are the guidelines that are internationally recognized and that are oftentimes followed across the globe. And lastly, there is A11Y, which is just a short form for accessibility, and it stems from the fact that there's 11 characters between the A and the Y. So pretty simple there. There are a number of different accessibility laws and legislations around the world. This is an example of just a few of them. There is the AODA, which is the Accessibility for Ontarians with Disabilities Act. Quebec has its own act as well. And lastly, Americans with Disabilities Act is common in the United States. Now, in this video, we're going to focus on just the responsibility of content editors. More than likely, when working on a website, the designers and the developers have already done a lot of work under the hood to make a website accessible. But the responsibility of content editors is to keep that site accessible in the future, to maintain that groundwork that was put into place. That includes things like text, images and media, including video, social media, maybe PDF files, as well as metadata, which is you can think of the data about data on the website. We're going to get into a few examples of what that all looks like. Now, this is a pretty deep topic, so we're going to have some resources and training content at the end that you can use for more information. Now, let's dive into text content on the web. When you're writing content for the web, it's important to use plain language. And that means using everyday words, avoiding verb noun phrases, and I'll show you what I mean about that in a second, writing short sentences and paragraphs, and splitting your content into chunks. Here are some examples about using everyday words. You can see here, we can use a word like facilitate, but we can also make it a little bit simpler and use a word like help or make possible. Similarly, we have in the absence of, we could just say without. These are just a few examples of how we can make our content a little more accessible by using plain language. And this is what we mean by avoiding verb noun phrases. There's provide an improvement to when we could just say improve or proceed with the cancellation. We can just say cancel. And with regards to writing short sentences and paragraphs. Now, I'm not going to read this entire before and after paragraph here, but you can see how they're quite a bit different in length. We can make it quite a bit shorter. It makes it easier to understand and the underlying meaning stays the same. And finally, we have splitting your content into chunks. You can see in the before column, there's a large block of text, whereas in the after column, there's a smaller sentence with a few bullet points. And that just makes it easier to understand the meaning behind this text. All right. Let's dive into Drupal and talk about using semantic HTML. Now, what does semantic HTML mean? It's basically using the available HTML tags that convey meaning to assistive technologies as well as search engines and other technologies. So, let's open up this article and have a look at how this page is structured. So, you'll see here I have a few blocks of text. And our first one, we have a list here. I've created this just by typing in the dash character and created my own list. Ideally, we should use the semantic HTML here, which means using an actual HTML list element. And you can do that just through the toolbar at the top here. You can see it creates a bullet list. And when I click on that, it will actually create this now as a properly semantic list. I can just delete those dashes there to clean that up. And this is better because it is now understood, again, by, say, a search engine as being a list. But also, by assistive technologies, a screen reader might now read this off as two list items. And somebody who's listening to that will now understand what is being conveyed and what is on the screen. And next, let's look at this block quote that we have here. You can see it's a quote because we have quotation marks around it. But it's just created as a typical paragraph. What I want to do is create it as a block quote element. I'm going to select the text and use the quotation toolbar icon here. And now it's converted into a block quote. You can see that because the styling of the element has actually changed. We can also look at the source code. And we can see now that we have a properly semantic block quote around this paragraph. So, now a assistive technology, such as a screen reader, will read this off as being a quotation to a person using that technology. And the next part of this quote I'd like to look at is the citation. And notice we have the www abbreviation in there. Now, chances are most people know what that means. But we can also improve the accessibility of that by using the abbreviation tag. I'm going to select that abbreviation and use this button in my toolbar. And you'll notice I get this new insert abbreviation window. So, I can type in the worldwide web explanation and hit save. And you'll notice it's changed the styling of that text ever so slightly. And when we hover over it, we get a little tool tip. But also, assistive technologies will understand what that means and be able to convey that properly to a user. And next, let's talk about heading hierarchy. This language's header here looks like it might be a header. But actually, if you look at the toolbar, you can tell it's not. It's just a paragraph tag with a strong tag around it so that it emulates a header. We actually do want this to be a proper semantic header. So, I'm going to use the toolbar controls here to select a heading level 2. And you can see it's changed the style of that text, which is dictated by the site's theme. And now, you can see in the toolbar, it is a H2 tag. This is important because it allows users of assistive technologies to navigate around the page using the headers. So, if there was an H3 underneath this, somebody could navigate between the H2 and the H3 very easily using controls that are available to them through those technologies. Heading hierarchy is also important for SEO. So, if you properly structured your pages using the correct heading hierarchy, it can give you a benefit there as well. Let's talk about languages. Because Evolving Web is a multilingual company, we often have multilingual websites. In this case, we have a little bit of French on this page. Now, the rest of the page is, of course, in English. So, we want to mark up this section of content as saying, this is a different language. This is French. And so, I'm going to select this content and I'll use this toolbar item that I've added to mark it up as French. And now, you can see it's added this little indicator to show that this is in a different language. And importantly, if you look at the source code view, you'll now see it's also displaying a language attribute here to allow an assistive technology to understand different languages and read it off as appropriate. And lastly, it's pretty common to work on your web content elsewhere and paste into your website when you're ready. So, for example, you might be making a new blog post in Microsoft Word and copy and paste it into your text editor like this. When you do that, you have to watch out for some changes in formatting and in the markup of the new content. So, if I paste in my content that I've already copied here, you notice it looks all right. If I go into the source view, you'll see there's a lot of extra tags here that aren't really necessary. Some of those may cause some issues with accessible tools trying to interpret this content. So, to get around that, I can go back to my text editor and I'm going to do a paste as plain text, which on my computer is Command Shift V. You'll notice I lost all that formatting, but it's going to be much simpler for me to clean that up and then we'll get a much better result for accessibility tools that don't need to try to parse all the unnecessary markup. And now, let's talk about images on a website. It's important to consider what would happen if somebody couldn't perceive the image. That might just be because it didn't load, but it could also be for somebody who has visual disabilities. We can account for that by using an alternative text to describe what the image is displaying. Let me open up this article and we'll see what that looks like. So, I've opened up this article and I'm going to insert a new image. And I'm just going to bring in my image. And you'll notice immediately there's this alternative text field. That's where I can put in some content to describe what is in the image. So, I'll just paste in my content and hit save. And you'll see we have the image here. If I look at the source code of this, you'll notice there is an alt attribute on this image and it has that text that I put in. And this serves that role of explaining what the content of this image or what the image is representing within the content. In this case, that image actually has some text in it. So, you'd actually use the same text to describe what that is. Again, you can see that in the image itself. Now, there's a few scenarios to consider when it comes to alternative text in your images. Commonly, images are functional, informative, or maybe decorative. And they should each be handled a little bit differently. So, in this case, if we had a functional image, say, for example, a search icon that is representing the search function of a website, the alternative text might be something like search this site. In this case, we have an informative image. So, we've tried to describe what the image is conveying. A decorative image is actually a little bit different. Because a decorative image doesn't add any context to the page, we can actually leave that alt attribute empty. And to show you what I mean, if we add a new image here, and I'll bring in my image, if I try to save this with an empty alternative text field, you're going to notice it gives us an error message. But it also gives us the helpful instructions on how to actually leave that empty. So, if I enter in the two quotation marks as instructed and try and save that now, you'll see it's added the image. And this particular image doesn't really add to the content of this fictional page. So, we can leave it with that empty alt attribute. And if you go into the source view, you can see exactly how that looks right here. And now, let's switch to talk about videos. So, you can see I have this page here with a video embed on it. Let's switch to the edit mode. And there's a few things we want to look at here. Now, the first thing let's look at is the way that this video is added to this page. If we look at the source code here, notice we have what's known as an iframe. And that's basically just a document within a document. And so, what we actually need to do is describe what that document is to a user of assistive technologies. With video, that's done through a title attribute. And you'll see we have that right here. Now, YouTube is actually pretty good about already including that when you generate the embed code. But that's not necessarily true of all providers. So, it's definitely something to watch out for. And I'm going to switch over to the view mode for this next one. You'll notice when I play this video, we already have captions along the bottom of the video. That's important because not all users will be able to perceive the audio. So, we need to provide an alternative for that. In this case, that means captions. YouTube provides pretty good controls to create and edit your captions. But that's not necessarily true of all video providers. So, it's important to make sure that you have added those and that they're available for users who require them. And the next thing we want to talk about is tables. I'm going to go back to my plain language content where I recreated that same table here on a webpage. And you can see there are certain elements that might stand out as being unique. The first one is this summary. And this is actually created as a table caption. I'll show you that in just a moment. And next, we have some table headers, cells, rows, and columns that are all created in very specific ways to make them more accessible. And I'm going to show you how to do that using the Drupal editor. So, I've opened up the editor here. And let's take a look at this caption first. You can see this under the table properties. So, I just right click and table properties. And here you can see where we've added this caption. And that serves as a summary sort of in the same way as the alternative text does for an image. Now, let's look at these headers here. You'll notice that they have a bit of a different style. I didn't need to add that manually. That's done by declaring these cells as header cells. And you can see that here under the cell property. That's very important because it establishes a relationship between this cell and the ones below it. So, that when this table might be interpreted or read by a screen reader, it can properly associate the header with the cell column. So, for example, it might read out before facilitate. And it can continue down this column doing that for everything in this column. And it knows how to do that because we've properly and semantically declared those cells as being header cells. And we've created a similar relationship here in the rows using merge cells. We can easily merge cells by dragging down here and using the right click menu. And under the cell drop down, we also have this merge cells feature. And this creates a similar relationship between this first cell and these other rows over here. The last thing I want to mention about tables is not to use them for a layout. You might be tempted to use it to create, say, two columns to contain two images. But there's other web technologies that help you with that. Tables should be reserved just for tabular content, not for trying to recreate layouts that might be done in another way. And the last thing I'd like to mention is regarding PDF files. PDFs contain content just like your web pages do. And so, they should be made accessible as well. But oftentimes, they're forgotten about. That's a pretty big topic, so we're not going to get into it today. But I do have a couple of links here. And we'll include these on the description below so you can learn more about how to create accessible PDF files. And so, that's it for today. As I mentioned, we'll include a bunch of links in the description for more learning. We also have a lot of accessibility content on our website at evolvingweb.ca. And finally, we have some training classes, including upcoming accessibility training that you can find on the website, too. So, thank you so much.