@youwen/ai-design-system
Version:
Enterprise AI-driven design system with comprehensive design tokens
342 lines (341 loc) • 13.3 kB
TypeScript
/**
* 可访问性要求标准 (WCAG 2.1 AA级)
* 确保组件符合国际无障碍标准和企业合规要求
*/
export declare const contrastRatios: {
readonly normalText: 4.5;
readonly largeText: 3;
readonly normalTextEnhanced: 7;
readonly largeTextEnhanced: 4.5;
readonly uiComponents: 3;
readonly graphicalObjects: 3;
};
export declare const fontSizeRequirements: {
readonly minimum: {
readonly desktop: "12px";
readonly mobile: "14px";
};
readonly recommended: {
readonly bodyText: "16px";
readonly smallText: "14px";
readonly largeText: "18px";
};
readonly widget: {
readonly big: {
readonly size: "40px";
readonly isAccessible: true;
readonly category: "large";
};
readonly medium: {
readonly size: "24px";
readonly isAccessible: true;
readonly category: "large";
};
readonly small: {
readonly size: "16px";
readonly isAccessible: true;
readonly category: "normal";
};
readonly mini: {
readonly size: "10px";
readonly isAccessible: false;
readonly warning: "低于最小建议尺寸";
};
};
};
export declare const keyboardNavigation: {
readonly requiredKeys: {
readonly Tab: "焦点切换到下一个可交互元素";
readonly 'Shift+Tab': "焦点切换到上一个可交互元素";
readonly Enter: "激活按钮或链接";
readonly Space: "激活按钮或切换状态";
readonly Escape: "关闭弹出层或取消操作";
readonly ArrowKeys: "在相关元素间导航";
};
readonly focusManagement: {
readonly visibleFocusIndicator: true;
readonly logicalTabOrder: true;
readonly focusTrapping: true;
readonly autoFocus: "conservative";
};
readonly focusStyles: {
readonly outlineWidth: "2px";
readonly outlineStyle: "solid";
readonly outlineColor: "var(--ring)";
readonly outlineOffset: "2px";
readonly minContrast: 3;
};
};
export declare const ariaRequirements: {
readonly roles: {
readonly button: "button";
readonly link: "link";
readonly heading: "heading";
readonly list: "list";
readonly listitem: "listitem";
readonly tablist: "tablist";
readonly tab: "tab";
readonly tabpanel: "tabpanel";
readonly dialog: "dialog";
readonly alert: "alert";
readonly status: "status";
};
readonly requiredAttributes: {
readonly 'aria-pressed': "切换按钮的按下状态";
readonly 'aria-expanded': "可展开元素的展开状态";
readonly 'aria-disabled': "元素的禁用状态";
readonly 'aria-label': "元素的可访问名称";
readonly 'aria-labelledby': "引用提供标签的元素ID";
readonly 'aria-describedby': "引用提供描述的元素ID";
readonly 'aria-hidden': "对屏幕阅读器隐藏装饰性元素";
readonly 'aria-live': "动态内容的通知级别";
readonly 'aria-atomic': "是否完整读出live区域";
};
readonly widgetAria: {
readonly container: {
readonly role: "region";
readonly 'aria-label': "数据显示区域";
};
readonly textElement: {
readonly 'aria-live': "polite";
readonly 'aria-atomic': "true";
};
readonly statusIndicator: {
readonly role: "status";
readonly 'aria-live': "polite";
};
};
};
export declare const screenReaderSupport: {
readonly contentStrategy: {
readonly meaningfulText: "确保所有文本内容有意义";
readonly descriptiveLabels: "使用描述性标签";
readonly skipRepetitive: "跳过重复性内容";
readonly structuredContent: "使用结构化标记";
};
readonly dataAnnouncement: {
readonly numbers: "数值 + 单位 + 含义";
readonly percentages: "百分比 + 描述";
readonly status: "状态 + 严重程度";
readonly changes: "变化 + 方向 + 幅度";
};
readonly widgetAnnouncements: {
readonly big: "主要数值：{value} {unit}";
readonly medium: "次要信息：{value}";
readonly small: "辅助信息：{value}";
readonly mini: "详细信息：{value}";
};
};
export declare const motionAccessibility: {
readonly respectMotionPreference: true;
readonly reducedMotionQuery: "@media (prefers-reduced-motion: reduce)";
readonly guidelines: {
readonly duration: {
readonly micro: "100-200ms";
readonly short: "200-300ms";
readonly medium: "300-500ms";
readonly long: "500ms+";
};
readonly easing: "ease-out";
readonly noFlashing: true;
readonly flashThreshold: "3次/秒";
};
};
export declare const touchTargets: {
readonly minimum: {
readonly width: "44px";
readonly height: "44px";
};
readonly recommended: {
readonly width: "48px";
readonly height: "48px";
};
readonly spacing: {
readonly adjacent: "8px";
};
};
export declare class AccessibilityValidator {
validateContrast(foreground: string, background: string, fontSize: number, fontWeight?: number): {
isValid: boolean;
ratio: number;
requirement: number;
level: 'AA' | 'AAA' | 'fail';
};
validateFontSize(size: string, context: 'desktop' | 'mobile'): {
isValid: boolean;
warning?: string;
};
validateTouchTarget(width: number, height: number): {
isValid: boolean;
warnings: string[];
};
private calculateContrastRatio;
}
export declare const bestPractices: {
readonly general: readonly ["提供替代文本给所有图像", "确保键盘可以访问所有交互元素", "使用语义化HTML结构", "提供清晰的错误信息和指导", "支持缩放到200%而不丢失功能"];
readonly widgetSpecific: readonly ["为数值变化提供语音通知", "使用适当的ARIA标签描述数据含义", "确保状态变化对屏幕阅读器可见", "在小屏幕上保持触摸目标大小", "提供数据的文本摘要"];
readonly testing: readonly ["使用键盘测试所有功能", "使用屏幕阅读器测试内容", "验证颜色对比度", "测试动效的reduced-motion支持", "在不同缩放级别下测试"];
};
export type ContrastLevel = 'AA' | 'AAA' | 'fail';
export type FontSizeCategory = 'normal' | 'large';
export type AriaRole = keyof typeof ariaRequirements.roles;
export declare const accessibilityStandards: {
contrastRatios: {
readonly normalText: 4.5;
readonly largeText: 3;
readonly normalTextEnhanced: 7;
readonly largeTextEnhanced: 4.5;
readonly uiComponents: 3;
readonly graphicalObjects: 3;
};
fontSizeRequirements: {
readonly minimum: {
readonly desktop: "12px";
readonly mobile: "14px";
};
readonly recommended: {
readonly bodyText: "16px";
readonly smallText: "14px";
readonly largeText: "18px";
};
readonly widget: {
readonly big: {
readonly size: "40px";
readonly isAccessible: true;
readonly category: "large";
};
readonly medium: {
readonly size: "24px";
readonly isAccessible: true;
readonly category: "large";
};
readonly small: {
readonly size: "16px";
readonly isAccessible: true;
readonly category: "normal";
};
readonly mini: {
readonly size: "10px";
readonly isAccessible: false;
readonly warning: "低于最小建议尺寸";
};
};
};
keyboardNavigation: {
readonly requiredKeys: {
readonly Tab: "焦点切换到下一个可交互元素";
readonly 'Shift+Tab': "焦点切换到上一个可交互元素";
readonly Enter: "激活按钮或链接";
readonly Space: "激活按钮或切换状态";
readonly Escape: "关闭弹出层或取消操作";
readonly ArrowKeys: "在相关元素间导航";
};
readonly focusManagement: {
readonly visibleFocusIndicator: true;
readonly logicalTabOrder: true;
readonly focusTrapping: true;
readonly autoFocus: "conservative";
};
readonly focusStyles: {
readonly outlineWidth: "2px";
readonly outlineStyle: "solid";
readonly outlineColor: "var(--ring)";
readonly outlineOffset: "2px";
readonly minContrast: 3;
};
};
ariaRequirements: {
readonly roles: {
readonly button: "button";
readonly link: "link";
readonly heading: "heading";
readonly list: "list";
readonly listitem: "listitem";
readonly tablist: "tablist";
readonly tab: "tab";
readonly tabpanel: "tabpanel";
readonly dialog: "dialog";
readonly alert: "alert";
readonly status: "status";
};
readonly requiredAttributes: {
readonly 'aria-pressed': "切换按钮的按下状态";
readonly 'aria-expanded': "可展开元素的展开状态";
readonly 'aria-disabled': "元素的禁用状态";
readonly 'aria-label': "元素的可访问名称";
readonly 'aria-labelledby': "引用提供标签的元素ID";
readonly 'aria-describedby': "引用提供描述的元素ID";
readonly 'aria-hidden': "对屏幕阅读器隐藏装饰性元素";
readonly 'aria-live': "动态内容的通知级别";
readonly 'aria-atomic': "是否完整读出live区域";
};
readonly widgetAria: {
readonly container: {
readonly role: "region";
readonly 'aria-label': "数据显示区域";
};
readonly textElement: {
readonly 'aria-live': "polite";
readonly 'aria-atomic': "true";
};
readonly statusIndicator: {
readonly role: "status";
readonly 'aria-live': "polite";
};
};
};
screenReaderSupport: {
readonly contentStrategy: {
readonly meaningfulText: "确保所有文本内容有意义";
readonly descriptiveLabels: "使用描述性标签";
readonly skipRepetitive: "跳过重复性内容";
readonly structuredContent: "使用结构化标记";
};
readonly dataAnnouncement: {
readonly numbers: "数值 + 单位 + 含义";
readonly percentages: "百分比 + 描述";
readonly status: "状态 + 严重程度";
readonly changes: "变化 + 方向 + 幅度";
};
readonly widgetAnnouncements: {
readonly big: "主要数值：{value} {unit}";
readonly medium: "次要信息：{value}";
readonly small: "辅助信息：{value}";
readonly mini: "详细信息：{value}";
};
};
motionAccessibility: {
readonly respectMotionPreference: true;
readonly reducedMotionQuery: "@media (prefers-reduced-motion: reduce)";
readonly guidelines: {
readonly duration: {
readonly micro: "100-200ms";
readonly short: "200-300ms";
readonly medium: "300-500ms";
readonly long: "500ms+";
};
readonly easing: "ease-out";
readonly noFlashing: true;
readonly flashThreshold: "3次/秒";
};
};
touchTargets: {
readonly minimum: {
readonly width: "44px";
readonly height: "44px";
};
readonly recommended: {
readonly width: "48px";
readonly height: "48px";
};
readonly spacing: {
readonly adjacent: "8px";
};
};
bestPractices: {
readonly general: readonly ["提供替代文本给所有图像", "确保键盘可以访问所有交互元素", "使用语义化HTML结构", "提供清晰的错误信息和指导", "支持缩放到200%而不丢失功能"];
readonly widgetSpecific: readonly ["为数值变化提供语音通知", "使用适当的ARIA标签描述数据含义", "确保状态变化对屏幕阅读器可见", "在小屏幕上保持触摸目标大小", "提供数据的文本摘要"];
readonly testing: readonly ["使用键盘测试所有功能", "使用屏幕阅读器测试内容", "验证颜色对比度", "测试动效的reduced-motion支持", "在不同缩放级别下测试"];
};
AccessibilityValidator: typeof AccessibilityValidator;
};