CSS and JavaScript accessibility best practices

先决条件:	基本的计算机知识，对HTML，CSS和JavaScript的基本了解，以及对可用性的理解。
目的:	熟悉在Web文档中适当地使用CSS和JavaScript，以最大限度地提高可访问性，而不会减损它。

CSS和JavaScript是可访问的？

CSS和JavaScript对HTML的可访问性没有同样的重要性，但是它们仍然能够帮助或破坏可访问性，这取决于它们的使用方式。 换句话说，重要的是，您应考虑一些最佳实践建议，以确保您的CSS和JavaScript的使用不会破坏您的文档的辅助功能。

CSS

让我们先看看CSS。

正确的语义和用户期望

可以使用CSS让任何HTML元素看起来像任何，但这并不意味着你应该。 正如我们在 HTML:良好的无障碍基础文章中提到的，您应该尽可能使用正确的语义元素为正确的工作。 如果不这样做，它可能导致每个人的混乱和可用性问题，但特别是残疾用户。 使用正确的语义与用户期望有很大关系 - 元素根据其功能以某种方式看起来和行为，并且这些常见的约定是用户期望的。

作为示例，如果开发者没有使用标题元素来标记内容，则屏幕阅读器用户不能使用标题作为用于导航页面的路标。 同样的道理，如果你设计一个标题，它看起来不像一个标题，它失去了它的视觉目的。

经验法则是，您可以更新页面特征的样式以适合您的设计，但不要将其更改太多，使其不再像预期的那样看起来或表现。 以下部分总结了要考虑的主要HTML功能。

"Standard" text content structure

标题，段落，列表 - 您的网页的核心文字内容:

<h1>Heading</h1>

<p>Paragraph</p>

<ul>
  <li>My list</li>
  <li>has two items.</li>
</ul>

一些典型的CSS可能如下所示:

h1 {
  font-size: 5rem;
}

p, li {
  line-height: 1.5;
  font-size: 1.6rem;
}

你应该:

• Select sensible font sizes, line heights, letter spacing, etc. to make your text logical, legible, and comfortable to read.
• Make sure your headings stand out from your body text, typically big and bold like the default styling. Your lists should look like lists.
• Your text color should contrast well with your background color.

有关详情，请参见 HTML文本基础知识和样式文本。

Emphasised text

内联标记，它将特定的重点放在它包装的文本:

<p>The water is <em>very hot</em>.</p>

<p>Water droplets collecting on surfaces is called <strong>condensation</strong>.</p>

你可能想为你强调的文本添加一些简单的着色:

strong, em {
  color: #a60000;
}

然而，您很少需要以任何重要的方式强调样式的重点元素。 粗体和斜体文本的标准约定是非常易辨认的，改变样式可能会导致混乱。 有关重点的详情，请参见重点和重要性。

Abbreviations

允许缩写，首字母缩写或初始化与其扩展相关联的元素:

<p>Web content is marked up using <abbr title="Hypertext Markup Language">HTML</abbr>.</p>

再次，你可能想要以一些简单的方式来样式:

abbr {
  color: #a60000;
}

缩写的公认的样式约定是虚线下划线，并且不明显偏离这是不明智的。 有关缩写的详情，请参见缩写。

Links

超链接 - 您在网上找到新地方的方式:

<p>Visit the <a href="https://www.mozilla.org" rel="external nofollow" target="_blank" >Mozilla homepage</a>.</p>

一些非常简单的链接样式如下所示:

a {
  color: #ff0000;
}

a:hover, a:visited, a:focus {
  color: #a60000;
  text-decoration: none;
}

a:active {
  color: #000000;
  background-color: #a60000;
}

标准链接约定带有下划线，在标准状态下有不同的颜色(默认:蓝色)，以前访问链接时的另一种颜色变化(默认:紫色)，以及链接激活时的另一种颜色(默认:红色) 。 此外，当链接被鼠标移动时，鼠标指针改变为指针图标，并且当聚焦(例如，经由标签)或激活时，链接接收到突出显示。 下图显示了Firefox(虚线轮廓)和Chrome(蓝色轮廓)中的突出显示:

alt ="">

alt ="">

您可以创造性地使用链接样式，只要您在与链接互动时不断向用户提供反馈即可。 当状态改变时，肯定会发生某些事情，你不应该摆脱指针光标或轮廓 - 对于使用键盘控制的那些都是非常重要的辅助功能。

Form elements

允许用户将数据输入网站的要素:

<div>
  <label for="name">Enter your name</label>
  <input type="text" id="name" name="name">
