Bootstrap 4 进度条中有 width 和 value-now 的原因是什么？

Question

<div class="progress">
<div class="progress-bar bg-info" role="progressbar" style="width: 50%" 

   aria-valuenow="50" aria-valuemin="0" 
   aria-valuemax="100">
</div>
</div>

第一个 div 是 HTML 的标准容器。第二个 div 的“进度条”来自 bootstrap。

但第二个将 style = "width":50% 和 "value-now"= 50 设置为相同的值。它们是如何连接的，为什么它们必须相同？

如果我删除所有其他 aria 属性并只保留 "style=width"=50% ，它仍然显示 50%。似乎其他属性 - aria-min、aria-max、value-now 无关紧要。

Answer 1

ARIA 属性的存在是出于可访问性的原因。含义：它允许弱视或失明的人通过屏幕阅读器正确访问您的网络内容。

屏幕阅读器会向他们读出这些值，以便他们能够理解您的网络内容。

强烈建议让您的网页内容尽可能易于访问（对于屏幕阅读器设备）。

参考：

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA