Künstliche Intelligenz für mehr Menschlickeit nutzen
Ich bin kein Web-Designer/Entwickler/Admin/Experte oder ähnliches. Hin und wieder landen aber Anfragen rund um Websites auf meinem Tisch. Aus gegebenem Anlass, möcht ich in diesem Artikel beschreiben, wie ich Künstliche Intelligenz nutze, um die Barrierefreiheit auf beliebigen Websites oder digitalen Produkten zu erhöhen. Ziel ist es, mit Hilfe von crewAI eine Website zu scrapen und auf Barrierefreiheit zu prüfen. Anschließend sollen konkrete Handlunsanweisungen gegeben werden, um die Barrierefreiheit zu verbessern.
Digitale Barrierefreiheit
Digitale Barrierefreiheit ist ein zentraler Aspekt moderner Webentwicklung und garantiert, dass digitale Inhalte für alle Nutzer zugänglich sind, einschließlich Menschen mit Behinderungen. Die Web Content Accessibility Guidelines (WCAG) 2.1 bieten hierfür einen klaren Rahmen und definieren Anforderungen in drei Konformitätsstufen: A (grundlegend), AA (empfohlen) und AAA (höchste Zugänglichkeit). Diese Richtlinien umfassen Aspekte wie wahrnehmbare Inhalte (z. B. Alternativtexte für Bilder), nutzbare Navigationselemente und verständliche Inhalte. Insbesondere die Stufe AA ist weit verbreitet und gilt als Standard für die Barrierefreiheit vieler Unternehmen und Behörden. Mit einer WCAG-konformen digitalen Präsenz können Organisationen nicht nur rechtliche Vorgaben einhalten, sondern auch eine breitere Zielgruppe erreichen und inklusive Nutzererfahrungen schaffen.
Lass uns coden!
Wir folgen wieder den Anweisungen unter https://github.com/crewAIInc/crewAI, wie auch schon als ich meine erste Gang gegründet hatte.
pip install 'crewai[tools]'
crewai create crew accessibility
Für das Modell nutze ich gpt-4o und gebe meinen OpenAI API Key ein.
Wir passen die vorhandenen zwei Agents wie folgt an:
accessbility_expert:
role: >
Accessibility Expert
goal: >
Identify Accessibility Issues on websites and derive actions to address them
backstory: >
You're a seasoned expert in web accessibility with a knack for achieving WCAG 2.2 AAA ratings.
Known for your ability to be pragmatic, you also give alternatives to achieve AA ratings.
web_developer:
role: >
Senior Web Developer
goal: >
Improve Website Accessbility
backstory: >
You're a meticulous Web Developer with a keen eye for detail. You're known for
your ability to turn complex requirements into reality, making sure a website can be accessed by anyone.
Anschließend werden die vorhandenen Tasks angepasst und an die Agents verteilt:
research_task:
description: >
Conduct a thorough research about the web accessibility of {website}
Make sure you crawl subsites on the same domain and test the various sites against WCAG 2.2 AA and AAA requirements.
expected_output: >
A list with bullet points to improve the accessibility of the website to achieve WCAG 2.2 AA and AAA ratings
agent: accessbility_expert
implementation_task:
description: >
Review the context you got and address each issue found in it.
Give directions on how to addess these issues in a wordpress environment using elementor.
expected_output: >
A fully fledged report to improve accessibility of {website}, each with a full section of information.
Formatted as markdown without '```'
agent: web_developer
Im konkreten Fall liegt eine WordPress Instanz mit Elementor vor, was hier hart kodiert dem Task mitgegeben wird. Könnte man noch parametrisieren…
Dann passen wir crew.py an und fügen das SeleniumScrapingTool hinzu, welches unser Accessibility Expert nutzt:
from crewai import Agent, Crew, Process, Task
from crewai.project import CrewBase, agent, crew, task
from crewai_tools import SeleniumScrapingTool
scrapertool = SeleniumScrapingTool()
@CrewBase
class Accessbility():
"""Accessbility crew"""
agents_config = 'config/agents.yaml'
tasks_config = 'config/tasks.yaml'
@agent
def accessbility_expert(self) -> Agent:
return Agent(
config=self.agents_config['accessbility_expert'],
tools=[scrapertool],
verbose=True
)
@agent
def web_developer(self) -> Agent:
return Agent(
config=self.agents_config['web_developer'],
verbose=True
)
@task
def research_task(self) -> Task:
return Task(
config=self.tasks_config['research_task'],
)
@task
def implementation_task(self) -> Task:
return Task(
config=self.tasks_config['implementation_task'],
output_file='report.md'
)
@crew
def crew(self) -> Crew:
"""Creates the Accessbility crew"""
return Crew(
agents=self.agents,
tasks=self.tasks,
process=Process.sequential,
verbose=True,
)
Zu guter letzt sagen wir unserer Crew in der main.py noch, um welche Website es sich handelt:
#!/usr/bin/env python
import sys
import warnings
from accessbility.crew import Accessbility
warnings.filterwarnings("ignore", category=SyntaxWarning, module="pysbd")
def run():
"""
Run the crew.
"""
inputs = {
"website": "https://example.com/"
}
Accessbility().crew().kickoff(inputs=inputs)
def train():
"""
Train the crew for a given number of iterations.
"""
inputs = {
"website": "https://example.com/"
}
try:
Accessbility().crew().train(n_iterations=int(sys.argv[1]), filename=sys.argv[2], inputs=inputs)
except Exception as e:
raise Exception(f"An error occurred while training the crew: {e}")
def replay():
"""
Replay the crew execution from a specific task.
"""
try:
Accessbility().crew().replay(task_id=sys.argv[1])
except Exception as e:
raise Exception(f"An error occurred while replaying the crew: {e}")
def test():
"""
Test the crew execution and returns the results.
"""
inputs = {
"website": "https://example.com/"
}
try:
Accessbility().crew().test(n_iterations=int(sys.argv[1]), openai_model_name=sys.argv[2], inputs=inputs)
except Exception as e:
raise Exception(f"An error occurred while replaying the crew: {e}")
Dann noch die Abhängigkeiten installieren und die Crew starten:
crewai install
crewai run
Die Ergebnisse werden dann in report.md geschrieben, hier ein Beispiel einer Seite, die analysiert wurde:
# Accessibility Improvement Report for https://example.com/
Enhancing the accessibility of the website involves addressing several key areas. Below, I provide detailed directions on how to address each issue using WordPress with Elementor:
## 1. Navigation and Link Accessibility
### Problem:
- Navigation elements and links need to be accessible via keyboard and screen readers.
- Current link text such as "Mehr erfahren" lacks descriptive context.
- Lack of skip navigation links hinders usability for keyboard users.
### Solution:
- *Keyboard Navigation*: Ensure that all interactive elements are navigable using the Tab key. Use Elementor's settings to assign "tabindex" where necessary.
- *Descriptive Links*: Replace "Mehr erfahren" with more descriptive link text within Elementor by editing the link field text directly in the Elementor editor to specify the context of the link.
- *Skip Navigation Links*: Add a skip navigation link using the HTML widget in Elementor. Place this at the beginning of the page template, hidden from view but accessible to screen readers, using CSS.
---
## 2. Text and Content Accessibility
### Problem:
- Text contrast does not meet minimum WCAG 2.2 AA contrast ratios.
- Headings are not used in a logical order.
- Language settings may not be indicated, affecting screen reader support.
### Solution:
- *Text Contrast*: Use Elementor's design panel to adjust colors for text elements to meet contrast requirements. Consider using online tools like the WCAG Contrast Checker to identify optimal color combinations.
- *Headings Structure*: Reorganize content using Elementor's heading widgets, ensuring a logical order (e.g., h1 for titles, h2 for section headings).
- *Language Indication*: In the WordPress settings under "Settings" -> "General", ensure the site's language is correctly set. Implement language attributes in the HTML using Elementor's Custom Attributes panel.
---
## 3. Image Accessibility
### Problem:
- Missing or inappropriate alt-text for images.
- Decorative images not marked for assistive technology.
### Solution:
- *Alt-text for Images*: Using Elementor, assign meaningful alt-text to images by clicking on the image widget and editing the image properties. Alt-text should describe the image's content or function.
- *Decorative Images*: Set decorative images to have an empty `alt=""` attribute to signal assistive technologies to ignore them. This setting can also be accessed through the image properties in Elementor.
---
## 4. Multimedia and Interaction Accessibility
### Problem:
- Missing transcripts or captions for video/audio content.
- Interactive content needs keyboard compatibility and assistive feedback.
### Solution:
- *Transcripts/Captions*: Use a transcription service to provide captions for videos. Upload these with your multimedia using Elementor’s media controls or plugins like VideoPress to embed.
- *Interactive Content*: Test all Elementor interactive elements for keyboard navigation. Use the widget’s Advanced Tab to ensure focusable content and try JavaScript enhancements for feedback.
---
## 5. Focus and Visual Indicators
### Problem:
- Lack of visual indicators for focused elements.
### Solution:
- Use Elementor's Custom CSS to enhance focus visibility. For example:
```css
a:focus, button:focus {
outline: 2px dashed #000;
outline-offset: 2px;
}
This customization makes it easier for users to track their position when tabbing through the site.
6. General Usability Enhancements
Problem:
- Inconsistent navigation or layout can increase cognitive load.
- Error messages might not provide enough guidance.
Solution:
- Consistent Navigation: Verify consistency by reviewing the Elementor Page Templates and Global Widgets. Templates should be uniform in layout.
- Descriptive Error Messages: Add custom error message text to form fields directly through Elementor’s form widget settings. Messages should explain the cause of error and potential fixes.
Implementing these strategies using Elementor and WordPress will ensure that the website is both compliant with WCAG 2.2 AA and AAA standards and accessible to a broader audience.
## Nicht perfekt, aber ein guter erster Schritt
Die generierten Empfehlungen sind sicher nicht vollständig, um ein AAA Rating im ersten Anlauf zu erhalten, geben aber Anhaltspunkte, die konkret genug formuliert sind, um tatsächlich die Barrierefreiheit einer Website zu erhöhen, sogar unter Berücksichtigung der unterliegenden Technologie (in diesem Fall WordPress mit Elementor). So können nach und nach Verbesserungen erzielt werden, die in einem zweiten oder dritten Lauf der Crew immer vollständiger werden.