首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

是否可以使用javascript来检测用户计算机上是否正在运行屏幕阅读器?

是的,可以使用JavaScript来检测用户计算机上是否正在运行屏幕阅读器。以下是一个简单的示例代码:

代码语言:javascript
复制
function checkScreenReader() {
  const isMac = /Mac/.test(window.navigator.platform);
  const isWindows = /Win/.test(window.navigator.platform);
  const isLinux = /Linux/.test(window.navigator.platform);
  const isMacSafari = isMac && /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
  const isWindowsEdge = /Edge/.test(navigator.userAgent);
  const isWindowsExplorer = /MSIE/.test(navigator.userAgent);
  const isMacFirefox = /Mac/.test(window.navigator.platform) && /firefox/i.test(navigator.userAgent);
  const isMacChrome = /Mac/.test(window.navigator.platform) && /chrome/i.test(navigator.userAgent);

  if (isMacSafari || isWindowsEdge || isWindowsExplorer || isMacFirefox || isMacChrome) {
    return false;
  }

  const hasAria = document.querySelector('[aria-hidden="true"]');
  const hasRole = document.querySelector('[role]');
  const hasTabindex = document.querySelector('[tabindex]');

  if (hasAria || hasRole || hasTabindex) {
    return true;
  }

  return false;
}

console.log(checkScreenReader());

这个函数会检查用户计算机上是否正在运行屏幕阅读器。如果正在运行,则返回true,否则返回false

需要注意的是,这个函数并不是100%准确的,因为屏幕阅读器的检测方式有很多种,而且每个屏幕阅读器的实现方式都不同。因此,这个函数只是一个简单的示例,可能无法涵盖所有情况。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Visual Studio Code 1.75发布

辅助功能改进 - 终端屏幕阅读器模式、新的键盘快捷键。 更轻松地调整多视图大小 - 拖动布局角以一次调整多个视图的大小。 树视图搜索历史 - 在树视图中快速运行搜索历时。...辅助功能 差异导航改进 转到下一个 / 上一个更改现在有音频提示指示是否插入、删除或修改了一行。此外,更改的行会被选中,以便屏幕阅读器可以阅读。...终端辅助模式 Terminal : Enter Accessibility Mode ( Shift+Tab ) 命令允许屏幕阅读器通过键盘在终端缓冲区中导航。...终端辅助功能帮助 与编辑器中的 Show Accessibility Help 命令类似,Terminal: Show Terminal Accessibility Help ( Alt+F1 ) 命令为屏幕阅读器用户提供重要信息...这种新模式允许仅存储暂存的更改,可以使用新的 Git:Stash Staged 命令利用它。

2.9K30

使用Flash检测屏幕阅读器

确切的说是:使用Flash检测Windows平台下使用了MSAA API的辅助技术,并不能区分使用的是屏幕阅读器屏幕放大器等。...Accessibility.isActive()方法 指示 MSAA 屏幕读取器程序是否当前处于活动状态,并且播放器是否正在支持在 Flash Player 和辅助功能之间进行通讯的环境中运行。...要确保正确调用此方法,请执行下列操作之一: 如果需要使用辅助功能,可随时调用 Accessibility.isActive() 方法,而不必在第一次播放 Flash 内容时使用此方法。...例如,您可以使用 onFocus 事件将该方法附加到按钮。 此方法通常使 SWF 文件有足够的时间进行加载,并且您可以假定,屏幕阅读器用户在按 Tab 键时必将跳到舞台上的第一个按钮或对象。 示例演示

59620

PDF Explained(翻译)第一章 简介

项目的想法是使用PostScript图片语言的子集加上一些辅助数据创建一种结构化的语言,可以用于在任何计算机上查看(或打印)文档。...这使得无论计算机上是否安装了相关字体,文档都会被正常渲染。程序在创建PDF文档时会移除无用的字体数据,以使得文件不会变得特别臃肿。PDF支持所有通用字体格式,比如TrueType,Type1。...超链接 可选内容 PDF中的可选内容组允许将页面内容的一部组合在一起,根据其它条件(比如用户选择、文档是否屏幕上显示或打印、缩放比例等)决定显示或不显示。它的用途之一是用来模拟图形包中的“层”。...交互式表单 表单允许用户填充文本域,使用复选框和单选框。数据填充完成后,可以被保存在文档中或提交至某个URL进行进一步处理。嵌入的JavaScript通常与表单结合使用来校验字段值或做类似的事情。...阅读器可以对遵循这些约定的文档进行重排版,以不同的页面或字体大小显示同样的文本。 ? 安全 PDF文档可以使用RC4或AES方式进行加密。有两种权限的密码,所有者密码和使用者密码。

