当前位置：首页 > news >正文

AI应用的可访问性设计：让产品惠及更多人

news 2026/5/24 23:55:05

AI应用的可访问性设计：让产品惠及更多人

前言

我们的产品上线后，收到了视障用户的反馈："你们的应用很好，但对我来说完全没法用。"

那一刻我意识到：可访问性不是锦上添花，而是产品设计的基本要求。

今天，分享我们是如何改进产品可访问性的。

一、可访问性基础

1.1 什么是可访问性

可访问性（Accessibility）确保产品能被尽可能多的人使用，包括残障人士。

1.2 残障类型与影响

类型	影响	设计考虑
视觉障碍	无法看见屏幕	屏幕阅读器、颜色对比度
听觉障碍	无法听见声音	字幕、手语、视频文字
运动障碍	操作困难	键盘导航、语音控制
认知障碍	理解困难	清晰语言、可预测设计

二、界面可访问性

2.1 语义化 HTML

# Jinja2 模板示例 ACCESSIBLE_TEMPLATE = """ <!-- 不推荐 --> <div class="button" onclick="submit()">提交</div> <!-- 推荐 --> <button type="submit" aria-label="提交表单">提交</button> <!-- 不推荐 --> <div class="modal"> <div class="close">X</div> </div> <!-- 推荐 --> <div role="dialog" aria-modal="true" aria-labelledby="modal-title"> <button class="close" aria-label="关闭">X</button> </div> """

2.2 ARIA 属性

ARIA_EXAMPLES = { "button_with_loading": ''' <button aria-busy="true" aria-label="提交中，请稍候"> 提交 </button> ''', "form_error": ''' <input type="text" aria-invalid="true" aria-describedby="email-error" /> <span id="email-error" role="alert"> 请输入有效的邮箱地址 </span> ''', "live_region": ''' <div aria-live="polite" aria-atomic="true"> {{ status_message }} </div> ''' }

三、AI 交互可访问性

3.1 语音交互

class VoiceInterface: def __init__(self): self.supported_commands = {} def add_command(self, phrase: str, action: str, description: str): """添加语音命令""" self.supported_commands[phrase] = { "action": action, "description": description } def speak(self, text: str, priority: str = "medium"): """语音播报""" if priority == "high": self._announce_immediately(text) else: self._queue_for_speech(text) def _announce_immediately(self, text: str): """立即播报""" # 使用 Web Speech API return f'<script>speechSynthesis.speak(new SpeechSynthesisUtterance("{text}"))</script>'

3.2 屏幕阅读器适配

class ScreenReaderSupport: def generate_description(self, element_type: str, content: dict) -> str: """生成屏幕阅读器描述""" descriptions = { "chat_message": f"用户 {content['user']} 说：{content['message']}", "ai_response": f"AI 助手回答：{content['response']}", "loading": "正在加载，请稍候", "error": f"错误：{content['message']}" } return descriptions.get(element_type, "") def format_list(self, items: list) -> str: """格式化列表供屏幕阅读器""" if not items: return "列表为空" formatted = [] for i, item in enumerate(items, 1): formatted.append(f"{i}，{item}") return "，".join(formatted)

四、设计原则

4.1 颜色对比度

class ColorContrastChecker: def check_contrast(self, foreground: str, background: str) -> dict: """检查颜色对比度""" fg_luminance = self._get_luminance(foreground) bg_luminance = self._get_luminance(background) ratio = self._calculate_ratio(fg_luminance, bg_luminance) return { "ratio": f"{ratio:.2f}:1", "passes_aa": ratio >= 4.5, # 普通文本 "passes_aaa": ratio >= 7.0, # 增强文本 "recommendation": "通过" if ratio >= 4.5 else "需要提高对比度" }

4.2 键盘导航

class KeyboardNavigation: def get_focus_order(self, page_elements: list) -> list: """计算焦点顺序""" return sorted( page_elements, key=lambda e: (e.get("tab_order", 0), e.get("position_y", 0)) ) def add_shortcuts(self, shortcuts: dict) -> str: """生成快捷键说明""" html = '<div class="keyboard-shortcuts" aria-label="快捷键">' html += '<h3>键盘快捷键</h3><ul>' for key, description in shortcuts.items(): html += f'<li><kbd>{key}</kbd>: {description}</li>' html += '</ul></div>' return html

五、测试与验证

5.1 自动化测试

class AccessibilityTest: def run_axe_test(self, page_html: str) -> dict: """运行 axe 自动化测试""" # 模拟 axe-core 结果 return { "violations": [ { "id": "color-contrast", "impact": "serious", "description": "文本与背景颜色对比度不足", "nodes": ["#header", "#button-primary"] }, { "id": "button-name", "impact": "critical", "description": "按钮没有可访问名称", "nodes": ["#submit-btn"] } ], "passes": 45 }

5.2 手动测试清单

ACCESSIBILITY_CHECKLIST = [ "所有图片都有 alt 文本", "表单有正确的 label 关联", "颜色对比度符合 WCAG AA 标准", "支持完整的键盘导航", "所有交互都有焦点指示", "错误消息使用 aria-describedby 关联", "页面有清晰的标题结构", "动态内容使用 aria-live 通知" ]