8.5 Accessibility and usability

Accessibility in Digital Content

Accessibility ensures that digital content can be used by people with diverse abilities and disabilities. Usability ensures that content is efficient, intuitive, and satisfying for everyone. Together, these principles shape how you design websites, apps, documents, and other digital resources so that no one gets locked out of the information they need.

This section covers the standards behind accessible design, core usability principles, practical techniques for creating accessible content, and how to test for both accessibility and usability.

Accessibility in Digital Content

Accessible digital content means that people with visual, auditory, motor, or cognitive disabilities can perceive, navigate, and interact with your work. This goes beyond good intentions. It encompasses the design, development, and maintenance of every digital resource you create.

Benefits of Accessible Design

• Wider audience reach. Accessible content serves people with disabilities, older adults, and anyone using assistive technologies like screen readers or voice controls.
• Better user experience for everyone. Features like keyboard navigation, clear headings, and descriptive links help all users, not just those with disabilities.
• Improved SEO. Semantic HTML, descriptive alt text, and logical heading structures are exactly what search engines look for when indexing your content.
• Legal compliance. Laws like the Americans with Disabilities Act (ADA) and Section 508 of the Rehabilitation Act require accessible digital content in many contexts. Non-compliance can lead to lawsuits.
• Demonstrated commitment to inclusion. Accessible design signals that your organization values diversity, equity, and inclusion in practice, not just in messaging.

Challenges of Inaccessible Content

When content isn't accessible, it creates real barriers. A person using a screen reader can't navigate a page with no heading structure. Someone who is colorblind can't interpret a chart that relies solely on color to distinguish data. A user with limited motor control can't interact with elements that only respond to mouse clicks.

Beyond the human cost, inaccessible content limits your potential audience, increases legal risk, and can damage an organization's reputation. Roughly 1 in 4 adults in the U.S. has some type of disability, so this isn't a niche concern.

Accessibility Standards and Guidelines

Several formal standards govern accessible design:

• Web Content Accessibility Guidelines (WCAG) are the most widely referenced standards. WCAG 2.1 (with WCAG 2.2 now published as of late 2023) defines three conformance levels: A (minimum), AA (the standard most organizations target), and AAA (highest).
• Section 508 of the Rehabilitation Act requires U.S. federal agencies and their contractors to make electronic and information technology accessible. It now references WCAG 2.0 Level AA.
• ARIA (Accessible Rich Internet Applications) is a set of HTML attributes that help make dynamic web content more accessible to assistive technologies. For example, ARIA labels can describe the purpose of a button that only displays an icon.
• ISO standards like ISO/IEC 40500 (which maps to WCAG 2.0) provide international frameworks for accessibility.

For most projects in this course, WCAG AA is the benchmark you should know.

Usability Principles

Usability is about how well a product or interface lets people accomplish what they came to do. A usable design is easy to learn, efficient to use, and hard to mess up. These principles apply to websites, apps, documents, and even physical products.

User-Centered Design Approach

User-centered design (UCD) puts the audience at the center of every decision. Instead of designing based on assumptions, you research your users' goals, preferences, and limitations, then iterate based on their feedback.

This typically involves:

1. Conducting user research (interviews, surveys, observation)
2. Developing personas that represent key user groups
3. Designing and prototyping based on those personas
4. Testing with real users and refining the design

The key idea is that you design with users, not for them in a vacuum.

Learnability and Ease of Use

Learnability refers to how quickly someone can figure out your interface the first time they encounter it. You improve learnability by:

• Using familiar conventions (e.g., a magnifying glass icon for search)
• Writing clear, descriptive labels
• Keeping navigation intuitive and predictable
• Using progressive disclosure, which means showing only the information and options users need at each step, rather than overwhelming them with everything at once

Efficiency and Task Completion

Once users know how the interface works, how fast can they get things done? Efficient design minimizes unnecessary steps, clicks, and decisions. Provide shortcuts for frequent actions, use smart defaults (pre-filling form fields with the most common choice, for example), and make sure pages load quickly. Slow response times are one of the fastest ways to lose users.

Memorability and Retention

If someone uses your product today and comes back in a month, will they remember how it works? Consistent design patterns, terminology, and layout help with this. Features like undo/redo, action history, and clear confirmation messages also reduce the burden on memory.

Error Prevention and Recovery

Good design prevents errors before they happen. Use constraints (like graying out invalid options), input validation (flagging an incorrectly formatted email address before submission), and confirmation dialogs for destructive actions (like deleting a file).

When errors do occur, provide clear messages that explain what went wrong and how to fix it. Autosave and undo functionality protect users from losing their work.

User Satisfaction

Satisfaction is the emotional side of usability. Clean visual design, responsive feedback (like a button that visually responds when clicked), and thoughtful details all contribute. Personalization options and a sense of control over the experience also increase satisfaction. The goal is that users feel competent and comfortable, not frustrated.

Accessibility vs. Usability

