Can ChatGPT Audit Your Website for Accessibility?

Background

The new ChatGPT models emerging like o1-Preview are the first to include reasoning capabilities. I wondered if it could audit a website for WCAG AA accessibility.

Steps to complete a WCAG Audit on a single web page

Poe (poe.com) offers a comprehensive platform that integrates multiple AI models, including ChatGPT and various text, image, and video analysis capabilities. While ChatGPT can also perform these audits independently, I've found success using the o1-preview model on either platform is the first version that has this reasoning capability.

The Process is Straightforward:

1. Visit Poe.com or your preferred ChatGPT interface
2. Select the o1-preview model
3. Enter the simple prompt: "Run a WCAG audit on [your-website.com]"

Within seconds, you'll receive an analysis based on the latest WCAG 2.2 guidelines. The report typically provides insights into:

• Core accessibility issues
• Compliance status
• Recommended improvements

Certainly! Based on the content provided for LinkedIn, I will perform an accessibility audit in accordance with the Web Content Accessibility Guidelines (WCAG) 2.2 Level AA. This audit will identify potential accessibility issues and provide recommendations to enhance the website's accessibility for all users, including those with disabilities.        

Overview of WCAG 2.2 Level AA

WCAG 2.2 is organized under four main principles:

1. Perceivable: Information and user interface components must be presentable to users in ways they can perceive.
2. Operable: User interface components and navigation must be operable.
3. Understandable: Information and the operation of the user interface must be understandable.
4. Robust: Content must be robust enough to be interpreted reliably by a wide variety of user agents, including assistive technologies.

Audit Findings and Recommendations

1. Perceivable

1.1 Text Alternatives (1.1.1)

Issue: The content references images and multimedia (e.g., "We’re unlocking community knowledge in a new way" with AI assistance), but there's no indication of alternative text for images.

Recommendation:

• Alt Text for Images: Ensure all images have meaningful alt attributes describing their content or function.
• Decorative Images: Mark purely decorative images with empty alt attributes (e.g., alt="").

1.2 Time-Based Media (1.2.x)

Issue: References to "live videos," "stories," and "newsletters" suggest multimedia content.

Recommendation:

• Captions and Transcripts: Provide captions for all prerecorded and live video content with audio. Offer transcripts for audio-only content.
• Audio Descriptions: Include audio descriptions for video content where visual information is essential.

1.3 Adaptable (1.3.1)

Issue: The structure of the content (headings, lists, forms) must be properly marked up to be interpreted by assistive technologies.

Recommendation:

• Semantic HTML: Use appropriate heading levels (<h1> to <h6>) to represent the page structure. Implement lists (<ul>, <ol>, <li>) for items like "Find the right job or internship for you."
• Form Controls: Ensure that all form elements have associated <label> elements.

1.4 Distinguishable

Issue: Text and interactive elements must meet minimum contrast ratios; content should not rely solely on color to convey information.

Recommendation:

• Color Contrast (1.4.3): Text and images of text should have a contrast ratio of at least 4.5:1. Large-scale text (18pt or 14pt bold) should have a contrast ratio of at least 3:1.
• Use of Color (1.4.1): Ensure that information conveyed with color is also available in text or other visual cues.
• Resize Text (1.4.4): Verify that text can be resized up to 200% without loss of content or functionality.

2. Operable

2.1 Keyboard Accessible

Issue: All functionality must be accessible via keyboard alone.

Recommendation:

• Keyboard Navigation (2.1.1): Test the site to ensure users can navigate and interact with all features using the keyboard (Tab, Enter, Spacebar).
• No Keyboard Trap (2.1.2): Ensure that users can navigate to and away from all interactive elements.

2.2 Enough Time

Issue: Users may need more time to read or interact with content.

Recommendation:

• Adjustable Timing (2.2.1): If there are time limits (e.g., auto-refreshing content), provide options to adjust, extend, or disable them.

2.4 Navigable

Issue: Users need mechanisms to navigate, find content, and determine where they are.

Recommendation:

• Bypass Blocks (2.4.1): Implement a "Skip to main content" link at the top of pages.
• Descriptive Page Titles (2.4.2): Use clear and descriptive titles reflecting the page content.
• Focus Order (2.4.3): Ensure a logical tab order that matches the visual presentation.
• Link Purpose (2.4.4 & 2.4.9): Make link text descriptive (avoid "click here" or "read more").
• Heading and Labels (2.4.6): Use headings and labels that describe the topic or purpose.

2.5 Input Modalities

Issue: Functionality requiring complex gestures may not be accessible to all users.

Recommendation:

• Pointer Gestures (2.5.1): Ensure that all functionality can be operated with simple gestures (e.g., single tap or click).
• Pointer Cancellation (2.5.2): Functions should not be triggered just by the down-event (e.g., mouse down), allowing users to cancel actions by moving away before releasing.
• Label in Name (2.5.3): Ensure that the visible label of a control matches its accessible name.

