无障碍性访问是指网站能够被所有人无障碍地访问，包括视力障碍者、听力障碍者、身体障碍者等人群。视力障碍者是访问互联网最主要的办法就是使用音频阅读器或者屏幕阅读器，但是这些软件无法读取文本以外的内容。因此，开发人员需要确保网站的所有元素都可以被屏幕阅读器读取，并且在屏幕阅读器中也可以准确地呈现。
CSS3 Transforms 提供了一些属性和方法可以帮助你实现无障碍性访问功能。在这篇文章中，我们将会学习如何使用 CSS3 Transforms，使你的网站更加无障碍性友好。
开始之前
在使用 CSS3 Transform 之前，我们需要熟悉一些基本概念：
- Transform 是一种 CSS3 属性，用于改变一个 HTML 元素的形状、位置或者大小。常用的 Transform 包括平移、旋转、缩放等。
- 无障碍性访问 是指网站能够被视力、听力和身体障碍者等人群无障碍地访问。
- 屏幕阅读器 是一种软件，能够将屏幕上的文本以语音或字符的形式发出来，从而帮助视力障碍者访问网站。
在本教程中，我们将会使用以下几种 CSS3 Transform：
- translate ：用于改变元素的位置
- rotate ：用于旋转元素
- scale ：用于缩放元素
实现无障碍性访问功能
焦点控制
焦点控制对于实现无障碍性访问非常重要。一个页面中必须仅有一个聚焦 (focusing) 元素，这样屏幕阅读器才能在这个元素上发出语音或字符的提示。这个聚焦元素可以是可点击的元素，例如链接、按钮或者输入框等。
在 CSS 中，可以使用以下代码使元素成为聚焦状态：
------ -
-- ---- --
-文本阅读
屏幕阅读器必须能够读取文本，因此在标记文本时需要格外关注。有一些 CSS 属性可以使文本无障碍性更友好：
- color ：设置文本颜色。对于视障者而言，文本颜色应该有足够的对比度，以便他们能够区分背景颜色和文本颜色。对比度取值范围是 1 至 21，在视障者可用的阈值通常是 4.5 : 1 或者 7 : 1。
- text-decoration ：设置文本底线，常常用于链接。
- text-shadow ：为文本添加阴影，以便平衡文本与背景之间的颜色和对比度。
- -
------ -----
---------------- ----------
-
--- --- -- -
------------ --- --- --- -----
-改变元素位置
使用 translate 属性可以改变元素的位置。这对于使一些内容放置在更为显眼的位置非常有用，因为屏幕阅读器扫描页面时会按照从上到下的顺序读取内容。例如，可以将搜索框放置在页面的最上方，以便用户更方便地找到它。
下面是一个例子，将搜索框放置在页面的最上方：
----------- -
--------- ---------
---- --
----- ----
---------- -----------------
-在这个例子中，使用了 position 和 top 属性将搜索框放置在页面顶部。使用 transform: translateX(-50%) 属性将搜索框水平居中。
元素旋转
使用 rotate 属性可以旋转元素。这对于使一些元素的文字更清晰，或者将一些元素更易于找到非常有用。例如，可以将下拉菜单旋转 90 度，使其更加易于找到。
下面是一个例子，将下拉菜单旋转 90 度：
------------- -
---------- --------------
-元素缩放
使用 scale 属性可以缩放元素。这对于使一些按钮更大，或者使其他元素更加突出非常有用。例如，可以将提交按钮缩放 1.5 倍，以便更加突出。
下面是一个例子，将提交按钮缩放 1.5 倍：
------------- -
---------- -----------
-结论
CSS3 Transform 提供了一些非常有用的属性和方法，可以帮助你实现无障碍性访问功能。在本教程中，我们学习了几种常用的属性和方法，例如 translate、rotate 和 scale。这些方法可以帮助你改变元素的位置、旋转元素或者缩放元素。同时，我们还学习了一些重要的无障碍性访问概念，例如焦点控制和文本阅读等。
如果你有兴趣了解更多无障碍性访问的资讯，可以访问 Web Accessibility Initiative 的网站。在实践中，我们需要不断地思考如何设计更加无障碍性友好的网站，以满足不同人群的需求。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/673171620bc820c58238d722