Day 87: Guidelines, Laws, and Myths

My intention today was to complete the first Deque course within the WAS certification prep program. I did do that, but not without being led to more resources that I need to read through. I’ve done a little research into US laws, but I need to read them again, plus read other laws mentioned in what I reviewed today. Looks like tomorrow’s study session is laid out for me.

Thing I accomplished

Completed guidelines, laws, and myths sections of Deque’s Accessibility Fundamentals.

What I reviewed today

Guidelines

Principles, guidelines, and authoring practices help create an accessible interaction between user and website or application. These guidelines and practices ensure that a variety of disabilities are taken into consideration.

I covered these more in detail on my own, which I’ve journalled on this site, but Deque does a decent job of getting the learner started with the basic principles and guidelines, and points them to official specifications. I’ll admit, I need to go back and spend some serious review time to go over all these.

Laws

Web accessibility laws usually fit into one of the following categories:

  • civil rights: discrimination against disabilities (Americans with Disabilities Act)
  • procurement: purchasing accessible IT products (Section 508 of the Rehabilitation Act)
  • industry-specific: regulations for private industries (21st Century Communications and Video Accessibility Act, Air Carrier Access Act)

United States

Canada

Europe

Other Regions

The Web Accessibility Initiative (WAI) has a comprehensive list of international accessibility policies. Additionally, PowerMapper has a list of government accessibility standards.

Myths and Misconceptions about Accessibility

  1. It benefits only a small minority. Truth: It actually benefits everyone.
  2. It’s a short-term project. Truth: It’s on-going.
  3. It should be the last step. Truth: It needs to start at the beginning of the project and last throughout the project’s life cycle.
  4. It’s hard & expensive. Truth: Remediation is harder and more expensive than considering it throughout the life cycle.
  5. It’s ugly. Truth: Most accessibility features are not visible to everyone.

Best takeaway

“Inaccessible web sites are not just inconvenient for people with disabilities, they are blocking.”

Day 86: The point – it’s for people with disabilities, Part 2

A continuation of Part 1 as I work through the Deque courses and review who I am doing this work for.

Things I accomplished

What I reviewed today

Disabilities that I reviewed today through the Deque course:

  • deaf
  • deafblind
  • motor disabilities
  • speech disabilities
  • cognitive disabilities
  • reading disabilities
  • seizures
  • multiple disabilities

Deaf

How they may interact:

  • utilize captions and transcripts for video

Developer considerations:

  • offer transcript alongside an audio file (WCAG 1.2.1, 1.2.4)
  • offer captions alongside video with audio (WCAG 1.2.2, 1.2.9)
  • when possible, offer sign language with videos with audio (WCAG 1.2.6)

Review Day 55: Users with Auditory Disabilities.

Deafblind

How they may interact:

  • interacts with keyboard (QWERTY or braille)
  • receives information through refreshable braille display and screen reader software

Developer considerations:

  • content needs to be text or coupled with text equivalents (WCAG 1.1)
  • site functionality must work with a keyboard (WCAG 2.1)
  • markup must be structured well, using appropriate semantics (WCAG 1.3, 2.4, & 4.1.1)
  • custom elements must express themselves with a name, role, and value (WCAG 4.1.2)
  • dynamic changes in content comes with an alert for screen readers (WCAG 4.1.3)
  • videos need audio description if the audio is confusing by itself (WCAG 1.2)
  • active controls need to be clickable (WCAG 2.5)
  • offer transcript alongside an audio file (WCAG 1.2.1, 1.2.4)
  • offer captions alongside video with audio (WCAG 1.2.2, 1.2.9)
  • when possible, offer sign language with videos with audio (WCAG 1.2.6)

Motor disabilities

Motor disabilities includes a wide spectrum of varying degrees and characteristics of physical experiences, challenges, and strategies. Specific disabilities include: cerebral palsy, ALS, quadriplegia, or missing limbs. Review Day 54: Users with Motoric Disabilities.

How they may interact:

  • mouth stick on keyboard (vertical or horizontal)
  • adaptive keyboard (one-handed, expanded, raised keys, etc.)
  • switch control devices
  • speech recognition software
  • eye tracking software

