Random Notes on Accessibility

Close up of a button labeled Make Accessible on a computer keyboard
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

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 assume that visitors already have a basic understanding of A11y and web development.

This is a reference document. It is a repository of notes, facts, markup 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.

I welcome constructive criticism and suggestions.

top

Warning: Widgets and Overlays

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

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

I am suspicious, just short of blanket dismisal of any plugins that promise to make any website fully accessible. I can't unilaterally declare that they worsen the problem, but I find it hard to accept claims for plugins 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. But I haven't seen that happen and I don't expect it to.

top

Accessibility Basics

This is not meant to be an introduction to A11y.

For learning the fundamentals of Accessibility, 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 development, I recommend both of the following two books.

top

Video Channels

top

Links

My lists are subjective and not comprehensive.

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

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 person'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:
  1. Learnability: How easy is it for users to accomplish basic tasks the first time they encounter the design?
  2. Efficiency: Once users have learned the design, how quickly can they perform tasks?;
  3. Memorability: When users return to the design after a period of not using it, how easily can they reestablish proficiency?
  4. Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors?
  5. 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

Civics, History, and Soft Skills

Timeline

The timeline for Internet and Accessibility history is located on the Accessibility Timeline page.

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

Discrimination and Ableism

Education, raising of awareness, conscientisation, eradication of stigmatisation: these are key elements in achieving non-discrimination against the disabled.
- Nelson Mandela at the Conference for the Disabled on 4 April 4, 2004

Accessibility discrimination (disability discrimination)
the unfair treatment of people with disabilities.
Ableism
The social prejudice and discrimination against people with disabilities. It's based on the idea that people with disabilities are inferior and need to be "fixed". Ableism includes harmful stereotypes, misconceptions, and generalizations about people with disabilities.

Ableism is discrimination.

top

Disability Etiquette and Language

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

The people who design the software and user interfaces may not have a lot of intuition into what makes something accessible for a person with a vision problem, a hearing problem, a motor problem, or a cognitive problem. - Vint Cerf, internet pioneer and Google’s chief internet evangelist.

VIDEO: IMB's Flaming Logo Commercial on YouTube

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

We also need people with those disabilities helping us try things out, test things, and make recommendations, because no one person with a particular disability can speak to the entire spectrum.
- Vint Cerf, internet pioneer and Google’s chief internet evangelist.

top

Web Content Accessibility Guidelines (WCAG)

WCAG Basics

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

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

top

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 continues 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.

top

WCAG Checklists

This list is not meant to be comprehensive or authoritative.

top

Project Management

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, is 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 last.

Additional Links:

Sample Pareto Chart
Website Page Page Views Percent of Total Cumulative Percent of Total
K 116,649 37.94% 38%
B 47,316 15.39% 53%
E 43,477 14.14% 67%
A 37,229 12.11% 80%
H 22,363 7.27% 87%
D 16,709 5.43% 92%
J 11,506 3.74% 96%
F 5,742 1.87% 98%
I 4,125 1.34% 99%
G 2,376 0.77% 100%
       
Total: 307,492 100%  

To rank web pages by visits using Google Analytics, navigate to the "Behavior" section, then "Site Content" and "All Pages" - this report will display all your website pages listed in order of most to least page views, effectively ranking them based on the number of visits each page receives.

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 a new framework which may or may not benefit you. It's bulding upon your existing skills to do a better job communicating more information to a larger audience.

top

Personas

Accessibility personas are fictional users created to embody the needs, goals, behaviors, and challenges of a specific user group. By creating and using personas with disabilities, design and development teams can better empathize with the challenges faced by people with disabilities and build inclusive products that are accessible to everyone. For example, Maria, a visually impaired user, relies on screen readers. Designing with Maria in mind means ensuring images have descriptive alt text, keyboard navigation is available, and text has high contrast. Similarly, Ahmed, who has motor impairments, might benefit from voice commands and customizable controls.

top

Books for Organizational A11y

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.

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 was barely a year old. As a result, 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 refer to 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.

top

Rehabilitation Act of 1973 - Sections 504 & 508

