语义分割 语义分类_语义html以获得更好的可访问性

语义分割 语义分类

When I first learned to create a basic webpage using semantic HTML, it was not in the context of accessibility. I learned terms like header, footer, section, and aside, but didn’t have a clear understanding of why these terms were important. Over time, I saw a lot of code simply using divs for everything, and fell into that pattern myself. I realized that it didn’t affect the functionality of my web pages as far as I was concerned, and didn’t require me to think about the construction of my webpages at all. It takes no effort or thought to throw a div in there.

当我第一次学习使用语义HTML创建基本网页时，它并不是在可访问性的上下文中。 我学会了诸如header ， footer ， section和aside之类的术语，但是对为什么这些术语如此重要并不清楚。 随着时间的流逝，我看到了很多代码，所有内容都简单地使用了div ，并且自己陷入了这种模式。 我意识到，就我而言，它不会影响我的网页的功能，也完全不需要我考虑我的网页的结构。 将div放入其中无需花费任何精力或思想。

Since then, I’ve taken a deep dive into accessibility, and various tools for enabling wider access to web pages.

从那时起，我就深入研究了可访问性，以及用于实现对网页的更广泛访问的各种工具。

So, now I’m here to strongly encourage you to use semantic HTML correctly and intentionally.

因此，现在我在这里强烈建议您正确有意地使用语义HTML。

This post will give a brief summary of accessibility and screen readers, describe what belongs within each semantic html tag, talk about using automated tools such as Lighthouse for testing accessibility on your page, and direct you to comprehensive sources for information and guidance on accessibility.

这篇文章将简要介绍可访问性和屏幕阅读器，描述每个语义html标记中的内容，并讨论如何使用自动工具(例如Lighthouse)来测试页面上的可访问性，并指导您获得有关可访问性的信息和指导的综合资源。

ACCESSIBILITY

可及性

An accessible web page is one that is functional and readable for all users, including those who are experiencing an impairment or disability. That impairment or disability could be physical, non-physical, temporary, or sustained, and there’s a huge range of tools to help with any of them.

可访问的网页是对所有用户(包括正在遭受损害或残障的用户)起作用且可读的页面。 这种损害或残障可能是身体上的，非身体上的，暂时的或持续的，并且有很多工具可以帮助他们。

THE IMPORTANCE OF SEMANTIC HTML

语义HTML的重要性

Using correct Semantic HTML is crucial for efficient navigation of a web page using a Screen Reader.

使用正确的语义HTML对于使用屏幕阅读器高效浏览网页至关重要。

Screen readers are software programs that allow blind or visually impaired users to read text displayed on a screen with either a speech synthesizer or a braille display. Screen readers create an alternate version of the page. Victor Tsaran, a Google employee who is blind, released this video to show the experience of using a screen reader for everyday use. This video was incredible to me, having never seen a screen reader in use, and I highly recommend checking it out.

屏幕阅读器是允许盲人或有视觉障碍的用户使用语音合成器或盲文显示器阅读在屏幕上显示的文本的软件程序。 屏幕阅读器会创建页面的备用版本。 失明的Google员工Victor Tsaran发布了此视频，展示了日常使用屏幕阅读器的体验 。 这部影片对我来说是不可思议的，从未见过使用屏幕阅读器，因此我强烈建议您检查一下。

Using semantic elements and consistent labeling gives screen readers more information about what is being displayed, and empowers users to zip around the page using key terms. Without it, a user may be forced to go through the page line by line to try to find the information they are interested in, or render some buttons or functionality unusable. You could compare the experience of listening to endless non-semantic elements to listening through an unreasonably lengthy phone menu to know which number to press for the information you are looking for.

使用语义元素和一致的标签可以为屏幕阅读器提供有关所显示内容的更多信息，并允许用户使用关键术语在页面上滑动。 没有它，用户可能会被迫逐行浏览页面以尝试找到他们感兴趣的信息，或者使某些按钮或功能无法使用。 您可以将收听无尽的非语义元素的体验与通过冗长的电话菜单进行聆听的体验进行比较，以了解要查找所需信息时按哪个数字即可。

