WCAG Principles In Plain English

A welcome sign on the door of a restaurant
How to be a good host and make all of your visitors feel welcome.

Managing a website is a lot like running a restaurant. You provide a service that visitors may be desperately in need of, or just curious to try. They may be willing to put up with some inconvenience. Or, they may be quick to walk out if the dining room is too noisy, the lighting too dim, and they are made to wait forever, unsure if they should seat themselves. They’ve had a poor experience and they haven’t even tasted the food yet! The restaurant owner’s greatest fear is a bad review, but what they really should be worried about are all the people who just leave and never return. The same can be true for your website.

To prevent this, we need to be aware and anticipate our users’ needs, or risk losing them forever. As Danny Meyer, restauranteur of some of New York City’s favorite spots, puts it in his memoir Setting the Table:

“Hospitality exists when you believe the other person is on your side. The converse is just as true. Hospitality is present when something happens for you. It is absent when something happens to you. Those two simple prepositions—for and to—express it all.”

Another way your website is like a restaurant is that, according to the Americans with Disabilities Act, it “must provide people with disabilities an equal opportunity to access the goods or services that they offer.” In fact, in April 2024 the Department of Justice published a new ruling specifically stating that web content and mobile applications provided by state and local governments, which includes public schools, community colleges, and public universities, must be accessible to people with disabilities.

Fortunately we have the Web Content Accessibility Guidelines, or WCAG, to serve as our etiquette coach, as well as our technical guide to identify and fix issues. Unfortunately it is difficult to understand, which is ironic, because making your content understandable is one of its main principles. Let’s take a look at these principles. There are only four, and I guarantee you – once you hear them in plain language you will see how vital they are. They will help you fix and avoid issues, giving all of your website visitors a better and more welcoming experience.

Principle 1: Perceivable information and user interface

Remember that loud, dimly lit restaurant in the example above? Why does this happen so often? I suspect it’s because most dining rooms are designed before they are filled with people, and these things become infinitely more challenging to fix once the doors are open and service is underway. This also happens with websites. Designers make color choices. Marketing teams insist on an ambient video. Developers forget to add form labels. When all the pieces finally come together they may conflict with one another creating obstacles or roadblocks to our content.

The goal here is to know the message you are trying to convey and make sure it is getting to all of your users. The guidelines in this section remind us to include text alternatives when we use images or video to convey our message and make text distinguishable from the background. Like our restaurant menu, we must be sure it is readable and also provide alternatives, like a waiter who will read the items aloud if needed.

There are many automated Accessibility checkers, such as WAVE the Web Accessibility Evaluation tool,  that can scan a webpage and identify issues. This is one area where they can be useful. Be aware, however, that they can tell you if an image is missing alternative text, but they can’t tell you if the alternative text you’ve provided makes sense or is truly helpful.

For a good overview and how-to on text alternatives, read our article For SEO and Accessibility, There’s No Alt-ernative.

Principle 2: Operable user interface and navigation

Imagine the front door of our restaurant with a stylish handle that nearly every visitor tries to pull before they realize they have to push. Many people will blame themselves for making this mistake, but when you see it happen over and over it is clear that something is wrong with the design. A sign that reads “push” will help some but not all. This is, of course, a self made problem. We may believe that the design of our door is necessary and “says” a lot about who we are, and it does, but maybe not what we had hoped.

The Web is accessible at its foundation. Just like a building code that defines how to make an accessible door, there are web standards to define how HTML elements must be interpreted by browsers and assistive technologies. For example, alternative text parameters in image elements ensure that descriptions are announced or displayed when files do not load. The “for” parameter in label elements describe relationships in forms so the browser can make interactions possible and users with screen readers can make sense of the various parts. Heading elements act as landmarks that describe how content is organized and allow users to find what they are looking for.

The Web is also a place for innovation and freedom of expression which can result in making content even more accessible and inclusive, but other times we may inadvertently create roadblocks for groups of users. A web developer can easily turn an image into a button, and a button into a link which may visually make sense on the screen, but when announced by a screen reader the meaning will be lost and the user may not be able to complete a task.

Don’t make a confusing door, and even more importantly, don’t make a door that some users can’t even get through. Accessibility checkers can identify many of the issues here, but they can’t tell us what is confusing or why. To do this you have to understand the goals of your users, then make sure no obstacles stand in the way of achieving them.

Principle 3: Understandable information and user interface

If we’ve followed the first two principles then our users are aware of our message, but that won’t matter if they can’t understand what we are saying. If our restaurant menu is written with words only a gourmet chef would understand, it won’t make mouths water and customers will have a hard time ordering.  If our waiters are always being asked the same questions, that’s a clue to put the answers in the menu. Know your audience. Make sure your content is in language they can understand.

Content is easier to understand when it is structured in a predictable way. The rules are not set in stone, but there are time-tested guidelines for organizing items and helping users find what they are looking for quickly. Our menu should group items based on the order of the meal with beverages and appetizers first, and desserts at the end, rather than listing everything we serve in an alphabetical list or by popularity.

In our website there are HTML elements that act as landmarks for our content. There are heading levels to let our users know how ideas on the page are related to one another and direct them to the information they seek. We don’t see these elements on the rendered page and depending on how the page is put together, things may get out of order and messy. This is another issue that accessibility checkers are great at pointing out.

Another way to make the experience more understandable is to help users avoid mistakes and correct them if they happen. This can be as simple as providing descriptive instructions, like a note in our menu that our famous “seafood tower serves ten” to prevent diners from ordering it for themselves. If someone does make a mistake, provide a way to help them correct it, like a waiter who suggests, “perhaps the shrimp cocktail for one is a better choice?”

Principle 4: Robust content and reliable interpretation

This one is about making sure our content and services can be accessed in a wide variety of ways. For our restaurant, this means being able to take orders effectively under different circumstances. If our only menu is scribbled on a chalkboard by our chef every morning it will be difficult to take orders over the phone or online. If we suddenly lose our parking due to construction, we will lose business. Having a menu that is accessible on our website, over the phone, via delivery services, and at our mobile food truck means our kitchen will stay busy and we can keep providing for our customers.

For our website, it means providing a comparable experience on desktop and mobile devices, and assistive technologies like screen readers, magnifiers, keyboard navigation, or speech input. That may sound like a tall order, but if we have successfully complied with the WCAG guidelines under the three principles above, this will take care of itself. The functionality of web browsers and assistive technologies is based on the W3C Web Standards and WCAG tells us how best to use those standards to make our content accessible to all of these user agents.

Accessibility is good hospitality

“Our job is not to impose our own needs on our guests: it’s to be aware of their needs and to deliver the goods accordingly. In hospitality, one size fits one!”

-Danny Meyer, Setting the Table

Accessibility issues on websites are on the rise. More than 95% of websites have issues. These issues could lead to costly legal action and starting in April of 2026 the federal government will mandate that any website providing services to the public must comply with WCAG. That alone is a reason to act, but really, the most likely outcome is that users that encounter issues will simply go away, never to return. You won’t even know it happened.

Understanding the WCAG principles can help you build and maintain a website that is welcoming and accessible to all users. Understanding the guidelines listed under each principle may not be as straightforward. Automated accessibility checkers can list many potential issues, but others require an expert to identify and resolve. Just as our noisy restaurant may require the help of an acoustic engineer, we should not hesitate to consult an expert to help us identify and fix accessibility issues on our website and create a plan to make hospitality a priority in everything we do.

Let's start a conversation

Accessibility isn’t just about meeting regulations—it’s about creating better digital experiences for all humans. At NewCity, accessibility is built into our human-centered approach and is at the heart of everything we create. Our developers, designers, content strategists and UXers work in accessibility every day, and we’re here to help you navigate this new landscape, with strategies and tools to make your digital content work for all.

Ready to take the next step? 

Reach out to us today! 

Picture of Troy DeRego
Troy DeRego

Troy is a front-end web developer and Drupal site builder with a focus on user-centered design.

NewCity logo