1.6K20

2020前端性能优化清单(六)

当浏览器开始加载一个页面时,它会构建一个 DOM,如果有一个辅助技术(如屏幕阅读器)在运行,它还会创建一个可访问性树。...然后,屏幕阅读器必须查询可访问性树检索信息并使其对用户可用 — 有时是默认的,有时是按需的。有时需要一些时间。 当我们说到交互的快速响应时,通常我们指的是用户通过点击链接和按钮与页面交互的速度。...屏幕阅读器略有不同。在这种情况下,快速的交互时间意味着在屏幕阅读器能够在给定的页面上显示导航以及屏幕阅读器用户能够实际敲击键盘进行交互之前所需要的时间。...屏幕阅读器用户习惯于快节奏的公告和快速导航,因此可能比视力正常的用户更缺乏耐心。 使用 JavaScript 的大页面和 DOM 操作将导致屏幕阅读器通知延迟。...设置您自己的用户计时标记度量和监视特定的业务指标。此外,可以考虑添加自动性能回归警报[67]监视其随时间的变化。 考虑使用 RUM 解决方案监视性能随时间的变化。

1.3K20

如何提高 Web 可访问性,让残障人士拥有更好的体验?

可以帮助有认知障碍或学习障碍的用户。 这也有助于依赖屏幕阅读器用户屏幕阅读器用户每秒钟听到的字数明显多于视力正常的读者。...这种速度上的差异意味着,屏幕阅读器用户需要比视力正常的用户更快地理解你的内容,所以内容越简单效果越好。使用简单的词语也意味着屏幕阅读器不容易误读。...你还应该在话题标签中使用 PascalCase 或 camelCase,这也是为了让屏幕阅读器可以识别出其中的每个单词,而不是试图将整个标签作为一个单词读。...如果是用户不感兴趣的东西,那么屏幕阅读器还允许用户跳过列表,而不是强迫他们把整个列表听完。 链接 就像使用列表对视力正常者和屏幕阅读器用户都有好处一样,使用恰当的链接对这两个群体也都有帮助。...链接可以吸引视力正常的用户的注意,而屏幕阅读器用户可以使用页面上的链接来浏览页面。为了使两者都更容易,所有链接都应该使用简明的描述性文字。 这实际上是 AAA 级标准。

67920

如何测试你做的项目的可访问性

是否有自动化的检测工具可用,可以很直接地指出问题所在和改进策略?...需要手动检查的项目 自动化检测的 cases 覆盖不全可访问性的所有特性,需要我们手动测试。包括:键盘焦点的顺序是否合理、可交互元素是否易于理解、是否有键盘陷阱、自定义组件是否也易于理解和使用等等。...比如我想告诉屏幕阅读器用户,页面有搜索区域、筛选区域、列表区域和翻页区域 按“页面结构”导航时,有混入不恰当的信息。比如“导航”,它其实是按钮式的翻页区域 按“表单空间”导航时,不够全面。...缩放功能 对于视觉障碍的用户,有时需要使用放大镜阅读页面。这里介绍两种: 页面缩放:浏览器自带的缩放功能 设置大字体:浏览器里设置字号。...让屏幕阅读器提供精简、准确的信息也是非常重要的,但这部分需要我们结合着屏幕阅读器使用再进一步细化。

1.8K10

Android 9.0 强势来袭,带来了哪些新特性?

