bootstrap模式关闭按钮aria-hidden = true

根据the bootstrap document，添加aria-hidden="true"告诉辅助技术跳过模态的DOM元素，这说明主modal div中存在aria-hidden=true。bootstrap模式关闭按钮aria-hidden = true

为modal-header div中的模式关闭按钮添加aria-hidden=true的目的是什么？

<!-- Modal --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     **<*div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;  </button> 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
     </div>*** 
     <div class="modal-body"> 
     ... 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
</div><!-- /.modal -->

来源

2014-01-18 Reshma

隐藏在关闭按钮上的咏叹调的目的是在该标记中，“X”或“times” - 符号不会告诉屏幕阅读器很多。

，使之获得的关闭按钮，应该是这个样子：

<button type="button" title="Close"> 
    <span aria-hidden="true">&times;</span> 
    <span class="hide">Close</span> 
</button>

而且在视觉上隐藏.hide内容与CSS。

来源

2014-02-05 09:08:26

hallo @Daniel，我只是想问你为什么要使用咏叹调隐藏？如果我删除它的工作，因为它是。 – Virbhadrasinh

我们使用'aria-hidden'来隐藏X /'×'，因此屏幕阅读器将不会宣布“x”或“times”，并添加隐藏的可视文本“Close”，以便屏幕阅读器拥有适当的按钮标签。 –

不知道这是回答，但我最近有这个问题，这是我的答案，希望它有帮助。

关闭按钮看起来是这样的

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times; </button>

或

<button type="button" class="close" data-dismiss="modal">&times;</button>

来源

2014-06-02 03:42:17 Britnet

ARIA属性被用来使网页更容易被那些残疾儿童，特别是那些使用屏幕阅读器。看到的好处是，我们可以看到×（x）符号被用作'X'，表示如果点击它，模式将关闭。对于使用屏幕阅读器，如果该模式设置适当的人：

<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

当屏幕阅读器越过这个代码，它会读简单的写着“关闭”。

<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span>&times;</span></button> 

<button type="button" class="close" data-dismiss="modal" aria-label="Close">&times;</button>

当由屏幕阅读器读取这两种会导致同样的结果，它说：“关闭乘法符号按钮”或诸如此类的话。

<button type="button" class="close" data-dismiss="modal" aria-label="Close" aria-hidden="true">&times;</button>

在最后这种情况下，加入ARIA隐藏=“真”的按钮本身就会使屏幕阅读器忽略整个关闭按钮，迫使用户继续阅读到页脚找到之前关闭按钮（如果页脚中有一个关闭按钮，如果没有关闭按钮，他们将很难关闭它）

典型Web用户的功能在所有这些示例中都是相同的，但对于一部分人群来说，在设计，布局和标签布局方面需要注意和考虑可能是经常访问的网站和网站之间的差异网站再也没有访问过。

我知道我在这里谈论了一些话题，但是当使用aria-attributes时，只是假装你正在运行屏幕阅读器并且直观地看到内容，只能通过视觉理解的内容应该在其上具有咏叹调隐藏标签，并且ARIA标签系统提供了更多类型的标签，以向需要它的人提供附加信息，包括仅对屏幕阅读器可见的元素。

来源

2015-03-27 15:29:40

@丹尼尔孙子的答案应该是公认的答案。

只是加了一点东西：引导还提供了SR-只类隐藏“无障碍”的元素。

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 

<button type="button" class="sr-only" data-dismiss="modal">Dismiss</button>

@戈德Agarunov - 感谢您非常翔实的答案和ARIA标签。我认为为可访问性添加元素比将新元素嵌套到现有元素更有意义。

来源

2017-01-13 10:29:03 TomerBu

bootstrap模式关闭按钮aria-hidden = true

回答

相关问题