构建无障碍可访问性的Web站点向导指南

可访问性 (a11y)是网络开发的一个重要部分， 因为它为数百万用户提供了无限制的访问。不幸的是，许多开发者没有采取必要的措施来确保网络的无障碍性， 而且常常忽略了这一点。最近的一份报告显示， 98%的顶级网站没有提供完全无障碍访问的体验.

If you're building a web app or website, you'd want it to be usable by everyone irrespective of their disabilities, age, and physical circumstances. Accessibility shouldn't be an afterthought carried out close to production; instead developers should include it from the start of the development process.

如果你正在建立一个网络应用程序或网站，你希望它能被每个人使用，无论他们的残疾、年龄和身体状况如何。 无障碍性不应该是生产之后的事后考虑，相反，开发人员应该从开发过程的一开始就包括它。

Luckily, accessibility isn’t so difficult to implement. Once you understand the issues that make a site nearly impossible to use by certain people, you can take the measures to prevent those issues and ensure your site is welcoming to all.

幸运的是，无障碍性并不难实现。 一旦你了解了导致某些人无法使用网站的问题所在，你就可以采取措施来防止这些问题， 并确保你的网站对所有人都是受欢迎的。

什么是 Web 无障碍访问？#

Web accessibility is the method of making websites and web applications usable by everyone, including those with a form of disability, impairments, or limitations.

Web 无障碍可访问性是使每个人都可以使用网站和 Web 应用程序的方法，包括那些有某种形式的残疾、障碍或限制的人。

Nearly 15% of the world's population lives with some form of disability. Safe to say, if you don't develop your site to work with Assistive Technology (AT) like a screen reader, you prevent almost 1 billion people from engaging with your content.

世界上近 15% 的人口患有某种形式的残疾。可以说，如果你不配合使用屏幕阅读器之类的辅助技术 (AT)来开发你的 web 网站，你将阻止近 10 亿人与你的 wen 内容进行交互。

When you build an accessible website, you're breaking down the walls of web exclusion and granting all users equal access to the web.

当你在构建一个无障碍可访问的网站时，你就打破了网络排斥的围墙，给予所有用户平等的 web 访问权。

实现网络无障碍的原因(理由)#

Building an accessible web is important for the following reasons: 建立一个无障碍网络是很重要的，原因如下：

1. Improves usability: Usability involves creating an effective, efficient, and satisfying product. When you make the web accessible, you automatically remove restrictions and make it available for everyone with or without a disability.

1. 提高可用性： 可用性涉及创建有效、高效和令人满意的产品。 当你使 Web 具有无障碍可访问性时，意味着你自动消除了限制，并使其可供任何有或没有残疾的人使用。

2. It is the law: Some government policies and laws mandate web accessibility compliance. Failure to comply with these laws could cause legal actions to be taken against your company, as in the case of Domino's Pizza. Hence, to prevent risks of lawsuits and complaints, it is best to ensure your website or app is accessible.

2. 这是法律要求： 一些政府政策和法律要求遵守 Web 无障碍可访问性。 不遵守这些法律可能会导致对你的公司被采取法律行动，例如 Domino's Pizza。 因此，为了防止诉讼和投诉的风险，最好确保你的网站或应用程序可以具有无障碍访问性。

3. It is the right thing to do: At the end of the day, accessibility is the right thing to do. You’d want to promote inclusion and diversity to everyone who wishes to use the web. Building an accessible web implies that you're opening the door to anyone who wants to use your site regardless of their physical or cognitive ability.

3. 这是正确的做法： 在任何时候，无障碍环境是正确的值得去做的事情。如果你想向每个希望使用 web 的人促进包容性和多样性。那么建立一个无障碍的网络意味着你在向任何想使用你的网站的人敞开大门，无论他们的身体或认知能力如何。

Web 无障碍标准#

The two main guidelines that set web accessibility standards are:

设置 Web 无障碍可访问性标准的两个主要准则是：

1. Web 内容无障碍可访问性指南 (WCAG 2.1)#

The Web Accessibility Initiative (WAI), managed by the World Wide Web Consortium (W3C), published these guidelines. They are basic rules that explain how developers can create more accessible content for people with disabilities.

