Accessibility Attributes

Agora's Accessibility Attributes feature analyzes the content and effectiveness of accessibility attributes on your web pages. This AI-powered feature extracts and evaluates accessibility information from DOM elements to understand how assistive technologies will interpret your content.

Overview

Accessibility Attributes analysis includes:

• Attribute Content Extraction from DOM elements (aria-label, aria-describedby, alt text, title, etc.)
• AI-Powered Content Analysis of accessibility attribute values and effectiveness
• Screen Reader Text Analysis to understand what assistive technologies will announce
• Interactive Element Assessment for buttons, inputs, links, images, etc.
• Content Quality Evaluation of accessibility text for clarity and usefulness

How Accessibility Attributes Analysis Works

Attribute Collection Process

Agora automatically extracts accessibility attributes from your web pages:

Supported Elements

Agora analyzes accessibility attributes from various element types:

• Buttons: Interactive button elements and elements with button role
• Inputs: Form input fields, select elements, and text areas
• Links: Anchor elements with href attributes
• Images: Image elements with accessibility labels
• SVG Elements: Scalable vector graphics with accessibility labels
• Custom Interactive Elements: Elements with ARIA roles like tab, menuitem, etc.

Extracted Attributes

The system collects multiple types of accessibility information:

• aria-label: Direct accessibility labels for elements
• aria-labelledby: References to other elements that label the current element
• aria-describedby: References to elements that provide additional description
• alt: Alternative text for images
• title: Title attributes that provide tooltips and accessibility information
• Element Text: Visible text content that screen readers will announce

Attribute Priority and Processing

The system follows a priority order when analyzing accessibility attributes:

Text Extraction Process

• Element Reference Resolution: For aria-labelledby and aria-describedby, the system finds referenced elements and extracts their text content
• Content Sanitization: Removes line breaks, tabs, and excess whitespace for clean analysis
• Language Detection: Identifies the language of extracted text for proper analysis
• Visibility Checking: Only analyzes attributes from visible elements

AI-Powered Content Analysis

Intelligent Validation

Agora uses AI to evaluate the quality and effectiveness of accessibility attributes:

Content Quality Assessment

The AI analyzes extracted accessibility text for:

• Clarity and Descriptiveness: Whether the text clearly describes the element's purpose
• Context Appropriateness: If the text makes sense within the page context
• User Helpfulness: How well the text serves users of assistive technologies
• Length and Conciseness: Appropriate length for the type of element

Validation Issues Detection

AI identifies common problems with accessibility content:

• Generic or Vague Text: Labels like "click here" or "button"
• Missing Context: Labels that don't provide enough information
• Inconsistent Naming: Similar elements with different labels
• Empty or Placeholder Content: Missing or ineffective accessibility text

Element-Specific Analysis

Button Analysis

For interactive buttons, the AI evaluates:

• Action Clarity: Does the label clearly indicate what the button does?
• Context Sufficiency: Is there enough context to understand the button's purpose?

Link Analysis

For navigation links, the system checks:

• Destination Clarity: Does the link text indicate where it leads?
• Uniqueness: Are link texts distinctive enough to differentiate between links?
• Context Independence: Can the link be understood when read out of context?

Form Input Analysis

For form elements, the AI assesses:

• Label Clarity: Do labels clearly indicate what input is expected?
• Instruction Completeness: Are format requirements and constraints explained?
• Error Prevention: Do labels help prevent user input errors?

Using the Accessibility Attributes Feature

Accessing the Feature

The Accessibility Attributes feature is available in the Live Scan view:

Enabling the Feature

1. Verify License: Ensure you have an AI license for content analysis
2. Navigate to Live Scan: Open any website in the browser view
3. Open Validation Panel: Select "Accessibility Attributes" from the dropdown
4. Start a Scan: Click on 'Validate Attributes' button

Feature Availability

• License Requirement: Requires both Agora and Agora AI licenses
• Live Analysis: Only available during active browser sessions

Analysis Results

Attribute Display

The feature shows extracted accessibility information in an organized format:

• Element Locate: to highlight the element on the page
• Attribute Name: Which accessibility attribute was found (aria-label, alt, etc.)
• Attribute Value: The actual text content of the attribute

Issue Identification

AI analysis highlights potential problems:

• Validation Issues: Problems with attribute content quality
• Improvement Suggestions: Recommendations for better accessibility text
• Context Warnings: Text that may not provide sufficient context

Best Practices

Effective Usage

When to Use This Feature

• Content Quality Review: Evaluate the effectiveness of your accessibility text
• Team Training: Help developers understand what makes good accessibility content
• Quality Assurance: Validate accessibility text before publishing
• Compliance Preparation: Ensure accessibility text meets standards

Maximizing Value

• Regular Analysis: Check accessibility attributes on key pages regularly
• Cross-page Comparison: Look for consistency across similar elements
• User Testing Correlation: Compare AI insights with actual user feedback
• Iterative Improvement: Use analysis results to improve accessibility text over time

Integration Workflow

Development Process

• Design Review: Use during design phase to plan accessibility content
• Implementation Testing: Validate accessibility text during development
• Quality Assurance: Include in QA processes before release
• Post-release Monitoring: Ongoing analysis of live content

Team Collaboration

• Knowledge Sharing: Share analysis insights across development teams
• Standard Creation: Develop team standards based on analysis patterns
• Training Material: Use results to create accessibility training content
• Continuous Learning: Build organizational knowledge about effective accessibility text

Common Use Cases

Content Improvement

• Vague Labels: Identify and improve non-descriptive accessibility text
• Missing Context: Add necessary context to isolated labels
• Consistency Issues: Standardize terminology across similar elements
• Length Optimization: Adjust text length for optimal screen reader experience

Compliance Verification

• WCAG Conformance: Ensure accessibility text meets WCAG guidelines
• Legal Requirements: Verify compliance with accessibility legislation
• Industry Standards: Align with sector-specific accessibility standards
• International Guidelines: Meet global accessibility requirements

Ready to learn about QualiSense? Continue to QualiSense.