Lately, we’ve been working on updating a variety of sites and focusing on accessible content, design, and media. When going through some of our tasks, we uncovered a tricky accessibility compliance item: logos. Now they’re not tricky in the sense that we don’t know what to do with them, but they’re tricky because there is more than one method to solving their accessibility. In this article, we’re going to break down the process of determining the best course of action for a variety of scenarios that would be compliant at the WCAG AA level.
The Basics First: Image Accessibility
When it comes to working with images, the first thing to note is that they are categorized into different groups. Images will fall into one of the following categories:
- Informative images
- Decorative images
- Functional images
- Images of text
- Complex images
- Groups of images
- Image maps
For the sake of this article, we will move forward under the assumption that logos are functional images. If you’d like to learn more about the different types of images, refer to the W3C guidelines here.
Accessibility of Functional Images
Functional images, as defined by the W3C, are used to initiate actions rather than to convey information. They are used in buttons, links, and other interactive elements. In order for functional images to be compliant, a few things must be taken into consideration. Let’s take a look at it from the perspective of our website’s logo.
The first, determine if the logo is a stand-alone element, meaning there is no other content to describe it on the page, or if the logo has other context around it. If there is no context provided, you’ll want to make sure the alt text describes the content displayed in the logo.
For example, take a look at the following logo:
The alt text should read “Hook 42” because that is what is displayed in the logo.
Note: Do not use “logo of” or “image of” in your alt text. This is providing more contextual information than you need. If you read the page aloud to yourself, you wouldn’t read "logo of Hook 42" or "image of Hook 42 logo," you’d simply say “Hook 42”.
Now take a look at this image, that has a little more context:
Hook 42
The alt text should be null, or alt=””, because the words in actual web content, Hook 42, are displayed on the page right next to the logo. If a screen reader would read aloud the alt text being “Hook 42” like we used before when the image was stand-alone, the screen reader would read something like this “Image. Hook 42. Hook 42.” It creates repetitive content that, if done incorrectly throughout your whole website, will start to become a hindrance to a keyboard user. Understanding how a screen reader digests content is essential to writing alt text. As a best practice, you should download a screen reader, like JAWS or NVDA, and have it read to you in cases you are unsure of.
The second thing to take a look at is to determine if the logo is clickable, for example to your homepage, or if it is solely a graphic representation of your company. If your logo is clickable you’ll want to make sure that your alt text is providing that context as well. So, in the first example above, where we had just the Hook 42 logo, if it clicks to the homepage, adding text like “home” at the end will solve that issue. The full alt text would then read “Hook 42 home”. It is okay to also just have the alt text be the destination in the case of our logo. Not always will that be the case for other things, but since this is more likely being read like a menu item, it is clear that this would be the homepage for the website we are on. This means that, as we have live on our website right now, the alt text being “Home” would be passable as well.
Context is one of the most important factors in determining a piece of content’s accessibility.
The same logic applies to the second example. You’ll want to take into account why it has the null attribute in the first place, so we aren’t going to retract on that. We could just leave it as null without causing ourselves any harm, but that doesn’t give a non-sighted user the full context of the situation. Especially if the supporting text next to it is not a link, and only the logo is the link. (Woah, that’s a lot to take in).
If our image is clickable, and the content that describes it on the page is not, you’ll still want to add supportive text to the image alt text like the word “homepage”. You would still omit the “Hook 42” portion of the alt text, but now the screen reader would read something like “Image. Homepage. Hook 42.”
Since we’re only focusing on logos I’m going to stop my review of functional images here. However, there is a much more in-depth analysis of functional images, the variety of ways in which they can be used, and how to ensure their accessibility, on the W3C website.
Logos In Your Header
When analyzing the accessibility of things on a website from a design or front-end perspective, we’re typically looking at things like font size, color contrast, and movement. So how do we take that into consideration for the main logo of your website?
The short answer is, you don’t. The long answer is, think about why you wouldn’t want to be compliant in those ways also. I’ll dive into that in a moment.
For the short answer, as long as you are providing the appropriate alt text as described in the methodologies above, you don’t need to worry about the accessibility of things like color contrast, size of the words in your logo, or even what happens on hover. It is treated as an image, not as web content, so the standard accessible best-practices for the size of fonts and contrast between colors of items, and scalability on zoom don’t apply here.
I’m going to pause here, and ask you though, why would you want to ignore those things? Accessibility is all about providing an optimal experience for everyone. So, even though you are passing your accessibility checklist by having the appropriate alt text, why not make it easier for users with color-blindness or low-vision by taking into consideration things like size and contrast. Hopefully, you’re already doing that throughout the rest of your site, so why not take a few extra moments to do that with your logo?
Now, there is one other requirement that we aren’t talking about that we can’t forget. Focus state. We don’t need a hover state for this, even though it is a clickable image, but we do need to make sure that keyboard navigators are able to see they are on a clickable item. Make sure that not just your logo, but all clickable images on your site, have a noticeable focus state to signal its functionality to users tabbing through your pages.
What About Other Logos?
So we’ve talked about the logo in the header, but what about logos that we put elsewhere on the site? Do you still categorize them as functional images or text as images? This is where situational and contextual analysis is required.
Client Logos
Many websites will have a wall of logos that highlight things such as clients we serve. Sometimes these logos will link out to the client website, and other times they are just for show to bring recognition to the level of clientele one is working with.
Again, my best advice for you in this situation is to read it aloud to yourself. Remember not to provide more information than you need, and keep it simple. Depending on the context around the logo, it might make sense to say “Hook 42 client Zicasso” rather than just “Zicasso”. If it is a link, you’ll want to make sure you are providing the destination in some context as well. Maybe you can do that with something like “Visit the website of Hook 42’s client Zicasso.” This makes it clear you are leaving the Hook 42 website to go somewhere else and the name of the beholder of the logo is also available.
Award Logos
Now we’re at the bottom of your website, and your footer has a few more logos. Maybe its a logo of an award you received, or a logo stating you’re certified in some area specific to your industry. More often than not, you’re going to go through the same steps outlined above for functional images. Be sure to put any words that are in the image into the alt text. Like “Awarded 2018 Small Business of the Year” not “Small Business of the Year”. A sighted user would gain more from seeing the image than the non-sighted user in that scenario. Any text needs to be pulled out of the image and placed into the alt text.
Not to sound like a broken record, but remember if the logo is linking somewhere make sure that is clear to your users as well. For sighted users this may be some sort of cursor change or hover effect, for keyboard users this will be the focus state, and for screen reader users this would be provided in the alt text.
Summary
Logos, like any other images, are complicated and can have a variety of “correct” answers for being accessible. The biggest takeaways are:
- Use appropriate alt text,
- use appropriate focus state,
- don’t worry about size,
- don’t worry about color contrast,
- don’t worry about scalability, and
- don’t worry about hover states.
While it is best practice to make sure you are being as inclusive as possible in all areas of your website’s content, the way to your logo passing an a11y audit is to provide accurate context in your alt text and when your items are clickable making sure they have an appropriate focus state.
Just remember, there are a lot of ways to interact with digital content, and we need to be open to making it available to everyone. The guidelines for accessibility are continuously being checked and iterated upon, so consistent maintenance of your accessibility is important. We want to do our best to generate content that makes everyone comfortable viewing our websites and accommodating for things that go above and beyond compliance guidelines never hurt anyone!