Accessibility audit

Thinking about accessibility, not just once or at a single point, thinking about it throughout the design and development process, not only saves us time, but it leads to better design, better for humans and better for search engines. In this lesson, we'll cover some of the accessibility considerations that can dramatically impact your site's effectiveness. It won't be perfect, we're still going to miss things, but just as we've been thinking about some of these contrast ratios legibility, there are active steps we can take to make our portfolio better. And you'll see this pattern throughout the rest of the course. The idea that we can iterate on and improve our portfolios in ways that make material differences in accessibility, search engine performance, and admittedly, the next lesson is a design review with Sara. So we're going to do the best we can, so she does not... And she's texting.

[Sara] Oh no, I'm not texting you.

[McGuire] Not buying that for a second.

[Sara] I'm working on it.

[McGuire] We'll make all of this happen in five parts. We'll cover alt text for screen readers and search engines. We'll do color contrast for text elements. We'll identify any empty links. We'll check on our headings for hierarchical-whatever-it's-called-when-you're-setting-proper-hierarchy. We'll do form input labels, and finally —

[Sara] That was already five.

[McGuire] Let's start with alt text. This is what search engines capture and it's also what you can access if you're using a screen reader like VoiceOver on macOS. There's a couple ways to go about doing this. First up, let's open up the Audit panel and this will show us some of the alt text that's missing on certain assets in our project. But it doesn't just show it to us. We can actually click through. We can dismiss the notification if we want. We could ignore this asset for now, but we can also go right to it. Take me to the fix. So we can press that, and it takes us to Stockholm. And like we said, there are a couple of ways to do this. We can add alt text on the asset itself. So if the asset's used in multiple places in the project, if we've used this image as an inline image throughout the project, we can affect it once. So we can determine here if it's descriptive — if a description would add value to a human or a search engine to better understand this. We can type, "screenshot of Stockholm-"

[Sara] It's Stockholm.

[McGuire] ... "website," and we can close that out. We can do this by asset. So we can go to the second one as well and we can do a description here too. But here's the thing to consider. Are these adding value to the content on the site? In other words, this hero section, is it decorative or is it descriptive? Will descriptions of each of these six sites add value to search engines or value to humans? And that's a fair question. We could switch this to decorative. In fact, that we can switch all of these if we don't believe we're adding value by adding descriptions to each of these images. There are plenty of examples throughout our project. So we'll leave this as is for now and leave it to you to determine what works best on your portfolio. Before we move on from this section, let's show the second way to add alt text, and this is on a per element basis.

So if we go in here and open up hero image, right now we're using... We're grabbing the alt text from the asset. Again, that's what we just said in the Asset panel. If we want to override that, we can do a custom description or we can notate that this is decorative. Let's close out of this one and let's go on to something else like this. We can go into this hero image, we can mark it. Just on the asset itself, we can say, "This is a decorative image." Let's close out and continue because a Collection list provides an incredible opportunity for alt text. Here's how. We can go into our Collection, into our projects, and we realize for each of these, we have a project image. If someone tries to access this image on a screen reader, it'll sound like this.

[macOS VoiceOver] 5430960300DV65E40566621_sunset.JPEG

Not great, but we can make it better. Let's go back out of this item and we'll go into our settings for our Collection, our projects settings, and we can add a new custom field. We can add a field, that's just going to be a plain text field, which we can call, alt text for project image. Let's save that field. just so it's organized, let's move it right underneath the project image and we can save our Collection. Now, if we go into Architectural website, we can add the alt text for this image, "sun setting with mountain in foreground." Let's press save. Let's move on to our next one. We can go into Social network and do the same thing, and this will be really quick. "Dark cloud hovering over sea." Press save. You can do this on each of your Collection items. The idea though, is this: We can close out of our CMS and on these images, we can select the selected project's image, go into the cog and we can get our alt text. We can assign alt text from that field, from the alt text for project image field.