These two concepts overlap significantly but aren't identical.

Many accessibility best practices directly improve usability for everyone. Clear headings, keyboard navigation, and sufficient color contrast help all users, not just those with disabilities.

Balancing the Two

Occasionally, accessibility and usability can create tension. Adding detailed alt text for every image improves accessibility but could clutter the experience for sighted users if not handled well. The solution is rarely to choose one over the other. Instead, find approaches that serve both goals, like placing long image descriptions in expandable sections rather than inline.

Inclusive Design

Inclusive design goes a step further than accessibility compliance. It's a methodology that considers the full range of human diversity from the start, designing flexible solutions that adapt to different needs rather than retrofitting accessibility later.

Inclusive design practices include:

• Offering multiple ways to interact with content (mouse, keyboard, touch, voice)
• Providing personalization and customization options
• Testing with participants who have diverse abilities, backgrounds, and levels of digital literacy
• Treating edge cases as design opportunities, not afterthoughts

Accessible Content Creation

Creating accessible content means applying specific techniques so that information is perceivable, operable, understandable, and robust (the four WCAG principles, sometimes called POUR). Here are the most important practices.

Structuring Content with Headings

Headings create a logical outline of your content. Screen reader users often navigate by jumping between headings, so structure matters.

1. Use semantic heading elements (<h1> through <h6>) rather than just making text bold or large.
2. Use one <h1> per page for the main title.
3. Nest subheadings in order: <h2> sections contain <h3> subsections, and so on.
4. Don't skip levels (e.g., jumping from <h2> to <h4>), because this breaks the logical hierarchy that assistive technologies rely on.

Descriptive Link Text and Navigation

Link text should tell users where the link goes without needing surrounding context. "Click here" and "read more" are meaningless to a screen reader user scanning a list of links.

• Instead of: "To learn about WCAG, click here."
• Write: "Read the full WCAG 2.2 guidelines."

Also provide skip navigation links at the top of pages so keyboard users can jump past repeated menus and go straight to the main content. Use ARIA attributes (aria-label, aria-labelledby) when link text alone doesn't fully convey the destination.

Alternative Text for Images

Every image that conveys meaningful information needs an alt attribute describing its content and purpose.

• Keep alt text concise and specific to the context. A photo of a bar chart in a report might need: alt="Bar chart showing Q3 revenue increased 12% over Q2".
• For decorative images that don't add information (like a background pattern), use an empty alt attribute (alt="") so screen readers skip them entirely.
• For complex images like detailed charts or infographics, provide a longer description nearby or on a linked page.

Captions and Transcripts for Media

• Video content needs synchronized captions that include dialogue, speaker identification, and relevant non-speech sounds (like "[door slams]").
• Audio-only content (podcasts, interviews) needs a text transcript.
• Audio descriptions narrate important visual information in videos for users who are blind or have low vision. For example, an audio description might say, "The presenter points to a graph showing a steep decline."

Color Contrast and Readability

Sufficient contrast between text and background is one of the most common accessibility requirements, and one of the most frequently violated.

• Normal text (under 18pt): minimum contrast ratio of 4.5:1
• Large text (18pt or 14pt bold and above): minimum contrast ratio of 3:1
• Never use color as the only way to convey information. If a form field turns red to indicate an error, also add an icon or text label.
• Use legible font sizes (generally 16px minimum for body text on screen), adequate line spacing, and readable typefaces.

You can check contrast ratios with free tools like the WebAIM Contrast Checker.

Keyboard Accessibility and Focus Indicators

Many users navigate entirely by keyboard, either by preference or necessity. Every interactive element (links, buttons, form fields, menus) must be reachable and operable with the keyboard alone.

1. Tab through your page to verify that all interactive elements receive focus in a logical order.
2. Make sure focus indicators are clearly visible. The default browser outline works, but custom styles (a colored border or highlight) can be even clearer. Never remove focus indicators with outline: none without providing a visible replacement.
3. Use tabindex sparingly. A value of 0 adds an element to the natural tab order; a value of -1 removes it. Avoid positive tabindex values, which override the natural order and create confusion.
4. Watch for keyboard traps, where a user can tab into an element (like a modal dialog) but can't tab out.

Usability Testing Methods

Usability testing evaluates how well real users can accomplish tasks with your product. It can happen at any stage, from early wireframes to a finished site, and the method you choose depends on your goals, timeline, and budget.

User Interviews and Surveys

Interviews give you qualitative depth: why users behave a certain way, what frustrates them, what they value. Surveys give you quantitative breadth: how many users prefer option A over option B, or how satisfied they are on a 1-5 scale.

Both can be conducted in person or remotely. Use interviews early in the process to understand user needs, and surveys later to validate patterns across a larger group.

Usability Testing Scenarios

A usability test scenario is a realistic task you ask participants to complete. For example: "You want to find the return policy for an item you purchased last week. Starting from the homepage, show me how you'd do that."