此选项确定在允许使用指定密钥解密任何正在传输或存储的数据之前,密钥库是否要求解锁屏幕。这些类型的密钥非常适合加密要存储在磁盘上的敏感数据,例如运行状况或企业数据。...引导语义 Android 9中添加的属性使我们可以更轻松地定义辅助功能服务(尤其是屏幕阅读器)如何从屏幕的一个部分导航到另一个部分。...例如,在购物应用中,屏幕阅读器可以帮助用户直接从一种类型的交易导航到下一种交易,而屏幕阅读器不必阅读类别中的所有项目,然后再转到下一个。...组导航和输出 屏幕阅读器传统上使用该 android:focusable属性确定何时应该ViewGroup将View对象或对象集合 作为单个单元读取 。这样,用户可以理解视图在逻辑上彼此相关。...例如,TextClassifier可以让您的应用检测用户是否选择了电话号码。然后,您的应用可以建议用户使用该号码拨打电话。这些功能TextClassifier 取代了Linkify该类的功能。

3.2K20

当我们进行性能优化,我们在优化什么(LightHouse优化实操)

LightHouse 是一个开源的自动化工具,它作为 Chrome 浏览器的扩展程序运行,提供一套完整的站点评分标准,我们可以依据此标准对站点进行基准测试,从而达到优化的效果。    ...由于浏览器不会打断正在进行中的长任务,所以,如果用户在执行长任务时和页面有交互事件时,浏览器必须等到该长任务完成才能响应。TBT计算的是在FCP到TTI之间所有长任务时间内总和。    ...name="applicable-device" content="pc,mobile"/>     无障碍(Accessibility)     访问无障碍检测所有用户是否都能有效地访问内容并浏览网站...例如,如果页面中的一些元素有屏幕阅读器友好的命名,而其他的元素没有,那么这个页面的 screenreader-friendly-names 指标项得分为0。    ...最佳做法(Best Practice)     最佳做法检测可以改善网页的代码健康状况的一些最佳做法,评分的分值由相关指标的加权平均值计算而来。

60021

除了 Chrome,这些浏览器你也值得拥有!

用户可以通过在浏览过程中启用 Brave 的广告获得 BAT。 Brave 可用于 Windows,Mac 和 Linux 计算机,此外还有 iOS 和 Android 的智能手机和平板电脑。...你甚至可以用它将 YouTube 视频保存到你的相机胶卷中。 高级用户可能会欣赏的一点是,当使用网络浏览器时,它提供了选择浏览器代理的选项。此设置让你可以告诉网站你正在使用哪个版本的网络浏览器。...Facebook Messenger 和 WhatsApp 可以屏幕左侧的任务栏内运行,浏览器还内置了屏幕截图的功能。你对这些功能的利用程度取决于你的操作系统和喜好的应用。...值得特别提的是 Opera USB,它是一款可以在任何运行 Windows 7 及以上版本的 Windows 计算机上使用 USB 驱动运行的完全功能性的网络浏览器。...这个相当巧妙的创新非常适合你在工作或旅行时可以使用一台不允许安装额外程序的计算机的情况。

31610

【技术圈】Flutter 1.12、Firefox 71、V8 8.0 一大把新特性来袭

可以在 IDE 中直接看到你正在开发的小部件。...V8 在运行之前将JavaScript 编译成了机器代码,而非字节码或是解释执行它,以此提升性能。更进一步,使用了如内联缓存(inline caching``)等方法提高性能。...可选链(Optional Chaining)允许我们编写更精炼、鲁棒性更强的属性访问链,检查中间值是否为空。如果中间值为空,则整个表达式的计算结果为未定义的。...该提案试图在不破坏Web特性和布局计算的情况下避免加载和渲染不可见的内容,并且为开发人员提供一种灵活性,使其能够在不向终端用户屏幕展现的情况下将内容预先渲染出来。...新功能 对集成的密码管理器 Lockwise 的改进 Firefox 现在可以识别子域,并将通过 Lockwise 自动填充域登录信息 使用屏幕阅读器用户现在可以使用 Firefox Monitor

1.6K50

Chrome 91中的新功能,推荐给你!

您现在可以计算机上的任何位置复制文件,然后将其粘贴到电子邮件中。 以前,如果要将文件附加到电子邮件,则必须将其从文件资源管理器中拖放到电子邮件选项卡中。...Android版Chrome 可以“关注”网站 谷歌可能很久以前就杀死了谷歌阅读器,但安卓版 Chrome 91 带来了另一个 RSS 阅读器风格的功能。菜单中的新选项将允许您“关注”网站。...还有什么是新的 Chrome 91 对面向用户的更改特别轻描淡写,但幕后总是有更多的事情发生。您可以在Google 的开发者网站 和 Chromium 博客上了解其中的许多变化 。...建议的文件名和位置: Web 应用程序现在可以使用文件系统访问 API 时建议文件或目录的名称和位置。...V8 JavaScript:Chrome 91 包含 V8 JavaScript 引擎的 9.1 版。

