Web content accessibility principle: perceivable
Disclaimer: Real Estate Webmasters is sharing these opinions based on our interpretation of WCAG 2.0 compliance guidelines. This does not constitute legal advice in any manner.
This week we're going to be talking about each of the Web Content Accessibility Guideline (WCAG) principles in further detail, to help you create websites that are friendly for everyone.
We started talking about WCAG 2.0 last month in our ADA Compliance for Real Estate Webmasters clients post. If you haven't had a chance to check it out, it's a good time to go back and take a peek. We talk about the American Disability Act's role in website compliance, go through a quick overview of each principle with some examples, and ultimately conclude why an accessible website is in absolutely everyone's best interest.
Today, we're going to take on the Perceivable principle. Let's dive in.
What does Perceivable mean?
Starting with W3.org's definition, "Information and user interface components must be presentable to users in ways they can perceive," gives us a good starting point for understanding what the perceivable principle attempts to achieve. It basically wants to ensure everyone can see and consume the content on the web, using the three senses that apply online: sight, sound, and touch.
Blindness is the disability that comes to most people's minds when they think of a perceivable web, and the majority of people are familiar with the concept of how a screen reader can digest the information on a page and read it out (if the right data is there to support it.)
But visual impairments aren't the only disability that can prevent someone from being able to properly perceive a page. Here are a few other examples of web experiences that can be challenging or downright impossible for certain people:
- A color blind person can't see a graphic that uses red on green
- A deaf person tries to watch a video tutorial with no text alternative
- A person needs more time to click a button on a slideshow slide that keeps moving
Those are just a few examples but there are lots of reasons why people may have trouble perceiving the content on a page that isn't built with their needs in mind.
How do we build a website that's Perceivable?
It can be tough to understand what it's like to be someone else and even the most empathetic people will find it challenging to predict all the obstacles someone might encounter on their site. This is where the WCAG 2.0 comes in. Over the years, experts from all over the world have come together to create a clear and concise set of guidelines to help web developers create website experiences that work for everyone.
W3.org has put together comprehensive explanations for each and every guideline. Here's an example straight from their page:
Guideline 1.1 Text Alternatives
Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.
Success Criterion 1.1.1 Non-text Content
(Level A) All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below.
- Controls, Input: If non-text content is a control or accepts user input, then it has a name that describes its purpose. (Refer to Success Criterion 4.1.2 for additional requirements for controls and content that accepts user input.)
- Time-Based Media: If non-text content is time-based media, then text alternatives at least provide descriptive identification of the non-text content. (Refer to Guideline 1.2 for additional requirements for media.)
- Continued... View the full set of Perceivable guidelines here.
In addition to definitions that explain the requirements, most sections also include examples and additional help resources to assist webmasters with understanding the Perceivable guidelines.
What does this mean for REW sites?
Real Estate Webmasters is actively reviewing our current sites and making adjustments on an ongoing basis. While the intention of each guideline is relatively clear, they can't get into the nitty-gritty details of every single Perceivable recommendation, which means some specific details, especially those within the code, are sometimes open to interpretation. In these scenarios, we're balancing the need for stylish designs and reliable function with the most likely interpretation of the Perceivable guidelines.
In addition, there are some clear steps that REW clients can take on their own sites to ensure they are compliant with the Perceivable principle.
Text alternatives on images
It's important that every time you embed content into your site, you make use of the text alternative attribute. The code looks like this:
<img src="/image.jpg" alt="text alternative goes here">
We've talked about alt tags before in an SEO context, but in a WCAG context, their use is a bit different. The alt tag should describe the image so that someone who can't see it will still understand what is being communicated.
This is important for decorative images, like those in blogs, but it's absolutely crucial when you use an image instead of text as a heading or link description.
[IMAGE: Las Vegas Real Estate banner, Las Vegas buyers guide]
However, there is one exception: decorative images. If you've included an image for purely decorative purposes and it is not providing context to the content, you should do the opposite and not include a text alternative. For these images, include the alt tag, but leave it blank. It will look something like this:
Choose design colors with contrast
The design contrast needed to ensure a Perceivable website is something that not a lot of real estate agents consider—especially when choosing their branding colors. But the reality is that your brand colors can have a direct impact on this guideline.
WCAG 2.0 indicates that there should be a contrast ratio of 4:5:1 for normal text to reach Level AA compliance, which is quickly becoming the accessibility bare minimum. The next level of compliance, AAA, suggests a 7:1 contrast.
Free tools like this Contrast Checker can help you confirm whether your custom color scheme is going to meet the contrast minimums. When in doubt, talk to your REW designer, who can help you come up with a skin that will be beautiful, on brand, and compliant.
Emphasizing text with color
Color shouldn't be the only way text is emphasized on a page. For example, if you want to use red text to emphasize information that is incredibly important, you should also bold that text to better portray its emphasis. This way, people who have trouble perceiving color have an alternate means of understanding the importance.
Videos & audio alternatives
Videos and audio can create a huge barrier for people who can't absorb these types of media in their traditional formats. There are a few things you can do to help ensure all your videos and audio files are compliant:
- Include captions on all pre-recorded video and audio
- Provide a text alternative / full transcription of explanatory videos and audio
- Ensure recordings have minimal background noise
- Avoid video or audio that automatically plays
- If you do use auto-play, ensure there is a pause or stop button
Limitations aside, these standards create a better experience for everyone and can help improve user engagement. For example, a lot of people simply don't want to interact with video or audio, especially on mobile devices, and will skip the media entirely if there isn't an alternative way to absorb it. By having multiple options, you're increasing the likelihood that your users will engage with the information you've shared.
One example of the Perceivable principle in action is our recent Career Spotlight of Aayaam, where we manually created captions and uploaded them to our video platform, to help more people access the content.
Use consistent search placement on slideshows
We empowered our clients to do what they want with their slideshow, but it's important that users have the time they need to interact with the quick search and other elements. Choose where you want to place that quick search and then keep it in the same spot on every slide. This will help your users interact with the feature even when the imagery changes.
[Screenshot: Moab & Byrd Homepage]
What else is there to know?
Remember that these are guidelines and that this blog post outlines examples of the Perceivable obstacles our clients have encountered in the past. Of course, the REW client base tends to be a creative and innovative bunch, and it's therefore impossible for us to predict all the ways a site will be impacted by a guideline.
Therefore, any client stepping into custom or highly creative territory should familiarize themselves with the WCAG guidelines, and consider how their ideas will impact the user experience. With some careful thought and consideration, it's possible to make a top-notch website that works well for everyone.