New Jersey Web Presence Hub

Web Accessibility: Issues, Solutions, and Testing Guide

Introduction

This guide combines common accessibility issues with practical solutions and manual testing instructions. It's designed for content editors, developers, and anyone responsible for maintaining accessible websites. Each section covers specific accessibility topics with issues to avoid, solutions to implement, and step-by-step testing procedures.

Collapse All Expand All

Before diving into specific issues, here are three fundamental tests anyone can perform without specialized tools:

Keyboard Testing Keyboard testing is critical because it enables other assistive technologies and requires no specialized tools.

How to test:

  1. Check that all interactions work with a keyboard:
    • Use TAB to move forward through the page and SHIFT + TAB to go backwards
    • Use SPACE and ENTER to activate most elements
    • For custom elements, see WebAIM's keyboard reference 
  2. Confirm that focus is always visible while tabbing (usually a colored border around the element)
  3. Confirm that tabbing follows a logical order (typically top to bottom, left to right in English)

Test that content remains visible and usable when zoomed or resized.

To test content zoom:

  1. Set your browser width to 1280 pixels
  2. Use CTRL + + (or CMD + + on Mac) to zoom to 200% 
  3. Confirm that:
    • All text is still clearly visible
    • All controls are still available and interactive
    • Horizontal scrolling is not present (except for data tables, images, charts, etc.) 

To test text resizing:

  1. Update your browser settings to increase text size:
    • Chrome: Settings > Appearance > Font size
    • Firefox: Settings > Language & Appearance > Fonts
    • Edge: Settings > Appearance > Fonts 
  2. Confirm that all text on the page resizes appropriately

Test both color contrast ratios and that color isn't used alone to convey information.

Testing tools:

To test color contrast:

  1. Small text (20px or smaller) has at least a 4.5:1 contrast ratio
  2. Large text (greater than 20px) has at least a 3:1 contrast ratio
  3. Non-text elements (graphics, UI elements like checkboxes) have at least a 3:1 contrast ratio to their background and neighboring elements

To test use of color:

  1. Check that all links are underlined
  2. Find any charts, tables, maps, or graphs—make sure they use more than just color to convey meaning (add patterns, labels, or icons)
  3. Ensure directions don't rely solely on color (e.g., don't just say "Click the blue button")
Issue Solution How to test
Long, complex sentences are difficult to understand, especially for users with cognitive disabilities or those using translation tools.
  • Use short sentences (average around 20 words)
  • Keep sentences shorter when using difficult words
  • Role: Content Editors
 Review content manually. Read sentences aloud—if you run out of breath, the sentence is likely too long.
Lengthy pages overwhelm users and are difficult to navigate, particularly for those using screen readers or with cognitive disabilities.
  • Divide extensive content into multiple pages with clear navigation links
  • Role: Content Editors
 Review page length and time required to navigate using keyboard or screen reader.
Dense blocks of text are hard to scan and navigate, especially for users with cognitive disabilities or attention difficulties.
  • Break up text with headings, subheadings, and bullet points
  • Use a logical heading structure (H1, H2, H3, etc.)
  • Role: Content Editors
  • Use keyboard to tab through headings
  • Use browser extensions or devtools to view heading outline
  • Verify headings follow logical hierarchy (no skipped levels)
Issue Solution How to test
Vague or generic link text (like "click here") doesn't inform users where the link leads, causing problems for screen reader users who navigate by links.
  • Use clear and descriptive link text that specifies the destination or purpose
  • Role: Content Editors
  • Tab through links on the page
  • Read each link text out of context—does it make sense on its own?
  • Use screen reader link list feature to review all links
Excessive links interrupt reading flow and create confusion for keyboard and screen reader users.
  • Link to other content only when necessary for the user's process or understanding
  • Role: Content Editors
 Navigate the page using only keyboard. Count how many tabs are required to reach main content areas.
Issue Solution How to test
Images without alternative text are completely inaccessible to users with visual impairments using screen readers.
  • Include alt text for all meaningful images
  • Mark decorative images as such (empty alt attribute: alt="")
  • Avoid using images with text (exceptions include logos) as they pose barriers for screen readers, scalability, customization, SEO, and translation
  • Role: Content Editors and Developers
  • Use browser inspector to check for alt attributes on all <img> tags
  • Use automated testing tools to identify missing alt text
  • Review alt text content for descriptiveness
Issue Solution How to test
Audio-only content (like podcasts) is inaccessible to users who are deaf or hard of hearing.
  • Include transcripts for all audio-only content
  • Role: Content Editors
 Check that every audio file has an associated transcript available.
Videos without captions exclude users who are deaf, hard of hearing, or in sound-sensitive environments.
  • Add captions to all audio-visual content
  • Provide transcripts for video content
  • Role: Content Editors and Developers
  • Play videos and verify captions display correctly
  • Check that captions are synchronized with audio
  • Verify captions include relevant sound descriptions
Issue Solution How to test
Using tables for page layout confuses screen readers, which announce table structure inappropriately.
  • Use tables exclusively for presenting data, not for layout
  • Use CSS for visual structure instead
  • Role: Developers
  • Inspect code to identify <table> elements
  • Verify tables contain actual tabular data
  • Test with screen reader to confirm appropriate announcements
Blank table cells create uncertainty and confusion for screen reader users who may not know if data is missing or if there's an error.
  • Avoid blank cells
  • Use "N/A" or "None" to clearly indicate missing data
  • Role: Content Editors
 Review tables visually and with screen reader to identify empty cells.