Developer considerations:

  • site functionality must work with a keyboard (WCAG 2.1)
  • interactive components (links, buttons, input) need a visible focus and hover state (WCAG 1.4.13)
  • warn users about time outs ahead of time, and offer extension of time (WCAG 2.2)
  • mark interactive controls large clickable targets (WCAG 2.5.5)

Speech disabilities

The causes of speech disabilities range from learning, motor, or auditory disabilities, autism, brain injury, stroke, cancer. They may or may not have full use of their voice and how they use that voice. Some issues can be categorized as stuttering, cluttering, apraxia, dysarthria, speech sound disorders, or non-vocal.

How they may interact:

  • unaided augmentative and alternative communication (AAC): body language expressions, gestures
  • aided augmentative and alternative communication (AAC): pen & paper, boards with symbols, speech-to-text software

Developer considerations:

  • provide other input methods other than voice input (WCAG 2.5.6)

Cognitive disabilities

Cognitive disabilities cannot be easily defined due to its wide spectrum. Some characteristics may include: limited comprehension, low tolerance for cognitive overload, limited problem-solving skills, short-term memory loss, attention deficit, difficulty reading, and difficulty understanding math. Review Day 53: Users with Cognitive Disabilities. It is the most common disability, due to its wide spectrum.

How they may interact:

Developer considerations:

  • create a simple interface (WCAG 1.4.8, 1.4.12)
  • write clear, direct, and easy to understand content, which includes a mixture of images and text (WCAG 3.1, 1.3.3)
  • post shorter videos and audio tracks
  • limit the number of choices offered at one time
  • offer help features (WCAG 3.3.5)
  • design for ease of use
  • test for usability with actual users with this disability
  • strive for consistency of information, navigation, and landmarks across the website (WCAG 3.2.3, 3.2.4)
  • reduce or allow control of distracting elements (motion, animation, autoplay) on a page 2.2.2)
  • warn users about time outs ahead of time, and offer extension of time (WCAG 2.2)
  • avoid use of Captcha

Reading disabilities

This could be caused by a cognitive disability or an another underlying reason. Review Day 52: Users with Reading Difficulties.

How they may interact:

  • customize foreground and background colors
  • customize typography
  • listen to text with a screen reader
  • use a screen reader for highlight text to follow along

Developer considerations:

  • include a mixture of images and text to convey the same information (WCAG 3.1, 1.3.3)
  • use good color contrast, but avoid the highest level, like black on white (WCAG 1.4.3, 1.4.6)
  • provide flexibility of user customization of styles for text and background (WCAG 4.1.1)

Seizures

How they may interact:

  • reduce animation and pause or skip video

Developer considerations:

  • avoid using video, transitions, and animations with frequent intense flashing (WCAG 2.3)

Multiple disabilities

A person deals with two or more disabilities.

How they may interact:

  • see all considerations under blind, low vision, deaf, deafblind, motor disabilities, speech disabilities, cognitive disabilities, reading disabilities, and seizures

Developer considerations:

  • see all considerations under blind, low vision, deaf, deafblind, motor disabilities, speech disabilities, cognitive disabilities, reading disabilities, and seizures

Day 85: The point – it’s for people with disabilities, Part 1

“…if you don’t understand the challenges that people with disabilities face when using ICT products and services, you don’t really know accessibility. Knowing what challenges people face is central to knowing how to reduce or eliminate challenges.” Karl Groves, What does it take to call yourself an accessibility expert?

That about sums it up for me after working through the WAS Body of Knowledge. The only way one can evaluate websites well is to remember who could be using our sites and how their engagement and experience may differ from our own. That’s basic UX (user experience) design, but with a focus on users with disabilities, which still encompasses a wide range of people and engagement strategies.

Things I accomplished

What I reviewed today

I’m trying to bring my focus back to the “who” part of my training. Without keeping them in the front of my mind, I will not be able to properly advocate for accessibility. Deque’s course highlights the following disabilities:

  • blind
  • low vision
  • color-blind
  • deaf
  • deafblind
  • motor disabilities
  • speech disabilities
  • cognitive disabilities
  • reading disabilities
  • seizures
  • multiple disabilities

