高级技巧：HTML ARIA属性详解 - 详细教程与实战指南

<!-- aria-label：直接提供文本标签 -->
<button aria-label="关闭菜单">&times;</button>
<nav aria-label="面包屑导航">...</nav>

<!-- aria-labelledby：引用其他元素作为标签 -->
<div id="dialog-title">确认删除</div>
<div id="dialog-desc">此操作不可撤销，确定要删除吗？</div>
<div role="dialog" aria-labelledby="dialog-title" aria-describedby="dialog-desc">
    ...
</div>

<!-- aria-labelledby可引用多个元素 -->
<h2 id="section-title">用户信息</h2>
<span id="section-count">(3条记录)</span>
<section aria-labelledby="section-title section-count">
    ...
</section>

<!-- aria-hidden：从可访问性树中隐藏元素 -->
<div class="decorative-icon" aria-hidden="true">★</div>

<!-- 注意：可聚焦元素不应设置aria-hidden="true" -->
<!-- 错误做法 -->
<button aria-hidden="true">不可见按钮</button>

<!-- 正确做法：同时禁用和隐藏 -->
<button disabled style="display:none;">不可见按钮</button>

<!-- aria-disabled：声明禁用状态但保留在可访问性树中 -->
<div role="button" aria-disabled="true" tabindex="0" class="disabled-btn">
    提交
</div>

<!-- aria-expanded：表示可展开/折叠的元素状态 -->
<button aria-expanded="false" aria-controls="submenu1">
    产品
</button>
<ul id="submenu1" role="menu" hidden>
    <li role="menuitem"><a href="#">产品A</a></li>
    <li role="menuitem"><a href="#">产品B</a></li>
</ul>

<!-- aria-selected：表示选中状态 -->
<div role="tablist">
    <button role="tab" aria-selected="true" aria-controls="panel1" id="tab1">标签1</button>
    <button role="tab" aria-selected="false" aria-controls="panel2" id="tab2">标签2</button>
</div>
<div role="tabpanel" id="panel1" aria-labelledby="tab1">面板1内容</div>
<div role="tabpanel" id="panel2" aria-labelledby="tab2" hidden>面板2内容</div>

<!-- aria-live：实时区域，内容变化时通知屏幕阅读器 -->
<!-- polite：等用户空闲时播报 -->
<div aria-live="polite" id="search-results-count">
    找到 5 条结果
</div>

<!-- assertive：立即播报，打断当前播报 -->
<div aria-live="assertive" role="alert" id="error-message">
    表单提交失败
</div>

<!-- aria-atomic：是否将整个区域作为整体播报 -->
<!-- true：播报整个区域内容 -->
<div aria-live="polite" aria-atomic="true" id="timer">
    00:05:30
</div>

<!-- false（默认）：只播报变化的部分 -->
<div aria-live="polite" aria-atomic="false" id="chat-messages">
    <p>新消息：你好！</p>
</div>

<div class="tabs">
    <div role="tablist" aria-label="产品信息标签页">
        <button role="tab"
                id="tab-overview"
                aria-selected="true"
                aria-controls="panel-overview"
                tabindex="0">
            概述
        </button>
        <button role="tab"
                id="tab-features"
                aria-selected="false"
                aria-controls="panel-features"
                tabindex="-1">
            功能特性
        </button>
        <button role="tab"
                id="tab-pricing"
                aria-selected="false"
                aria-controls="panel-pricing"
                tabindex="-1">
            价格方案
        </button>
    </div>

    <div role="tabpanel"
         id="panel-overview"
         aria-labelledby="tab-overview">
        <h2>产品概述</h2>
        <p>这是一款功能强大的Web开发工具。</p>
    </div>

    <div role="tabpanel"
         id="panel-features"
         aria-labelledby="tab-features"
         hidden>
        <h2>功能特性</h2>
        <ul>
            <li>智能代码补全</li>
            <li>实时预览</li>
            <li>版本控制集成</li>
        </ul>
    </div>

    <div role="tabpanel"
         id="panel-pricing"
         aria-labelledby="tab-pricing"
         hidden>
        <h2>价格方案</h2>
        <p>免费版 / 专业版 / 企业版</p>
    </div>
</div>

<script>
    const tabs = document.querySelectorAll('[role="tab"]');
    const panels = document.querySelectorAll('[role="tabpanel"]');

    tabs.forEach(tab => {
        tab.addEventListener('click', activateTab);
        tab.addEventListener('keydown', handleTabKeydown);
    });

    function activateTab(event) {
        const selectedTab = event.currentTarget;
        const panelId = selectedTab.getAttribute('aria-controls');

        tabs.forEach(tab => {
            tab.setAttribute('aria-selected', 'false');
            tab.setAttribute('tabindex', '-1');
        });

        panels.forEach(panel => {
            panel.setAttribute('hidden', '');
        });

        selectedTab.setAttribute('aria-selected', 'true');
        selectedTab.setAttribute('tabindex', '0');
        selectedTab.focus();

        document.getElementById(panelId).removeAttribute('hidden');
    }

    function handleTabKeydown(event) {
        const tabArray = Array.from(tabs);
        const currentIndex = tabArray.indexOf(event.currentTarget);
        let newIndex;

        switch (event.key) {
            case 'ArrowRight':
                newIndex = (currentIndex + 1) % tabArray.length;
                break;
            case 'ArrowLeft':
                newIndex = (currentIndex - 1 + tabArray.length) % tabArray.length;
                break;
            case 'Home':
                newIndex = 0;
                break;
            case 'End':
                newIndex = tabArray.length - 1;
                break;
            default:
                return;
        }

        event.preventDefault();
        tabArray[newIndex].focus();
        tabArray[newIndex].click();
    }
</script>