Improperly marked up tables are difficult or impossible for screen reader users to understand and navigate.
  • Use proper HTML markup: designate headers (<th>), mark data cells correctly (<td>)
  • Provide captions (<caption>)
  • Associate headers with data using appropriate attributes (scope, headers, id)
  • Role: Developers
  • Use screen reader table navigation commands
  • Verify headers are announced correctly
  • Check that relationships between headers and data are clear
Issue Solution How to test
Using color alone to convey information excludes users who are colorblind or have low vision.
  • Don't rely solely on color to communicate information
  • Add icons, labels, or text indicators (e.g., "Error" label in addition to red text)
  • Underline all links
  • Role: Content Editors and Developers
 See "Color and Contrast" section above under Manual Testing Basics.
Insufficient color contrast between text and background makes content illegible for users with low vision or color blindness.
  • Ensure adequate color contrast between text and background
  • Follow WCAG contrast ratio guidelines (4.5:1 for small text, 3:1 for large text)
  • Maintain high color contrast throughout design
  • Role: Developers and Content Editors
 See "Color and Contrast" section above under Manual Testing Basics.
Issue Solution How to test
Interactive elements that can't be accessed via keyboard exclude users who cannot use a mouse.
  • Design web interfaces that can be fully navigated using keyboard
  • Ensure all interactive elements (forms, buttons, menus) are keyboard accessible
  • Role: Developers
 See "Keyboard Testing" section above under Manual Testing Basics.
Missing or unclear focus indicators make it impossible for keyboard users to know where they are on the page.
  • Ensure focus is always visible
  • Provide clear visual focus indicators (usually a colored border)
  • Role: Developers
 Tab through the page and verify focus indicator is always visible and distinct.
Issue Solution How to test
Forms without clear labels, instructions, and error messages are difficult to navigate and understand.
  • Design forms with clear labels associated with inputs
  • Provide helpful instructions
  • Display clear, specific error messages
  • Ensure forms are easily navigable and understandable
  • Role: Developers and Content Editors
  • Navigate forms using only keyboard
  • Submit forms with errors to verify error messages are clear and associated with relevant fields
  • Use screen reader to verify labels are properly announced
Issue Solution How to test
Inconsistent navigation confuses users and makes it difficult to orient themselves across pages.
  • Maintain consistent navigation menus and interface elements across pages
  • Role: Content Editors and Developers
 Navigate through multiple pages and verify navigation structure remains consistent.
Repetitive content forces users to tab through the same elements on every page.
  • Implement skip navigation links to allow users to bypass repetitive content
  • Provide shortcuts to main content
  • Role: Developers
  • Tab to the first element on the page
  • Check for "Skip to main content" or similar link
  • Verify skip link functions correctly
Timed content creates barriers for users who need more time to read or interact.
  • Provide mechanisms to pause, stop, or extend timed content
  • Role: Developers
 Identify any timed elements and verify users can control timing.
Issue Solution How to test
Non-semantic HTML makes content difficult for screen readers to interpret correctly.
  • Use semantic HTML elements (<nav>, <main>, <article>, <button>, etc.)
  • Follow Web Content Accessibility Guidelines (WCAG 2.1 or later)
  • Role: Developers
  • Inspect code to verify semantic elements are used appropriately
  • Test with screen reader to verify correct announcements
Dynamic content and complex web applications may not be properly understood by assistive technologies.
  • Use ARIA (Accessible Rich Internet Applications) attributes to enhance accessibility
  • Ensure dynamic content is navigable and understandable by assistive technologies
  • Role: Developers
  • Test interactive components with screen reader
  • Verify state changes are announced (loading, expanded/collapsed, etc.)

When updating content, remember to:

  • Use descriptive alt text for images
  • Use proper heading structure (H1, H2, H3 in logical order)
  • Provide transcripts and captions for multimedia
  • Maintain high color contrast
  • Use plain, clear language (short sentences, simple words)
  • Write meaningful link text (avoid "click here")
  • Organize content logically with lists and sections
  • Provide context for icons and buttons
  • Break up long text with headings and bullet points
  • Avoid blank table cells
  • Use text labels, not just color, to convey information
  • Avoid images with text (except logos)
  • Review content regularly for accessibility
  • Test with accessibility tools
  • Solicit feedback from users with disabilities

When building or updating sites, remember to:

  • Follow WCAG 2.1 (or later) guidelines
  • Use semantic HTML elements
  • Implement ARIA attributes for dynamic content
  • Ensure full keyboard accessibility
  • Provide text alternatives for non-text content
  • Design responsive layouts
  • Ensure sufficient color contrast (4.5:1 for small text)
  • Test with assistive technologies (screen readers, magnifiers, etc.)
  • Create accessible forms with clear labels and error messages
  • Implement skip navigation links
  • Provide controls for timed content
  • Offer multiple ways to access content
  • Use tables only for data, not layout
  • Mark up tables properly with headers and captions
  • Avoid images with text (except logos)
  • Conduct regular accessibility audits
  • Educate team members on accessibility best practices

Accessibility is an ongoing commitment, not a one-time task:

  1. Review regularly: Periodically audit content and functionality, especially after changes
  2. Test with real users: Include people with disabilities in user testing
  3. Stay educated: Keep up with accessibility standards and best practices
  4. Gather feedback: Encourage users to report accessibility barriers
  5. Train your team: Ensure all contributors understand accessibility requirements

By consistently applying these practices and conducting regular testing, you can ensure your website provides a positive experience for all users, including those with disabilities.

computer keyboard

Back
to top