Today I read through their explanations about various visual impairments. I found it helpful to revisit things I learned about in the past about users with low vision and identifying issues for keyboard users.

Blind

How they may interact:

  • may navigate by headings, landmarks, links via screen reader software;
  • listen for title and structure details of page via screen reader software;
  • use screen reader software, keyboard, refreshable braille display, touchscreen, or voice commands for input or output

Developer considerations:

  • content needs to be text or coupled with text equivalents (WCAG 1.1)
  • site functionality must work with a keyboard (WCAG 2.1)
  • markup must be structured well, using appropriate semantics (WCAG 1.3, 2.4, & 4.1.1)
  • custom elements must express themselves with a name, role, and value (WCAG 4.1.2)
  • dynamic changes in content comes with an alert for screen readers (WCAG 4.1.3)
  • videos need audio description if the audio is confusing by itself (WCAG 1.2)
  • active controls need to be clickable (WCAG 2.5)

Low Vision

Low vision is a spectrum. It varies in degrees and characteristics.

How they may interact:

  • magnify the entire screen (with magnification software), zoom into web pages, or increase text size
  • increase contrast or invert colors with High Contrast Mode or other software
  • use screen reader to hear text
  • navigate by keyboard or mouse

Developer considerations:

  • popups, alerts, and errors should be close to the visual focus
  • color should not be the only way to relay important information (WCAG 1.4.1)
  • contrast of foreground and background should be no less than 4.5:1 (WCAG 1.4.3, 1.4.6, 1.4.11)
  • don’t disable pinch-to-zoom
  • interactive components (links, buttons, input) need a visible focus and hover state (WCAG 1.4.13)
  • controls need to look different (actionable) than text (WCAG 1.4.8)

Color-blind

This is not an either-or characteristic either. Degrees of color identification vary from person to person.

How they may interact:

  • strategies to compensate may involve asking for help to distinguish colors

Developer considerations:

  • color should not be the only way to relay important information (WCAG 1.4.1)

Day 58: Identifying A11y Issues for Keyboard Users

Through studying WCAG (Guideline 2.1) and other web accessibility documentation and articles, I know that keyboard navigability and interoperability is important for a wide variety of users. Some important ideas to focus on when creating websites and keeping keyboard accessibility in mind:

  • Actionable elements (links, buttons, controls, etc.) must receive focusable via keyboard (WCAG SC 2.1.1);
  • All focusable elements need a visible border or highlight as a focus indicator (WCAG SC 2.4.7);
  • Logical (expected) tabbing order is set up appropriately (WCAG SC 2.4.3);
  • No keyboard traps, like poorly developed modals, have been created (WCAG SC 2.1.2).

The best way to test for keyboard accessibility? Test with a keyboard! It’s one of the easiest and cheapest ways to find out if you’re blocking someone from accessing your content. Critical (yet basic) keys to use:

  • Tab
  • Enter
  • Spacebar
  • Arrow keys
  • Esc

If any of those keys fail you when it comes to expected behavior for controls and navigation, it’s time to start digging into the code and figuring out what’s preventing that expected and conventional behavior.

That being said, I’ve started looking at section two of the WAS Body of Knowledge to fill in any gaps I have about identifying accessibility issues, starting with interoperability and compatibility issues. I’ve had a lot of practice checking for keyboard accessibility due to its simplicity, but I leave no stone unturned when it comes to studying for this exam and making sure I’m not missing more gaps in my web accessibility knowledge.

Things I accomplished

What I learned today

Today I didn’t learn much more on top of what I knew already, since I’ve had a lot of practice checking for keyboard accessibility due to its simplicity. However, I leave no stone unturned when it comes to studying for this exam and making sure I’m not missing more gaps in my web accessibility knowledge. Plus, I’m always eager to take the opportunity to advocate for keyboard testing as a reminder to designers and developers that not everyone uses a mouse and even well-written code can produce a different experience than initially expected.