Good scenarios are:

• Based on common or critical user goals
• Specific enough to observe meaningful behavior
• Written without hinting at the "correct" path
• Piloted with a colleague before the real sessions to catch confusing wording

Heuristic Evaluation and Expert Reviews

In a heuristic evaluation, usability experts review the interface against established principles (like Jakob Nielsen's 10 usability heuristics). Multiple evaluators review independently, then compare findings.

This method is fast and relatively inexpensive. It catches design inconsistencies and violations of best practices. However, it can't replace testing with actual users, because experts may miss issues that only surface in real-world use.

A/B Testing and Multivariate Testing

A/B testing compares two versions of a design element (like a button color or headline) to see which performs better on a specific metric (click-through rate, sign-ups, task completion). Multivariate testing compares multiple variables simultaneously.

These tests require enough traffic or participants to produce statistically significant results. Tools like Google Optimize or Optimizely can run these tests on live websites.

Remote Usability Testing Tools

Remote testing lets participants use their own devices in their own environment, which often produces more natural behavior. Sessions can be moderated (a facilitator guides the session in real time via video call) or unmoderated (participants complete tasks on their own, with their screen and voice recorded).

Tools like UserTesting, Maze, and Lookback support remote sessions. Remote testing gives you access to a more geographically diverse participant pool and is often faster and cheaper than in-person sessions.

Accessibility Testing Techniques

Accessibility testing checks whether your content meets standards and actually works for people with disabilities. No single method catches everything, so you need a combination of approaches.

Automated Accessibility Testing Tools

Automated tools scan your pages and flag common issues like missing alt text, insufficient color contrast, or invalid HTML. Popular tools include:

• axe (browser extension and developer tool)
• WAVE (web-based visual feedback tool)
• Lighthouse (built into Chrome DevTools)

These tools are fast and useful for catching low-hanging fruit, but they typically detect only about 30-40% of WCAG issues. They can't evaluate whether alt text is meaningful, whether content makes sense in context, or whether the reading order is logical. They also produce occasional false positives.

Manual Accessibility Audits

Manual audits fill the gaps that automated tools miss. An auditor works through the content using checklists based on WCAG criteria, testing things like:

• Whether heading structure is logical
• Whether form error messages are clear and associated with the correct field
• Whether keyboard navigation flows in a sensible order
• Whether content is understandable without visual context

Manual audits take more time but catch subtler issues that automated scans overlook.

Assistive Technology Compatibility Testing

This means testing your content with the actual tools people with disabilities use. Common combinations include:

• NVDA or JAWS (screen readers) with Firefox or Chrome on Windows
• VoiceOver with Safari on macOS or iOS
• TalkBack with Chrome on Android
• Screen magnifiers like ZoomText
• Voice recognition software like Dragon NaturallySpeaking

You don't need to test every combination, but covering the most common screen reader/browser pairings gives you confidence that your content works.

User Testing with Diverse Audiences

The most reliable accessibility test is watching real people with disabilities use your product. Recruit participants with a range of disabilities (visual, auditory, motor, cognitive) and observe where they succeed and where they struggle.

This requires thoughtful planning: ensure your testing environment and materials are themselves accessible, compensate participants fairly, and create a respectful atmosphere where people feel comfortable giving honest feedback.

Implementing Accessibility and Usability

Making accessibility and usability stick requires more than knowing the guidelines. It needs to be woven into how your team works, from project kickoff through launch and beyond.

Integrating into Design and Development Workflows

1. Include accessibility requirements in project planning and design briefs from the start.
2. Use design systems and component libraries that have accessibility built in (pre-tested color palettes, keyboard-navigable components, ARIA patterns).
3. Run accessibility checks during development, not just at the end. Integrate automated scans into your build process so issues get flagged before code ships.
4. Conduct usability reviews at key milestones (wireframe, prototype, pre-launch).

Educating Stakeholders and Team Members

Everyone on the team plays a role. Designers choose color palettes and layouts. Developers write the code. Content creators write the headings, alt text, and link text. Managers allocate time and budget.

Provide training on accessibility basics for all roles, and deeper technical training for developers and designers. Simulations can build empathy: try navigating your own site with a screen reader, or with your mouse unplugged.

Continuous Improvement and Iteration

Accessibility isn't a box you check once. Technologies change, content gets updated, and new features introduce new potential barriers.

• Review and update your accessibility standards regularly.
• Monitor user feedback, support tickets, and analytics for signs of accessibility problems.
• Conduct periodic audits and compare results against previous benchmarks.

Measuring Success and Impact

Track concrete metrics to show that accessibility and usability efforts are working:

• WCAG conformance levels across your site or product
• Task completion rates from usability testing
• User satisfaction scores (from surveys or post-test questionnaires)
• Assistive technology usage data from analytics
• Support ticket volume related to access or usability issues

These numbers help communicate the value of accessibility work to stakeholders who need to see business impact alongside the ethical case.