WCAG’s POUR Principles: A Primer | Webinar Video

Okay. Well, I am Hope Alwin. I am a digital accessibility specialist here at accessible web and we are going to be

covering WCAG’s four principles. So, we are going to do a short exercise uh before we really get into the um brief overview of the accessibility principles and then go a little bit of a deeper dive into each of the four principles. All right. So, stop and think for a minute about the evolution of the internet. I remember when I was a kid, the internet was still in its infancy and my dad mainly used it for email. Then it morphed into an educational resource for me when I started school. In high school, I took an e-commerce course where I learned how to code using XHTML. Yes, I am a dinosaur. and started using the internet more for online shopping. It also acted as a news outlet as major distributors for pairing print media with digital media. When I went to college, it um was my go-to resource for research, but mainly it was my social media outlet, connecting with friends and family through Facebook. Then streaming media really took over and many an hour was lost to watching YouTube videos. Unfortunately, that still happens. Now we’ve got artificial intelligence helping us with search engines and all sorts of other tasks. The internet is at the core of all of these things. The internet was also paramount during the pandemic as it was our connection to each other. But here’s the million-doll question. How do we take such a vast technology and make it more accessible? The W3C Web Accessibility Initiative first released the 1.0 version of the web content accessibility guidelines back in 1999. WAI went back to the drawing board to create principles that were applicable to everybody but also could be applied to the ever changing landscape of the internet. In 2008, WCAG 2.0 was released and POUR was introduced. POUR is the acronym for receivable, operable, understandable, and robust. Think of POUR as the outline for these success criteria in WCAG. Putting concepts under a giant umbrella that are basic enough for the general public to understand and then being able to drill down to specific success criteria for more tech purposes. POUR was developed to speak to three major components/ agents including web content,