One thing I did learn:

  • “A common problem for drop-downs used for navigation is that as soon as you arrow down, it automatically selects the first item in the list and goes to a new page.” (Keyboard Access and Visual Focus by W3C) I’ll have to watch out for this one I audit other sites, since I have not created a drop down with that type of behavior yet, myself.

An Overview of WCAG’s Fourth Principle: Robust

1 guideline. 3 success criteria (including 2 Level A conformance. 1 Level AA conformance). And a few ever-changing techniques that are sufficient, advisory, or a failure. As I pointed out in my Perceivable principle, Operable principle, and Understandable principle reviews, these stats are just one way the World Wide Web Consortium’s (W3C) “Robust” principle within the current Web Content Accessibility Guidelines (WCAG)  2.1 recommendation can be broken down.

Introduction

On that note, I’ll introduce you to WCAG’s fourth and shortest principle: Robust. This short, and likely understated, principle boils down to creating flexible content and interfaces so that everyone can access your website now, and in the future, in ways and methods you can’t plan for. Technology gets updated, outdated, and revived quickly in the 21st century. We, as developers, can’t plan for everything, but we can make strides to be forward-thinking with our code.

The fourth Web Content Accessibility Guideline‘s says: “Content must be robust enough that it can be interpreted by by a wide variety of user agents, including assistive technologies.” This is a generally defined idea, leading up to more objective goals (success criteria) and techniques.

This principle offers us suggestions and insights to successfully make our websites flexible and more inclusive, inviting more people to interact with it in a way that maybe different than our own. “Robust” models a way for us to be considerate of people who think differently, move differently, and perceive differently than ourselves. No matter the physical and cognitive differences among us, everyone should still be able to use your website with very few hurdles.

Guidelines

To dig a little deeper, how can we ensure that everyone can understand the services and information we have to offer? Step down a level, from subjective to objective, via its guideline and success criteria. The one Robust guideline says that your entire webpage should be:

  • compatible

Success Criteria

Digging deeper, we find this guideline offers its own goals (success criteria) to target common accessibility problems. To sum up the 3 goals that the criteria are aiming for:

  • markup should be parsable (valid and complete)
  • a name, role, and value should be assigned (to custom elements)
  • status messages about changes or alerts should be announced, even without focus on that element

I encourage you to check out all the success criteria, now that you are more confident in understanding the guideline within the fourth principle. Additionally, read How to Meet WCAG, which is add value to your understanding and clear techniques that help you visualize how to meaningfully apply what you’ve learned.

Conclusion

Regardless of how you take your next steps, I hope you’re becoming more confident to dive into WCAG documentation and its supplemental materials and guides to help you better understand web accessibility. I can’t emphasize enough that, despite all the technical specs, taking a moment to empathize with people who have different levels of abilities than your own is so important. Ask yourself, “How could my website prevent a person with a visual, hearing, physical, or cognitive impairment from entering in and walking away with what they came for?” In the end, it’s the empathizing and relating to your wider audience that will make your accessibility efforts a success, rather than all the vast technical memorization and compliance, in which you devoted your time.

An aside

This is Day 10 of my 100 Days of Accessibility journey to learn all things web accessibility. The best way I retain information is to share with others, so I spent my “study” time today writing this post to advance my knowledge, and yours, too.

As an aside resource that I’m currently reading, Form Design Patterns by Adam Silver (Smashing Magazine) is reinforcing my assimilation of the Robust principle. I’ve only read through his first form pattern about registration forms, but it reinforces the importance of semantic markup. Clear markup benefits all users.

An Overview of WCAG’s Third Principle: Understandable

3 guidelines. 17 success criteria (including 5 Level A conformance. 5 Level AA conformance. 7 Level AAA conformance). And several ever-changing techniques that are sufficient, advisory, or a failure. As I pointed out in my Perceivable principle and Operable principle reviews, these stats are just one way the World Wide Web Consortium’s (W3C) “Understandable” principle within the current Web Content Accessibility Guidelines (WCAG)  2.1 recommendation can be broken down.

Introduction

