替换轻松访问内容_轻松检查网站可访问性

替换轻松访问内容

A few weeks ago I published an article highlighting popular tools and other considerations to check your site’s accessibility. There I briefly touched on the possible errors these tools look for in your code and how to avoid them. In this post, I will talk about guidelines for making a website accessible by adhering to WCAG 2.0 (Web Content Accessibility Guidelines).

几周前，我发表了一篇文章，重点介绍了流行的工具和其他注意事项，以检查您网站的可访问性。 在这里，我简要介绍了这些工具在您的代码中查找的可能错误以及如何避免它们。 在本文中，我将讨论通过遵循WCAG 2.0使网站可访问的准则(Web内容可访问性准则)。

In order to get a clear understanding of the different kinds of accessibility issues and how users take advantage of assistive technologies to overcome them, you may want to read through the essential components of web accessibility before we proceed.

为了清楚地了解各种类型的可访问性问题以及用户如何利用辅助技术来克服这些问题，在继续之前，您可能需要通读网络可访问性的基本组成部分 。

页面标题 (Page Title)

The page title is the text included in the title tag. It is shown in the title bar of some browsers, and appears in search results and bookmarks as a page’s heading. It is also read by screen readers when a page is loaded. Although a non-screen reader user can avoid reading an inappropriate title, a screen reader will always read it out. Therefore, the title should be chosen with care.

页面标题是title标签中包含的文本。 它显示在某些浏览器的标题栏中，并显示在搜索结果和书签中作为页面标题。 加载页面时，屏幕阅读器也会读取它。 尽管非屏幕阅读器用户可以避免阅读不适当的标题，但屏幕阅读器将始终将其读出。 因此，标题应谨慎选择。

SitePoint’s home page with its title displayed in a tool tip.

SitePoint主页，其标题显示在工具提示中。

页面标题准则 (Guidelines for Page Titles)

• Make sure the title adequately describes the nature of the page and is of an appropriate length.
  确保标题充分描述了页面的性质并且长度合适。
• Two pages on one website should not share the same title.
  一个网站上的两个页面不应共享相同的标题。
• A screen reader will read out the title every time it changes, so don’t change the page title except in rare cases (for instance, in a chat application).
  屏幕阅读器每次更改时都会读出标题，因此，除非在极少数情况下(例如，在聊天应用程序中)，否则请勿更改页面标题。

图片 (Images)

Images are of practically no use to blind users. It is important to provide associated alt text with the image that appropriately describes the image. The alt text must not describe the image only but it should also provide the same user experience. For instance, alt text for an image of the “world” icon, used for notifications on Facebook, should read “notifications” rather than “world” or “planet earth”.

图像实际上对盲人没有用。 重要的是，为图像提供相关的alt文字以恰当地描述该图像。 替代文字不能仅描述图像，还应提供相同的用户体验。 例如，用于在Facebook上进行通知的“世界”图标图像的替代文字应显示为“通知”，而不是“世界”或“行星地球”。

The alt text for an image is read out by screen readers, so images used for decorative purposes should almost always be include as backrounds in CSS or else have a null or empty value for their alt attribute, which will instruct the screen reader to ignore the image.

屏幕阅读器会读出图像的替代文本，因此用于装饰目的的图像应几乎总是作为CSS的backround包含在内，否则其alt属性应为null或空值，这将指示屏幕阅读器忽略图片。

You might wonder: Why not just exclude the alt attribute altogether, rather than include an empty value? This is because if the alt text is absent, a screen reader reads out the src attribute instead – the path to the image! Naturally, you don’t want this, so it’s best to include decorative images via CSS or else include the alt attribute, but leave it empty.

您可能会想：为什么不完全排除alt属性，而不是包含一个空值？ 这是因为如果没有替代文本，则屏幕阅读器会改为读取src属性-图像的路径！ 自然，您不希望这样做，因此最好通过CSS包含装饰性图像，或者包含alt属性，但将其保留为空。

The alt attribute has another use. If the user has switched images off in order to save bandwidth, the alt text is generally displayed in place of your disabled image. This way you’ll know what the image is for without downloading it.

alt属性还有另一个用途。 如果用户已关闭图像以节省带宽，则通常会显示替代文本来代替禁用的图像。 这样，您无需下载图像即可知道图像的用途。

无障碍图像准则 (Guidelines for Accessible Images)

• As mentioned above, the alt text must explain the image’s purpose, rather than just describing the image.
  如上所述，替代文字必须说明图片的目的，而不仅仅是描述图片。