The WCAG is based on four principles, known as "POUR."

1. Perceivable: All information and user interface components must be presented to users in a way they can perceive it.

2. Operable: User interface (UI) components and navigation must be operable.

3. Understandable: All information and the operation of the user interface must be understandable by users

4. Robust: Content must be robust enough to be interpreted by many users and assistive technologies.

2. 网络无障碍倡议--无障碍的富互联网应用 (WAI-ARIA)#

The Accessible Rich Internet Applications Working Group (ARIA WG), also run by the W3C WAI, came up with these guidelines. WAI-RAI focuses on more complex web apps and best practices for building accessible web components and offers the following:

• Roles that describe widgets used, such as "menu," "slider," and "progress bar."

• Roles that describe web page structure, such as headings and tables.

• Properties that tell the state widgets are in, such as "checked" for a check box.

• A way to provide keyboard navigation for various web events.

• Properties that describe the live regions of a page that usually get frequent updates

构建无障碍可访问 web 应用的 10 个最佳实践#

To build accessible websites and web apps following the principles and guidelines above, let's examine some action items and best practices you can implement:

1. 编写语义化 HTML#

HTML comprises both semantic and non-semantic elements. Semantic HTML is the foundation for good web accessibility practices because it specifies the type of content within the tags.

An example of a semantic HTML tag is the <button> tag because it conveys a button and a user should take action. What about the <div> tag? You probably guessed right! The <div> tag is a non-semantic HTML because it only acts as a wrap and doesn't communicate the meaning of its enclosed content.

When developing a product, strive to write semantic HTML because assistive technologies like screen readers use semantic HTML to understand how best to interpret each element to a user.

Source: SoftTeco

2. 对图片使用 ALT 文本#

Images make content more appealing and easy to understand. For visually impaired web users who cannot see these images on the web, the ALT text helps them understand that image.

ALT provides descriptive text to images. These ALT texts allow screen readers to notify users of the kind of image. Without an ALT text, a screen reader would simply say <image> and not the image's description.

Here's an example ALT text for the image below:

<img src="/images/towerbridge.jpg" alt="Tower bridge at dawn" />

Source: Flickr

3. 避免使用 div 按钮#

As a developer, the chances are that you can style a <div> to look exactly like a <button>.

Visual representation of div styled as a button vs a button

Although, these two elements may look alike, they don't communicate the same thing to a screen reader. In the first instance, the screen reader will only read out the text content, and users aren't aware they should click the button for the download. In the second instance, a screen reader will announce that users should click the button to download.

To be fair, some people may argue that assigning 'role=button' makes the div a button. However, this approach is bad practice as you'd need to get many "bells and whistles" going, such as onClick handlers, preventDefault, and more.

By all means, avoid using <div>s to build <button>s and other interactive elements. Rather, use <div>s and <span>s as generic boxes for grouping elements at the block or inline levels.

4. 正确使用 headings 标题#

Headings do more than give your text a fancy big, and bold look. They provide a solid structure to your web page. Think of them as guides that help readers quickly scan through the various sections of your webpage to get an idea of what each entails.

A good heading structure uses the <h1> to <h6> tags to organize web content for accessibility and a good user experience.

HTML Heading Structure

Without proper headings, visually impaired users won't be able to do a quick scan of the page sections and would have to read the entire web page for information. However, with a proper heading structure, screen readers can read a page's layout aloud, allowing users to quickly jump from one heading to another.

A golden rule is to avoid using headings to set font sizes or for visual styling. For instance, using a <h2> tag because you need a large font size. Doing this will result in a poor HTML structure and overall a bad user experience for assistive technology users. In short, use CSS for styling.

5. 支持键盘导航#

Not all users navigate a site page using a trackpad or mouse; many users (with or without motor disabilities) rely on the keyboard to navigate.

Developers need to be aware of the following to enforce keyboard accessibility:

• Keyboard focus: This enables sighted users to know what element on the webpage has focus. If the keyboard focus is missing, it becomes difficult for users to access information through a keyboard.

• Keyboard tab order: When a keyboard user navigates through a website using the tab, it must be logical, in the correct order, and direct them to the desired point on the page.