Section 508 of the Rehabilitation Act of 1973 is a federal law requiring federal agencies and those receiving federal funds to acquire, develop, use, and maintain information and communications so people with disabilities can access them.

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. The updates have also harmonized it with European Commission standards.

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

top

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 explicitly 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 as Lawsuit 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

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 an electronic document isn't accessible.

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

top

Other Laws

European Accessibility Act (EAA)

European Accessibility Act
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.

Web Accessibility Directive (EU 2016/2102)

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)

21st Century Communications and Video Accessibility Act
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)

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)

Accessibility for Ontarians with Disabilities Act
Requires private and public organizations to make digital content accessible. Standards align with WCAG 2.0 Level AA for web content.

Texas Admin Codes 206 and 213

Per the Texas Department of Information Resources (DIR): State agencies and institutions of higher education are required to comply with Texas EIR Accessibility statutes and rules to provide accessibility. See EIR Accessibility Requirements, Exceptions, and Exemptions.

206 - Institution of Higher Education Websites

213 - Electronic and Information Resources for
Subchapter B - Accessibility Standards for State Agencies
Subchapter C - Accessibility Standards for Institutions of Higher Education

top

Writing

Keep it simple silly (KISS)

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)

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

A faculty member once asked Richard Feynman to explain a complex physics concept. Feyman started working on a freshman lecture on the topic, but after a few days he admitted "You know, I couldn't do it. I couldn't reduce it to the freshman level. That means we really don't understand it."

If you can't describe what you are doing as a process, you don't know what you're doing. - W. Edwards Deming, American business theorist, composer, economist, industrial engineer, management consultant, statistician, and writer.

Eschew Obfuscation, Espouse Elucidation.

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.

top

Common Grammar and Spelling Pitfalls

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

top

Commonly Confused Homophones

top

I'm on "Team Oxford Comma."

The Oxford comma is the comma placed before the final item in a list of three or more things. For example, in the sentence "I bought apples, oranges, and bananas," the comma before "and" is the Oxford comma. Its purpose is to make the meaning clear and avoid confusion. Some people leave it out, but its use can prevent misunderstandings, especially in more formal or legal writing.

The absence of the Oxford comma has caused significant legal disputes and costly outcomes in several high-profile cases. One notable example is the Oakhurst Dairy case in 2017, where delivery drivers sued their employer over unpaid overtime. The law’s wording, which omitted a crucial comma, created ambiguity. The drivers argued that "packing for shipment or distribution" referred to a single activity they did not perform. The court agreed, resulting in a $5 million settlement.

Another instance occurred in 2006 with Rogers Communications in Canada. A contract clause without an Oxford comma led to confusion over whether a termination notice applied during the initial five-year term or only afterward. Bell Aliant’s interpretation allowed early termination, costing Rogers approximately $2 million.

In 2004, a contract dispute between two U.S. companies arose over intellectual property rights. The lack of an Oxford comma in a critical clause caused differing interpretations, leading to expensive arbitration and legal fees before the case was settled.

top

Links for Writing

top

Markup (HTML) and Styles (CSS)

HTML and CSS Best Practices

top

More on the Benefits of Separation

To illustrate the benefit of separating HTML and CSS, visit the CSS Zen Garden. It is a demonstration of what can be accomplished through CSS-based design. Select any style sheet from the list to load it into this page. The HTML remains the same, the only thing that has changed is the external CSS file.

top

HTML5

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

Another benefit of valid HTML5 is cross border compatibility.

Making the Move to HTML5:

Elements depreciated in HTML 4: <basefont> , <center> , <dir> , <font> , <menu> , <strike> , and <u>. These tags aren't used anymore in HTML 4.

Elements depreciated in HTML5: <acronym> , <applet> , <big> , <frame> , <frameset> , <noframes> , <isindex> , and <tt>. These tags aren't used anymore in HTML5.

CSS for depreciated elements.

/* Highlight depreciated elements in red */
BASEFONT,
BIG,
CENTER,
DIR,
FONT,
FRAME,
FRAMESET,
ISINDEX,
MENU,
NOFRAMES,
S,
STRIKE,
TT,
U
{
    background: red;
    color: white;
}