On that note, I’ll introduce you to WCAG’s third principle: Understandable. As stated earlier, it has several components, so to speak, but it all boils down to giving everyone the opportunity to successfully understand the content and interfaces on your website. No matter a person’s education, native tongue, or prior experiences, your website should be relatively easy to understand when they read text, interact with form controls, or perform an interactive task.

The third Web Content Accessibility Guideline‘s says: “Information and the operation of user interface must be understandable.” Of course, this is a generally defined idea, leading up to more objective goals (success criteria) and techniques.

This principle offers us suggestions and insights to successfully make our websites more inclusive, inviting more people to interact with it in a way that maybe different than our own. “Understandable” models a way for us to be considerate of people who think differently, move differently, and perceive differently than ourselves. No matter the physical and cognitive differences among us, everyone should still be able to understand your website with very few hurdles.

Guidelines

To dig a little deeper, how can we ensure that everyone can understand the services and information we have to offer? Trail down through the levels within this principle, from subjective to objective, via its guidelines and success criteria. The Understandable guidelines say that your entire webpage should:

  • be readable
  • be predictable
  • include input assistance for forms

Success Criteria

Digging even deeper into those 3 guidelines, we find each guideline offers its own goals (success criteria) to target common accessibility problems. Rather than writing out all 17 criteria, which could be blog posts in and of themselves, I’ll sum up a few of the guidelines to include some goals that the criteria are aiming for:

  • define a language for the whole page; and parts of the page when different languages are used
  • help people understand complex information with summaries, expanded abbreviations and definitions, or other simplified text alternatives
  • keep your labels and input interactions consistent and predictable
  • offer help text for forms to help prevent input errors
  • clearly point out input errors and how to resolve them

I encourage you to check out all the success criteria, now that you are more confident in understanding the guidelines within the third principle. If that page still looks too intimidating, try reading How to Meet WCAG, which is more approachable and provides clear techniques that help you visualize how to meaningfully apply what you’ve learned.

Conclusion

Regardless of how you take your next steps, I hope you’re becoming more confident to dive into WCAG documentation and its supplemental materials and guides to help you better understand web accessibility. I can’t emphasize enough that, despite all the technical specs, taking a moment to empathize with people who have different levels of abilities than your own is so important. Ask yourself, “How could my website prevent a person with a visual, hearing, physical, or cognitive impairment from entering in and walking away with what they came for?” In the end, it’s the empathizing and relating to your wider audience that will make your accessibility efforts a success, rather than all the vast technical memorization and compliance, in which you devoted your time.

An aside

This is Day 9 of my 100 Days of Accessibility journey to learn all things web accessibility. The best way I retain information is to share with others, so I spent my “study” time today writing this post to advance my knowledge, and yours, too.

As an aside resource that I’m currently reading, Form Design Patterns by Adam Silver (Smashing Magazine) is reinforcing my assimilation of the Understandable principle. I’ve only read through his first form pattern about registration forms, but it reinforces the importance of input controls being predictable and reinforced with clear labels, help text, and error prevention. In the end, it benefits all users to make forms better!

As an aside code experiment to reinforce “Understandable”, and a chance try some code new to me, I put into action W3C’s H62 technique: Using the ruby element to assist with pronunciation.

An Overview of WCAG’s Second Principle: Operable

5 guidelines. 29 success criteria (including 14 Level A conformance. 3 Level AA conformance. 12 Level AAA conformance). And many ever-changing techniques that are sufficient, advisory, or a failure. Just as I pointed out in my Perceivable principle review, this is just one way the World Wide Web Consortium’s (W3C) “Operable” principle within the current Web Content Accessibility Guidelines (WCAG)  2.1 recommendation can be broken down. And yet, the documentation that follows is even more massive! Though, looking at it by the numbers can leave one feeling intimidated, exhausted, and uninspired to learn the golden standard of web accessibility, there are better ways to break down the docs into chunks.

Introduction

