Accessibility in web development means making web sites easy for everyone to use.

Web开发中的可访问性意味着使网站易于所有人使用。

Sound bland? The keyword here is everyone. With an emphasis on people living with limited physical abilities. Because for disabled people, technology makes essentials possible.

听起来平淡无奇？ 这里的关键字是每个人 。 重点关注身体有限的人。 因为对于残疾人来说，技术使必需品成为可能。

“Accessibility allows us to tap into everyone’s potential.” ― Debra Ruh

“可访问性使我们能够挖掘每个人的潜力。” ―黛布拉·鲁

在Web开发中进行可访问性 (Doing Accessibility in Web Development)

Okay, this makes sense. But how can I do accessibility in my code? If you want to know this and you have basic knowledge of HTML and CSS, you’re on the right boat. Let’s go.

好的，这很有道理。 但是如何在代码中实现可访问性？ 如果您想知道这一点，并且拥有HTML和CSS的基础知识，那么您来对地方了。 我们走吧。

语义HTML (Semantic HTML)

Semantic HTML is HTML that is focused on the meaning of content being marked up, not just on its presentation. Let me bring this home with an example:

语义HTML是HTML，它着重于标记内容的含义，而不仅仅是其表示形式。 让我举一个例子：

In the above examples, both codes display the same content. But the second one implements semantic HTML. As we go on in this article you’ll understand exactly what this means and why it’s important.

在上面的示例中，两个代码显示相同的内容。 但是第二个实现语义HTML。 当我们在本文中继续进行时，您将确切地理解这意味着什么以及为什么它很重要。

How does semantic HTML help Accessibility?

语义HTML如何帮助可访问性？

Screen readers aid people living with limited vision navigate and understand web content using semantic HTML.

屏幕阅读器可帮助视障人士使用语义HTML导航和理解Web内容。

For instance, when a screen reader gets to a paragraph properly marked up with tag <p>, it would inform the user that this is a paragraph before it reads the text content in it, but it won’t usually do this if the correct tag is not used.

例如，当屏幕阅读器到达正确标记有标签<p>的段落时，它将在读取文本内容之前通知用户这是一个段落，但是如果正确，通常不会这样做标签未使用。

Most screen readers also enable users to navigate web content on a site using headings, so increasing the font size of text to represent headings doesn’t cut it. Using proper heading tags (<h1>, <h2>,…) is better for accessibility.

大多数屏幕阅读器还使用户能够使用标题导航网站上的Web内容，因此增加表示标题的文本的字体大小不会削减标题。 使用适当的标题标签( <h1> ， <h2> ，…)对于可访问性更好。

Some guidelines for writing Semantic HTML:

编写语义HTML的一些准则：

• Find and use proper HTML tags for markup: We’ve already talked about using heading and paragraph tags for headings and paragraphs. So, let’s learn about some that get mixed up, right now. <em> and <i>, both of these present text in italics but a screen reader would notify the user that text within <em> is important. The same goes for <strong> and <b>, the former is announced as stating something of importance while the later only makes the text bold with no semantics attached. Others include the <blockquote> (used to specify a quotation),<abbr> (used to nest an abbreviation. This could be of help to people with cognitive disability),<ul> (used to specify a list of items), <li> (used to markup an item on a list).

  查找并使用适当HTML标记进行标记：我们已经讨论过将标题和段落标记用于标题和段落。 因此，让我们立即了解一些混杂的问题。 <em>和<i>都以斜体显示，但是屏幕阅读器会通知用户<em>中的文本很重要。 <strong>和<b>也是一样，前者被宣布为重要内容，而后者仅使文本加粗，没有附加语义。 其他包括<blockquote> (用于指定引号)， <abbr> (用于嵌套缩写。这可能对有认知障碍的人有所帮助)， <ul> (用于指定项目列表)， < li> (用于标记列表中的项目)。