It's best to restrict the use of this CSS in development, test, and QA environments. Don't use this in production. If you use this technique, quickly scan all of your existing web pages for white text on a red background. That will indicate the use of a depreciated element.

Two uses of CITE in HTML

  1. The <cite> element is used to mark up the title of a cited creative work (e.g. book, play, film.) It is italicized by default. (E.G., <cite>A Tale of Two Cities</cite>)
  2. The cite attribute is to include a reference to the source of quoted material which is contained within a <blockquote> or <q> element. (E.G., <q cite="https://easya11yguide.com/learn/accessible-wordpress-forms/">The first rule of ARIA is no ARIA is better than bad ARIA. ... </q>), <blockquote cite="https://dequeuniversity.com/assets/html/jquery-summit/html5/slides/landmarks.html"> <p>...</p> </blockquote>

top

Strict and Valid HTML

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 readers. With new HTML5 tags like post and aside, and through the implementation of existing 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, the following terms may have different meanings, but the differences are too subtle for me. I think of them as roughly interchangeable.

Plain Old Semantic HTML (POSH)
a concept that encourages web developers and designers to use HTML in a structural way, rather than for presentation. POSH is based on the idea that HTML should be used correctly for its intended purpose, and that semantic HTML should be used whenever possible.
Some principles of POSH include: Using native HTML whenever possible, Using semantic HTML instead of other methods, Avoiding using HTML markup for presentation, and Prioritizing function over visual presentation.
See the POSH home page and Plain Old Semantic HTML: A Perfect Basis for Accessibility.
Properly structured HTML
HTML that follows the required tags and formatting guidelines to ensure a web page is displayed correctly and is easy to navigate
Semantic HTML
A way of using HTML tags to convey the meaning of content in a web page. It helps to structure content based on its meaning, rather than its appearance.
(Web) Standards Compliant
a website built using the established rules and guidelines set by the World Wide Web Consortium (W3C), ensuring the code (HTML, CSS, JavaScript) is structured correctly, is accessible to users with disabilities, and displays consistently across different browsers, essentially adhering to the "best practices" of web development.) See The web standards model - HTML CSS and JavaScript on W3.org.
Strict HTML
a more rigid definition of HTML that excludes presentation attributes and elements that are expected to be phased out in favor of style sheets.
Structural Markup
Markup that reflects the semantic meaning of page content.
Valid HTML
HTML code that adheres to a set of standards, called the HTML specification, and is structured correctly. Valid HTML documents are easier to debug and update, and they are displayed correctly by browsers.
Well-formed HTML
HTML that follows the grammar rules for HTML as defined by the W3C.

The POSH Checklist

From the POSH home page

A Few Strict/Valid HTML Best Practices

Links

top

Semantic Markup

In order for screen readers to recognize a vertical list as a list, the list must be formatted using semantic markup.

Two Bulleted Lists
Bulleted List: Decorative Markup Bulleted List: Semantic Markup

<table>
  <tr><td><img src="../css/images/blueball.gif" alt="blue ball"></td><td>Groucho</td></tr>
  <tr><td><img src="../css/images/blueball.gif" alt="blue ball"></td><td>Chico</td></tr>
  <tr><td><img src="../css/images/blueball.gif" alt="blue ball"></td><td>Harpo</td></tr>
  <tr><td><img src="../css/images/blueball.gif" alt="blue ball"></td><td>Karl</td></tr>
<table>

<ul type="disc" class="blueball">
  <li>Groucho</li>
  <li>Chico</li>
  <li>Harpo</li>
  <li>Karl</li>
</ul>
blue ballGroucho
blue ballChico
blue ballHarpo
blue ballKarl
  • Groucho
  • Chico
  • Harpo
  • Karl
AT doesn't identify the first list (created with decorative markup) as a list. It reads it as a table and it declares that the bullets are images. It makes the experience tedious and confusing for users of AT. AT recognizes the second list (created with semantic markup) as a list. It does not announce bullet points as images.