</div>

您可以在我们的表单中查看一些很好的示例CSS， css.html 示例(实时查看 >也)。

你为表单编写的大多数CSS将用于调整元素大小，排列标签和输入，并使它们看起来整洁。

然而，你不应该偏离预期的视觉反馈表单元素接收时，他们聚焦，这基本上与链接相同(见上文)。 你可以设置聚焦/悬停状态的形式，使这个行为在不同浏览器之间更一致，或者与你的页面设计更好的一致，但是不要完全摆脱它 - 再次，人们依靠这些线索来帮助他们知道发生了什么 。

Tables     

表格数据表。

您可以在我们的 "external"> table-css.html example( 看到它也活)。

表CSS通常用于使表适合您的设计更好，看起来不那么丑陋。 这是一个好主意，以确保表格标题脱颖而出(通常使用粗体)，并使用斑马条纹，使不同的行更容易解析。

颜色和颜色对比

为您的网站选择配色方案时，请确保文本(前景)颜色与背景颜色对比度良好。 你的设计可能看起来很酷，但如果有视觉障碍(如色盲)的人无法读取你的内容，那就不好了。

有一个简单的方法来检查你的对比度是否足够大，不会导致问题。 有许多在线对比检查工具，您可以输入您的前景和背景颜色，以检查它们。 例如，WebAIM的颜色对比度检查器易于使用，并提供了您需要符合的内容的说明 WCAG标准围绕颜色对比。

另一个提示是不仅仅依赖于颜色单独用于路标/信息，因为这对于不能看到颜色的人来说是没有好处的。 而不是将所需的表单字段标记为红色，例如，用星号和红色标记。

隐藏的东西

在许多情况下，视觉设计将要求不是一次显示所有内容。 例如，在我们的标签信息 框示例(请参阅 ="external">源代码)，我们有三个面板的信息，但我们定位它们之间的顶部，并提供选项卡 可以点击显示每一个(它也可以键盘访问 - 您也可以使用Tab和Enter / Return选择它们)。

alt ="">

屏幕阅读器用户不关心任何这些 - 他们对内容感到满意，只要源顺序有意义，他们可以得到所有。 绝对定位(如本示例中所使用的)通常被视为隐藏视觉效果的内容的最佳机制之一，因为它不会阻止屏幕阅读器到达它。

另一方面，您不应使用 "> visibility :hidden 或 https://developer.mozilla.org/zh-CN/docs/Web/CSS/display"title ="display CSS属性指定用于元素的呈现框的类型。在HTML中，默认显示属性值取自 在HTML规范或浏览器/用户默认样式表中描述的行为。XML中的默认值是内联。"> display :none 隐藏屏幕阅读器的内容。 除非当然，有一个很好的理由，你希望这个内容从屏幕阅读器中隐藏。

接受用户可以覆盖样式

Accept that users can override your styles

用户可以使用自己的自定义样式覆盖样式，例如:

• See Sarah Maddox's How to override CSS stylesheets in Firefox for a useful guide covering how to do this manually in Firefox, and How to use a custom style sheet (CSS) with Internet Explorer by Adrian Gordon for the equivalent IE instructions.
• It is probably easier to do it using an extension, for example the Stylish extension is available for Firefox, Safari, Opera, and Chrome.

用户可能出于各种原因执行此操作。 视力受损的用户可能希望在他们访问的所有网站上使文本更大，或者具有严重色彩缺陷的用户可能想将所有网站以高对比度的颜色容易看到。 无论什么需要，你应该是舒适的，使你的设计灵活，以便这样的变化将在您的设计中工作。 例如，你可能想要确保主内容区域可以处理更大的文本(也许它会开始滚动，以允许它所有被看到)，而不是只是隐藏它，或完全打破。

JavaScript

JavaScript也可以破坏辅助功能，具体取决于它的使用方式。

现代JavaScript是一个强大的语言，我们可以做这么多的这些天，从简单的内容和UI更新到完全成熟的2D和3D游戏。 没有规定所有内容必须100％可供所有人访问的规则 - 您只需要尽可能做，并使您的应用程序尽可能访问。

简单的内容和功能可以容易地被访问 - 例如文本，图像，表格，窗体和按钮激活功能。 当我们在 HTML:良好的辅助功能基础上查看时，关键的注意事项是:

• Good semantics: Using the right element for the right job. For example, making sure you use headings and paragraphs, and <button> and <a> elements
• Making sure content is available as text, either directly as text content, good text labels for from elements, or text alternatives, e.g. alt text for images.