• Create Layouts with Semantic HTML: This entails creating web layouts with some HTML5 tags introduced for semantics' sake. These tags include the <nav> (used to hold navigational items),<header>(used to hold introductory content for a section or the whole document, most times <nav> is placed inside it),<main> (specifies the main content of the web page),<article>(specifies an independent block of content),<section> (mostly used to markup parts of the content in <article>) and the <footer> (describes a footer for the document).

  使用语义HTML创建布局：这需要使用一些为语义而引入HTML5标签来创建Web布局。 这些标签包括<nav> (用于保存导航项)， <header> (用于保存部分或整个文档的介绍性内容，大多数时候将<nav>放在其中)， <main> (指定主网页的内容)， <article> (指定一个独立的内容块)， <section> (主要用于标记<article>中的部分内容)和<footer> (描述文档的页脚)。

• Text Alternatives: Make sure every non-textual content on the web page has a text alternative. For videos, a transcript could be added, and for images an alternative text using the alt attribute or <caption> tag can be used. Other options for adding text alternatives to multimedia can be found here.

  替代文字：确保网页上的所有非文本内容均具有替代文字。 对于视频，可以添加成绩单，对于图像，可以使用使用alt属性或<caption>标记的替代文本。 在此处可以找到将文本替代项添加到多媒体的其他选项。

在Web开发中使用CSS实现可访问性 (Using CSS for Accessibility in Web Development)

CSS should enhance user experience.

CSS应该增强用户体验。

When choosing color schemes, it is recommended to use good contrast and to style important text well, so things on the screen can be viewed clearly even with limited vision.

选择配色方案时，建议使用良好的对比度并为重要的文本设置良好的样式，这样即使在视力不佳的情况下也可以清晰地看到屏幕上的内容。

It’s also helpful for people with low motor skills that you make navigatable icons larger or with ability to zoom in.

这对于运动技能低下的人也很有用，您可以将可导航图标放大或具有放大功能。

Keeping navigation simple is good for user experience.

保持导航简单有利于用户体验。

使用JavaScript进行Web辅助功能 (Using JavaScript for Accessibility on the Web)

For frontend development, JavaScript should only be used to add functionality to a website. Using JavaScript to generate everything from HTML markup to styling, may bring up unexpected problems that will detract from user experience.

对于前端开发，JavaScript仅应用于向网站添加功能。 使用JavaScript生成从HTML标记到样式的所有内容，都可能会带来意想不到的问题，从而降低用户体验。

Also, fixing HTML issues with JavaScript is always a bad idea, for example, the button tag, <button> has some inbuilt functionalities, not using it when needed, and instead using CSS and JavaScript to create a button, could bring up user interaction issues and make your code messy.

此外，使用JavaScript修复HTML问题始终不是一个好主意，例如，按钮标签<button>具有一些内置功能，在需要时不使用它，而是使用CSS和JavaScript创建按钮，可能会引起用户交互问题，并使您的代码混乱。

“The one argument for accessibility that doesn’t get made nearly often enough is how extraordinarily better it makes some people’s lives. How many opportunities do we have to dramatically improve people’s lives just by doing our job a little better?” ― Steve Krug

“关于可访问性的论点很少得到足够多的关注，它是如何使人们的生活变得异常好。 仅仅通过更好地完成工作，我们就需要多少机会来显着改善人们的生活？” ―史蒂夫·克鲁格

结论 (Conclusion)

"The Web is fundamentally designed to work for all people, whatever their hardware, software, language, culture, location, or physical or mental ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability." (W3C - Accessibility)

“从根本上说，Web旨在为所有人服务，无论他们的硬件，软件，语言，文化，位置，身体或心理能力如何。当达到此目标时，听力，活动范围广泛的人们都可以使用它。 ，视觉和认知能力。” (W3C-可访问性)

And in this lies the power of the web.

网络的力量就在于此。

I believe this article will help you implement accessibility in your development,and become a better advocate for a more universal, inclusive web.

我相信本文将帮助您在开发中实现可访问性，并成为更通用，更具包容性的Web的更好拥护者。