初学者编程_初学者可访问性

最新推荐文章于 2024-04-25 15:35:02 发布

cukw6666

最新推荐文章于 2024-04-25 15:35:02 发布

阅读量203

点赞数

文章标签：网络 python java 人工智能大数据

原文链接：https://www.digitalocean.com/community/tutorials/web-accessibility-for-beginners

版权

初学者编程

Building accessible applications or websites is not the norm today. This is because the idea of accessibility is known to most developers, while in actual sense it is often neglected and not a common practice today in the world of web development. According to World Bank Statistics about 15% of world population experience some form of disability. This amounts to almost half the population of the web.

如今，构建可访问的应用程序或网站已不再是常态。这是因为可访问性的概念已为大多数开发人员所熟知，而实际上，它通常在Web开发领域中经常被忽略而不是当今的普遍实践。根据世界银行统计，世界人口中约15％患有某种形式的残疾。这几乎占网络人口的一半。

In this tutorial, you’ll learn about what web accessibility means for developers, how it affects the users of the web and also ways to improve application and tools to leverage and improve accessibility in your workflow.

在本教程中，您将了解Web可访问性对开发人员意味着什么，它如何影响Web用户以及如何改进应用程序和工具以利用和改善工作流中的可访问性。

什么是Web可访问性？ (What is Web Accessibility?)

Web Accessibility or a11y as it is often called is a practice whereby websites, tools, and technologies are designed and developed so that people with disabilities can use them.

Web Accessibility或通常称为a11y的一种实践是通过设计和开发网站，工具和技术，使残疾人可以使用它们。

“Accessibility” is often denoted as “a11y” because there are 11 letters between the “A” and “Y” in the word “Accessibility”. This pattern is known as a Numeronym.

“可访问性”通常表示为“ a11y”，因为单词“可访问性”中的“ A”和“ Y”之间有11个字母。这种模式被称为数字别名。

Accessibility is all about making the web accessible to everyone. This includes people with all forms of disabilities including the following:

可访问性就是使所有人都能访问网络。这包括各种形式的残疾人，包括：

Cognitive
认知性
Neurological
神经病学
Physical
物理
Speech
言语
Visual
视觉效果
Auditory disabilities
听觉障碍

Accessibility encompasses disability and still account for cases whereby the people using the web have the following limitations:

可访问性包括残障，并且仍然说明使用网络的人受到以下限制的情况：

Poor Internet connectivity.
互联网连接不良。
Temporary injuries, for example a broken arm
暂时受伤，例如手臂骨折
People using devices with smaller screens like Smartwatches or Smart TVs
人们使用屏幕较小的设备(如智能手表或智能电视)

倾泻原则 (The POUR principle)

The POUR principle is what guides building accessible websites. This principle helps put people at the center of the process. Every website should fulfill the following principles:

POUR原则指导构建可访问的网站。这一原则有助于将人们放在流程的中心。每个网站都应遵守以下原则：

Perceivable: Content on the web should be perceivable. This means the web should be available to the senses (vision, touch, and hearing) either through the browser or through assistive technologies like screen readers, screen enlargers and others.

可感知：网络上的内容应可感知。这意味着应该可以通过浏览器或通过辅助技术(例如屏幕阅读器，屏幕放大器和其他工具)来使用感官(视觉，触摸和听觉)的网络。

Operable: Content on the web must be operable. This means users can interact with all controls and interactive elements using either the mouse, keyboard or an assistive device. If the content is impossible to navigate then it is inaccessible.

可操作：网络上的内容必须可操作。这意味着用户可以使用鼠标，键盘或辅助设备与所有控件和交互元素进行交互。如果内容无法导航，则无法访问。

Understandable: The content on the web should be clear and concise and easy to understand. Try as much as possible to cut down spelling errors and complex grammar. This is because as web developers we should never assume knowledge for the user.

可以理解：网络上的内容应该简洁明了且易于理解。尽可能减少拼写错误和复杂的语法。这是因为作为Web开发人员，我们永远不应为用户假设知识。

Robust: It is really important to have consistency across the web. What this means is are you maximizing compatibility with the tools you are building for? Does your site work the same way across all platforms i.e Browsers, Operating systems, and Device sizes etc?

健壮：在整个网络上保持一致性非常重要。这意味着您要最大程度地与要构建的工具兼容吗？您的网站在所有平台(例如浏览器，操作系统和设备大小等)上的工作方式是否相同？

在网站上访问网站的提示 (Tips For Making Your Site Accessible on the Web)

There are a number of ways to help incorporate accessibility into your usual routine when building websites. Most of these tips can be implemented without impacting the overall look and feel of your website.

建立网站时，有多种方法可以将可访问性纳入您的日常工作中。这些提示中的大多数都可以在不影响网站整体外观的情况下实施。

Add Alternative Text for Images: When using images in your websites, one important thing people miss out on is adding the alt="" attribute to images. Here’s an example of an accessible image tag.
为图像添加替代文本：在您的网站中使用图像时，人们会错过的重要一件事是在图像中添加alt=""属性。这是辅助图像标签的示例。