我们还查看了如何使用JavaScript构建缺少功能的示例 - 请参阅构建键盘辅助功能。 这不是理想的 - 真的你应该使用正确的元素为正确的工作 - 但它表明，这是可能的情况下，由于某些原因，你不能控制使用的标记。 另一种提高非语义JavaScript供应的小部件的可访问性的方法是使用WAI-ARIA为screenreader用户提供额外的语义。 下一篇文章还将详细介绍这一点。

WebGL\">复杂的功能(如3D游戏)不容易访问 - 使用 WebGL 创建的复杂3D游戏 will be rendered on a a>将显示在脚本(通常是JavaScript)，例如，它可以用来绘制图形，做照片组合甚至执行动画。你可以(并且应该)在画布块中提供替代内容。<canvas> element, which has no facility at this time to provide text alternatives or other information for severely visually impaired users to\">不支持画布和禁用JavaScript的浏览器"> < canvas> 元素，它目前没有为严重视力受损的用户提供文本替代或其他信息的功能利用。可以争论的是，这样的游戏并不真正让这群人作为其主要目标受众的一部分，期望你让盲人百分百访问是不合理的，但你可以实现keyboard controls so it is usable by non-mouse users, and make the color scheme contrasting enough\">="https://developer.mozilla.org/zh-CN/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard">键盘控制，因此非鼠标用户可以使用，并使颜色方案对比足够以供具有色彩缺陷的人使用。

JavaScript太多的问题

当人们依赖JavaScript太多时，问题经常出现。 有时你会看到一个网站，其中一切都已经完成了JavaScript - HTML由JavaScript生成，CSS stlying由JavaScript生成等等。这有各种各样的辅助功能和其他问题相关联，因此它是 不建议。

除了使用正确的元素为正确的工作，你还应该确保你使用正确的技术正确的工作！ 仔细考虑你是否需要这个闪亮的JavaScript功能的3D信息框，或者是否是纯旧的文本。 仔细考虑你是否需要一个复杂的非标准窗体小部件，或者一个文本输入是否会做。 并且不要使用JavaScript生成所有的HTML内容，如果可能的话。

保持它不引人注目

在创建您的内容时，应考虑不引人注目的JavaScript 。 不引人注意的JavaScript的想法是，应该尽可能地使用它来增强功能，而不是在完全基本的函数中构建它应该理想地工作没有JavaScript，虽然它是不是总是一个选项。 但同样，它的大部分是在可能的情况下使用内置的浏览器功能。

使用不引人注目的JavaScript的好例子包括:

