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

最新推荐文章于 2024-08-23 16:20:43 发布

culiu9261

最新推荐文章于 2024-08-23 16:20:43 发布

阅读量172

点赞数

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

原文链接：https://scotch.io/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, I’ll be explaining what web accessibility is to us as developers, how it affects the users of the web and also ways to improve our application and tools to leverage to improve accessibility in our 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 injury i.e broken arm.
暂时受伤，即手臂骨折。
People using devices with smaller screens such as Smartwatches, 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 etc.

可感知的： Web上的内容应该是可感知的，这意味着可以通过浏览器或屏幕阅读器，屏幕放大器等辅助技术使网络对感觉（视觉，触觉和听觉）可用。

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.

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

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 )

I’ll be highlighting tips to help incorporate accessibility into your usual routine when building websites. Most of these tips can be implemented easily and will not impact 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 at all is that it goes a long way in making sure your website is accessible because now screen readers can announce the alt tags for people with visual and cognitive disabilities. One rule of thumb here is to make sure the alt description is in context meaning it should describe the intent of the actual image. In the example above, I used A cat sitting on a chair and not 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 missed out on. Most developers use div to represent everything and forget about the appropriate mark-up for headings, lists, tables that exists. 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>Scotch.io Shop</h1>
  </header>
  <main>
    <article>
      <h2>An inside look at the new Scotch 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>© Scotch Shop Inc.</p>
  </footer>
</body>

Always provide an option to skip the Main Content:I’ve found that for people making use of screen readers and keyboard, this feature is really important because it provides the option to skip to the main content when using either the keyboard or screen readers for navigation. 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 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:Most people miss out on this, I feel like it should be one of the things we look out for when building accessible sites. 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 )

I found this interesting while researching this topic, there are countless tools available to help you build accessible sites. The question right now is why aren’t people making use of these to build accessible websites? The reason might be because getting started with accessibility may seem difficult and challenging at first, especially for teams that are maintaining a legacy codebase. I’ll be sharing some tools to leverage when thinking of accessibility.

在研究此主题时，我发现这很有趣，可以使用无数工具来帮助您构建可访问的站点。现在的问题是，为什么人们不利用它们来构建可访问的网站？原因可能是因为开始使用可访问性一开始似乎很困难且充满挑战，特别是对于维护旧代码库的团队而言。在考虑可访问性时，我将分享一些可利用的工具。

These tools will go a long way in helping you build accessible applications. You can find more tools to leverage from the compiled Web Accessibility Evaluation Tools List.

这些工具将在帮助您构建可访问的应用程序方面大有帮助。您可以从已编译的Web无障碍评估工具列表中找到更多可利用的工具。

结论 ( Conclusion )

In this article, We have gotten a good understanding of web accessibility and what it means for users with disabilities. I’ll like to end this by saying we should all be accessibility advocates by driving this force together, we’ll see a significant change in the way the web is approached. We should always remember to build for the user and this includes all users with any kind of disability.

在本文中，我们对Web可访问性及其对残障用户的含义有了很好的理解。最后，我想通过共同推动这一力量，让我们所有人都成为可访问性的拥护者，我们将看到访问网络的方式发生了重大变化。我们应该永远记住为用户量身打造，这包括所有具有各种残疾的用户。

翻译自: https://scotch.io/tutorials/web-accessibility-for-beginners

初学者编程

culiu9261

关注

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...
复制链接

扫一扫