3. Understandable

3.1 Readable

Issue: The site must declare the language used and manage any language changes.

Recommendation:

• Language of Page (3.1.1): Use the lang attribute in the HTML tag to declare the default language (e.g., <html lang="en">).
• Language of Parts (3.1.2): Indicate any changes in language within the content using the lang attribute (e.g., <p lang="fr"> for French text).

3.2 Predictable

Issue: Navigation and functionality should be consistent to avoid confusion.

Recommendation:

• Consistent Navigation (3.2.3): Keep navigation menus and their order consistent across pages.
• Consistent Identification (3.2.4): Use consistent icons and labels for common actions.

3.3 Input Assistance

Issue: Users should receive help in avoiding and correcting mistakes.

Recommendation:

• Error Identification (3.3.1): Display clear error messages when users make mistakes in forms.
• Labels or Instructions (3.3.2): Provide clear labels and instructions for all form fields.
• Error Suggestion (3.3.3): Offer suggestions for correcting errors (e.g., "Please enter a valid email address").
• Accessible Authentication (3.3.7): Ensure authentication processes (like login) are accessible and do not rely solely on memorization or complex interactions.

4. Robust

4.1 Compatibility

Issue: Content and functionality must be compatible with assistive technologies.

Recommendation:

• Parsing (4.1.1): Ensure HTML and CSS code validate without errors.
• Name, Role, Value (4.1.2): All interactive elements must have appropriate ARIA roles, states, and properties.
• Status Messages (4.1.3): Provide programmatically determined status messages that can be presented to assistive technologies without receiving focus.

Additional Observations

• Games Accessibility:
• Dynamic Content:
• Language Selection:
• Keyboard Focus Indicators:

Summary of Recommendations

1. Ensure Text Alternatives for all non-text content, including images and multimedia.
2. Provide Captions and Transcripts for videos and audio content.
3. Implement Semantic HTML to structure content properly.
4. Verify Color Contrast Ratios and ensure content is perceivable by users with visual impairments.
5. Guarantee Keyboard Accessibility for all functionalities.
6. Provide Clear Error Messages and input assistance on forms.
7. Make Interactive Elements Accessible, including games and dynamic content.
8. Declare Default Language and manage language changes appropriately.
9. Ensure Consistent Navigation and predictable interactions throughout the site.
10. Enhance Compatibility with assistive technologies by following ARIA guidelines.

Conclusion

Improving accessibility is crucial for providing an inclusive experience for all users, including those with disabilities. By addressing the issues identified in this audit and implementing the recommendations, LinkedIn can achieve greater compliance with WCAG 2.2 Level AA standards.

Next Steps

1. Implement Recommendations: Prioritize issues based on impact and complexity.
2. User Testing: Conduct testing with users who have disabilities to gain insights beyond technical compliance.
3. Continuous Monitoring: Accessibility should be an ongoing effort; integrate accessibility checks into regular maintenance.
4. Accessibility Statement: Publish an accessibility statement outlining your commitment and providing a way for users to report issues.

Note: This audit is based solely on the content provided and may not cover all aspects of the actual website's accessibility. For a comprehensive evaluation, consider conducting a full audit that includes testing with the live website and assistive technologies.

Final thoughts

Is it perfect? Not really. It offers a gauge of accessibility.

While exploring AI's capabilities in accessibility testing, I discovered both its potential and limitations. When asked to quantify a page's compliance as a percentage, the AI acknowledged its constraints and instead provided a structured analysis of strengths, weaknesses, and actionable next steps.

I was particularly impressed when discussing accessibility overlays. Rather than endorsing quick-fix solutions, the AI emphasized the importance of developing comprehensive remediation plans that integrate accessibility throughout the development process.

However, AI won't replace human expertise in accessibility auditing anytime soon. Its true value lies in augmenting human efforts by:

• Providing initial assessments
• Highlighting potential issues
• Suggesting preliminary remediation steps
• Streamlining the audit process

While automated tools can accelerate testing, thorough manual audits remain the gold standard for ensuring genuine accessibility. AI serves best as a complementary tool, enhancing—rather than replacing—human expertise in creating truly inclusive digital experiences.

Remember: True digital inclusion isn't about ticking boxes—it's about creating experiences that work for everyone. Whether you're just starting or enhancing existing practices, every step towards accessibility is a step worth taking.

Essential WCAG Resources

? W3C Web Content Accessibility Guidelines (WCAG) 2.2 https://www.w3.org/TR/WCAG22/

? W3C WCAG 2.2 Quick Reference https://www.w3.org/WAI/WCAG22/quickref/

? Understanding WCAG 2.2 https://www.w3.org/WAI/WCAG22/Understanding/

What's your experience with AI-powered accessibility testing? Let's continue the conversation in the comments below.