代码之家 › 专栏 › 技术社区 › Lazar LjubenoviÄ

如何宣布一个网站没有屏幕阅读器支持?

screen-readers accessibility html5 html

Lazar LjubenoviÄ · 技术社区 · 6 年前

<noscript> 说

用什么类似的方式来宣布呢 网站不支持屏幕阅读器 <noscreenreader>Sorry, ...</noscreenreader> .

(简短的背景故事:这是一个依赖于使用文字。它严重依赖图像来传递信息。宣布是没有意义的 任何东西 用口语。)

4 回复 | 直到 6 年前

David 6 年前

屏幕阅读器工作在浏览器之上,因此没有直接的方法(只是一些复杂的方法) Flash techniques )检测某人何时在使用。

最好的办法是将警告放在内容的开头,并为有视力的用户隐藏它。 This article

.hidden {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

<div class="hidden">Sorry, this website requires JavaScript to run.</div>

Johannes 6 年前

role 属性,其行为类似于辅助技术/屏幕阅读器的可见JS警报框,即默认情况下,加载页面后将立即读取其文本。

<body>

(注意:不要使用 display: none

#screenreader_alert {
  position: fixed;
  left: -50px;
  width: 1px;
  height: 1px;
  color: transparent;
  overflow: hidden;
}

<div id="screenreader_alert" role="alert">Please note: This web page contains no text at all and therefore does not support screenreaders.</div>
<div>There is a DIV element <em>before</em> this one which is invisible due to its CSS settings, but whose text will be read by screenreaders immediately after the page is loaded, due to its ARIA attribute <em>role="alert"</em>. Check the HTML code to see it.</div>

https://w3c.github.io/aria-practices/#alert

David Taiaroa 6 年前

<h1 style="text-indent: -9999px;"> Sorry, this site does not support screen readers </h1>

<p>hello world</p>
<p style="text-indent: -9999px;"> Sorry, this site does not support screen readers </p>
<p style="display:none;">display hidden paragraph</p>

https://s.codepen.io/panchroma/debug/yReWOa/PBrNWNdjpnWA https://codepen.io/panchroma/pen/yReWOa

slugolicious 6 年前

你把焦点放在最初的元素上了吗?如果是这样,您可以添加额外的屏幕阅读器文本,这些文本不可见,将与具有焦点的元素一起读取。正如其他人所提到的,在google中搜索“sr only”类或查看以下内容: What is sr-only in Bootstrap 3?

<button>
  I'm the first focusable element
  <span class="sr-only"> Sorry, this page is not accessible to screen readers</span>
</button>

如果没有初始焦点,那么可以使DOM中的第一个元素具有 tabindex="0" tabindex=“0”

<html>
  <body>
    <span tabindex="0" class="sr-only">Sorry, this page is not accessible to screen readers</span>
    <!-- the rest of your real code -->
  </body>
</html>

第三种可能的解决方案,与第一种类似,是将额外的文本与第一个标题或主元素相关联,并使用 tabindex="-1" . “-1”表示用户不能使用 标签

<html>
  <script>
    function myload() {
      document.getElementById("myid").focus();
    }
  </script>
  <body onload="myload()">
    <h1 id="myid" tabindex="-1">
      Welcome to my site
      <span class="sr-only"> Sorry, this page is not accessible to screen readers</span>
    </h1>
  </body>
</html>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

5 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

5 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

5 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

5 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

5 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

5 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

5 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

5 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

5 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

5 月前