在现代网页设计中，无障碍模式（Accessibility）被越来越重视，它帮助有特殊需求的用户避免使用网站时遇到难题，例如视觉障碍、听力障碍以及运动障碍等。在此环境下，我们应该让网站尽可能接近无障碍，保证这些用户所面临的阻碍最小化。辅助技术在这个情境中也变得非常重要，我们需要让辅助技术的使用者能够方便地浏览和使用我们的网站。
在无障碍模式下，划词翻译这项功能非常重要，正如它的名称所示，它允许用户通过选择文本并运用翻译器进行翻译。这一功能对于可能不理解网站上的语言的用户尤为重要，它可以让他们在不离开网站的情况下获得所需的信息。故在本篇文章中，我们将探讨如何实现屏幕辅助划词翻译功能，让您的网站更符合无障碍标准。
实现教程
步骤1：准备所需技术
要实现屏幕辅助划词翻译功能，您需要使用以下工具和技术：
- Google翻译API
- JavaScript
- HTML
- CSS
同样，我们也需要一个代码编辑器，推荐使用Visual Studio Code。
步骤2：设置API密钥
在开始之前，我们必须获得一个有效的Google翻译API密钥。在这里您可以找到相关设置教程，一旦拥有了API密钥，我们就可以开始编写代码了。
步骤3：HTML
在HTML中，我们需要创建一个input元素让用户选择要翻译的文本，然后创建一个button元素，在点击按钮时启动翻译程序。实现它需要以下代码：
<input type="text" id="getTranslationData" /> <button onclick="getTranslation()">翻译</button>
步骤4：JavaScript
现在您需要开始编写JavaScript。在这篇文章中，我们将展示如何实用谷歌翻译API执行翻译功能。所以，您需要创建一个新脚本，并添加以下代码：
function getTranslation() {
var text = document.getElementById("getTranslationData").value;
let source = 'en';
let target = 'zh-CN';
fetch(`https://translation.googleapis.com/language/translate/v2?key=INSERT_YOUR_API_KEY_HERE&q=${text}&source=${source}&target=${target}`)
.then(response => response.json())
.then(data => document.getElementById("translatedData").value = data.data.translations[0].translatedText);
}在这里，我们首先从文本区域获取用户的输入内容，然后利用Google翻译API的POST方法，通过fetch函数获取返回的翻译结果。通过这种方法，我们可以将结果输出到另一个input元素中，其中translatedData是用于存储结果的input元素。
现在，我们已经设法把所有内容绑定在一起了。在最后一步中，我们需要使用CSS来调整input和button元素的样式，使其符合网站风格。
步骤5：CSS
最后，我们需要为input和button元素设置CSS样式。这里，我们可以按照网站的品牌颜色进行设置，并调整字体样式。下方是CSS代码：
-- -------------------- ---- -------
------------------- ------ -
---------- -----
-------- -----
------- -----
----------- --------
------ -----
-
------ -
------------ -----
----------- --------
------ ------
------- --------
-步骤6：示例代码
至此，我们已经完成了无障碍模式下，如何实现屏幕辅助划词翻译功能。下方是完整的代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----- --------------- ---------------------------- -------------------
---------------------------- - ------------
-------
-------------------
------ -
---------- -----
-------- -----
------- -----
----------- --------
------ -----
-
------ -
------------ -----
----------- --------
------ ------
------- --------
-
--------
-------
------
------------------------- - ---------
----------
------ ----------- ----------------------- --
------- --------------------------------------
--- --
------------
------ ----------- ------------------- --
--------
-------- ---------------- -
--- ---- - ----------------------------------------------------
--- ------ - -----
--- ------ - --------
------------------------------------------------------------------------------------------------------------------------------------------
-------------- -- ----------------
---------- -- ----------------------------------------------- - ------------------------------------------
-
---------
-------
-------总结
本文中，我们学习了如何在无障碍模式下，实现屏幕辅助划词翻译功能，并提供了完整的示例代码作为模板使用。通过这项功能的实现，我们可以让视觉、听力障碍者、以及不懂我们网站语言的用户更加方便地使用我们的网站。最后需要提醒的是，为确保您的网站符合无障碍标准，您应该关注更多的无障碍技术，以确保您的网站对所有人都是可用的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c8ee2d5ad90b6d0415111c