The Web was designed as an information space, with the goal that it should be useful not only for human-human communication, but also that machines would be able to participate and help. One of the major obstacles to this has been the fact that most information on the Web is designed for human consumption, and even if it was derived from a database with well defined meanings (in at least some terms) for its columns, that the structure of the data is not evident to a robot browsing the Web. Leaving aside the artificial intelligence problem of training machines to behave like people, the Semantic Web approach instead develops languages for expressing information in a machine process-able form.
- Tim Berners-Lee, The Semantic Web Roadmap

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

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 multiple simple tables.

Use tables for tabular data only. Avoid using tables for layout.

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.

Some Website

Navigation

  • Item 1
  • Item 2
  • Item 3

Welcome

This is the right-hand
column of a layout table.

If you use a table for layout in webpage or web application, include role="presentation" in the HTML table tag.

If you use a table for layout in a PDF, remove the table tags.

In using these techniques, AT will ignore the table but read the remaining content as if it is not tabular data.

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 handwritten 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.

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

WCAG guidelines:

Limit the number of typefaces on a site to 3-4.

  1. Decorative typeface (including Fantasy typefaces) for title and headers
  2. Default body typeface (should be easy to read)
  3. Secondary font (WCAG compliant, slightly smaller than default) for captions, labels, etc.,
  4. Sans Serif typeface for smaller text (but still WCAG compliant)
  5. Monospace typeface for displaying code or keyboard input.

Do not use color alone to convey meaning. Example: a pie chart that only uses color to indicate the different portions.

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 and 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."

The Benefits of Developing with a Grayscale Wireframe

A wireframe of a website in grayscale

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.

Comparing Font Sizes

The following table is inexact. The values in the rows are only approximately equal. The Keyword values are browser-dependent and are inconsistent across browsers.

Approximate conversions of font sizes across different units
PointPixelREM (or EM)PercentKeyword
7.5pt10px0.625rem62.5%x-small
9pt12px0.75rem75%small
12pt16px1rem100%medium
13.5pt18px1.125rem112.5%n/a
14pt19px1.167rem116.7%n/a
15pt20px1.25rem125%large
18pt24px1.5rem150%x-large
24pt32px2rem200%xx-large
36pt48px3rem300%n/a
Consolidating Font Sizes on a Legacy Site

Scenario: Several web designers and web developers have worked on a legacy web site for many years without following a style guide. As a result, the site has collected a large number of font sizes over the years. So, the typeface on the site appears inconsistent.

Legacy Site Before Consolidation

<font size="12pt">This little pig went to market,</font><br />
<font size="16px">This little pig stayed home,</font><br />
<font size="1em">This little pig had roast beef,</font><br />
<font size="100%">And this little pig had none,</font><br />
<font size="medium">And this little pig went wee-wee-wee</font><br />
<font size="1rem">All the way home.</font>

The Three Little Pigs rhyme with each line of text being a different size
The six lines have noticeably different sized letters even though the unit sizes "should be" approximately the same.

For a quick fix, I suggest first converting all the font size style attributes to classes and then consolidating the different classes sharing common rules in your CSS file. In the following example, instead of 21 distinct selectors with 21 rules, the CSS specifies 7 distinct rules each with multiple selectors.

.font-tag-size-1,
.keyword-x-small,
.px10 {
    font-size: 0.625rem;
}

.font-tag-size-2,
.keyword-small,
.px13,
 {
    font-size: 0.75rem;
}

.font-tag-size-3,
.keyword-medium,
.px16,
.pt10 {
    font-size: 1REM;
}

.font-tag-size-4,
.keyword-large,
.px18 {
    font-size: 1.125REM;
}

.font-tag-size-5,
.keyword-x-large,
.px24 {
    font-size: 1.5REM;
}

.fonttagsize6,
.keyword-xx-large,
.px32 {
    font-size: 2REM;
}

.fonttagsize7,
.px48 {
    font-size: 3EM;
}

Legacy Site After Consolidation

<p><span class="pt12">This little pig went to market,</span><br />
<span class="px16">This little pig stayed home,</span><br />
<span class="em1">This little pig had roast beef,</span><br />
<span class="cent100">And this little pig had none,<br />
<span class="keyword-medium">And this little pig went wee-wee-wee</span><br />
<span class="rem1">All the way home.</span></p>

The Three Little Pigs rhyme with the text size being consistant.
All six lines have the exact same letter size, even though the names of the classes are different. As a result, the entire text has a uniform appearance.

