Random Notes on Accessibility

PAGE CONTENTS

The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.
- Tim Berners-Lee, W3C Director and inventor of the World Wide Web

Close up of a button labeled Make Accessible on a computer keyboard

Read Me

This page is not an introduction to Accessibility (A11y.) It is not a deep dive into A11y as a whole or any single aspect. I have assumed that visitors already have a basic understand of (A11y.) and web development.

This is a reference document. It a repository of notes, facts, markpup clips, style clips, quotes, statistics, links, resources, tips, tricks, techniques, and best practices relating to A11y. Think of it as a very messy "brain dump." I collected them for my own use, but I hope someone else will find it helpful.

This is incomplete. I will continue to expand it, but I have no plans to cover all aspects of Accessibility.

This is a work in progress. I've only included a fragment of my notes here. It will expand over time but it will be a long while before I can add catalog all my notes here. So, kindly bookmark this page and return in a month or two.

I welcome constructive criticism and suggestions.

top

Accessibility Basics

This is not meant to be an introduction to A11y.

For learning the fundamentals of Accessibiliity, use one of the following resources.

Books for Accessible Web Development

HTML and CSS are evolving and web browsers are constantly being updated. So when shopping for books, with all other things being equal, choose the most recently published book.

For web design and development in general, I recommend the following book.

for Accessible web devlopment, I recommend both of the following two books.

For applying Accessibility at scale in a large enterprise, here are two books. I've read the first one and I recommend it. I haven't gotten around to reading the second one yet but it seems promising.

Video Channels

Links

My lists are subjective and not comprehensive.

top

A Subjective Glossary of Less Commonly Used Terms

With few exceptions, I'm not including the most commonly used terms here. For definitions of the core terms, visit one of the resources listed in the Accessibility Basics section before returning to this page.

Assistive Technology (AT)
a term used to describe any item or product that helps people with disabilities improve or maintain their functional capabilities. AT can be low-tech, like communication boards, or high-tech, like special-purpose computers. The category includes screen readers, mobility aids, augmentative communication, and voice recognition
Design Thinking
a human-centered approach to innovation that focuses on creating solutions to problems by understanding users and challenging assumptions.
Social Model of Disability
a mismatch in interaction between the features of a persona's body and the features of the environment in which they live. (CITE: World Health Organization)
Universal Design
a concept in which products and environments are designed to be usable by all people, to the greatest extent possible, without the need for adaption or specialized design.

Responsive design is a key aspect of achieving universal design on the web; essentially, responsive design helps to ensure that a website can be used by a wider range of people, including those with disabilities, by adjusting to their needs and devices.