<img src="./cat.png' alt="A cat sitting on a chair">

The big picture difference between having the alt attribute in all images and not including it is that screen readers can announce the alt tags for people with visual and cognitive disabilities. One important guideline is to make sure the alt description is relevant, meaning it should describe the content and intent of the actual image. In the example above, A cat sitting on a chair describes the entire content of the image, instead of just cat for the description.

在所有图像中都具有alt属性与不包括alt属性之间的巨大区别是，屏幕阅读器可以为视力和认知障碍人士宣布alt标签。一个重要的准则是确保alt描述是相关的，这意味着它应该描述实际图像的内容和意图。在上面的示例中， A cat sitting on a chair描述了图像的全部内容，而不仅仅是描述cat 。

Make use of Semantic HTML: This is another important rule that many developers overlook. Most developers use div to represent everything and forget about the appropriate tags for headings, lists, and tables. HTML5 provides additional elements, such as <nav> , <section> and <aside>, to better structure your content. This is an example of a well-structured page using semantic HTML.
利用语义HTML：这是许多开发人员忽略的另一个重要规则。大多数开发人员使用div来表示所有内容，而忘记了标题，列表和表的适当标签。 HTML5提供了其他元素，例如<nav> ， <section>和<aside> ，以更好地组织内容。这是使用语义HTML的结构良好的页面的示例。

<body>
  <header>
    <h1>Shop</h1>
  </header>
  <main>
    <article>
      <h2>An inside look at the new Shop v2</h2>
      <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </article>
  </main>
  <footer>
    <p>© Shop Inc.</p>
  </footer>
</body>

Always provide an option to skip the Main Content: For users that rely on screen readers and keyboard, this feature is very important because it provides the option to skip to the main content. The technique for achieving this by adding a link to skip to the main content and make it invisible until the element receives keyboard focus. An example of this is the BBC.com official website. When using your keyboard to navigate, the option to skip to the main content is provided when the keyboard focuses on that element and it is visible.
始终提供跳过主要内容的选项：对于依赖屏幕阅读器和键盘的用户，此功能非常重要，因为它提供了跳过主要内容的选项。通过添加链接以跳至主要内容并使该内容不可见直到元素获得键盘焦点为止的技术。 BBC.com官方网站就是一个例子。使用键盘进行导航时，当键盘将焦点放在该元素上并且该元素可见时，将提供跳至主要内容的选项。
Identify page language and language changes: Always remember to indicate the primary language of every page by using the lang attribute in the HTML tag. For example, <html lang="en">. Use the lang attribute on specific elements when the language of the element differs from the rest of the page.
识别页面语言和语言更改：始终记住使用HTML标记中的lang属性指示每个页面的主要语言。例如， <html lang="en"> 。当元素的语言与页面的其余部分不同时，请对特定元素使用lang属性。

<--here the language can either be switched to the default language used in the page.-->
<html lang="en"> 
<head>
  ...
</head>
<body>...</body>
</html>

Associate a label with every form element: Whenever possible, use the label element to associate text with form elements explicitly. The for attribute of the label must exactly match the id of the form control. In specific situations, it may be acceptable to hide <label> elements visually, but in most cases, labels are needed to help all readers understand the required input.
将标签与每个表单元素关联：尽可能使用label元素将文本与表单元素明确关联。标签的for属性必须与表单控件的id完全匹配。在特定情况下，可视地隐藏<label>元素是可以接受的，但是在大多数情况下，需要使用标签来帮助所有读者理解所需的输入。

<form>
  <label for="username">Username</label>
  <input type="text" name="username" id="username">
  <label for="email">Email</label>
  <input type="email" name="email" id="email">
</form>

建立可访问站点时利用的工具 (Tools To Leverage When Building Accessible Sites)

There are countless tools available to help you build accessible sites. Here are a few that you can use to make your sites more accessible, and to learn more about a11y in general:

有无数工具可用来帮助您构建可访问的站点。以下是一些您可以用来使您的网站更易于访问以及总体上了解有关a11y的信息：

You can find more tools to leverage from the compiled Web Accessibility Evaluation Tools List, along with some other general resources:

您可以从已编译的Web无障碍评估工具列表中找到更多可利用的工具，以及其他一些常规资源：

结论 (Conclusion)

In this article, you learned about what web accessibility is, and what it means for users with different abilities to use an accessible website. You also learned about the various methods that you can use to make sites accessible for all users. Finally, you examined accessible HTML examples to understand how to implement each of the suggestions in this tutorial.

在本文中，您了解了什么是Web可访问性，以及具有不同功能的用户使用可访问的网站的含义。您还了解了可用于使所有用户访问站点的各种方法。最后，您检查了可访问HTML示例，以了解如何实现本教程中的每个建议。

翻译自: https://www.digitalocean.com/community/tutorials/web-accessibility-for-beginners

初学者编程

cukw6666

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初学者编程_初学者可访问性

初学者编程Building accessible applications or websites is not the norm today. This is because the idea of accessibility is known to most developers, while in actual sense it is often neglected and not a c...
复制链接

扫一扫