• Make sure you include any text that is a part of the image in the alt text.
  确保在替代文本中包含图像中包含的任何文本。
• Provide a null or empty alt attribute for images that convey no useful meaning, like those used for decorative purposes.
  为没有任何意义的图像提供null或空的alt属性，例如用于装饰目的的图像。
• If an image is complex, like a graph, the description should be what the image is about and the data in the image should be presented elsewhere on the page.
  如果图像很复杂(例如图形)，则说明应为图像的含义，并且图像中的数据应在页面的其他位置显示。
• The alt text should be precise and should never contain superfluous words like “Image of” or “Link to”.
  替代文字应准确无误，绝不能包含多余的词，例如“ Image of”或“ Link to”。

如何检查图片替代文字 (How to Check Image alt Text)

An easy way is to check the alt text for many different images is to use the Web Accessibility Evaluation Tool (WAVE), which lists the alt text of every image in a URL and will display an error if images have missing alt text.

一种简单的方法是检查许多不同图像的替代文本，是使用Web可访问性评估工具(WAVE) ，该工具列出URL中每张图像的替代文本，如果图像缺少替代文本，则会显示错误。

标题 (Headings)

Most CSS developers understand how to use headings (h1, h2, and so on). Early on in the CSS movement, however, many pages looked like this:

大多数CSS开发人员都了解如何使用标题( h1 ， h2等)。 但是，在CSS运动的早期，许多页面如下所示：

<div class="heading">HTML</div>
<div class="text">
    <p>HTML is the language of the web.</p>
    <div class="subheading">br tag</div>
    <p>br is used to insert line breaks.</p>
    <div class="subheading">p tag</div>
    <p>p is used to create paragraphs.</p>
</div>
<div class="heading">CSS</div>
<div class="text">
    <p>CSS is used for styling</p>
</div>

As you can see, no headings are used but instead the elements are styled using various classes. A much more accessible way to represent this is with headings:

如您所见，不使用标题，而是使用各种类对元素进行样式设置。 用标题可以更容易地表示这一点：

<h2>HTML</h2>
<p>HTML is the language of the web.</p>

<h3>br tag</h3>
<p>br is used to insert line breaks.</p>

<h3>p tag</h3>
<p>p is used to create paragraphs.</p>

<h2>CSS</h2>
<p>CSS is used for styling.</p>

A proper heading structure must be maintained and styling should be applied to the HTML elements. Fortunately, most developers today have good habits and do this quite well for the most part.

必须维护适当的标题结构，并将样式应用于HTML元素。 幸运的是，当今大多数开发人员都有良好的习惯，并且大部分时间都做得很好。

标题指南 (Guidelines for Headings)

• All pages must have use at least one heading.
  所有页面必须至少使用一个标题。
• Text that serves the purpose of headings or subheadings must be wrapped with proper heading markup.
  用于标题或副标题的文本必须用适当的标题标记包裹。
• A proper hierarchy of headings must be maintained.
  必须保持适当的标题层次。

如何检查标题可访问性 (How to Check Heading Accessibility)

Although checks without a tool are possible by comparing markup to the visual structure of the page, it’s generally advisable to use a tool like WAVE or the W3 HTML Validator.

尽管可以通过将标记与页面的视觉结构进行比较来进行无工具检查，但是通常建议使用WAVE或W3 HTML Validator之类的工具。

色彩对比 (Color Contrast)

As the color contrast between the background and foreground decreases, it becomes difficult to distinguish what is being presented – be it text or images. It also becomes difficult for people with color blindness to read low contrast text, because the colors appear as different shades of grey (depending on the severity of their disability).

随着背景和前景之间的颜色对比度降低，很难区分呈现的内容是文本还是图像。 有色盲的人也很难阅读低对比度的文本，因为颜色显示为不同的灰色阴影(取决于其残障的严重程度)。

It is said that one in twelve people have some sort of color deficiency. This means that a huge number of people are not able to see your website the way you do.

据说十二分之一的人患有某种颜色不足。 这意味着许多人无法像您那样浏览您的网站。

色彩对比指南 (Guidelines for Color Contrast)

• While designing your website, make sure your color contrast is high in order to maximise readability.
  在设计网站时，请确保您的色彩对比度很高，以最大程度地提高可读性。
• Avoid using background images that have a wide range of colors.
  避免使用具有多种颜色的背景图像。

如何测试色彩对比 (How to test color contrast)

• Use a browser add-on like Grayscale Tool for Chrome, to see what a web page looks like in greyscale.

  使用浏览器插件(例如Chrome的灰度工具) ，可以查看网页的灰度外观。