WHAT TO DO

该怎么办

Use div and span only for layout. These elements don’t give any keyboard or touch support in any browser, and they don’t communicate anything to assistive technology. Avoid using them for headings, buttons, or other uses where semantic elements would provide more meaning.

仅将div和span用于布局。 这些元素在任何浏览器中均不提供键盘或触摸支持，并且不与辅助技术进行任何通信。 避免将它们用于标题，按钮或其他使用语义元素会提供更多含义的地方。

Buttons should be used for actions, and links for navigation, as intended. Remember that styling can be altered, if that’s the reason you are tempted to use div.

应按预期将按钮用于操作，将链接用于导航。 请记住，如果这是您倾向于使用div的原因，则可以更改样式。

Provide names for buttons to avoid ambiguity and to enable users relying on a screen reader to know what action they will initiate.

为按钮提供名称以避免混淆，并使用户能够依靠屏幕阅读器知道他们将要发起的操作。

If you use each semantic element for its intended use, the browser will do most of the work for you to make that element accessible. Below are some of the most common semantic elements.

如果您将每个语义元素用于其预期用途，则浏览器将为您完成大部分工作，以使该元素可访问。 以下是一些最常见的语义元素。

SEMANTIC ELEMENTS

语义要素

The <header> element defines a header of your document that will always be visible at the top of the page. It gives introductory content, and commonly contains heading elements, a logo, a search form, and navigation.

<header>元素定义文档的标题，该标题始终在页面顶部可见。 它提供了介绍性内容，通常包含标题元素，徽标，搜索表单和导航。

Headings are very important. Screen reader software has a shortcut key which asks the browser to search the HTML for anything inside a h1 to h6 heading element. It will send back a list of headings, allowing a user to quickly select which they would like to read.

标题非常重要。 屏幕阅读器软件具有一个快捷键，该快捷键要求浏览器在HTML中搜索h1至h6标题元素内的所有内容。 它将发送回标题列表，使用户可以快速选择想要阅读的标题。

The <nav> element denotes a section of a page that has the purpose of providing navigation links. Examples include menus, tables of contents, and indexes.

<nav>元素表示页面的一部分，旨在提供导航链接。 示例包括菜单，目录和索引。

The <main> element encloses the main contents of a document, and should be unique to the document. It should not contain repeated content such as navigation links, site logos, search forms, etc.

< main >元素包含文档的主要内容，并且对于该文档应该是唯一的。 它不应包含重复的内容，例如导航链接，站点徽标，搜索表单等。

The <section> element represents a grouping of related information, and usually will have a heading. It’s used when other, more specific, semantic elements don’t apply, and may contain any other elements. It cannot be a descendent of <address>. Consider using the <article> element(below) if your section is a self-contained grouping.

<section>元素代表一组相关信息，通常会有一个标题。 在其他更具体的语义元素不适用且可能包含其他任何元素时使用。 它不能是< address >的后代。 如果您的部分是独立的分组，请考虑使用< article >元素(如下)。

The <article> element represents a stand-alone composition on the page. Examples include a forum post, a newspaper article, or a blog entry. An <article> may contain multiple <section> elements.

<article>元素代表页面上的独立组成。 示例包括论坛帖子，报纸文章或博客条目。 < article >可能包含多个< section >元素。

The <aside> element represents a portion of the document with content that is indirectly related to the main content. They are often presented as sidebars or call-outs.

< aside >元素代表文档的一部分，其内容与主要内容间接相关。 它们通常以侧边栏或标注的形式出现。

A <footer> element typically contains information about the nearest sectioning content, including author information, or links to related documents.

< footer >元素通常包含有关最近的切片内容的信息，包括作者信息或到相关文档的链接。