<div class="accordion" role="presentation">
    <div class="accordion-item">
        <h3>
            <button class="accordion-trigger"
                    aria-expanded="true"
                    aria-controls="panel-1"
                    id="trigger-1">
                什么是ARIA？
                <span class="icon" aria-hidden="true">&#9660;</span>
            </button>
        </h3>
        <div class="accordion-panel"
             id="panel-1"
             role="region"
             aria-labelledby="trigger-1">
            <p>ARIA是W3C制定的技术规范，用于增强Web内容的可访问性。</p>
        </div>
    </div>

    <div class="accordion-item">
        <h3>
            <button class="accordion-trigger"
                    aria-expanded="false"
                    aria-controls="panel-2"
                    id="trigger-2">
                什么时候应该使用ARIA？
                <span class="icon" aria-hidden="true">&#9660;</span>
            </button>
        </h3>
        <div class="accordion-panel"
             id="panel-2"
             role="region"
             aria-labelledby="trigger-2"
             hidden>
            <p>当原生HTML元素无法充分表达组件的语义时，才应该使用ARIA。</p>
        </div>
    </div>
</div>

<script>
    const triggers = document.querySelectorAll('.accordion-trigger');
    triggers.forEach(trigger => {
        trigger.addEventListener('click', () => {
            const expanded = trigger.getAttribute('aria-expanded') === 'true';
            const panelId = trigger.getAttribute('aria-controls');
            const panel = document.getElementById(panelId);

            trigger.setAttribute('aria-expanded', !expanded);
            if (expanded) {
                panel.setAttribute('hidden', '');
            } else {
                panel.removeAttribute('hidden');
            }
        });
    });
</script>

<!-- Polite实时区域 -->
<div class="demo-section">
    <h2>Polite通知（等空闲时播报）</h2>
    <button onclick="addPoliteMessage()">添加消息</button>
    <div aria-live="polite" aria-atomic="false" id="polite-region">
        <p>等待消息...</p>
    </div>
</div>

<!-- Assertive实时区域 -->
<div class="demo-section">
    <h2>Assertive通知（立即播报）</h2>
    <button onclick="showAlert()">触发警告</button>
    <div role="alert" aria-live="assertive" aria-atomic="true" id="alert-region">
    </div>
</div>

<!-- 进度条 -->
<div class="demo-section">
    <button onclick="startProgress()">开始上传</button>
    <div role="status" aria-live="polite" id="progress-status">就绪</div>
    <div role="progressbar"
         aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"
         aria-label="上传进度" id="progress-bar">
        <div id="progress-fill" style="width: 0%"></div>
    </div>
</div>

<script>
    function addPoliteMessage() {
        document.getElementById('polite-region')
            .innerHTML = '<p>收到新消息</p>';
    }

    function showAlert() {
        document.getElementById('alert-region')
            .innerHTML = '<p>错误：操作失败，请重试！</p>';
    }

    function startProgress() {
        const bar = document.getElementById('progress-bar');
        const fill = document.getElementById('progress-fill');
        const status = document.getElementById('progress-status');
        let value = 0;

        const interval = setInterval(() => {
            value += 10;
            bar.setAttribute('aria-valuenow', value);
            fill.style.width = value + '%';
            if (value < 100) {
                status.textContent = '上传中... ' + value + '%';
            } else {
                status.textContent = '上传完成！';
                clearInterval(interval);
            }
        }, 500);
    }
</script>

<!-- 规范：标签页组件 -->
<div class="tabs">
    <div role="tablist" aria-label="设置选项">
        <button role="tab"
                id="tab-general"
                aria-selected="true"
                aria-controls="panel-general"
                tabindex="0">
            通用设置
        </button>
        <button role="tab"
                id="tab-privacy"
                aria-selected="false"
                aria-controls="panel-privacy"
                tabindex="-1">
            隐私设置
        </button>
    </div>

    <div role="tabpanel"
         id="panel-general"
         aria-labelledby="tab-general"
         tabindex="0">
        <!-- 面板内容 -->
    </div>

    <div role="tabpanel"
         id="panel-privacy"
         aria-labelledby="tab-privacy"
         tabindex="0"
         hidden>
        <!-- 面板内容 -->
    </div>
</div>

<!-- 规范：自定义按钮 -->
<div role="button"
     tabindex="0"
     aria-label="播放视频"
     aria-pressed="false"
     onkeydown="if(event.key==='Enter'||event.key===' '){this.click();event.preventDefault();}">
    <span aria-hidden="true">&#9654;</span>
</div>

<!-- 规范：进度条 -->
<div role="progressbar"
     aria-valuenow="60"
     aria-valuemin="0"
     aria-valuemax="100"
     aria-label="文件上传进度">
    <div style="width: 60%"></div>
</div>

<!-- 可以引用视觉隐藏的元素 -->
<span id="label-text" style="display:none">完整标签文本</span>
<button aria-labelledby="label-text">简短显示</button>

// 错误：动态创建live区域
function showMessage(text) {
    const div = document.createElement('div');
    div.setAttribute('aria-live', 'polite');
    div.textContent = text;
    document.body.appendChild(div); // 可能不被识别
}

// 正确：更新已存在的live区域
function showMessage(text) {
    document.getElementById('message-region').textContent = text;
}

<!-- 错误：在button上设置heading角色 -->
<button role="heading" aria-level="2">标题</button>

<!-- 正确：使用正确的元素 -->
<h2><button>可点击标题</button></h2>

<!-- 错误：缺少名称 -->
<div role="tablist">
    <button role="tab">标签1</button>
</div>

<!-- 正确：提供名称 -->
<div role="tablist" aria-label="产品分类">
    <button role="tab" aria-selected="true">电子产品</button>
</div>