• Use a color contrast checker tool like Check My Colors (which checks your whole page for low contrast) or Contrast Ratio (which gives you a WCAG score after inputting the text and background colors you intend to use).

  使用颜色对比度检查器工具，例如“ 检查我的颜色” (检查整个页面是否存在低对比度)或“ 对比度” (在输入要使用的文本和背景颜色后为您提供WCAG分数)。

checkmycolours.com Contrast testing tool.

checkmycolours.com对比测试工具。

Lea Verou’s contrast testing tool.

Lea Verou的对比测试工具。

键盘操作 (Keyboard Access)

People who are unable to use a mouse with precision rely exclusively on the keyboard for navigation of websites. For such users, the website must be navigable using only the keyboard, and keyboard focus on certain elements must be visible.

无法精确使用鼠标的人只能依靠键盘来浏览网站。 对于此类用户，网站只能使用键盘进行导航，并且键盘对某些元素的关注必须可见。

键盘辅助功能指南 (Guidelines for Keyboard Accessibility)

• Every element should be accessible through the keyboard: links, buttons, form fields, and controls for WYSIWYG editors or media players.
  每个元素都应通过键盘进行访问：链接，按钮，表单域以及所见即所得编辑器或媒体播放器的控件。
• In drop-down menus, ensure that every item is keyboard-accessible using the tab or arrow keys.
  在下拉菜单中，确保使用Tab键或箭头键可通过键盘访问每个项目。
• Ensure that the user can tab out of elements that they tabbed into, and not get stuck on one.
  确保用户可以跳出其跳入的元素，而不会卡在一个元素上。
• Check the shifts of focus in reading order as you tab through the content — from top-to-bottom and left-to-right (opposite for right-to-left languages like Arabic).
  在浏览内容时，检查阅读顺序的重点转移-从上到下，从左到右(与从右到左的语言(如阿拉伯语)相反)。
• Visual focus shouldn’t be lost.
  视觉焦点不应该丢失。

如何检查键盘访问 (How to Check for Keyboard Access)

• Click on the address bar using your mouse and do not use the mouse again. Instead, use the tab key to move through elements, and use SHIFT+Tab to move backwards.
  用鼠标单击地址栏，不要再使用鼠标。 而是使用Tab键在元素之间移动，并使用SHIFT + Tab向后移动。
• In drop-down menus or other elements, you may need to use the arrow keys in place of the tab key to navigate.
  在下拉菜单或其他元素中，可能需要使用箭头键代替Tab键进行导航。
• Make sure you don’t lose visual focus when tabbing through the data.
  查看数据时，请确保您不会失去视觉焦点。

使用坏 (Using BAD)

The Before After Demonstration (BAD) is a demo created by W3C that shows an inaccessible website, explaining the issues with it and the same website after following the general accessibility guidelines.

演示后 (BAD)是W3C创建的一个演示，它显示一个无法访问的网站，并遵循通用的可访问性准则来说明该网站和同一网站的问题。

W3.org's Before and After Demonstration.

W3.org的演示前后。

You can compare the pages within the demo to gain a better understanding of web accessibility.

您可以在演示中比较页面，以更好地了解Web可访问性。

结论 (Conclusion)

With knowledge of web accessibility checks, you should contact website owners and/or the developers about your findings and encourage them to fix their errors. However, you should also consider a proper way of approaching them.

在了解了网络可访问性检查后，您应该就发现的内容与网站所有者和/或开发人员联系，并鼓励他们纠正错误。 但是，您还应该考虑一种处理它们的正确方法 。

We have covered a few topics pertaining to checking the accessibility of a website, but there are many other checks that we haven’t discussed. The complete list of easy checks for web accessibility can be found on W3C’s initial review of web accessibility.

我们讨论了一些与检查网站的可访问性有关的主题，但是还有许多其他检查我们尚未讨论。 W3C对Web可访问性的初步审查中可以找到易于检查Web可访问性的完整列表。

And it should be noted that accessibility is always an ongoing task. Even if a website passes all website accessibility checks, there may still be areas that are hard to access via the keyboard or using a screen reader or other assistive device. Nothing beats actual testing, so continue to test even after all technical tests have been passed.

应当指出，可访问性始终是一项持续的任务。 即使网站通过了所有网站可访问性检查，仍然可能存在难以通过键盘或使用屏幕阅读器或其他辅助设备访问的区域。 没有什么能比实际测试更好，因此即使通过所有技术测试，也要继续进行测试。

翻译自: https://www.sitepoint.com/easy-checks-website-accessibility/

替换轻松访问内容