(NOTE: Privately and informally, I think "(Accessibility) + (Responsive Design) = Universal Design.)"
Usability
a quality attribute that assesses how easy user interfaces are to use. The word "usability" also refers to methods for improving ease-of-use during the design process. Usability is defined by 5 quality components:
Learnability: How easy is it for users to accomplish basic tasks the first time they encounter the design?;
Efficiency: Once users have learned the design, how quickly can they perform tasks?;
Memorability: When users return to the design after a period of not using it, how easily can they reestablish proficiency?;
Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors?
Satisfaction: How pleasant is it to use the design?;
CITE: Usability 101: Introduction to Usability by Jakob Nielsen. January 3, 2012.
User-Centered Design (UCD)
a design philosophy that puts the user's needs and preferences at the center of the product development process. The goal of UCD is to create products that are accessible, enjoyable, and exceed user expectations.

UCD is sometimes called human-centered design, and the two terms are closely related. However, user-centric design may be less emotionally empathetic than human-centered design, which may also consider users' emotional or psychological preferences.
See also: Introduction to User-Centered Design

top

Warning: Widgits and Overlays

"Build it in, don't bolt it on."
- common systems engineering maxim

If you are considering using widgits and overlays as quick, inexpensive, easy solution for a non-accessible website, kindly follow the links before proceeding.

I am suspicious almost to the point of dismisal of any plugins that promise to make a site fully accessibility. I can't unilaterally declare that they worsen the problem, but I find it hard to believe plugins that claim to be a "quick fix" or a "one-click solution." If there was a single line of HTML or JavaScript code that would fix a site's accessibility, every major browser would license the technology.

top

Diversity, Equity, Inclusion, and Belonging (DEIB)

Accessibility is a vital part of DEIB because it ensures people with disabilities can fully participate and feel valued. For example, providing wheelchair ramps, automatic doors, or accessible restrooms removes physical barriers, while offering screen readers, closed captions, or alternative text for images addresses technological barriers. Social inclusion can be fostered by training employees on disability awareness and creating inclusive hiring practices. These efforts ensure everyone has an equal opportunity to contribute and belong, reinforcing the commitment to inclusion and fairness.

A government that works for all, works for people with disabilities.

Visit the Mayor’s Committee for People with Disabilities on AustinTexas.gov; Advisory body to the city council and city manager regarding problems affecting persons with disabilities in the Austin area. Established to encourage, assist and enable persons with disabilities to participate in the social and economic life of the City, achieve maximum personal independence, become gainfully employed, and use and enjoy fully and use all public and private facilities available within the community.

top

Disability Etiquette and Language

top

Nothing About Us Without Us

In the field of accessibility, it's really important to follow the principle of 'nothing about us without us,' We're not going to build something and then see how it works. We're going to build it taking users' feedback into account. We want to build what they need.
- Ather Sharif, a doctoral student in the Paul G. Allen School of Computer Science & Engineering at the University of Washington,
as quoted in VoxLens: Adding one line of code can make some interactive visualizations accessible to screen-reader users

top

Some Statistics

The Centers for Disease Control and Prevention (CDC) reports that 26% of U.S. adults live with some form of disability.

SOURCE: Prevalence of Disabilities and Health Care Access by Disability Status and Type Among Adults - United States, 2016 on CDC.gov

The World Health Organization (WHO) estimates that over 1 billion people (about 15% of the global population) live with some form of disability.

SOURCES:

Most of the more than 4,000 ADA web accessibility lawsuits filed in 2022 and the nearly 16,000 ADA web accessibility lawsuits filed in the last five years had plaintiffs with visual disabilities. Plaintiffs with visual disabilities filed the most cases, and plaintiffs with auditory disabilities came in second; most often, claims filed by people with hearing disabilities focused on digital accessibility issues for video, such as a lack of captions or missing audio descriptions.
From 7 Facts Your Ecommerce Company Should Know About ADA Web Lawsuits by UsableNet on Feb 22, 2023

I am not suggesting prioritizing any one type of disability over another.

top

Timeline

I've moved the timeline to the Accessibility Timeline page.

top

"You are not the user"

Programmers program for the person they know best.
- Jim Allen, the accessibility coordinator at the Texas School for the Blind and Visually Impaired

When we build technology, we tend to think of people who are like us and who have the same abilities as we do.
- Katharina Reinecke, associate professor in the Paul G. Allen School of Computer Science & Engineering at the University of Washington

Programmers and graphic designers tend to get uncommonly high scores on tests of spatial reasoning skills and are therefore good at visualizing the structure of a Web site. Similarly, young people (i.e., most Web designers) certainly have better memories for obscure codes (e.g., a URL) than older people. It is safe to assume that most users will have significantly greater difficulty navigating a Web site than its designers have. Simplified navigation helps all users, but is a required enabler for users at the opposite extreme of the scales. People who have difficulty visualizing the structure of an information can be helped if the site designers have produced such a visualization for them in the form of a sitemap; they would be further aided if the browser updated the display of the sitemap with the path of the navigation and the location of the current page.
- Jakob Nielsen in "Accessible Design for Users With Disabilities"

This burden should always be on the author, not the user. If you find yourself blaming the user for the pattern you built, you might be bad at your job.
- Adrian Roselli in Don't Disable Form Controls on February 10, 2024

VIDEO: IMB's Flaming Logo Commercial on YouTube

top

Web Content Accessibility Guidelines (WCAG)

The Web Content Accessibility Guidelines (WCAG) have three levels of conformance: A, AA, and AAA:

The WCAG The WCAG document does not recommend that Level AAA conformance be required as a general policy for entire sites because it is not possible to satisfy all Level AAA success criteria for some content.
From the University of California website

WCAG Releases

WCAG Versions
Version Publication Date Details
WCAG 1.0 May 5, 1999 14 guidelines covering basic themes of web accessibility. 65 checkpoints. Three priority levels (A, AA, AAA)
WCAG 2.0 December 11, 2008 12 guidelines organized under four principles (i.e., perceivable, operable, understandable, and robust) and 61 success criteria.
WCAG 2.1 June 5, 2018 backwards-compatible with WCAG 2.0 and includes 17 additional success criteria covering mobile accessibility (5 new success criteria), low vision (2 new success criteria), and cognitive and learning disabilities (10 new success criteria.)
WCAG 2.2 October 5, 2023 WCAG 2.2 is backwards-compatible with WCAG 2.1 and includes 9 new Success Criteria. It has deprecated and removed the 4.1.1 success criterion (i.e., Parsing.)
WCAG 3.0 unreleased While there is a lot of overlap between 2.X and 3.0, 3.0 includes additional tests and different scoring mechanisms. As a result, 3.0 is not backwards compatible with 2.X. 3.0 does not supersede 2.2 and previous versions; rather, it is an alternative set of guidelines. Once these guidelines become a W3C Recommendation, the W3C will advise developers, content creators and policy makers to use WCAG 3.0 in order to maximize future applicability of accessibility efforts. However, content that conforms to earlier versions of WCAG continue to conform to those versions.

For a list of the 61 success criteria in WCAG 2.0, the 17 additional success criteria in WCAG 2.1, and the nine additional success criteria in WCAG 2.1, kindly visit the Success Criteria for WCAG 2.0, 2.1, and 2.2 page.

WCAG Checklists

This list is not meant to be comprehensive or authoritative. More suggestions to come.

top

Remediation! "Where do I start?"

It can be overwhelming to start remediating a large legacy site. For those cases, here are some suggestions for prioritizing remediation:

The Eisenhower Matrix which was developed by Stephen Covey, author of The 7 Habits of Highly Effective People, and named after former U.S. President Dwight D. Eisenhower. It allows users to categorize tasks into four distinct quadrants, enabling them to focus and manage their time more effectively.

  1. Quadrant I: Urgent and Important
    Tasks that fall into this category require immediate attention and are critical to your goals. These are often crises or deadlines that must be addressed right away. Examples include urgent work projects, medical emergencies, or last-minute preparations for a presentation.
  2. Quadrant II: Not Urgent but Important
    This quadrant contains tasks that are essential for long-term success but do not require immediate action. These tasks often involve planning, relationship building, and personal development. Examples include strategic planning, exercise, and learning new skills. Focusing on these tasks can lead to significant improvements in productivity and well-being.
  3. Quadrant III: Urgent but Not Important
    Tasks in this category demand immediate attention but do not contribute significantly to your long-term goals. These are often interruptions or requests from others that can distract you from more important work. Examples include certain emails, phone calls, or meetings. It's crucial to recognize these tasks and delegate or limit time spent on them.
  4. Quadrant IV: Not Urgent and Not Important
    This quadrant includes tasks that are neither urgent nor important. These activities often serve as distractions and can waste valuable time. Examples include excessive social media browsing, watching TV, or engaging in trivial activities. Minimizing time spent here can free up resources for more meaningful tasks.

Work on the urgent and important tasks first, the not urgent but important second, the urgent but not important third, and not urgent and not important.

Additional Links:

top

"Shift Left"

Anybody that questions why you are shoveling six inches of snow in the *middle* of a snowstorm hasn't shoveled twelve inches of snow at the end of a snowstorm. - Boss_Angler

The cost of fixing an issue increases exponentially as the software moves forward in the SDLC. The Systems Sciences Institute at IBM reported that it cost 6x more to fix a bug found during implementation than to fix one identified during design. - Arvinder Saini, How much do bugs cost to fix during each phase of the SDLC? Jan 12, 2017

bar graph showing the comparative costs to fix bugs based on time of detection. From left to right: requirements/architecture, coding, integration/component testing, system acceptance testing, and production/post-release. The later in the Software Development Lifecycle that a bug is identified, the more expensive it becomes to repair it.

Mark Penicook, director of Accessibility at Capital One, once remarked Accessibility isn't taught in computer science.

Accessibility should be taught throughout a course or training as something integral to the SDLC, web development, and document creation. Something to perform at every step. But if Accessibility is taught at all, it's presented as additional training. Often offered optionally after teaching a technology. This perpetuates the practice of "adding on" Accessibility at the end of the development cycle.

Accessibility is not a new, fashionable technology to learn. It's not a new skill, a new programming language, a new methodology, or new framework which may or may not benefit you. It's using your existing skills so to do a better job communicating more information to a larger audience.

top

I am not a lawyer. The content that follows is not legal advice.

Three U.S. Laws

Law Date Applies To Web Site WCAG?
Rehabilitation Act of 1973 (Sections 504 & 508) 1973 Section 504 prohibits discrimination in programs receiving federal funding.

Section 508 requires federal agencies to make electronic and IT systems accessible to individuals with disabilities.

It does not regulate the private sector and does not apply to recipients of Federal funds, but …		 Section508.gov As of January 2018, the U.S. Access Board (a Federal Agency) adopted WCAG 2.0 AA as the standard for web accessibility for Section 508.
Americans with Disabilities Act (ADA) 1990 Title II - State and local governments.
Title III - Public accommodations and commercial facilities.		 ADA.gov The ADA was signed into law in 1990 when the Internet was in its infancy and the WWW a year old. As a reasult, the ADA does not include references to either the Internet or WWW.

Over time, some courts have adopted the WCAG 2.0 Level AA as the accessibility standard for compliance under the ADA.
21st Century Integrated Digital Experience Act (IDEA) 2018 Federal agencies Energy.gov IDEA does not explicitly reference WCAG. However, it mandates compliance with Section 508 of the Rehabilitation Act, which incorporates WCAG 2.0 Level A and Level AA standards in its accessibility guidelines.

Rehabilitation Act of 1973 - Sections 504 & 508

By incorporating the WCAG 2.0 guidelines into the 508 standards, we are getting the best and latest thinking of hundreds of accessibility experts all over the world, as well as harmonizing internationally with those countries who have also adopted the WCAG 2.0 guidelines in their accessibility efforts.
- Brian Charlson, the director of technology at the Carroll Center for the Blind

The updates to the Rehabilitation Act of 1973 have also harmonized it with European Commission standards

Americans with Disabilities Act (ADA)

Title II of the ADA requires "public universities and other covered entities to take appropriate steps to ensure that communications with individuals with disabilities are as effective as communications with others to afford qualified individuals with disabilities an equal opportunity to participate in, and enjoy the benefits of their services programs, or activities."

Title III of the ADA applies to public accommodations (i.e., twelve categories of privately-owned entities that do business with the public.)

U.S. Court of Appeals ADA and Websites Circuit Split
(Last updated: November 2024)
Circuit States Current Opinion
1st Maine, Massachusetts, New Hampshire, Puerto Rico, Rhode Island No definitive ruling, but trend leans toward inclusion.
2nd Connecticut, New York, Vermont Websites can be subject to the ADA if tied to a physical location.
3rd Delaware, New Jersey, Pennsylvania, Virgin Islands Websites must have a connection to a physical place to fall under the ADA.
4th Maryland, North Carolina, South Carolina, Virginia, West Virginia Websites can be public accommodations under the ADA, but rulings vary.
5th Louisiana, Mississippi, Texas Tends to require a nexus to a physical location for ADA application.
6th Kentucky, Michigan, Ohio, Tennessee Websites are subject to the ADA if connected to physical stores.
7th Illinois, Indiana, Wisconsin Strongly leans toward websites being public accommodations.
8th Arkansas, Iowa, Minnesota, Missouri, Nebraska, North Dakota, South Dakota No definitive ruling; typically requires connection to a physical space.
9th Alaska, Arizona, California, Guam, Hawaii, Idaho, Montana, Nevada, Northern Mariana Islands, Oregon, Washington In the case of Robles v. Domino's Pizza LLC (2019), Guillermo Robles, a visually impaired plaintiff, alleged that Domino's website and app were inaccessible via screen-reading software, denying him equal access to the company's services. The Ninth Circuit held that the ADA applies to Domino's digital platforms because they are closely tied to its physical restaurants, which are places of public accommodation under the ADA. The court emphasized that the company had sufficient notice of its obligations to make its website and app accessible. This decision underscored that businesses must ensure accessibility in digital spaces when they act as extensions of physical locations, solidifying the Ninth Circuit's stance that websites linked to brick-and-mortar establishments fall under ADA coverage.
The DOJ had failed to provide helpful guidance, despite announcing its intention to do so in 2010.
10th Colorado, Kansas, New Mexico, Oklahoma, Utah, Wyoming Leans toward requiring a physical nexus.
11th Alabama, Florida, Georgia In the case of Gil v. Winn-Dixie Stores, Inc. (2021), Juan Carlos Gil, a blind individual, sued Winn-Dixie, claiming its website was incompatible with screen-reading software, preventing him from using it to refill prescriptions and access store coupons. The Eleventh Circuit ruled that the website was not a "place of public accommodation" under the ADA and that its inaccessibility did not create a barrier to accessing Winn-Dixie's physical stores.
D.C. District of Columbia No definitive ruling on websites as public accommodations.

top

"Is my web site ADA compliant?"

Many smart, well-educated clients have asked "Is my web site ADA compliant?," but it's impossible to answer. Here's why.

When the Americans with Disabilities Act (ADA) was signed into law in 1990, the Internet was still in its very early stages, not widely accessible to the public, and considered a niche technology. It was not a significant part of everyday life for most people. Most lawmakers were unaware of the technology. So, the internet was not a major factor when the ADA was drafted and passed. It doesn't explictly reference the Internet or electronic documents. (See the Timeline page for specifics.)

It's not that the ADA doesn't apply to web accessibility. It does. It's just that the ADA doesn't contain any specific guidelines on how to make web sites accessible. So while the language in the ADA doesn't explicitly reference the WCAG, many courts have based their judgements about web accessibility on the WCAG.

I think when people ask "Is my web site ADA compliant?" they want to know if their web site is accessible, section 508 compliant, or WCAG compliant.

So, there's a nomenclature out there -- or there's a pattern of speech -- called 'ADA compliance.' It's not a good one, and I tried to fight it years ago, and then I just left the title (tidal?) wave take. It's wrong because there's nothing within the ADA --- and there's no language within the ADA to date --- that says 'you must make digital products accessible.' There's this law called the Rehabilitation Act of 1973, and that's the law that has something in it that talks about 'digital compliance.' But nobody runs around saying Rehabilitation Act compliance, right?
- Michele Landis, Allyant co-founder, in Website Accessibility - What you need to know to get it done right - [VIDEO] 2019 ()

top

How has WCAG Become the De Facto Standard in the United States?

The Web Content Accessibility Guidelines (WCAG) have become the de facto standard for web accessibility in the United States, serving as a crucial tool for meeting both federal and state accessibility regulations. Under Section 508 of the Rehabilitation Act, WCAG ensures that federal agencies' electronic information is accessible.

Additionally, while the Americans with Disabilities Act (ADA) doesn't explicitly outline technical requirements for web accessibility, WCAG is widely recognized as the standard for meeting ADA compliance.

For more specifics, see the Timeline page.

The Web Content Accessibility Guidelines (WCAG) 2.0 and 2.1 Level AA, developed by the private international World Wide Web Consortium (W3C), has emerged as the benchmark standard. The general consensus is that if businesses adhere to this standard in developing, coding and maintaining websites and mobile apps, their websites will be accessible to individuals with disabilities. The WCAG is a legal requirement under some federal laws, such as Section 508 of the Rehabilitation Act, the Air Carrier Access Act and section 1557 of the Affordable Care Act. Some courts have adopted the WCAG 2.0 Level AA as the accessibility standard for compliance in fashioning injunctive relief under the ADA.
- Minh Vu, Kristina Launey and John Egan in The Law on Website and Mobile Accessibility Continues to Grow at a Glacial Pace Even asLawsuit Numbers Reach All-Time Highs on the American Bar Association website (January 1, 2022)

So, people like to say this: "The guidelines are so unclear nobody knows what accessibility is." That's lawyers talking. That's judges talking. You guys know what it is. This international standard --- the web content accessibility guidelines --- spent out 20 years we use it in every business vertical that we do audits in, and we use it in every single country. Here's a little insider tip: Every other first world country already has WCAG 2.0 level AA written into their version of disability. We're the only country that does not have a law that specifically calls out the requirement for this. Since 2015, if you built a website in Canada, you would have had to meet this due to the Ontario accessibility act. And the UK and the EU are now starting to actually enforce the laws that they have on the books. - - Michele Landis, Allyant co-founder, in Section 508 Myths with Michele Landis[VIDEO] on November 19, 2021 (54:46)

top

Other Laws

European Accessibility Act (EAA)
A landmark directive requiring digital products and services, such as websites, mobile apps, and e-books, to comply with accessibility standards (largely WCAG). Compliance is mandatory by 2025 for public and private sectors.

U.S. businesses exporting digital products or services (e.g., websites, software, apps, e-books) to the EU must comply with the EAA's requirements, which align largely with WCAG 2.1 standards. This could affect industries like technology, publishing, and financial services. For example: A U.S. e-commerce site selling to EU customers will need to ensure its platform meets EAA accessibility standards. Companies like Amazon or Microsoft, which serve both U.S. and EU markets, might integrate WCAG 2.1 compliance into all platforms rather than maintaining separate standards. U.S. businesses working with EU partners will likely face contractual obligations to meet accessibility requirements. This could include suppliers, software developers, and service providers.
  • The European Accessibility Act - Get ready! by Neil Jarvis on November 13, 2024. The European Accessibility Act 2019 (EAA) is important legislation. It affects anyone working in or doing business with EU consumers. In this article, we'll help you understand what the EAA covers, whether you need to comply, timelines, enforcement, and exceptions.
Web Accessibility Directive (EU 2016/2102)
Requires EU member states' public sector websites and apps to comply with WCAG 2.1 standards. Annual monitoring and reporting are mandated for enforcement.

U.S.-based businesses providing web services, applications, or software solutions to EU public sector organizations must ensure their offerings comply with the directive's accessibility requirements, which align with WCAG 2.1 (Level AA). For example: A U.S. software company supplying content management systems (CMS) to EU governments must ensure those systems are accessible.
21st Century Communications and Video Accessibility Act (CVAA)
Focuses on ensuring access to advanced communication services (e.g., video conferencing and digital messaging) and includes digital content like captions for video programming.
California Consumer Privacy Act (CCPA) & California Civil Code (Unruh Act)
Though not directly focused on accessibility, the Unruh Act is often used to enforce digital accessibility, especially for businesses. Lawsuits for inaccessible websites are common under these provisions, linked to the ADA.
Accessibility for Ontarians with Disabilities Act (AODA)
Requires private and public organizations to make digital content accessible. Standards align with WCAG 2.0 Level AA for web content.

top

Accessibility vs. Conformance

The bigger point here, however, concerns a fallacy: the assumption that accessibility exists in a vacuum and can be scored without considering users and their tasks. Yes, there are technical criteria for supposedly making a website accessible. But even if you meet every high-priority checkpoint, users with disabilities might still be completely incapable of using your site.
- Jakob Nielsen in Accessibility Is Not Enough November 20, 2005

Strict conformance won't help if a web site or a electronic isn't accessible.

Always perform manual testing. Automated testing has it's value but it should never be performed alone.

top

Writing

If you can't teach something to a 6-year-old, that means you don't really understand it. - Attributed to Richard Feynman in Surely You're Joking, Mr. Feynman

WCAG 2.0 Success Criterion 3.1.5 Reading Level states When text requires reading ability more advanced than the lower secondary education level after removal of proper names and titles, supplemental content, or a version that does not require reading ability more advanced than the lower secondary education level, is available. (Level AAA)

An "8th grade reading level" means aiming to write content that is understandable by someone with an average reading ability at the 8th grade level, typically achieved by using simple language, short sentences, and avoiding complex jargon, with the goal of making information accessible to a broad audience.

Keep is simple silly (KISS)

"Weird Al" Yankovic - Word Crimes (Official 4K Video) (3:45)

Commonly Confused Homophones

Links for Writing

top

Alternative (ALT) Text

Some accessibility specialists advocate so called described images, where text is provided to verbalize what a seeing user would see. For example, the Web Access Symbol shown above might be described as 'a glowing globe with a keyhole.' In my opinion, such literal descriptions are fairly useless for Web pages unless the user is an art critic. I much prefer utility descriptions that verbalize the meaning or role of the image in the dialogue: what is the image intended to communicate and what will happen if it is clicked?
- Jakob Nielsen, Ph.D., retired principal and co-founder of the Nielsen Norman Group, in Accessible Design for Users With Disabilities

Add alternative text to images so people who are visually impaired can understand the content of the image. The alternative text must describe the purpose of the image.

Decorative images that do not provide additional information or context do not need alternative text. Instead, mark as decorative so the screen reader software can safely ignore them.

More about Alt Text

top

Markup (HTML) and Styles (CSS)

HTML5 is better than HRML 4 or XHTML for our purpose because HTML5 has more semantic elements than previous versions of HTML including regions (which are covered in the HTML5 Regions vs. ARIA Landmarks section later on this page.)

Making the Move to HTML5:

In addition to the editability and performance of semantic markup, clean HTML benefits users with accessibility needs . Semantic HTML makes the hierarchy of content meaningful for browsers, search engines, and screen reader. With new HTML5 tags like post and aside, and through the implementation of exisitng semantic structures like heading, paragraphs, and lists, content on the Web can become more accessible to everyone .... If you are using a clean an semantic HTML hierarchy, you are well on your way to making your site accessible.
- Lara Callender Hogan, author of Designing for Performance: Weighing Aesthetics and Speed in Optimizing Markup and Styles

It's easier to avoid Accessibility issues by using strict and valid HTML5 and CSS.

Additional Benefits to Strict HTML

Related Buzz Words and Similar Concepts

Strictly defined these terms may have different meanings, but the difference are too subtle for me. I think of them as roughly interchangeable.

top

Tables

Here's an example of a non-compliant, loosely coded HTML table. While it works visually, it fails to meet modern accessibility standards and should be avoided.

<table summary="This is a non-compliant table">
    <tr>
        <td class="header-row">Header 1</td>
        <td class="header-row">Header 2</td>
        <td class="header-row">Header 3</td>
        <td class="header-row">Header 4</td>
    </tr>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
        <td>Data 4</td>
    </tr>
    <tr>
        <td>Data 5</td>
        <td>Data 6</td>
        <td>Data 7</td>
        <td>Data 8</td>
    </tr>
</table>

Table Errors

Here is an example of a strict, valid HTML5 table fully compliant with WCAG 2.1 Level AA.

<table aria-label="Course Schedule for lessons, topics, assignments, points, and due dates">
  <caption>Course Schedule</caption>
  <thead>
    <tr>
      <th scope="col">Lesson</th>
      <th scope="col">Topic</th>
      <th scope="col">Assignment</th>
      <th scope="col">Points</th>
      <th scope="col">Due</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Introduction to HTML</td>
      <td>Practice Exercise</td>
      <td>10</td>
      <td>10-Mar</td>
    </tr>
    <tr>
      <td>2</td>
      <td>HTML Elements</td>
      <td>Quiz</td>
      <td>15</td>
      <td>15-Mar</td>
    </tr>
  </tbody>
</table>

Table Features

Keep the table design simple. Do not merge table cells. That makes it difficult for AT users to understand.

Overly Complex Table with Merged Table Cells
Lesson Topic Assignment Points Due
1 What is Distance Learning? Wiki #1 10 10-Mar
Presentation 20
2 History & Theories Brief Paper 20 24-Mar
Spring Break
3 Distance Learners Discussion 10 7-Apr
Group Project 50 14-Apr
4 Media Selection Blog #1 10 21-Apr

For complex data, it might be better to separate one complex table to muliple simple tables.

Tables should be used for displaying tabular data.

Table containing tabular data.
Lesson Topic Assignment Points Due
1 Introduction to HTML Practice Exercise 10 10-Mar
2 HTML Elements Quiz 15 15-Mar

Avoid using tables for layout in web pages, office documents, or PDFs. AT will read the content as if it were tabular data.

Welcome

This is the left column of a layout table.

News

  • Item 1
  • Item 2
  • Item 3

If you use a table for layout in webpage or web application, include top

Underlines

In typewriting, underlines historically served to indicate italics. (For those of us who remember, typewriters did not have italic keys or italic type bars. That would have been impractical.)

An old manual typewriter with nearly twice the typical number of keys and type bars.

As a best practice, reserve underlines for links in web design, print media, and electronic documents. For emphasis, use italics instead of underlines. It's still okay to use underlines for emphasis in hand written notes.

top

Color

The Basics

WCAG 2.1 Success Criterion (SC) 1.4.1, "Use of Color" - Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

Color contrast
a ratio determined by comparing the luminosity of the text and background color values.
A Pie Chart with mulitple colors

A Native HTML Color Picker:

It's easy to add this color picker to a web page with a single HTML tag.

Color Picker: <input type="color" />

Color Pickers snd Other Color Tools

In CSS, it's easier to use HSL to adjust color contrast ratios with HSL than with RGB or hex code. See the following for more information.

In general, neurodiverse audiences have a preference toward muted, pastel hues and neutral tones. Consider using a matte black background with two or three pastel hues to depict data, or a neutral tan, gray, or white background to prevent colors from overwhelming the reader.
From Navigating Neurodiversity: 11 Guidelines for Designing Inclusive Web Pages

Caution: Due to the nature of Neurodiversity, there can not be a "one size solution that works for all."

Sample CSS for a Grayscale Theme

BODY {
    background-color: #CCCCCC;
}

IMG {
    filter: grayscale(100%);
}

Sample CSS for Alternating Row Colors in a Table

tr:nth-child(even) {
    background: #CCC;
}

tr:nth-child(odd) {
    background: #FFF;
}

top

Typefaces and Fonts

VIDEO: How to Choose a Good Body Font for Your Website (6:11) Choosing a good body font for your website is difficult, but it really doesn't have to be. You just have to keep a few basic things in mind, with the main one being that you should keep it as simple as possible. Your body font isn't the star of the show and it isn't something you should overcomplicate.

Approximate Font Size Unit Comparison
PointPixelREMPercentKeyword
7.5pt10px0.625rem62.5%x-small
10pt13px0.8rem80%small
12pt16px1rem100%medium
13.5pt18px1.125rem112.5%large
18pt24px1.5rem150%x-large
24pt32px2rem200%xx-large

top

For sighted users web pages are ordered

spatially

: Headers, Footers, Navigation Bars, and Content Areas. It's fast, easy, and somewhat intuitive for us to move our focus around a page.

A commonly used web page layout broken into regions or lanmarks

But for the users of screen readers, web pages are ordered sequentially: beginning, middle, and end. Web designers and web development must use a combination of techniques to provide AT users an equitable navigation experience.

  1. Skip Links
  2. Headings
  3. HTML5 Regions or ARIA Landmarks
  4. TOCs for Internal Links
  5. For PDFs: Bookmarks

Without these techniques, screen reader users have no way to navigate a page. They have no choice but to read the page until they reach the content the want. It's like reading a book without chapters, page numbers, or a table of contents.

The most helpful data we have on this comes from WebAIM's screen reader survey. While it shows a 42% increase in awareness of ARIA landmarks over the past year, only 40% of people indicate they use them, and a full 30% still don't know that the functionality event exists. That being said, if you only provide ARIA landmarks you will be meeting the letter of the law in terms of providing a way to easily skip repetitive navigation, but not providing the traditional "skip to" links will probably make your site more difficult for some screen reader users to navigate.
- Using ARIA Landmarks - A Demonstration

Rather than picking a single method, it's better for web designers, web develpers, and content creators to offer visitors a variety of techniques for navigation and empower them to choose whatever works best for them.

top

Success Criterion 2.4.1 ("Bypass Blocks") applies to "Skip Links."

2.4.1 Bypass Blocks: A mechanism is available to bypass blocks of content that are repeated on multiple Web pages. (Level A)

Depending on the page it can be difficult to get past the header and the navigation bar to the page content. That's where the concept of the "skip link" comes into play.

A best practice is to hide the skip link or make is invisible in browsers but discoverable to screen readers. This helps with the aesthetic and the skip links remain available to blind users.

If you hide the skip link from sighted users, you might be preventing those users who can't use mice from taking advantage of the technique. Be sure the skip link is available with the tab key.

VIDEO: Quick accessibility test: Skip links by TetraLogical (1:23) May 20, 2021

"Skip Link" Resources

Sample Skip Link HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Skip Link Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <a href="#main-content" class="skip-link">Skip to main content</a>

>  <header>
    <h1>Website Header</h1>
  </header>

  <nav>
    <ul>
      <li><a href="#link1">Link 1</a></li>
      <li><a href="#link2">Link 2</a></li>
    </ul>
  </nav>

  <main id="main-content">
    <h2>Main Content</h2>
    <p>This is the main content area.</p>
  </main>
</body>
</html>

top

JavaScript

JavaScript A11y Best Practices

JavaScript Event Handlers

Ensure interactive elements can be operated by both mouse and keyboard. Use universal event handlers where possible to accommodate all users.

Mouse-Dependent, Keyboard-Dependent, and Device-Independent Event Handlers
Mouse-Dependent Keyboard-Dependent Device-Independent
mousedown keydown click (Triggered by mouse click or keyboard)
mouseup keyup focus (Triggered by mouse or keyboard focus)
mousemove N/A input (Triggered on input changes)
mouseenter N/A focusin (Triggered when focus enters an element)
mouseleave N/A focusout (Triggered when focus leaves an element)
dblclick keypress N/A

Using device-independent event handlers wherever possible ensures maximum accessibility and inclusivity for all users, regardless of their input device.

top

Responsive Web Design and Break Points

Resources

Common brreakpoints and their corresponding devices listed in ascending order of size

top

The Accessibility Tree

We need to understand the DOM, APIs, and Accessibility APIs before covering the Accessibility Tree,

Document Object Model (DOM)
a programming interface that represents the structure of an HTML or XML document as a tree-like hierarchy of objects, allowing developers to programmatically access and manipulate the content, style, and structure of a web page using scripting languages like JavaScript; essentially, it provides a way to interact with the elements of a document through code.
Application Programming Interface (API)
a set of rules and protocols that allows different software applications to communicate with each other, exchanging data and functionality by providing a standardized way to access features and services from one application to another, essentially acting as a bridge between them; enabling developers to integrate various applications without having to build everything from scratch.

SIDE NOTE: The most commonly know type of APIs are REST (Representational State Transfer) APIs. They enable communication between software applications over the internet. REST APIs are commonly used in applications like weather services (e.g., retrieving forecasts), e-commerce (e.g., managing products and orders), social media platforms (e.g., posting tweets), and navigation tools (e.g., fetching directions from Google Maps.) Their simplicity, flexibility, and scalability make them a popular choice for web services.

The API we're covering next, the Accessibility API, is not a REST API. (Sorry for the misdirect.)

Accessibility API
An Accessibility API is a set of tools and standards designed to make software and digital content more inclusive, particularly for people with disabilities. These APIs enable assistive technologies—like screen readers, magnifiers, and speech recognition tools—to interact with applications and access their structure, content, and functionality.

By providing a standardized way for developers to expose information about an application's interface and events (e.g., button clicks or text updates), accessibility APIs help bridge the gap between technology and users with diverse needs. The ultimate goal is to ensure that everyone, regardless of ability, can effectively use digital tools and content.

Examples of widely used accessibility APIs include Microsoft Active Accessibility (MSAA), Microsoft UI Automation (UI Automation), MSAA with UI Automation Express (UIA Express), Mac OS X Accessibility Protocol (AXAPI), Linux/Unix Accessibility Toolkit (ATK), Assistive Technology Service Provider Interface (AT-SPI), and IAccessible2

Before the adoption of Accessibility APIs, digital accessibility relied on fragmented and labor-intensive methods. Assistive technologies (AT) often required custom solutions to interact with applications, such as scraping text from display buffers or hooking into graphics outputs. Early text-based interfaces were inherently more accessible, but the shift to graphical interfaces introduced significant challenges. Accessibility features like keyboard navigation, custom hardware (e.g., Braille displays), and developer-defined solutions were used, but these approaches lacked standardization, scalability, and consistency. As a result, accessibility was often limited, costly, and inconsistent, leaving many digital products inaccessible to people with disabilities.

Having coveriing those terms, we can explain the Accessibility Tree and how the DOM, APIs, and Accessibility APIs relate to it.

Accessibility Tree
a hierarchical structure that provides information about a website's content in a format that assistive technologies can understand. It's a simplified version of a website's Document Object Model (DOM), which is a programming interface that represents the structure and content of a web page.

Each node in the Accessibility Tree contains properties that describe its role, state, and relationships to other nodes.
  • Roles: Define the purpose of an element (e.g., button, heading, landmark.)
  • States: Indicate the current condition of an element (e.g., checked, disabled.)
  • Properties: Provide additional information about the element (e.g., labels, descriptions.)

When a web page is loaded, the browser constructs DOM based on the HTML and ARIA (Accessible Rich Internet Applications) attributes present in the markup. The Accessibility Tree draws on the DOM. The screen reader uses the Accessibility API to access the Accessibility Tree and retrieve information about the UI elements. For instance, when a screen reader encounters a button, it will read out the role and any associated labels or descriptions, allowing the user to understand its function.

In short, screen readers do not read screens. They get their information from the Accessibility Tree.

All major browsers include tools for analyzing the Accessibility Tree.

To view the accessibility tree in Chrome, you can:

  1. Right-click anywhere on the page
  2. Select Inspect to open Chrome Developer Tools
  3. Navigate to the Accessibility Pane to see information about the element you're currently on

To view the Accessibility Tree in Firefox, you can:

  1. Open the Developer Tools by right-clicking on a page.
  2. avigate to the "Accessibility" tab within the Developer Tools.
  3. Select "Inspect Element."
  4. Navigate to the Accessibility Pane to see information about the element you're currently on.
  5. You may need to enable accessibility features within the tab to see the full tree.

top

ARIA

DISCLAIMER: This is not a deep-drive into ARIA.

Understanding the Accessibility Tree and the meaning of "Rich Internet Applications" is helpful for understanding ARIA.

Rich Internet Applications (RIAs)
web applications that have many of the characteristics of desktop application software. The concept is closely related to a single-page application, and may allow the user interactive features such as drag and drop, background menu, WYSIWYG editing, etc., The concept was first introduced in 2002 by Macromedia to describe Macromedia Flash (later renamed Adobe Flash.) Throughout the 2000s, the term was generalized to describe browser-based applications developed with other competing browser plugin technologies (including Java applets, Microsoft Silverlight as well as With the deprecation of browser plugin interfaces and transition to standard HTML5 technologies, Rich Internet Applications were replaced with JavaScript web applications, including single-page applications and progressive web applications. (From a Rich Internet Application article on wikipedia.)

Some common A11y challenges with RIAs were its dependencies on drag and drop, dynamic page changes not not alerting screen readers and screen magnifiers, and back buttons sometimes not functioning as expected because the url's are not unique.

The term has fallen into disuse.

Web development languages (including PHP, ColdFusion, Java, and .NET) can be used to create RIAs. They allow developers to build interactive and dynamic web applications with features like real-time updates, complex data visualizations, and smooth user interfaces, all within a browser environment. While the term is no longer current, the chalenges persist.

Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA or more commonly ARIA)
A technical specification published by the World Wide Web Consortium (W3C) to make Web Content and Web Applications more accessible to people with disabilities. ARIA especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies. For example, with WAI-ARIA it is possible to identify a list of links as a navigation menu and to state whether it is expanded or collapsed.

HTML structures a webpage, while ARIA adds attributes that assist technologies like screen readers. ARIA is especially useful when standard HTML can't fully describe complex interactions or custom controls. It complements HTML but doesn't replace it.

ARIA Implements custom UI elements so that they are

  1. usable by keyboard only users
  2. understandable to users of assistive technology.

The W3C's first rule of ARIA is If you can use a native HTML element [HTML51] or attribute with the semantics and behavior you require already built in, instead of repurposing an element and adding an ARIA role, state or property to make it accessible, then do so.

Three Uses of ARIA for Static Web Pages

While WAI-ARIA attributes are particularly helpful for improving the accessibility of interactive web content, some WAI-ARIA attributes can be useful for enhance accessibility for static web pages. That benefits web designers and front-end & full-stack web developers.

ARIA Attributes for Text Content

These are attributes that clarify the purpose or relationships of elements.

ARIA Attributes for Static Elements

These are attributes for conveying semantic meaning when HTML alone may not suffice/

ARIA Landmarks

See the following section about HTML5 Regions vs. ARIA Landmarks.

For static web pages, ARIA attributes should complement semantic HTML rather than replace it.

HTML Regions and ARIA Landmarks

Both HTML5 regions and ARIA landmarks serve a similar purpose: to improve the structure and accessibility of web pages. They help screen readers and other assistive technologies understand the page's layout and navigate its content more efficiently.

VIDEO: How ARIA landmark roles help screen reader users by Léonie Watson. Published on June 29, 2011. (1:52) This video from Nomensa demonstrates how ARIA landmark roles help screen reader users understand the purpose of different areas of a web page, such as search, navigation or main content.

ARIA Landmarks are fairly well supported in screen readers so most users will be able to take advantage of them. There are some older screen readers that don't support them and some users with newer screen readers might not know how to use this feature. The most helpful data we have on this comes from WebAIM's screen reader survey. While it shows a 42% increase in awareness of ARIA landmarks over the past year, only 40% of people indicate they use them, and a full 30% still don't know that the functionality event exists. That being said, if you only provide ARIA landmarks you will be meeting the letter of the law in terms of providing a way to easily skip repetitive navigation, but not providing the traditional "skip to" links will probably make your site more difficult for some screen reader users to navigate. As with almost everything on the Web, we live in the in-between times where newer and better technologies are out there but adoption isn't high enough to make it the de facto standard. For now, I would still include the "skip to" links in addition to ARIA landmarks.
FROM: Using ARIA Landmarks - A Demonstration from NC State University.

Links for ARIA Landmarks

HTML5 Regions and ARIA Landmarks
Purpose HTML5 Regions ARIA Landmarks (Roles)
Page Header <header> role="banner"
Navigation Section <nav> role="navigation"
Main Content <main> role="main"
Complementary Content <aside> role="complementary"
Form Section <form> role="form"
Generic Region <section> role="region"
Search Landmark There is no HTML element that defines a search landmark. role="search"
Page Footer <footer> role="contentinfo"

HTML5 Elements Example

<BODY>
    <NAV id="navigation"> ... </NAV>
    <HEADER id="header"> ... </HEADER>
    <FORM id="form"> ... </FORM>
    <MAIN id="main">
        <ASIDE id="aside"> ... </ASIDE>
    </MAIN>
    <FOOTER id="footer"> ... </FOOTER>
</BODY>

WAI-ARIA Landmarks Example

<BODY>
    <DIV id="navigation" role="navigation"> ... </DIV>
    <DIV id="header" role="banner"> ... </HEADER>
    <FORM role="form" id="form"> ... </FORM>
    <DIV role="main" id="main">
        <DIV id="aside" role="complementary"> ... </DIV>
    </DIV>
    <DIV id="footer" role="contentinfo"> ... </DIV>
</BODY>

You should use ARIA landmarks instead of HTML regions when the native HTML structure doesn't adequately represent the important sections of your webpage (e.g, HTML 4, XTML.) Note thta HTML5 includes native support for regions which are equivalent to ARIA landmarks.

However in the Page Structure Tutorial (Updated on May 13, 2024), the WC3 advises to maximize compatibility with web browsers and assistive technologies that support WAI-ARIA but do not yet support HTML5, it is currently advisable to use both the HTML5 elements and the corresponding WAI-ARIA roles. In short, use ARIA landmarks in HTML 4.x and XHTML pages. Use both ARIA landmarks and HTML5 regions in HTML5 pages.

HTML5 Elements with WAI-ARIA Landmarks Example

<BODY>
    <NAV role="navigation" id="navigation"> ... </NAV>
    <HEADER role="banner" id="header"> ... </HEADER>
    <FORM role="form" id="form"> ... </FORM>
    <MAIN role="main" id="main">
        <ASIDE role="complementary" id="aside"> ... </ASIDE>
    </MAIN>
    <FOOTER role="contentinfo" id="footer"> ... </FOOTER>
</BODY>

top

Testing

Testing in variety of browsers and operating systems is an accepted best practice. Here are some recommended combinations.

NOTE: The NVDA license is free. The JAWS license is not, but the kind folks at Freedom Scientific allow developers and testers to trst in JAWS in developer modes for 40 minutes at a time without a license.

Screen Reader Functions for Testing
Screen Reader Function JAWS Command NVDA Command
List Headings INSERT+F6 INSERT+F7
List Links INSERT+F7 INSERT+F7
List Regions or Landmarks INSERT+CTRL+R INSERT+F7 (Landmarks Tab)
Navigate to Next Heading H H
Navigate to Previous Heading SHIFT+H SHIFT+H
Navigate to Next Link TAB TAB
Navigate to Previous Link SHIFT+TAB SHIFT+TAB
Navigate to Next Region R D
Navigate to Previous Region SHIFT+R SHIFT+D
Start Reading from Current Position INSERT+DOWN ARROW INSERT+DOWN ARROW
Stop Reading CTRL CTRL
Open Elements List INSERT+F3 INSERT+F7
Announce Current Element INSERT+TAB NVDA+TAB

For more, see the Screen Reader Cheatsheets at Deque University.

Wherever possible have people with disabilities test the documents and try to recruit people with a variety of disabilities. If only testing with blind people, don't ignore the needs of people who are colorblind, have limited vision, motor difficulties, hearing impaired, etc.

A11y Testing Links

top

Captioning Videos

Just as buildings without ramps bar people who use wheelchairs, online content without captions excludes individuals who are deaf or hard of hearing.
- National Association of the Deaf in a legal complaint against federal lawsuits against Harvard and M.I.T.

Everything You Need to Know About Captioned Videos by Meryl Evans

top

Word and other Microsoft Office Documents

Best Practices for Word A11y

  1. When available, use a11y Microsoft Office (MSO) templates. If a11y templates are unavailable, create one.
  2. Tag the language. This is especially valuable when writing the document in a language other than English. It allows screen reading software to pronounce the text correctly. In Word: go to the FILE tab > select the Options option > Select the Language option > Select the language > Click the OK button.
  3. Use the styles provided by Microsoft Office to ensure the headings are recognized by screen readers. Apply semantic markup rather than decorative markup for the document data structure (e.g., title, headings, lists, blockquotes.)
  4. Use Alternative Text for Images. See the Alternative (ALT) Text section elsewhere on this page for more information.
  5. Use Meaningful Hyperlink Text. When adding hyperlinks, use descriptive and meaningful text that describes the link destination. Avoid using phrases like "click here" or "read more."
  6. Use Consistent Formatting. Use consistent formatting throughout the document to make it easier to read and understand. For example, use the same font type, size, and color throughout the document.
  7. Use of Color. When using more colors than the simple "black text on white background" format. Use high color contrast between text and background colors to make it easier for people with visual impairments to read the document. See the Color section earlier in this page.
  8. Use tables properly.
    • Use tables only to display tabular data. Do not use tables for layout. Regardless of intent, screen reader software will try to interpret and describe tables assuming they contain tabular data. This unnecessary information can confuse and frustrate users of screen reading software.
    • Use Accessible Tables that are Simple and Easy to Read
      1. Use the built-in table formatting features to create accessible tables.
      2. Include header rows when inserting tables in Word.
      3. Avoid complex tables (e.g., merging table cells.)
    See the Tables section earlier in thie page for more infomation and examples.
  9. Use Descriptive File Names. When saving the document, use descriptive file names that accurately describe the content of the document.
  10. Check for Accessibility
    • Use the accessibility checker provided by Microsoft Office to check for any accessibility issues in the document. The accessibility checker will identify any issues and provide suggestions for how to fix them.
    • Alternately, set the Accessibility Check to run by default whenever working in Word.
    • But automated testing alone will not be adequate. Manual testing is necessary.
    • See the Testing section elsewhere on this page.

top

Portable Document Format (PDF)

A Brief History of the Portable Document Format

Adobe created the Portable Document Format (PDF) in 1993 to address the incompatibility of different computer systems, which often distorted document formatting during transfer. PDFs offered a solution by enabling the sharing and printing of documents with consistent layout, fonts, and images across various platforms.

Since then, PDFs have evolved beyond simple printing. They are now widely used for eBooks, contracts, interactive forms, and digital archiving. Features like clickable links, multimedia, and digital signatures have made PDFs adaptable to modern digital needs.

But PDFs present some limitations. Many lack proper tagging or alternative text, hindering accessibility for users of assistive technologies. Additionally, they can become bloated with unnecessary data, impacting loading and sharing speeds. While PDFs excel at preserving document appearance, they are less suitable for editing and adapting to smaller screens compared to other formats.

PDF vs Web Pages

Comparison: PDF vs Web Pages
Feature PDF Web Pages
Accessibility Limited if not properly tagged Highly customizable for accessibility
Layout Consistency Always consistent Can vary based on screen size and browser (e.g., Responsive Design)
Editability Difficult to edit without special tools Easy to update
Interactivity Supports forms and multimedia Highly interactive with JavaScript and CSS
File Size Can become large with images or media Typically smaller and loads dynamically

A11y PDF Basics

Fillable PDF Forms

PDF Titles

Saving the title

  1. Open the document in the Adobe Acrobat editor.
  2. Navigate to "File" > "Properties."
  3. Select the "Description" tab.
  4. Enter the desired title in the "Title" field

This will embed the title as metadata within the PDF file.

Display the title

  1. Open the PDF in Adobe Acrobat.
  2. Go to "File" > "Properties."
  3. Select the "Initial View" tab.
  4. In "Window Options," choose "Document Title" from the "Show" dropdown.

Additional PDF Tools

The most popular software for creating PDFs is Adobe Acrobat. Among other functions it provides OCR, editing, and remediation. But depending how much PDF remeditation you perform, other tools may be helpful or necessary.

Links for PDFs

top

Accessibility Statements

top

Solution Repostitories

For development teams or divisions in companies, it's useful to create online repository of solution resources or use exist repository of existing resources such as Visa Global Accessibility Requirements (VGAR.) It's useful for consistency and efficiency.

top

Accessibility Conformance Test (ACT)

Different testing tools can give different interpretations of the same WCAG rules making audits frustrating and confusing. So, the W3C has created Accessibility Conformance Test (ACT) rules so that testing can be done more consistently. See the W3C's Accessibility Conformance Testing (ACT) Overview for more information.

top

Accessibility Roles and Responsibilities Mapping (ARRM)

ARRM is a framework designed to help teams identify the roles involved in addressing accessibility issues through a "decision tree". It is a Responsibility Assignment Matrix (RAM or RACI matrix)

The following table represents a RACI matrix. Each task or activity is assigned a Responsible (R), Accountable (A), Consulted (C), and Informed (I) role to clarify team responsibilities.

RACI Matrix
Task/Activity Responsible (R) Accountable (A) Consulted (C) Informed (I)
Task 1
Task 2
Task 3

top

W3C Accessibility Maturity Model

The W3C Accessibility Maturity Model is a guide for organizations to evaluate and improve their business processes to produce digital products that are accessible to people with disabilities. Use of the W3C Accessibility Maturity Model will provide organizations informative guidance (guidance that is not normative and does not set requirements) on improving accessibility policies, processes, and outcomes.

This document is designed to work for any size of organization, from small to large corporations or government agencies. Additionally, this is intended to be independent of the requirements set forth in relevant technical accessibility standards, such as the Web Content Accessibility Guidelines (WCAG.)

See Accessibility Maturity Model (W3C Group Draft Note 18 June 2024) on W3C.org.

Four Stages of the W3C Accessibility Maturity Model
Stages Criteria
Inactive No awareness and recognition of need.
Launch Recognized need organization-wide. Planning initiated, but activities not well organized.
Integrate Roadmap in place, overall organizational approach defined and well organized.
Optimize Incorporated into the whole organization, consistently evaluated, and actions taken on assessment outcomes.

top

Accessibility Internet Rally (AIR)

From AIR page on the Knowbility web site:

The Accessibility Internet Rally is an annual accessibility web building contest. Teams of web pros learn about accessibility and use their new skills to compete for top honors by creating a site for a local charity. This fun, friendly competition builds community around the powerful idea of equal access to the web for all.

Everyone who wants to build a more inclusive digital world for people with disabilities should join the Accessibility Interent Rally (AIR)!

I can't recommend AIR enough.

My advice to contestants:

top

Some Annual Conferences

These are three personal recommendations.

top

Austin Accessibility Meetups

top

Certification

W3C's Digital Accessibility Foundations - Introduction to Web Accessibility: introduces a self-paced course from W3C WAI for developers, designers, ux, writers, managers, and advocates. It is designed for technical and non-technical learners, including students, instructors, professionals, and people with disabilities. 16-20 hours. The course is free. Optional certification costs $99

IAAP Certification

IAAP WAS (Web Accessibility Specialist) Exam Preparation (Deque University)

top

Content Management Systems (CMS) for the Web

It's important to understand that no matter how Accessible a CMS platform might be, that Accessibility will be ruined when content authors include non-Accessible content in their pages.

top

WordPress

I'm a handcoder. I have rarely used WordPress and even then just barely. During the AIR contest a few years ago our mentor suggested improvements a few hours before we were to stop development and judging began. None of the other team members were available to make the improvements so I tried to make them. I ended up breaking the site and I dind't know how to fix it. After some rushed research and frantic effort I was able to roll back my improvements and restore the site to a working state.

That said I get asked about WordPress on occasion. Here's the near entirety of my understanding of the topic. I hope it's helpful.

WordPress is an open-source CMS that allows users to easily create, edit, and manage digital content. It launched in 2003 as a blogging platform. It evolved into a tool that supports various types of websites, including e-commerce stores, portfolios, and corporate sites.

Key Features of WordPress

  1. User-Friendly Interface: WordPress is designed for users of all skill levels. Its intuitive dashboard makes it easy to create and manage content without needing extensive technical knowledge.
  2. Themes and Customization: With thousands of free and premium themes available, users can easily customize the appearance of their websites. Themes can be modified further using the built-in WordPress Customizer or through custom CSS.
  3. Plugins: WordPress boasts a vast library of plugins that extend the functionality of a website. From SEO tools to social media integrations, plugins allow users to add features without coding.
  4. SEO-Friendly: WordPress is built with search engine optimization (SEO) in mind. It offers various tools and plugins to help improve a site's visibility on search engines.
  5. Community Support: Being open-source, WordPress has a large community of developers and users who contribute to its growth. This means extensive documentation, forums, and resources are available for troubleshooting and learning.
Graphic listing the key features of WordPress
The easiest way to have an accessible website is to choose themes and plugins that have already considered accessibility. Then all you have to do is add your content without worrying about the underlying code.
- Amber Hinds, CEO of Equalize Digital, Inc.,

Everything for WordPress is best performed from within WordPress. It's not advisable to access files (e.g., .htaccess) directly through FTP, hand-code HTML using a text editor, or develop in an HTML editor (e.g., Dreamweaver.) Use your site's settings and a dedicated WordPress page builder (e.g., Elementor.)

Resources

top

Canva

My best advice for Canva is don't use Canva! It's not A11y. I don't know of any efficient way to remediate it and none of my friends do either.

But if you know a cost effective technique to remediate Canva, let me know.

top

Miscellaneous Links

top

Similar pages on BoutonJones.com

top