Now that means our sunset description, we just wrote — that alt text we just wrote — will tie to this image. Same thing for our cloud here. This is a great exercise to go through. As we scroll through, we can see we can do this for the rest of our Collection list. We can go back in and add those. But what we're looking for is any image in our project that doesn't have a description, that doesn't currently have alt text. So we'll continue scrolling through here. We're going to come back to this in just a moment for some of the other parts of this lesson. But if we look at our footer here, there are three more image elements. Image of Twitter, this is the Twitter logo, this is the Instagram logo, and, of course, the LinkedIn logo. If these aren't used in different ways throughout our project, it's probably a good idea to go to our assets and add some alt text there. Descriptive "Instagram logo." For the next one, we'll do "LinkedIn logo." Of course for the last one, we'll go and add "Twitter logo."

But that's the bottom of our homepage. Let's move on to our other pages. Let's go into our contact page. We're just going in order from top to bottom. So in the contact page, in this case, we really don't have any additional images. Since this is a Symbol, and since these use the same assets we've now set alt text to in our Assets panel, we're good on this page. So let's move on to our password-protected page. Secret. Okay. Let's go on to password. Here's an example of a lock. Now this could be a great example of decorative versus something that actually has meaningful content. So if we want descriptive text here, we can add it. So if we want to go into the lock itself and say... Let's use a custom description "lock icon." Or if we don't think it adds value, we could go to decorative. Let's leave it as lock icon right now and move on.

Something to note about this grid, the interaction behind this is, this is decorative. These are Divs. They're Div blocks and they have a color, but overall, these are decorative. So we're going to leave those as is for now. Let's continue from password to 404. Now another decorative element, this is a circle image, so let's make sure it's decorative. We'll click the cog and we'll mark it as decorative. Now you might remember we use this asset twice. We use it on the top and we use it underneath to create the glow effect. So we could use the alt text from the asset, close this out and just go into the asset and say, "Hey, when anyone's using this asset, we're going to use it in a decorative format." That's something that's decorative and it doesn't convey meaning. So let's close that, and now both of these will inherit that. We can click the circle image. It's using that all text from the asset, so it's being declared as decorative from the asset. Same thing with the circle image. The same thing it's referencing the asset.

Let's continue. That's the 404. Let's move on to our projects template. Now, first thing, we have project main image right here, and we can click the cog and we know that we can access this because we added it before to get the alt text from the projects Collection. So let's grab that alt text for the project image, because this is the project image. So as we switch between each of these, it'll refresh with the project image and in each of those, it's going to grab the alt text associated with it. So let's close out of here and continue down. So what do we do about this project grid because there are multiple images? So if we select any one of them, if we click in here, we can see, we can get this image from project images, but because it's a multi-image field, we don't have that same option.

So what do we do? Well, we can go into our CMS, we can go into projects and we can go into any one of them. Let's start with our Architectural website. If we go down to our multi-image field, our project images, there's three little dots. If we press that, we can edit the alt text. We could do this on each image. Because these are examples, we'll use lorem ipsum, but if you have meaningful images in a multi-image field like this, it's important to add descriptive text to each of them in the alt text field. Let's save that change and we'll close out. Let's scroll down and continue. We have other projects here. Again, it's a project image. So let's go in here. We can get the alt text from alt text for project image. Again, this is a Collection list, so a change on any one Collection item will affect the others. So you can see this one's already getting the alt text, and so is this one. Right there, getting the alt text from the alt text for project's image. Let's continue down. Everything's looking pretty good here. But that's alt text.

Let's move on to our next category which is color contrast on text. Let's go back to our homepage. We'll just go in top-down order for all of these and take a look at some of the contrast opportunities we have. So we're looking for contrast between the foreground and the background. The foreground being the text, whether it's a heading a paragraph, text on a button and the background, which is usually the background color behind the text. So we can see the heading color is dark, it's actually black, and we can see the Body (all pages) color, we can see is FDFDFD. So that contrast ratio is going to be really high. How high? Well, if we click black, we can see it's AAA rated, which is the highest rated contrast ratio at a ratio of 20.65 to 1. High contrast, very legible. Let's check the text block here, because this is a little bit lower. This is 0.7. If we click that, we can see it's still AAA rated, with a contrast ratio of 8.44 to 1, which is great.