• Providing client-side form validation, which alerts users to problems with their form entries quickly, without having to wait for the server to check the data. If it isn't available, the form will still work, but validation might be slower.
• Providing custom controls for HTML5 <video>s that are accessible to keyboard-only users, along with a direct link to the video that can be used to access it if JavaScript is not available (the default <video> browser controls aren't keyboard accessible in most browsers).

例如，我们编写了一个快速和脏的客户端表单验证示例 - 请参阅 .html"class ="external"> form-validation.html (也 ="external">查看演示现场)。 在这里你会看到一个简单的形式; 当您尝试提交一个或两个字段为空的表单时，提交失败，并显示一个错误消息框，告诉您有什么问题。

这种表单验证是不显眼的 - 你仍然可以使用形式绝对精细，没有JavaScript可用，任何明智的形式实现将有服务器端验证活跃，因为它是太容易恶意用户绕过客户端 验证(例如，通过在浏览器中关闭JavaScript)。 客户端验证对报告错误仍然非常有用，用户可以立即知道他们犯的错误，而不必等待服务器的往返和页面重新加载。 这是一个明确的可用性优势。

我们已经使这种表单验证也很容易访问。 我们使用了 它可以通过将控制元素放置在标签元素内部或通过使用for属性与控件相关联，这样的控件称为标签元素的标记控件。一个输入可以与多个标签相关联 。"> < label> 元素，以确保表单标签明确链接到其输入，以便屏幕阅读器可以一起阅读:

<label for="name">Enter your name:</label>
<input type="text" name="name" id="name">

我们只在提交表单时进行验证 - 这是为了不过于频繁地更新UI，并且可能会混淆屏幕阅读器(以及可能的其他)用户:

form.onsubmit = validate;

function validate(e) {
  errorList.innerHTML = '';
  for(var i = 0; i < formItems.length; i++) {
    var testItem = formItems[i];
    if(testItem.input.value === '') {
      errorField.style.left = '360px';
      createLink(testItem);
    }
  }

  if(errorList.innerHTML !== '') {
    e.preventDefault();
  }
}

真实表单验证将比这更复杂 - 你想检查输入的名称实际上看起来像一个名称，输入的年龄实际上是一个数字，是现实的(例如，不是一个减号，或四位数)。 这里我们刚刚实现了一个简单的检查，一个值已经填充到每个输入字段( if(testItem.input.value ===\'\'))。

当验证已经执行时，如果测试通过，则表单被提交。 如果有错误( if(errorList.innerHTML！==\'\'))，那么我们停止提交表单(使用 zh-CN / docs / Web / API / Event / preventDefault"> preventDefault() )，并显示已创建的任何错误消息(见下文)。 这种机制意味着只有在存在错误时才显示错误，这对可用性更好。

对于在表单提交时没有填写值的每个输入，我们创建一个带有链接的列表项，并将其插入到 errorList 中。

function createLink(testItem) {
  var listItem = document.createElement('li');
  var anchor = document.createElement('a');
  anchor.textContent = testItem.input.name + ' field is empty: fill in your ' + testItem.input.name + '.';
  anchor.href = '#' + testItem.input.name;
  anchor.onclick = function() {
    testItem.input.focus();
  };
  listItem.appendChild(anchor);
  errorList.appendChild(listItem);
}

每个链接都有两个目的 - 它告诉你错误是什么，加上你可以点击它/激活它直接跳到有问题的输入元素，并更正您的输入。

此外， errorField 放置在源顺序的顶部(尽管它在使用CSS的UI中的位置不同)，这意味着用户可以准确地找到他们提交的表单有什么问题，并获得 通过返回到页面的开始处的所讨论的输入元素。

最后，我们在演示中使用了一些WAI-ARIA属性来帮助解决由内容区域不断更新而无需重新加载页面导致的辅助功能问题(屏幕阅读器不会选择此选项或默认情况下提醒用户):

<div class="errors" role="alert" aria-relevant="all">
  <ul>
  </ul>
</div>

我们将在下一篇文章中解释这些属性，其中更详细地介绍了 WAI-ARIA 。

其他JavaScript可访问性问题

在实现JavaScript和思考可访问性时，还需要注意其他事情。 我们将添加更多，因为我们找到他们。

mouse-specific events

如你所知，大多数用户交互是在客户端JavaScript中使用事件处理程序实现的，这允许我们响应某些事件发生而运行函数。 某些事件可能具有辅助功能问题。 您遇到的主要示例是鼠标特定事件，如鼠标悬停， href ="https://developer.mozilla.org/zh-CN/docs/Web/Events/mouseout"> mouseout ， / docs / Web / Events / dblclick"> dblclick 等。响应这些事件运行的功能将无法使用其他机制(如键盘控制)访问。

为了缓解这些问题，您应该将这些事件与可以通过其他方式激活的类似事件(所谓的设备无关事件处理程序)加倍 - / docs / Web / Events / focus">焦点和模糊 为键盘用户提供可访问性。

让我们看一个例子，突出这可能是有用的。 也许我们想要提供一个缩略图，显示一个较大版本的图像，当它被鼠标悬停或集中(像你会看到在电子商务产品目录)。

我们提供了一个非常简单的示例，您可以在 external"> mouse-and-keyboard-events.html (另请参阅 -keyboard-events.html"class ="external">源代码)。 该代码具有两个显示和隐藏放大图像的功能; 这些是由以下行将其设置为事件处理程序运行:

imgThumb.onmouseover = showImg;
imgThumb.onmouseout = hideImg;

imgThumb.onfocus = showImg;
imgThumb.onblur = hideImg;

当鼠标指针悬停在缩略图上并停止在缩略图上时，前两行将运行函数。 这将不允许我们通过键盘访问缩放视图 - 为了允许，我们已经包括最后两行，当图像聚焦和模糊(当焦点停止时运行功能)。 这可以通过在图像上标签，因为我们已经包括 tabindex ="0"。

click event is interesting — it sounds mouse-dependant, but most browsers will activate onclick event handlers after Enter/Return is pressed on a link or form element that has focus, or when such an element is tapped on a touchscreen device. This doesn\'t work by default however when you allow a non-default-focusable event to have focus using tabindex — in such cases you need to detect specifically when that exact key is pressed (see Building keyboard accessibility back in).\">

概要

我们希望本文为您提供了有关CSS和JavaScript在网页上使用的辅助功能问题的详细和了解。

接下来，WAI-ARIA！