1.5K10

做了七年前端开发,我最近才意识到可访问性的必要......

考虑一个没有 h1 页面的场景,当屏幕阅读器读到这样的页面时,用户是无法获知标题的,而页面的标题通常是用表示。...”和 ARIA 我们需要了解的是,不是所有的用户使用鼠标浏览网页,有些只使用键盘导航,还有一些使用屏幕阅读器。...对冗余的链接,可以添加以下属性: tabindex="-1"(它可以防止链接被 tab 选中 —— 对于键盘用户) aria-hidden="true"(你不需要将它暴露给屏幕阅读器,因为已经有了相同的链接...尽管用和做出来的按钮对于大多数用户来说,看起来是一模一样的,但对于使用屏幕阅读器的盲人用户来说,它看起来非常不同,屏幕阅读器甚至可能会忽略这是一个按钮。...这真是个糟糕的主意,焦点指示器能告诉使用键盘导航的用户们他们当前正在交互的位置,如果我们移除焦点样式,相当于将这些用户置于黑暗中,隐藏焦点指示器就像隐藏鼠标光标。

1.7K30

HTML的讲解

有利于设备解析,让不同的设备(如屏幕阅读器、盲人阅读器、移动设备)更好的渲染网页反馈给不同的人群去理解网页内容有利于SEO,和搜索引擎建立良好沟通,让搜索系统更好的理解网页,然反馈给搜索的用户,提高网页的搜索权重当网页加载慢导致...CSS文件还未加载时(没有CSS),可以让页面仍然清晰、可读、好看,优化用户体验。...那接下来就让我学习HTML,首先我们先来了解页面的整体一、HTML的基本语法规则文档的扩展名为.html或.htmHTML标签不区分大小写,推荐小写元素可嵌套,可以包括属性的额外信息标签和属性不区分大小写...,其中包含例如面向搜索引擎的关键字,页面描述,字符编码说明,CSS样式 包含用户可以看到的文本元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词...autoplay 是否自动播放source 表示视频的代替资源(会在音视频读取失败后尝试此属性)HTML 解析(dom 树)字节流->DOM 树->样式计算生成 CSSOM 树->渲染引擎生成 Render

12310

CSS @media 规则

@media还可以针对不同的媒体使用不同的样式表,就像这样: <link rel="stylesheet" media="screen and (min-width: 768px)" href="style.css...screen 用于<em>计算</em>机<em>屏幕</em>、平板电脑、智能手机等。 speech 用于朗读页面的<em>屏幕</em><em>阅读器</em>。 特性 值 描述 any-hover <em>是否</em>有任何可用的输入机制允许<em>用户</em>(将鼠标等)悬停在元素上?...forced-colors <em>检测</em>是<em>用户</em>代理否限制调色板。在 Media Queries Level 5 中被添加。 grid 输出设备<em>使用</em>网格<em>屏幕</em>还是点阵<em>屏幕</em>?...hover 主输入机制<em>是否</em>允许<em>用户</em>将鼠标悬停在元素上?在 Media Queries Level 4 中被添加。 inverted-colors 浏览器或者底层操作系统<em>是否</em>反转了颜色。...resolution 输出设备的分辨率,<em>使用</em> dpi 或 dpcm。 scan 输出设备的扫描过程(适用于电视等)。 scripting 探测脚本(例如 <em>JavaScript</em>)<em>是否</em>可用。

1.5K20

12个前端开发必备开发的工具

可以操作DOM、编辑CSS和运行自定义JavaScript在不同的级别调试代码。...一个决策者可能是一个用户,他正在展示自己的购物习惯。让您快速可视化数据的图形化工具在过去几年得到了流行。 D3.js是一个流行的JavaScript数据可视化库。...相当一部分视力不全或没有视力的用户依靠屏幕阅读器阅读web内容。屏幕阅读器,顾名思义,是为用户阅读网页内容以进行交互。JAWS是一款流行的Windows屏幕阅读器。...当你测试你的网站时,确保你通过屏幕阅读器检查它的兼容性。 WAVE是一种评估互联网上任何网站可访问性状态的工具。它将调查结果归纳为三类:错误(红色)、警告(黄色)和其他。...某些有癫痫倾向的用户可能对屏幕上闪烁的内容很敏感。光敏癫痫分析工具(PEAT)是一个在Windows上的工具,可以让你检查你的网站是否有任何这样的漏洞。

1K20

毕业设计So Easy:Java MySQL智能报纸阅读器APP应用

2、项目业务处理流程 本课题主要为设计一款在 Android 系统上运行的报纸阅读器,并实现上述的所有功能。...用户打开该应用后,程序会自动检测手机中是否安装讯飞语音,该语音引擎在朗读文字的时候需要用到。如果检测用户尚未安装,会弹出对话框提醒用户安装。安装完成后可以选择“拍照”或者“浏览”功能。...该插件提供了名为appAvailability.check的方法用于检测特定的APP是否有被安装在手机上。...在朗读界面点击“删除”按钮后,观察是否会有对话框提醒用户是否确认删除 13 讯飞语音检测检测 测试可否检测用户是否安装了讯飞语音 在手机上未安装讯飞语音的情况下打开该APP,观察是否有对话框弹出提醒用户安装讯飞语音...是 13 讯飞语音检测检测 在手机上未安装讯飞语音的情况下打开该APP,会有对话框弹出提醒用户安装讯飞语音 是 14 TTS默认引擎检测 在安装讯飞语音但未将其设置为默认TTS引擎的情况下打开该APP

48520

巧妙再构想的Slax发行版成功突破便携式Linux的局限性(Reviews)

右键单击面板,桌面,打开的窗口的顶部边框或面板中的停靠图标,以将正在运行的应用程序发送到任何虚拟工作区。 右键单击屏幕或面板还可以访问一些系统调整。...是的,从硬盘驱动器加载应用程序并执行其他计算任务时,您可以从Slax获得更高的性能速度,但这往往是偏激的。不建议您通过双引导系统上的硬盘驱动器安装运行Slax,这会带来其他问题。...在计算机启动时按相应的键将显示Slax引导选项以及各种硬盘驱动器安装。 Slax无需安装即可直接从USB闪存驱动器运行。这为您提供了一个Linux系统,您可以随身携带并在使用的任何计算机上运行。...所做的更改告诉计算机的BIOS如何从磁盘引导Slax。 我首先在Linux计算机上尝试了此过程。错误消息报告了软件依赖性问题。...例如,您可以使用它们禁用硬件检测或从硬盘驱动器启动Slax。 要使用作弊代码,请像往常一样在Slax启动期间按Esc键激活启动菜单,然后在看到启动菜单时按Tab键。 命令行将出现在屏幕底部。

2.8K10

CSS @media 规则

@media还可以针对不同的媒体使用不同的样式表,就像这样:<link rel="stylesheet" media="screen and (min-width: 768px)" href="style.css...screen用于<em>计算</em>机<em>屏幕</em>、平板电脑、智能手机等。speech用于朗读页面的<em>屏幕</em><em>阅读器</em>。特性值描述any-hover<em>是否</em>有任何可用的输入机制允许<em>用户</em>(将鼠标等)悬停在元素上?...forced-colors<em>检测</em>是<em>用户</em>代理否限制调色板。在 Media Queries Level 5 中被添加。grid输出设备<em>使用</em>网格<em>屏幕</em>还是点阵<em>屏幕</em>?height视口(viewport)的高度。...hover主输入机制<em>是否</em>允许<em>用户</em>将鼠标悬停在元素上?在 Media Queries Level 4 中被添加。inverted-colors浏览器或者底层操作系统<em>是否</em>反转了颜色。...resolution输出设备的分辨率,<em>使用</em> dpi 或 dpcm。scan输出设备的扫描过程(适用于电视等)。scripting探测脚本(例如 <em>JavaScript</em>)<em>是否</em>可用。

1.6K60
领券