gpt4 book ai didi

wai-aria - ARIA - 您是否需要将 ARIA-EXPANDED 与 ARIA-HIDDEN 一起使用?

转载 作者:行者123 更新时间:2023-12-04 18:42:43 34 4
gpt4 key购买 nike

我是 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>

最佳答案

使用 RDF model帮助图:

RDF Data Model Diagram
aria-expandedtreeitem 定义角色通过继承。
aria-hidden为所有角色定义,但有以下警告:

Note: Authors are advised to avoid using aria-hidden="false" with styles or attributes that have historically prevented rendering in all modalities, such as display:none or visibility:hidden in CSS, or the hidden attribute in HTML 5. At the time of this writing, aria-hidden="false" is known to work inconsistently when used in conjunction with such features. As future implementations improve, use caution and test thoroughly before relying on this approach.



结果, aria-expanded本身应该就足够了。

引用文献
  • WAI-ARIA Taxonomy
  • WAI-ARIA RDF Model
  • aria-expanded
  • aria-hidden
  • 关于wai-aria - ARIA - 您是否需要将 ARIA-EXPANDED 与 ARIA-HIDDEN 一起使用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21832334/

    34 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com