On that note, I’ll introduce you to WCAG’s second principle: Operable. As stated earlier, it has many components, so to speak, but it all boils down to giving everyone the opportunity to successfully navigate each part of your website via the technology of their choosing. For instance, I navigate the web mostly with my mouse, sometimes in unison with my keyboard, when skipping from page to page, link to link. Additionally, my fingers do the walking (nod to the old school yellow pages) when I’m on my smartphone and zipping through sites. However, there are many people who solely use their keyboard to navigate the web. Additionally, all of us rely on clear wayfinding to get from one place to another online.

The second Web Content Accessibility Guideline‘s says: “User interface components and navigation must be operable.” This is a generally defined idea, leading up to more objective goals (success criteria) and techniques.

This principle offers us suggestions and insights to successfully make our websites more inclusive, inviting more people to interact with it in a way that maybe different than our own. “Operable” models a way for us to be considerate of people who think differently, move differently, and perceive differently than ourselves. No matter the physical and cognitive differences among us, everyone should still be able to navigate your website without hurdles.

Guidelines

To dig a little deeper, how can we ensure that everyone can access the variety of services and information we have to offer? Trail down through the levels within this principle, from subjective to objective, via its guidelines and success criteria. The Operable guidelines say that your entire webpage should:

  • be keyboard accessible
  • allow enough time for viewing
  • be considerate of people with seizures or other sensitive reactions
  • be navigable
  • consider various modes of device input

Success Criteria

Digging even deeper into those 4 guidelines, we find each guideline offers its own goals (success criteria) to target common accessibility problems. Rather than writing out all 29 criteria, which could be several blog posts in and of themselves, I’ll expand upon the guidelines to include some goals that the criteria are aiming for:

  • every part of your page can be accessed by keyboard alone, yet no part of the page should trap that keyboard user within itself
  • visitors should have some control over animation and timed sessions
  • use of animation (during interaction) and flashing should be regulated
  • visitors need a point of reference to understand where they are, and ways to jump past repetitive content
  • allow visitors to easily operate web apps and site functionality with other input methods other than a keyboard

I encourage you to check out all the success criteria, now that you are more confident in understanding the guidelines within the second principle. If that page still looks too intimidating, try reading How to Meet WCAG, which is more approachable and provides clearer techniques that help you visualize how to meaningfully apply what you’ve learned.

Conclusion

Regardless of how you take your next steps, I hope you are becoming more confident to dive into WCAG documentation and its supplemental materials and guides to help you better understand web accessibility. I can’t emphasize enough that, despite all the technical specs, taking a moment to empathize with people who have different levels of abilities than your own is so important. Ask yourself, “How could my website prevent a person with a visual, hearing, physical, or cognitive impairment from entering in and walking away with what they came for?” In the end, it’s the empathizing and relating to your wider audience that will make your accessibility efforts a success, rather than all the vast technical memorization and compliance, in which you devoted your time.

An aside

This is Day 6 of my 100 Days of Accessibility journey to learn all things web accessibility. The best way I retain information is to share with others, so I spent my “study” time today writing this post to advance my knowledge, and yours, too.

I’d also like to note another resource that I’ve recently tapped into. I’ve started reading Form Design Patterns by Adam Silver (Smashing Magazine) in the hopes of learning how to make accessible and usable forms on pages that I design and develop. As an added note, I’m reading it on my Kindle Paperwhite because it is more accessible to me in that format, which allows me to enlarge the print, control lighting (no glaring white background or overwhelming backlighting), and read without distractions. Flexible formats are a wonderful thing for everyone!

An Overview of WCAG’s First Principle: Perceivable

4 guidelines. 29 success criteria (including 9 Level A conformance. 11 Level AA conformance. 9 Level AAA conformance). And so many more sufficient, advisory, and failure techniques that are ever changing. This is just one way the World Wide Web Consortium’s (W3C) “Perceivable” principle within the current Web Content Accessibility Guidelines (WCAG) recommendation can be broken down. But, wait, there’s so much more documentation to follow! However, looking at it that way can suddenly leave one feeling intimidated, exhausted, and uninspired to learn even just this small segment of the golden standard of web accessibility.

Sadly, I get the impression that many web developers, such as myself, feel this way when referring to this documentation. We go in, quickly find what we need, and get out as quick as possible before the abyss of text and jargon overwhelm us. Or, we find a non-normative siteto help us understand the documentation and never once visit the normative documentation (there’s nothing wrong with that, by the way).