This is an interim solution. I'm only suggesting this technique for short-term maintenance. Eventually you will want to settle on distinct classes for a few font sizes (e.g., xsmall, small, medium, large, xlarge, xxlarge, xxxlarge.) Like this:

.xsmall {
    font-size: .635REM;
}

.small {
    font-size: .8REM;
}

.medium {
    font-size: 1REM;
}

.large {
    font-size: 1.125REM;
}

.xlarge {
    font-size: 1.5REM;
}

.xxlarge {
    font-size: 2REM;
}

.xxxlarge {
    font-size: 3EM;
}

Important: WCAG suggests 12pt (approx. 1rem) minimum for regular body text and 18pt (approx. 1.5rem) minimum for large text. It might be best to use 1.125rem for the base font and reserve 1rem for the small text so that even the smallest text is legible.

top

Suggested Names form Fields

This table provides recommended name values for common HTML form inputs, ensuring semantic correctness, compatibility, and accessibility.

Recommended Name Values for Common HTML Form Inputs
Field Recommended Name Notes
Full Name name Use for full name. If split into first and last names, use given-name and family-name.
First Name given-name Follows autofill specification.
Last Name family-name Follows autofill specification.
Email Address email Standard for email input.
Phone Number tel Avoid phone as tel matches autofill standards.
Address Line 1 address-line1 First line of the street address.
Address Line 2 address-line2 Optional second line (e.g., apartment, suite).
City address-level2 Matches autofill standards for city or locality.
State/Region address-level1 Use for state, province, or region.
ZIP/Postal Code postal-code Matches autofill for postal or ZIP code.
Country country Use country for ISO 3166-1 alpha-2 codes (e.g., US) or country-name for full names.
Credit Card Number cc-number Use for card numbers.
Expiration Date cc-exp For card expiration dates.
CVV/Security Code cc-csc For card verification codes.
Password password Standard for password fields.

All recommended values are based on autofill standards and accessibility best practices. Adhering to these recommendations, will make forms more accessible, functional, and user-friendly.

top

Image Formats

JPEG
A common format for photos with many colors. Uses lossy compression, resulting in smaller files but potential quality loss. Not suitable for images requiring transparency.
PNG
Excellent for images with transparency, like logos. Uses lossless compression, preserving image quality. Generally larger file size than JPEG. Best suited for simple graphics.
GIF
Supports animations and simple images with limited colors. Uses lossless compression. Limited to 256 colors, unsuitable for detailed images.
WebP
A modern format offering both lossy and lossless compression. Supports transparency and animation. May not be supported by all browsers.
Scalable Vector Graphics (SVG)
An XML-based vector image format for defining two-dimensional graphics supporting interactivity and animation. Used for vector images like icons and logos. Scalable to any size without quality loss. Lightweight and ideal for responsive designs. Not suitable for detailed photos.

Scalable Vector Graphics (SVG)

Because SVG is XML based, every element is available within the SVG DOM. Developers can attach JavaScript event handlers to SVG graphics.

Accessibility

Responsiveness

Performance

Flexibility

Best Practices

top

WAI-ARIA

DISCLAIMER: This is not a deep dive into ARIA.

First Rule of ARIA

The first rule of ARIA is no ARIA is better than bad ARIA. Use semantic HTML first, only add ARIA when needed.
- Commonly cited guideline

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 allow 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 known 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 covered 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, modern 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 (and other Chromium browsers including Edge), 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:

  1. Open the Developer Tools by right-clicking on a page.
  2. Navigate 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

Three More Definitions: RIA, WAI, and 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 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 challenges 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.

top

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-label
Provides a custom label for an element (e.g., a decorative icon with no associated text).
aria-labelledby
References another element that provides the label for this one.
aria-describedby
Points to an element that provides additional information.
Developers can specify an aria-label or aria-labelledby on the containing list element (e.g., <ul>, <ol> or <menu>). Doing so will give the list an accessible name, which can be situationally helpful.
- Scott Ohara in Results of labeling lists (and list items!)