Let's continue down and we're just going to select each of these. As we do this, we can get better. We know that the black contrast ratio is 20.65 to 1. We can click that 20.65 because we know the background color, and then we know that this color is black on top of that. So let's look at these elements because there are a few ways to do this. We've been showing the foreground against the background. That's what we're looking for. We're looking at the contrast between the foreground and background. But on this project type preview, we see a lower opacity, 0.63, and we can see that's currently failing our contrast check. Contrast ratio of three to one, not very legible. We have two options here. We can increase the opacity until we get to at least AA. So let's bring this up. Probably... There we go. It looks like 86%.

Now we're achieving AA, but there's another way to do this. If we look this red, this rust color, we've set this in our CMS. If we'd like, we could go back to our Architectural website. Let's copy this to our clipboard so we can always change it back, and let's change this to a darker color. Again, there are two ways to change contrast like this. We can increase the brightness of the foreground or we can decrease the brightness of the background. So when we do that, let's save, let's close, now the contrast ratio is going to be very high for this. We're getting 8.31, and we can even go lower. We're still getting AA all the way back down at about 58% opacity. Now that color is not Sara-approved.

[Sara] I do not approve.

[McGuire] Noted. Thank you. Let's change it back. We can go to our CMS and because we copied this to our clipboard, we can quickly replace that project color, save, close, and choose an opacity that passes at least AA. Let's bring that to say 90%. same thing down here. In fact, if we're going to use that lower opacity white color and we get that just right, maybe we want 87%, we can save that, even with the opacity as a swatch. We can call this translucent white. Press create, and now we can reuse it. So here we know the contrast is going to be low, so we can click that to see what it, 2.84. Let's use that translucent white, and that brought it up to 4.59. Now these are going to be higher. We can always check them just to make sure, but we can go in here and say, "Translucent white." That's great. 5.59. Same thing here, we know it's the same because we're using that same swatch against it.

So here, higher contrast here, higher contrast. Let's continue. Let's double click into here and see what this darker paragraph is showing us. That's 0.68. That should be high enough. We're getting AAA, 7.81. What about the submit button? Now, a lot of times with cascading or in this case text inheritance, the color that's absorbed isn't always the color that ends up previewing in the canvas. So let's make sure we set this to white so we can use our contrast ratio checker correctly. It's 5.76, that's looking pretty good against our main brand color. So to demonstrate this, we can always go in. Let's say we change this to dark, dark, dark, gray, blue. We know that contrast is going to be higher. We can go back and see it's now 17.92. But for now, switch it back to the brand color, and we'll hit escape to go back.

What about the text down here? What we know, we just learned about that contrast ratio and the submit button. It should be the same here. So let's select paragraph two. Let's do a little housekeeping, call this, footer paragraph and let's check it's contrast. Again, 5.76. This one, if it's the same color, we know it's going to be the same thing. Let's go here. In this case, this is a good example of checking the contrast ratio without necessarily applying a color on the actual class. Because this color, the value comes from all links. That's where we're getting the white color. So that's our homepage. Let's move on to our contact page, we've already checked most of this. Again, this is what we're going to get in the habit of doing because this is a Symbol that's used on a lot of different pages.

Larger heading, let's check it's contrast. Of course, that's our main brand color on FDFDFD, which is 5.66. Looking pretty good. Scroll down here, that's the footer. Let's move on. Let's check our password-protected. That's great. Let's move on to the password page. Now this page is a little different. Just glancing at it, the contrast may already be high enough, but keep in mind that the contrast checker is not always looking at all aspects of an interaction, and it's not looking to validate the custom code. So we have the frosted glass effect here, and of course we have this interaction. So the things behind the text are constantly changing. In this case, the contrast does seem to be high enough and keep in mind if we're in Firefox, we know the frosted glass won't render.

So if we go into our HTML embed, press return, and let's just go up right before our class name here and put forward slash, asterisk and that'll temporarily disable our code. Let's go in. This is what people will see on Firefox. So it might make sense, especially if we're indexing for higher contrast to increase this to something like 70 on the hover. Then we can go back into the HTML embed, get rid of the comment opening here, and save and close. Preview. We're still getting that translucent effect, is it as exciting? There's probably a middle ground. So let's check frosted glass and bring it down to, let's do, 55. That looks pretty good. Higher contrast, let's move forward. 404 page. Let's go here, turn off preview mode. Same deal as before. In fact, frosted glass is just taking those same properties... Again, if we change it on one page, we know it changes on another because we're using the frosted glass class.