I’m not here to judge you, but rather I am on a long road to better understand the whys and hows of web accessibility, so that I can become a better developer, designer, and person. On that journey, I can only hope to impart some of what I’ve gained and inspire you to take your own journey, no matter the length.

Introduction

On that note, let me introduce you to the principle labelled as Perceivable. As stated earlier, it appears to have a ton of components, so to speak, but it all boils down to giving everyone the opportunity to access your application and content by the sense that is dominant for them. For instance, ironically, I rely heavily on my vision to pull in information around me (though I’m visually impaired), but supplement with hearing and touch to fill in the gaps. Lucky me, in such a visually dominant world we live in. Virtually, I have to enlarge print, zoom into pages, and minimize business on the page (yay, for Reader View!). However, I recognize that not everyone is like me. There are people who rely heavily on hearing or touch to interact with their environment. Additionally, there are others who can see much better than I can. And, yet, we all live in the same world, trying to access the same Internet.

The first Web Content Accessibility Guideline‘s says: “Information and user interface components must be presentable to users in ways they can perceive.” Take note, this is just the general idea with goals that is more objectively defined in the success criteria and techniques.

To me, this principle offers us some low hanging fruit to successfully make our websites more inclusive, inviting more people in, who arrive with a different means to interact than our own. Whether someone sees (visual, screen), hears (audio, screen reader), or feels (Braille output) in order to read a blog, buy a plane ticket, or learn a new skill, it shouldn’t matter. They should still be able to partake in all those things.

Guidelines

To dig a little deeper, how can we ensure that everyone can access the variety of services and information on the web? Trail down through the levels within the principle, from subjective to objective, via their guidelines and success criteria. The Perceivable guidelines say that content and components should:

  • provide text alternatives
  • have specific considerations for time-based media (audio and video)
  • be adaptable through structure and formatting
  • be distinguishable in various contexts

Success Criteria

Digging down further into these 4 guidelines, we find each guideline offering it’s own criteria to target potential accessibility issues. Rather than writing out all 29 criteria, which could be several blog posts in themselves, I’ll expand upon the guidelines to include what some of the key criteria are aiming for or why:

  • provide text alternatives to items that aren’t text already (non-text), therefore, giving your users the ability to access information through their chosen medium or format
  • couple video and audio, whether live or pre-recorded, with text (captions, transcript) or audio (audio description)
  • allow for diverse user choices that may affect your design and define clear connections between content on the page; this includes flexible screen orientation, defined input types, and using semantic HTML
  • ensure all content is “visible”, whether it’s providing good color contrast, appropriate foreground and background audio contrast, or creating more white space between text and elements on a page.

I encourage you to check out all the success criteria, now that you are more confident in understanding the guidelines within the first principle. If that page still looks too intimidating, try reading How to Meet WCAG, which is more approachable and provides clearer techniques that help you visualize how to meaningfully apply what you’ve learned.

Conclusion

Regardless of how you take your next steps, I hope you are less afraid to dive into WCAG documentation and its supplemental materials and guides to help you understand web accessibility. Despite all the technical specs, take a moment to sit back and empathize with people who have different levels of abilities than your own. Ask yourself, “How could my website prevent a person with a visual, hearing, physical, or cognitive impairment from entering in and walking away with what they came for?” In the end, it’s the empathizing and relating to your wider audience that will make your accessibility efforts a success, rather than all the vast technical memorization and compliance, in which you devoted your time.

An aside

This is Day 5 of my 100 Days of Accessibility journey to learn all things web accessibility. The best way I keep information in my brain is to share with others, so I spent my “study” time today writing this post, so that I could better assimilate the information in a more permanent way, while offering you a step forward into understanding web accessibility a little better.

If you’re trying to learn more about web accessibility, you don’t have to do anything as extravagant or dramatic as I’m doing. Today I just discovered Learning A11y, which provides a list of resources to help you get started learning. We’re all headed for the same destination here, but our learning styles and journey may vary.