<ul aria-label="some annual conferences">
  <li>axe-con</li>
  <li>SXSW 2025</li>
  <li>John Slatin AccessU</li>
</ul>

top

ARIA Attributes for Static Elements

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

aria-hidden="true"
Hides non-informative content (e.g., decorative images) from assistive technologies. Using aria-hidden="true" and alt="" for decorative images are both valid approaches, but they are used in slightly different contexts and have different purposes.
aria-hidden="true" hides the element and all of its child nodes from all assistive technologies (not just screen readers.) This is useful when the decorative image is not a traditional <img> but is included as a background image in a <div>, <span>, or an icon element (<i>). aria-hidden="true" can be applied to any element, not just images. For example, if the decorative image is part of a styled <div> or is a font icon (<i>), aria-hidden="true" is appropriate. If the decorative image is implemented in a way that isn't accessible via native HTML (<img>), you can use aria-hidden="true" to prevent assistive technologies from wasting time on it. (By default, <div> and other non-semantic elements like <span> are not included in the accessibility tree. However, If the <div> has visible text, focusability, or a role/ARIA attribute, it will be included in the accessibility tree.

<div class="decorative-bg" aria-hidden="true"> This is a pretty picture that has no context. </div>

.decorative-bg {
    background-image: url('decorative-image.jpg');
    height: 200px;
    width: 200px;
}
aria-live
Announces updates to the content dynamically, though it's less commonly needed on otherwise static pages including static pages with dynamic messages added later, announcements triggered by interaction, error notifications, and static page with rare dynamic changes. For example, here's some markup for a form submittal page. If an error occurs, ARIA announces it to the AT.

<form>
    <label for="email">Email:</label>
    <input id="email" type="email" onblur="validateEmail()">
    <div id="error-message" aria-live="assertive" class="hidden"></div>
</form>
aria-current="page"
Indicates the current page or item in a navigation list.

<nav>
    <ul>
        <li><a href="index.html" aria-current="page">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</nav>

top

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.

top

Cautions Against Using ARIA on Static Web Pages

top

top

For sighted users web pages are navigated 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 navigated 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. Bookmarks (in PDFs)
  6. The browser Find function

Without these techniques, screen reader users are limited in how they can navigate. They have no choice but to read the page until they reach the content they 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

A pie chart showing the popularity of different techniques for navigating a web pages with screen readers

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

top

Headings

Heading Basics

Heading Levels: Proper and Improper
Proper Improper
  • <h1>Title</h1>
    • <h2>2nd Level Heading</h2>
      • <h3>3rd Level Heading</h3>
        • <h4>4th Level Heading</h4>
      • <h3>3rd Level Heading</h3>
        • <h4>4th Level Heading</h4>
    • <h2>2nd Level Heading</h2>
      • <h3>3rd Level Heading</h3>
        • <h4>4th Level Heading</h4>
        • <h4>4th Level Heading</h4>
      • <h2>2nd Level Heading</h2>
        • <h3>3rd Level Heading</h3>
          • <h4>4th Level Heading</h4>
  • <h1>Title</h1>
    • <h3>3rd Level Heading</h3>
        • <h5>5th Level Heading</h5>
      • <h3>3rd Level Heading</h3>
        • <h5>5th Level Heading</h5>
    • <h3>3rd Level Heading</h3
      • <h3>3rd Level Heading</h3>
        • <h5>5th Level Heading</h5>
        • <h5>5th Level Heading</h5>
      • <h2>2nd Level Heading</h2>
        • <h3>3rd Level Heading</h3>
          • <h5>5th Level Heading</h5>

top

Heading Difference in HTML and Word

In HTML, the best practice is to a single one heading level one (<h1>) and use subsequent heading levels (<h2>, <h3>, etc.,) to structure subheadings within your content. There are three reasons:

But in Microsoft Word, the TITLE style is meant to represent the main title of a page. When the top heading is TITLE, you can use multiple headings with the heading style of one beneath it.

NOTE: Word's TITLE style is optional but recommended. You can use the heading one style instead.