It's important to consider how these interactions are going to actually interact with the foreground text. The contrast ratio on page not found and everything here is pretty high especially when this isn't there, but it might not be so legible when someone's hovering over this. So it's something to keep in mind. If you don't have an intuitive way to quickly move something out of the way so people can read that text, it might not always be a great interaction. We were talking about that balance in the interactions lesson. It's the same thing to consider here. Let's go out of preview mode and we'll go forward to our project's template. We know this is higher contrast. Let's go down to this one and check its contrast. 45, on the opacity we're getting AA. Let's increase that to AAA. Let's do 55% opacity and we'll continue. Looking here at project info, same deal AA. We could actually increase this to AAA again. Let's do 66 and we might reuse this.

So let's go ahead and add translucent black, and same thing here. Our project description, we want to check this text. So let's go in. Let's uncheck this to unlink it. We'll select any paragraph. So now we're editing all paragraphs when they're nested inside of this project description. So let's check that. Again, contrast AA. Let's use our new swatch. So now we're getting AAA and when we're ready, let's link it back. We'll go here, we'll get the text from project details. Continuing forward. Other projects. High contrast, we've checked these on the homepage. Those look pretty good. Let's continue. We know our contact form and our footer are looking good. So let's move on to links. What we're doing here is we're validating that if we present a link, it actually takes you somewhere. So let's make sure that the links are both descriptive and active.

So we'll go in here in our Navbar, we'll just double click to edit the Navbar Symbol, and when we go in here, we have this brand link block. Again, this is an image. Let's do housekeeping. Let's call it logo and let's click our brand, link block and make sure it actually takes us where we want it to take us. We want it to take us to a page. We want it to take us to the homepage. So let's make sure it's taking us to the homepage. Same deal with say hi. We want say hi taking us to a page in our project. We want it taking us to the contact page. What about projects? Well, there are a few ways to do this. We could have a dropdown, but it might be simpler to take people to our actual projects on our homepage, and we can do this by typing something specific into our URL. We'll type a back tick and simply a forward slash and where we want it to take us on this page.

The forward slash is going to take us home to our homepage. Where do we want it to take us on this page? So we can use an anchor link for this. We're going to do this backwards and that's okay. We're going to press shift three or the pound sign or hashtag and we'll type, "Projects." Whatever you put there needs to match the following. We're on our homepage. We're going to go down to our selected projects, we'll click this section and we'll also call it projects. Here's what that does. When we publish our project, if we're on the homepage and we press projects, it'll take us down to selected projects. But here's what else it'll do. If we go to any other page on our project, let's go to meditation app website, we can press projects, takes us back home and takes us to selected projects. So, that's our Navbar.

Again, we now have this homepage, this brand link block taking us to the homepage. We have projects taking us down to projects, and we have say hi, which takes us to the contact page. Let's hit escape to stop editing that and we'll continue. All the way down the homepage, we have the submit button. Of course, this submits the form. That works okay. No other links in here. We're looking good, but we do have some links to add in the footer. So right now, these are text blocks inside of link blocks. So let's make sure we're using that correctly. In these cases, because this is a Collection list, and in the Collection list are four Collection items, for the website, the Social network, for each of these, we can select the link block and make sure it takes us to the current project. Again, current project will take it to whatever project is associated with this text. So if we go to preview mode and we press Social network, it takes us to Social network. If we go back down Meditation app... You get the idea.

So let's escape from here and go back to our homepage. So we can scroll down and take one more look at our footer because we have three buttons down here, three links down here that are social links that take us to external sites. Since Megan is entirely fictional, we're not going to put fake social media sites here, but just to demonstrate how this is done, we can always have an external URL and the URL can be whatever we want associated with, in this case, Twitter. So if we want Webflow's Twitter, we can just paste Webflow's Twitter. If we preview, we press the Twitter button, it takes you to Twitter. Now, out of preview mode, one thing to note here is we can open in this case when we were demonstrating in preview mode, it's always going to open in a new tab, but the behavior on the published site is going to allow us to open either a new tab or if we want to replace the tab.

