可访问性不一致可访问性低_网络上的可访问性-CSDN博客

本文强调了网页可访问性的重要性，指出可访问性可以帮助残疾人士更好地使用Web。介绍了使用语义化HTML、图片属性、Aria属性等提升可访问性的方法，如正确使用标题标签、`

摘要由CSDN通过智能技术生成

可访问性不一致可访问性低

It’s important we design our HTML with accessibility in mind.

我们在设计HTML时要考虑到可访问性，这一点很重要。

Having accessible HTML means that people with disabilities can use the Web. There are totally blind or visually impaired users, people with hearing loss issues and a multitude of other different disabilities.

拥有可访问HTML意味着残疾人可以使用Web。有完全失明或有视觉障碍的用户，有听力障碍的人以及许多其他不同的障碍。

Unfortunately this topic does not take the importance it needs, and it doesn’t seem as cool as others.

不幸的是，这个主题没有重视它所需要的重要性，而且似乎没有其他主题那么酷。

What if a person can’t see your page, but still wants to consume its content? First, how do they do that? They can’t use the mouse, they use something called a screen reader. You don’t have to imagine that. You can try one now: Google provides the free ChromeVox Chrome Extension. Accessibility must also take care of allowing tools to easily select elements or navigate through the pages.

如果某人看不到您的页面，但仍想使用其内容怎么办？首先，他们该怎么做？他们不能使用鼠标，而是使用屏幕阅读器 。您不必想象。您可以立即尝试：Google提供免费的ChromeVox Chrome扩展程序。可访问性还必须注意允许工具轻松选择元素或浏览页面。

Web pages and Web apps are not always built with accessibility as one of their first goals, and maybe version 1 is released not accessible but it’s possible to make a web page accessible after the fact. Sooner is better, but it’s never too late.

网页和Web应用程序并非始终以可访问性作为其首要目标之一，也许发行的版本1不可访问，但事实发生后可以使网页可访问。越早越好，但是永远不会太晚。

It’s important and in my country, websites built by the government or other public organizations must be accessible.

这很重要，在我国，必须可以访问政府或其他公共组织建立的网站。

What does this mean to make an HTML accessible? Let me illustrate the main things you need to think about.

使HTML可访问是什么意思？让我说明您需要考虑的主要事项。

Note: there are several other things to take care about, which might go in the CSS topic, like colors, contrast and fonts. Or how to make SVG images accessible. I don’t talk about them here.

注意：CSS主题中还有其他几项需要注意，例如颜色，对比度和字体。或如何使SVG图像可访问。我在这里不谈论他们。

使用语义HTML (Use semantic HTML)

Semantic HTML is very important and it’s one of the main things you need to take care of. Let me illustrate a few common scenarios.

语义HTML非常重要，这是您需要注意的主要事情之一。让我说明一些常见的情况。

It’s important to use the correct structure for heading tags. The most important is h1, and you use higher numbers for less important ones, but all the same-level headings should have the same meaning (think about it like a tree structure)

为标题标签使用正确的结构很重要。最重要的是h1 ，对于不太重要的数字使用较高的数字，但是所有相同级别的标题都应具有相同的含义(像树形结构一样思考)

h1
	h2
		h3
	h2
	h2
		h3
			h4

Use strong and em instead of b and i. Visually they look the same, but the first 2 have more meaning associated with them. b and i are more visual elements.

使用strong和em代替b和i 。从视觉上看，它们看起来相同，但是前两个具有更多的含义。 b和i是更多视觉元素。

Lists are important. A screen reader can detect a list and provide an overview, then let the user choose to get into the list or not.

列表很重要。屏幕阅读器可以检测列表并提供概述，然后让用户选择是否进入列表。

A table should have a caption tag that describes its content:

一个表应具有描述其内容的caption标签：

<table>
  <caption>Dogs age</caption>
  <tr>
    <th>Dog</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Roger</td>
    <td>7</td>
  </tr>
</table>

对图片使用`alt`属性 (Use `alt` attributes for images)

All images must have an alt tag describing the image content. It’s not just a good practice, it’s required by the HTML standard and your HTML without it is not validated.

所有图像必须具有描述图像内容的alt标签。这不仅是一种好习惯，而且是HTML标准所必需的，未经它验证HTML也是必须的。

<img src="dog.png" alt="picture of my dog">

It’s also good for search engines, if that’s an incentive for you to add it.

如果这是您添加它的诱因，那么对搜索引擎也有好处。

使用`role`属性 (Use the `role` attribute)

The role attribute lets you assign specific roles to the various elements in your page.

使用role属性，您可以为页面中的各个元素分配特定的角色。

You can assign lots of different roles: complementary, list, listitem, main, navigation, region, tab, alert, application, article, banner, button, cell, checkbox, contentinfo, dialog, document, feed, figure, form, grid, gridcell, heading, img, listbox, row, rowgroup, search, switch, table, tabpanel, textbox, timer.

您可以分配许多不同的角色：补充，列表，列表项，主要，导航，区域，选项卡，警报，应用程序，文章，横幅，按钮，单元格，复选框，contentinfo，对话框，文档，提要，图，表格，网格，网格单元格，标题，img，列表框，行，行组，搜索，开关，表，选项卡，文本框，计时器。

It’s a lot and for the full reference of each of them I give you this MDN link. But you don’t need to assign a role to every element in the page. Screen readers can infer from the HTML tag in most cases. For example you don’t need to add a role tag to semantic tags like nav, button, form.

很多，为了给他们每个人提供完整参考，我给了您这个MDN链接。但是，您无需为页面中的每个元素分配角色。在大多数情况下，屏幕阅读器可以从HTML标签推断出来。例如，您不需要向nav ， button ， form等语义标记添加角色标记。

Let’s take the nav tag example. You can use it to define the page navigation like this:

让我们以nav标签为例。您可以使用它来定义页面导航，如下所示：

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/blog">Blog</a></li>
  </ul>
</nav>

If you were forced to use a div tag instead of nav, you’d use the navigation role:

如果您被迫使用div标签而不是nav ，则可以使用navigation角色：

<div role="navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/blog">Blog</a></li>
  </ul>
</div>

So here you got a practical example: role is used to assign a meaningful value when the tag does not convey the meaning already.

因此，这里有一个实际的例子：当标签还没有传达含义时，使用role分配有意义的值。

使用`tabindex`属性 (Use the `tabindex` attribute)

The tabindex attribute allows you to change the order of how pressing the Tab key selects “selectable” elements. By defaults only links and form elements are “selectable” by navigation using the Tab key (and you don’t need to set tabindex on them).

tabindex属性允许您更改按Tab键选择“可选”元素的顺序。默认情况下，只有使用Tab键通过导航才能“选择”链接和表单元素(并且您无需在其上设置tabindex )。

Adding tabindex="0" makes an element selectable:

添加tabindex="0"可使元素tabindex="0"可选：

<div tabindex="0">
...
</div>

Using tabindex="-1" instead removes an element from this tab-based navigation, and it can be pretty useful.

而是使用tabindex="-1"从此基于标签的导航中删除一个元素，这可能非常有用。

使用`aria`属性 (Use the `aria` attributes)

ARIA is an acronym that means Accessible Rich Internet Applications and defines semantics that can be applied to elements.

ARIA是首字母缩写词，表示可访问的Rich Internet Applications，并定义了可应用于元素的语义。

`aria-label` (`aria-label`)

This attribute is used to add a string to describe an element.

此属性用于添加描述元素的字符串。

Example:

例：

<p aria-label="The description of the product">...</p>

I use this attribute on my blog sidebar, where I have an input box for search without an explicit label, as it has a placeholder attribute.

我在博客的侧边栏上使用此属性，在这里我有一个输入框用于搜索而没有显式标签，因为它具有占位符属性。

`aria-labelledby` (`aria-labelledby`)

This attribute sets a correlation between the current element and the one that labels it.

此属性在当前元素和对其进行标记的元素之间设置关联。

If you know how an input element can be associated to a label element, that’s similar.

如果您知道如何将input元素与label元素相关联，则类似。

We pass the item id that describes the current element.

我们传递描述当前元素的商品ID。

Example:

例：

<h3 id="description">The description of the product</h3>

<p aria-labelledby="description">
...
</p>

`aria-describedby` (`aria-describedby`)

This attribute lets us associate an element with another element that serves as description.

此属性使我们可以将一个元素与另一个用作描述的元素相关联。

Example:

例：

<button aria-describedby="payNowDescription" >Pay now</button>

<div id="payNowDescription">Clicking the button will send you to our Stripe form!</div>

使用隐藏的Aria隐藏内容 (Use aria-hidden to hide content)

I like a minimalistic design in my sites. My blog for example is mostly just content, with some links in the sidebar. But some things in the sidebar are just visual elements that don’t add up to the experience of a person that can’t see the page. Like my logo picture, or the dark/bright theme selector.

我喜欢网站中的简约设计。例如，我的博客主要只是内容，侧边栏中有一些链接。但是，侧边栏中的某些内容只是视觉元素，不会加深无法看到页面的人的体验。就像我的徽标图片或深色/深色主题选择器。

Adding the aria-hidden="true" attribute will tell screen readers to ignore that element.

添加aria-hidden="true"属性将告诉屏幕阅读器忽略该元素。