草庐IT

ACCESSIBILITY

全部标签

html - 为什么不按空格键而 `label` 在 `[for=""]` attr 中有焦点检查单选按钮?

如果我有以下html,当标签具有焦点时按空格键,为什么不检查与其关联的radio?Thefirstradio这让可访问性变得更加困难,是否有非JavaScript的解决方法?这是一个JSFiddle示例:https://jsfiddle.net/atwright147/q0t53v78/ 最佳答案 标签元素不是为了接收键盘焦点。因此只需删除tabindex属性,当此控件获得焦点时,您将能够使用空格键检查radio控件。如果您想控制与输入关联的标签的视觉方面,您可以将CSS更改为:input:focus+label{outline:1

html - 如何使 anchor 标记内的图像可访问?

假设我有一张如下图所示的图片。根据WCAG的说法,这张图片是实用的,因为它将用户链接到另一个页面。似乎我应该将链接的目标放在alt属性中,例如alt="comichomepage"。有视力障碍的人不会也想知道图像显示的是什么吗?该用户会喜欢alt="comicthatlinkstothecloudtweakshomepage"这样的东西吗?漫画似乎不是纯粹的装饰。Thispage做类似的事情(滚动到页面底部附近)。 最佳答案 您已经提出了这个问题,但没有提供足够的上下文。查看周围的内容、整个页面或整个网站会有帮助。周围是否有解释图片

html - 如何使 anchor 标记内的图像可访问?

假设我有一张如下图所示的图片。根据WCAG的说法,这张图片是实用的,因为它将用户链接到另一个页面。似乎我应该将链接的目标放在alt属性中,例如alt="comichomepage"。有视力障碍的人不会也想知道图像显示的是什么吗?该用户会喜欢alt="comicthatlinkstothecloudtweakshomepage"这样的东西吗?漫画似乎不是纯粹的装饰。Thispage做类似的事情(滚动到页面底部附近)。 最佳答案 您已经提出了这个问题,但没有提供足够的上下文。查看周围的内容、整个页面或整个网站会有帮助。周围是否有解释图片

html - 关于文本/链接颜色差异存在哪些(如果有)准则?

关于网页上的链接颜色与常规文本之间的对比,是否有任何最佳做法或指南?我知道有关于文本与背景颜色的对比度指南,但我也想知道是否有关于纯文本和链接文本之间应存在的最小颜色差异的指南。例如,我的背景是白色(FFF),我的文字颜色是黑色(000),我的链接颜色是绿色(007C41)编辑:我意识到这在某种程度上取决于个人喜好。然而,虽然我的眼睛可能能够分辨出#000000和#000001之间的区别(他们不能,但只是为了争论),其他人则不能。我想知道是否有关于最小色差应该是多少的无障碍指南。 最佳答案 关于链接的唯一指导方针是:明确表示这是一个

html - 关于文本/链接颜色差异存在哪些(如果有)准则?

关于网页上的链接颜色与常规文本之间的对比,是否有任何最佳做法或指南?我知道有关于文本与背景颜色的对比度指南,但我也想知道是否有关于纯文本和链接文本之间应存在的最小颜色差异的指南。例如,我的背景是白色(FFF),我的文字颜色是黑色(000),我的链接颜色是绿色(007C41)编辑:我意识到这在某种程度上取决于个人喜好。然而,虽然我的眼睛可能能够分辨出#000000和#000001之间的区别(他们不能,但只是为了争论),其他人则不能。我想知道是否有关于最小色差应该是多少的无障碍指南。 最佳答案 关于链接的唯一指导方针是:明确表示这是一个

html - 广播组中需要 aria

当我有一个强制(必需)单选组时,哪个元素应该有aria-required="true"属性?基本上,我有一堆共享相同的元素name并在下分组在一起.我应该把aria-required在上?我应该把aria-required在每台radio上?或者您会说“不应该有强制单选组这样的东西;设置一个默认值,使单选组永远不会处于未选中状态”?--也许这是单独的可用性讨论的主题。 最佳答案 作为屏幕阅读器用户,我会建议选项一或三。我不想每次更改单选按钮上的选择时都听到我的屏幕阅读器宣布“需要”。如果我正在努力查看在每个选项上都宣布“需要”的不同

html - 广播组中需要 aria

当我有一个强制(必需)单选组时,哪个元素应该有aria-required="true"属性?基本上,我有一堆共享相同的元素name并在下分组在一起.我应该把aria-required在上?我应该把aria-required在每台radio上?或者您会说“不应该有强制单选组这样的东西;设置一个默认值,使单选组永远不会处于未选中状态”?--也许这是单独的可用性讨论的主题。 最佳答案 作为屏幕阅读器用户,我会建议选项一或三。我不想每次更改单选按钮上的选择时都听到我的屏幕阅读器宣布“需要”。如果我正在努力查看在每个选项上都宣布“需要”的不同

html - 如何使 Font Awesome WCAG 2.0 兼容?

如果我有一个网站,上面有几个很棒的字体图标,例如然后通过WCAG2.0验证器运行它,我收到以下错误:SuccessCriteria1.4.4Resizetext(AA)Check117:i(italic)elementused.Repair:Replaceyourielementswithemorstrong.ErrorLine185,Column158:我意识到该规则不应该真正适用于这种情况,因为它用于确保和被用来代替它们的非语义对应物和.但是如果我有一个客户端要求我检查所有的WCAG2.0框,问题仍然存在。所以有谁知道什么是正确的方法。我应该将它们更改为吗?相反,这会给屏幕阅读器带

html - 如何使 Font Awesome WCAG 2.0 兼容?

如果我有一个网站,上面有几个很棒的字体图标,例如然后通过WCAG2.0验证器运行它,我收到以下错误:SuccessCriteria1.4.4Resizetext(AA)Check117:i(italic)elementused.Repair:Replaceyourielementswithemorstrong.ErrorLine185,Column158:我意识到该规则不应该真正适用于这种情况,因为它用于确保和被用来代替它们的非语义对应物和.但是如果我有一个客户端要求我检查所有的WCAG2.0框,问题仍然存在。所以有谁知道什么是正确的方法。我应该将它们更改为吗?相反,这会给屏幕阅读器带

html - 扫描站点以获取图像和 alt 属性

关闭。这个问题不符合StackOverflowguidelines.它目前不接受答案。我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题,以便用事实和引用来回答。关闭4年前。Improvethisquestion我们想在我们的网站上运行扫描,返回包含以下内容的报告:找到的每个图像标签和该图像在报告中的视觉表示该图像的alt属性(如果未找到alt属性,也可识别)是否有一个简单的工具可以做到这一点?我们正在尝试检查alt属性,并确保alt属性准确地描述了它们所代表的图像。这就是报告中的视觉表示很重要的原因。