user agents, and authoring tools. It covers the entire process from development to presentation and user interaction. Let’s look at the Mariam Webster definitions for each of the components before we really dive into each principle. Perceivable means to be able to attain awareness through various senses, whether it be sight, sound, touch, smell, or taste. Web accessibility doesn’t apply to smell and taste quite yet, but who knows what the future will hold. Operable is when something is fit, possible or desirable to use. In the simplest term, it works and can be used for its intended purpose. Understandable means to be able to grasp its meaning, comprehend or interpret. And finally, we have robust, which is capable of performing without failure under a wide range of conditions. Okay, let’s look at each main principle and start looking at how they all fit together to create digital accessibility. Perceivable touches on the concepts on how users interact with the internet pertaining to their senses. Users can use sight, hearing, and touch to interact with various components of the web. But what do you do if you only have the ability to choose one or a combination of your senses? Perceivable focuses on making sure content is adaptable to a variety of formats. A key thing to remember is that text is probably the most versatile as it can be read with site, read aloud, or translated into braille. This brings to brings us to the first major point. There must be text alternatives for non-text content. Non-text content can refer to images, graphics, icons, graphs, charts, and more. Now, let’s look at multimedia or time-based media. It’s important to include captions and other alternatives like audio description so people can use a variety of senses to achieve the end goal of the content. Think about if you’ve got a video with music playing and text on the video, but nothing is read aloud. If a person can’t see the text, then they’re essentially just listening to the soundtrack and most of the meaning is lost. Similar from our earlier exercise, consider how people interact with the internet now. They’ve got it on their watches, phones, tablets, computers, and more. It’s everywhere. Therefore, content must be presented in multiple formats so users can pick how they want to interact with the content. Content must be adaptable to ensure flexibility for the user’s experience, leading to more specific requirements with proper coding and organization to ensure that it can be changed. This leads to the last point for a perceivable content needs to be distinguishable or can be interpreted in a di diverse manner no matter what senses are predominantly being used. This applies to more of the aesthetic elements like colors, fonts, text size, spacing and more. It ensures that users can tell what predominant content is present and can adjust their how they they interact with the the content. All right, let’s move on to the next accessibility principle which is operable. Essentially, it has to work. There are some key functions to there are some key functions to have it work so it can be applied to a wide variety of devices and software. An essential component of web accessibility is that all functions can be performed with a keyboard. It may seem strange, but to put it into perspective, keyboard function is like text. The versat versatility is there. Keyboard functions can be translated to some tech assisted technologies. For example, it pairs nicely with screen readers. Just remember, not everyone can use a mouse or touch screens and rely on using other devices like SIP and puff machines for interacting with computers. On the same thread, not everyone reads at the same rate. One night, my friend and I were watching a movie and it had one of those intro screens with historical information to get perspective. It disappeared and my friend was asking me about it as they didn’t have time to finish reading it. The same thing applies for web content. There must be enough time to read and use the content or have the ability to change the timing requirements. To give some context to the next point, I have a short story. When I was taking my e-commerce course and we were experimenting with CSS backgrounds for our web pages, one of my friends decided to use a tiny green flashing radioactive icon repeating as their background. My teacher and I took one look at it and said together, “No, just no. Web content should not cause adverse physical reactions like seizures. Photosensitivity, neurological conditions and other cognitive impairments can be impacted by web content. So ensure it is neutral in its movement, flashing and other components that could cause adverse physical reactions. On another thread, there should be some universal aspects of all content like navigation. Users must be able to figure out how to interact with the content and figure out where they are. Certain elements like headings can create the logical hierarchy that can be followed easily. It also applies to the organization of web content. Don’t let it be a messy bedroom of a teenager. Make sure that there’s normal items are present like a bed, closet, desk, and that there’s a clear path to each one. The last point is returning to how people interact with various devices. Think about how what devices you use on a regular basis. Personally, I’ve got a smartphone that has a touchscreen and I also use my laptop where I use keyboard and mouse and um for my art hobby, I have an iPad where I use an Apple Pencil. Users must be able to apply various input mo modalities or ways they can put input information into web content. The same functionality must be able to translate to various to various technology. I highly recommended checking out some of our earlier webinars discussing assist of technologies to learn more about how people use assist of technologies to help them interact with the internet. All right, let’s progress to the next accessibility principle which is understandable. Understandable focuses on the overall presentation of web content and that it should be predictable and not weighted down with complex terminology. The language used within web content should be easy to read and comprehend without a lot of technical jar jargon and should be in a user’s native language. Plain language is the way to go when it comes to web content. I’m coming from the realm of libraries and there’s plenty of words that I use daily that are completely foreign to other people. For example, we call bookshelves stacks and when I use that term with around my student assistants, usually got a deer in headlights look. Just because you use it every day doesn’t mean it has the same meaning for everyone. Another thing to keep in mind is that setting an appropriate language, setting the appropriate language in the code can save a lot of time for users so they don’t have to manually translate the page or have to change their settings to accommodate. Websites can be complex, especially in some industries like medicine. There are several different department in a single hospital’s website and a user can probably get just as lost in web content as they would in the physical hospital. To keep users from wandering around aimlessly within a website, it is required to have predictable components like navigation in the same location. It provides a framework maximizing the chances of a user being able to predict a path and also be able to backtrack if they take a wrong turn. Follow fails ask for directions which is where instructions and assistance should be provided within web content. If there’s a form to fill out, having visible labels and instructions can reduce the amount of errors. Never assume that there are universals, as who knows, you may get a kid from an Amish community that’s never used a computer a day in their life. The internet may be moving at warp speed, but that doesn’t mean everybody is at the same pace. Also, being able to identify errors before submission prevents web content from being submitted multiple times. And our final accessibility principle is robust. Robust is probably one of the most important principles as it focuses on compatibility. Technology changes in the blink of an eye and it can be difficult to manage. But if you don’t, then someone will get left behind. In library school, we started on one version of our authoring software and then about halfway through my program, it got upgraded to another V version and it wasn’t backwards compatible. My class lost the start of our portfolios and had to rely on screenshots for our older content. Not going to lie, I cried. The internet may be evolving, but it has the same basic functions and it’s imperative to make sure that web content continues to move with the flow. Content must be compatible with different operating system, browsers, device, and assistive technologies or you’re essentially cutting out users. Another consideration is Aria. And there is a saying on the Aria authoring authoring practice guide website. No Aria is better than bad Arya as it can cause more problems than it can solve. Think of Aria as the bridge between various versions of the same web element so that there is compatibility between systems. It also helps assisted technology like screen readers such as NVDA and JAWS to identify custom components through their underlying purpose. For example, I’ve seen accordions coded. Accordions are the expandable and collapsible content within a website. Um, I’ve seen them coded in a variety of different ways, but Aria kind of bridges the difference. So, if you’re reading an accordion with a screen reader, uh, you still get the basic function as well as how to use it. Well, that wraps up for the last of the four accessibility principles of POR. Just for a quick review, remember perceivable is geared towards the senses and to make sure that you’ve got multiple methods of ensuring the content can be utilized by all. Operable surrounds how people interact with web content through various input devices as well as the web content having a logical framework and doesn’t cause physical reactions. Understandable encompasses that the web content is easy to understand and is predictable with instructions and appropriate error markers for interactive portions to ensure it gets done right the first time. Lastly, robust covers the compatibility of everything, making sure it will work with a variety of devices, assisted technology, browsers, and operating systems. Well, we’ve covered the major accessibility principles and now it’s time for application. Accessible web is always here to help. We offer a wide variety of services and software to make your accessible journey easier. RAMP is our main software that can be used to assist with automated scanning and manual auditing. If you want some more step-by-step assistant with manual audits, our team has helped to guide you through that. Our team is here to guide you through the process and provide ongoing support. We also offer some courses through our academy to help with more in-depth and exploration of accessibility guidelines and components. Well, that wraps up my part and now we can move on to the Q&A and discussion.