Headings in HTML vs Word
HTML Word
  • <h1>Page Title</h1>
    • <h1>Sub Heading</h1>
      • <h2>Sub Heading</h2>
        • <h3>Sun Heading</h3>
        • <h3>Sun Heading</h3>
      • <h2>Sub Heading</h2>
        • <h3>Sun Heading</h3>
        • <h3>Sun Heading</h3>
    • <h1>Sub Heading</h1>
  • Page Title (Title style)
    • Sub Heading (Heading level 1)
      • Sub Heading (Heading level 2)
      • Sub Heading (Heading level 2)
    • Sub Heading (Heading level 1)
      • Sub Heading (Heading level 2)
      • Sub Heading (Heading level 2)

top

Headings don't need to look like headings

In this scenario, I've provided headers for navigation with AT, but the content is visually formatted as a typical resume. The headers don't follow the typical header visual formatting.

EXECUTIVE
SUMMARY:

...
Example of a heading appearing to be a header cell in a table.

.resumeWrapper {
    position: relative;
    clear: right;
    height: auto;
    margin: 0px;
    border: 0px solid #0000FF;
}

.resumeTHleft {
    position: absolute;
    width: 18%;
    height: 100%;
    text-align: left;
    font-weight: bold;
    background-color: #DDDDFF;
    color: #0000FF;
    font-size: 1REM;
    border-color: #0000FF;
    border-style: solid;
    border-width: 0px 2px 0px 0px;
    padding: .372REM;
    margin: 0REM 0REM 0REM 0REM;
}

body.resume H4 {
    display: block;
    font-weight: bold;
    color: #0000FF;
    font-size: 100%;
    text-align: left;
}

.resumeTDright {
    text-align: left;
    margin: 0REM 0REM 0REM 18%;
    width: 82%;
    padding-left: 1REM;
}

<div class="resumeWrapper">

  <h2 class="resumeTHleft">EXECUTIVE <br />SUMMARY:</h2>
  <div class="resumeTDright">IT Business Systems Analyst Senior with more than a 10-year background of full-time professional web development experience using ColdFusion and SQL.</div>

</div>

top

Pretty Headings

One technique for using stylized text (images) for headers (h1, h2, etc.,)

When using the following CSS and HTML, screen readers will ignore the background image while sighted users will not see the text.

h1.imagetext {
    font-size: 1px;
    color: #000; /* Fallback for older browsers */
    color: rgba(0, 0, 0, 0.5); /* transparent */
}

<h1 class="imagetext" style="background: url('h1-introduction.png') no-repeat; height: 200px; width: 600px;">
    <span style="text-indent: -5000px">Introduction</span>
</h1>

This is one available technique. I'm partial to it. But it is not the definitive solution. (It has drawbacks.) There are other options.

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

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 by 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 that 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

JavaScript

JavaScript A11y Best Practices

top

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

top

Responsive Web Design and Break Points

Resources

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

top

Testing

Automated testing has value but it is not a substitute for manual testing. A combination of automated and manual is best.

Testing in a 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 test in JAWS in developer mode 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

Accessibility Statements

top

For the Enterprise

Solution Repositories

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 with 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.)

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.

See also:

top

Continuing Education

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 Internet Rally (AIR)!

  • Nonprofits, artists, and community groups that want to work with a team of web pros to create or improve their web site for accessibility.
  • Web professionals (across all roles) who want to learn or improve their inclusive design skills.
  • Experienced accessibility practitioners to serve as trainers, judges, and team mentors.

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

Accessibility Training Course for IAAP CPACC Certification from Deque University
Deque's CPACC exam preparation course is the most widely used IAAP certification prep course available. We have prepared hundreds of people to successfully pass the exam. The course covers the exam topics in detail. The course includes self-check quizzes, and detailed explanations of all the topics on the exam.

Tips

More Certification Links

top

Additional Web Technologies

Social Media

Best Practices

Additional Resources

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.

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 this page for more information 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 on 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

Semantic vs Presentational Markup in Word

Semantic markup conveys important information to screen reader users and allows them to navigate the document. Presentational markup doesn't.

Markup/Styles in Word
Presentational Markup Semantic Markup
  • bold
  • italic
  • underline
  • test color
  • background color
  • borders
  • font-face
  • font-size
  • strike-through
  • line break
  • title
  • header
  • defintion
  • language
  • background color
  • numbered list
  • table
  • label
  • footnote
  • caption
  • citation