The <address> element indicates that the enclosed HTML contains contact information.

< address >元素表示随附HTML包含联系信息。

The <figure> element indicates separated content, which may include photos or diagrams.

< 图 >元素表示分隔的内容，其中可能包含照片或图表。

The <figcaption> element is used as a child of the <figure> element to give a caption or legend that describes the contents of the figure.

在<figcaption>元素被用作< 图 >元素的子元素以得到描述该图的内容的标题或图例。

The <details> element denotes additional details that the user can choose to display or hide.

< details >元素表示用户可以选择显示或隐藏的其他详细信息。

The <mark> element indicates text that is marked or highlighted for emphasis.

< 标记 >元素表示已标记或突出显示以强调的文本。

The <time> element, intuitively, is used to denote a display of time and date on the page.

< time >元素直观上用来表示页面上时间和日期的显示。

IS YOUR WEBSITE ACCESSIBLE?

您的网站可以访问吗？

There are open source automated audits to test for accessibility. While they won’t tell you everything about the ease of use or efficiency of your site, they can wave a red flag for anything that is not functional for users using assistive technologies. Try it in chrome by opening up your dev tools, selecting the lighthouse tab, and making sure the accessibility option is checked.

有开源的自动审核来测试可访问性。 尽管他们不会告诉您有关网站的易用性或效率的所有信息，但是对于使用辅助技术的用户无法使用的所有内容，他们可以发出警告。 通过打开开发工具，选择“灯塔”标签，并确保选中了“辅助功能”选项，可以在chrome中进行尝试。

As an example, I checked this page as I was writing, and it scored an 86 for accessibility. It flagged several things, including a button without an accessible name, making it unusable for anyone relying on a screen reader to know what the actions it carries out would be.

例如，我在撰写本文时检查了此页面，可访问性得到86分。 它标记了几件事，包括一个没有可访问名称的按钮，这使得依赖于屏幕阅读器的任何人都无法知道它将执行的操作。

In the below resources, there’s a checklist by WebAIM for checking your web content for accessibility.

在以下资源中，WebAIM有一个清单，用于检查您的Web内容的可访问性。

MORE RESOURCES

更多资源

There’s an excellent Google Webdocs text version of part of the content available in the free Udacity course on Accessibility. These cover far more than semantic HTML.

免费的Udacity关于Accessibility的课程中提供了部分内容的出色的Google Webdocs文本版本 。 这些内容远远超过语义HTML。

Check out the Web Content Accessibility Guidelines (WCAG) 2.0, which was put together by accessibility experts to break down the meaning of accessibility, and provide guidance around best practices.

查阅Web内容可访问性指南(WCAG)2.0 ，该指南由可访问性专家整理而成，以分解可访问性的含义，并提供有关最佳实践的指南。

WebAIM has broken the WCAG guidelines down into a checklist for web content.

WebAIM已将WCAG指南分解为Web内容的清单 。

Web.dev has excellent information on accessibility for development called Accessibility for All.

Web.dev拥有关于可访问性的出色信息，称为可访问性 。

For more detail and examples for semantic HTML tags, see HTML5 Semantic Tags: What Is Semantic Markup?

有关语义HTML标签的更多详细信息和示例，请参见HTML5语义标签：什么是语义标记？

MDM Webdocs HTML Elements Reference.

MDM Webdocs HTML元素参考 。

Check out Three common accessibility pitfalls for developers: information and relationships by Julie Grundy.

查看开发人员的三个常见的可访问性陷阱：朱莉·格伦迪(Julie Grundy)的信息和关系 。

THANK YOU!

谢谢！

As always, I’m learning continuously, and would be happy for any feedback or corrections.

与往常一样，我一直在不断学习，并希望收到任何反馈或更正。

Take care of each other.

互相照顾

翻译自: https://medium.com/swlh/semantic-html-for-better-accessibility-a54d0742033f

语义分割 语义分类