• Keyboard traps: A keyboard trap happens when a keyboard user cannot move focus away from an interactive element while using the keyboard only. Keyboard traps often occur in calendar widgets or dialogue boxes. A classic scenario is when a user opens a dialogue box but is unable to move to the next item with the tab key or is unable to close the dialog box with the ESC key.

To check the accessibility of your site:

1. Place the cursor at the address bar of the browser.
2. Start to press the tab.
3. Confirm if you're able to navigate through every link or button.

6. 提供足够的颜色对比#

Color contrast describes the differences between the darkest and lightest color brightness. If the color contrast between the background and text is low, users with visual impairments like color blindness will have trouble reading content on your page. As a standard, WCAG advises that for body text and background (text with font sizes of 18px and below), the color contrast should be at least 4.5:1.

The WCAG guidelines recommend the following contrast ratios for designing readable interfaces:

Web Developers should ensure they validate their color contrast according to accessibility standards before building web pages. With a good color contrast, you make it easy for every user to read text elements on your site easily.

Example of poor and good color contrast

7. 在一个文本块中加下划线链接#

Link accessibility, although easily ignored is an essential aspect of accessibility. On many sites, links are only differentiated from text by color which makes it hard for users with color blindness to identify.

When it comes to making a link accessible, don't use only colors to communicate or differentiate links within a block of tex. By standard, WCAG2.1 recommends that links should also be underlined.

Comparison between links

8. 使用 ARIA 标记(Use ARIA landmarks)#

The previous versions of HTML lacked some tags that semantically described some UI widgets like menus. To bridge this gap, developers had to use <div> tags to create these widgets.

Although these widgets looked as they should visually, assistive technologies couldn't adequately interpret them to users because the code didn't provide enough information. This is because the <div> tag is a non-semantic HTML. ARIA was introduced to cover up accessibility issues HTML couldn't handle. ARIA, also known as WAI-ARIA, stands for Web Accessibility Initiative — Accessible Rich Internet Applications.

By definition, ARIA is a W3C specification that helps enhance accessibility for plain HTML by providing further information to assistive technologies using HTML attributes. It is important to note that ARIA solely provides an extra descriptive layer for screen readers and has no impact on how these elements are presented.

There are two major categories of ARIA attributes: Roles and State & properties:

• Roles describe what an element does and doesn't change once set. For example, you describe the role of a search form as: <form role=" search">.

• States and Properties ARIA states and properties support ARIA roles that already exist on a page. While ARIA Properties describe the relationships with other elements and don't change once set, ARIA States are more dynamic and usually update when users interact with a page.

3 popular ARIA States and properties are: aria-label, aria-labelledby and aria-describedby.

Note that ARIA doesn't replace HTML; instead, it complements it.

9. 为表格添加标题#

The same reason you would label a table for sighted users to get a quick idea of its content is why you'd need to add a caption to your table for visually impaired users. A caption describes the content of the table to screen readers.

To add caption to a table, use the <caption> tag and place it immediately after opening the <table> tag.

Example:

<table>
  <caption>Computer Science students</caption>
  ...
</table>

With the caption, a screen reader can now understand the information in a table and convey it to users.

10. 在表单中添加<label>标签#

Without a <label> tag, assistive technologies won't be able to understand and differentiate the input fields on your form. When a screen reader gets to a form, it immediately reads out the label so that non-sighted users know the type of input form.

There are two ways to attach <label> to <input> fields:

1. 将 label 元素中的for属性与 input 元素中的 id 属性相匹配。#

<label for="first-name">First Name</label>
  <input type="text" name="name" id="first-name">

2. 将<input>放在<label>标签内。#

<label>
   First Name
   <input type="text" name="first-name">
 </label>

建立一个包容所有人的 wen 应用#

While there are many aspects to consider when weaving accessibility into your site, the above information are a good foundation for building an accessible web.

At Chakra UI, we fully understand the importance of accessibility and know that it may require a lot more time to build accessibility into your sites and apps from the ground up. All our components are fully accessible, giving developers the superpowers to create accessible sites with speed. Feel free to use any of our components.

Building an accessible web isn't a "nice to have" and should be a priority for everyone.