ARIA - 您是否需要使用ARIA-EXPANDED与ARIA-HIDDEN？

Question

我是ARIA角色的新手.如果我有工具提示类型功能,即如果有人单击问号按钮,则会显示更多文本,详细说明如何填写表单字段,我应该使用aria-expanded属性,aria-hidden属性还是两者？

<div class="login-form-field tt-highlight">
    <div class="error-message error-style">
        <p>Sorry you have not entered anything in the field above.</p>
    </div>
    <div class="col-xs-10 col-sm-10 col-md-10"> 
        <label for="inputTxtCustomerPostcode" class="login" />Postcode:</label>
        <input id="inputTxtCustomerPostcode" type="text" />
    </div>
    <div class="col-xs-2 col-sm-2 col-md-2">
        <a title="Please enter a valid case reference tooltip" class="login-tooltip" data-toggle="collapse" data-parent="#accordion" href="#collapseTxtCustomerPostcode" role="button" aria-pressed="false"></a>
    </div>

    <div id="collapseTxtCustomerPostcode" class="panel-collapse collapse" role="tree tooltip">
        <div class="panel-body" role="treeitem" aria-expanded="false" aria-hidden="true">
            <p>some text goes here for the tooltip</p>
        </div>
    </div>
</div>

Answer 1

使用RDF模型图来帮助:

aria-expanded是treeitem通过继承为角色定义的.

aria-hidden 是为所有角色定义的,但有一点需要注意:

注意:建议作者避免对历史上阻止在所有模态中呈现的样式或属性使用aria-hidden ="false",例如display:none或visibility:隐藏在CSS中,或者隐藏在HTML 5中的属性.在写这篇文章的时候,已知aria-hidden ="false"在与这些特征结合使用时工作不一致.随着未来实施的改进,在依赖这种方法之前要谨慎使用并彻底测试.

因此,aria-expanded本身应该足够了.

参考

• WAI-ARIA分类标准
• WAI-ARIA RDF模型
• 咏叹调扩展
• ARIA隐藏