Word's ribbon showing the presentational and semantic markup.

top

Title in Word

For Microsoft Word, the term Title applies to two concepts:

Title
  1. the text displayed prominently at the beginning of the document as a heading
  2. the metadata property within the document itself which describes the document's overall topic, accessed through the "File" menu and usually not visible directly within the document content itself.

The two titles are separate and do not have any practical relationship. They must be addressed separately.

To add a title (metadata) to the document properties:

  1. Open the document
  2. Select File
  3. Select Properties
  4. Select the Summary tab
  5. Enter a title in the Title field
  6. Click OK and save the changes

To display the document title (metadata.)

  1. Select File drop-down menu.
  2. Select the Properties option.
  3. Select the Initial View tab in the Document Properties window.
  4. Select Document Title in the Show field

top

Headings in Word

While it’s not required to use the "Title" format, using a heading style like "Heading 1" is strongly recommended.

By applying a designated heading style, such as "Heading 1" or "Title" to the main title, you make it easier for screen readers to identify and navigate the document.

In Word documents, you can use more than one "Level 1" heading. This style is typically reserved for top-level headings, so it works well for multiple primary sections of your document.

Two Valid Ways to Structure Headings in Word
Title on Top Heading 1 on Top
  • Title
    • Heading 1
      • Heading 2
      • Heading 2
    • Heading 1
      • Heading 2
      • Heading 2
  • Heading 1
    • Heading 2
      • Heading 3
      • Heading 3
    • Heading 2
      • Heading 3
      • Heading 3

Using a consistent heading style, such as a title format, helps create a clear visual hierarchy that makes your document easier to read and follow. It also allows you to quickly generate a table of contents and navigate to different sections with ease.

To View Headings (and the Title) in the Navigation Pane:

  1. Go to the View tab
  2. Click the Navigation Pane box
  3. View the headings on the left side of the document
Diplaying the View Panel
Applying a Table of Contents to a Word document

top

Microsoft Excel

Resources for Microsoft Excel A11y

top

Microsoft PowerPoint

Best Practices for PowerPoint A11y

top

My Personal Suggestions for PowerPoint Presentations

I don't follow all of the accepted best practices and conventional wisdom regarding PowerPoint presentations. Here's how I do things differently.

top

Additional Resources for PowerPoint A11y

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.

top

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. Loads dynamically

top

A11y PDF Basics

top

Fillable PDF Forms

If you use a table for layout, remove the tags for tables (used for layout) in the Adobe's Tag Tree.

  1. Select Tools
  2. Select Edit PDF
  3. Select Tag to see the tag tree
  4. Select the table with a right click
  5. Select the Delete Tag option from the context menu

top

PDF Titles

In a PDF, the "title style" refers to the text displayed as the title within the document itself, while "title metadata" is a separate piece of information embedded within the PDF file that describes the document's title and is used for searching and indexing purposes but isn't necessarily visible directly in the document itself.

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.

top

top

Additional PDF Tools

The most popular software for creating PDFs is Adobe Acrobat. Among other functions it provides OCR, editing, and remediation.

Adobe Products for PDFs

BTW, Adobe Illustrator is not for creating or editing PDFs. Instead, it is a vector graphics design program that lets users create a variety of digital and printed images.

Some Alternative Free PDF Editors
Additional PDF Tools

Depending on how much PDF remediation you perform, other tools may be helpful or necessary.

I'm not personally recommending any of the following.

top

Links for PDFs

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 hand coder. I have rarely used WordPress and even then, just barely. During the AIR contest a few years ago, our team's mentor suggested improvements a few hours before the development dead line. 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 didn'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 the prior working state minutes before the dead line.

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 was 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 extends 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

A warning about plugins: This is not so much an A11y issue as a general web design issue. Make sure whatever plugins you adopt provide useful functions and don't require more maintence than the website owner is willing to provide. An example I gave you previously was a "quote of the day" plugin that ran out of new quotations after two weeks. The client loved having the quotes, but quickly became disinterested in supplying new quotations. After a few visits, it became obvious that the site was not being updated.

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