So if they're on Megan's portfolio and they press social link, do we want it to take over the tab or opening a new tab? In this case, we're going to go with new tab. We can do the same thing for Instagram, for LinkedIn, any social buttons we have at the bottom. So those are our active links on the homepage. Let's move on to our contact page. Should be the same. Let's go onto password-protected. Okay, we're good. Password, same deal here. Let's go down to 404, same deal here. Let's check that. Back to homepage. Does it take us home? Yes, it does. We don't want to open that a new tab. We want it to take people from the 404 page straight to the homepage. Let's go down to projects template. Scroll down. We do have something to catch here, which is right now, it's getting the URL from the project link. So if we go over to our CMS, we can see where that's going to take us. We'll go to Investment app and see that it's going to take us to google.com. There it is.

Let's close out and try this out. Let's go to preview mode and press view project, and there's Google. Back to Webflow and out of preview mode. Let's continue down. Other projects. We tested this earlier, but let's test again. Social network takes us to Social network. Let's go down to Investment app and that looks pretty good. That's the rest of our links. Let's move on to our fourth category, which is not going to include any manual changes on our site right now, but this is of course, headings. So something interesting with the hierarchy of headings, we can always realize that our big statement on the page is an H1. So this is, "I elevate user experiences using telekinesis." That's fine. We know this is text block. It's mainly decorative texts. It's not adding any tremendous value to this. This is our big heading. For each section, we have an H2. That's correct. For everything nested inside each of those sections, we have an H3. Again, this is an H3. In terms of visual hierarchy, we've set this kind of sizing principles.

So the largest, most important heading is the largest, most important heading the second most important and so on. So let's check our contact form. That should also be an H2. It is. That's good. Let's do the same thing on our contact page. We know that's an H1, we know that's an H2. Looking pretty good. Okay. Password page, should be an H1. It is an H1. Let's go to our 404. Now this is text. It should be. 404 isn't adding value, but page not found is. That's our H1, our big heading. That's a really important point. The big heading or the most important heading doesn't always have to be the most important, big thing on the page, but it needs to be the thing that provides the most descriptive relevant value to users, to search engines that are looking for what's this page about? The 404 is not so much about the number 4,0,4. 404 is about the page not being found. So this is relevant.

Let's move on to projects template. H1, pretty good. Text, this is decorative text. Is looking pretty good. This should be an H2. Keep in mind, this is referencing rich text. So for that, we want to go into our CMS and we want to make sure for each of these, we have this marked. Let's highlight this right here and make sure it's an H2, which it is. We can check that on any of these to make sure each of them is an H2, which they are. Let's escape back to this page. Back down here, there should also be an H2. It is, and that's looking pretty good. We know at the bottom here, we have this contact form. We already know that's an H2. We don't have to scroll far for our last one because we want to name our input labels on our forms. So let's go in, double click to edit our form block. We want to select each of these, the actual input fields, the text fields themselves. Click the cog, and make sure these have descriptive clear names.

This is where we can add descriptive value. In this case, it will be name not "name 2." Email address, let's double click this time email to, let's say, "Email address to be clear here." This one's required, this one's not. We could always make this one required. Double click this text area, custom message or message to Megan. We can make this not required. Since that's our only form, that's it for now. We're off to a great start. We covered a lot of the alt text on our portfolio, we did color contrast, we identified empty links, we checked our headings and changed literally nothing, and we configured our form input labels. These are standard considerations. The more we all start thinking about... Grímur will talk about this in a moment. But the more we integrate this kind of design thinking into our entire process, the more our work will be accessible to both search engines and human beings, and that is a wonderful... Actually, excellent point.

[Sara] Thank you very much.

We're going to include additional resources that you can find on Webflow University regarding accessible design and development. So check that out, if you haven't already. In the meantime, Grímur...

[Grímur] Accessibility isn't always an explicit goal. It's a way of design thinking that we all need to do a better job of doing. So for the day's challenge, share a webpage or a site you made more accessible, even if it's not perfect yet. Part of us getting more accessible together means being okay with works in progress. We're here to help each other out. Except for McGuire and Sara, who are, yes, leaving the studio once again, without me.

[door closes]