作业的正确标记：为什么要使用语义html

我的职业生涯（以及日常浏览）我遇到了很多网站，这些网站是直接进入的。如果您曾在凭借可访问性问题的项目上工作过，则会知道修复这些问题是庞大的任务 - 它需要时间，它需要人们，它需要优先级且优先级＆amp; MLDR它基本上是金钱。正如我在我的博客文章7神话中提到的7个神话设计师和开发人员相信Web Accessibility，改装可访问性很难。

关键是首先使用正确的工具为工作 - 或者更确切地说。在每个网站下，在CSS层下面，膨胀的框架，45945 API调用，有很好的旧HTML，这是可访问网站的关键。具体而言，语义html。

语义是对含义的研究，并且语义HTML正是 - 传达含义的HTML标签。他们告诉浏览器和辅助技术，如屏幕阅读器 - 关于页面的结构，以及与这些元素交互时应该如何表现。一个按钮应该让你点击它。有序列表应该有数字。

被视为人们依靠可视信息，告诉他们关于页面的结构。基于我们的UI约定的先验知识，我们可以识别标题的位置，页面的哪些部分是按钮或表单元素，以及页面的标题是什么。但如果你没有得到那个视觉信息，你怎么能告诉页面上的内容？

智能技术等智能技术将采用页面的HTML标记，并通过可听到的方式读出来，或将输出发送到盲文显示器的内容。它们将在文档中使用不同类型的HTML标记来向用户呈现结构化信息，允许它们由标题导航或通过页面中的链接循环。因此，它对我们使用的HTML标签很重要，以确保屏幕阅读器获得完整的图片。

采取此模拟新闻网站（如您所见，图形设计是我的激情）。我使用它主要建立它＆lt; div＆gt;元素，有几个＆lt; h1＆gt; s，因为我想要一些漂亮的大标题。我的菜单顶部是一系列＆lt; div和gt; s包含链接，底部的页脚是相同的。

如果你是像我这样的观点的用户，它看起来很好。我可以看到一个菜单，标题，一些标题和页脚。按键和图像标题很好地斜体，并且在Cookie横幅上有一些漂亮的按钮和花哨的SVG复选框。

但是，让我们从辅助技术的角度来看这个页面，它依赖于底层的HTML标记来建立文件的结构。我正在使用ScreenReader Software VoiceOver，它内置于麦斯科座中，但如果您在Windows上，您可以使用免费下载的NVDA。

VoiceOver，Jaws和NVDA等屏幕阅读软件为用户提供了一种方法，用于基于地标在页面上的不同部分。因此，您可以直接跳过页脚，或直接跳过网站的主要部分。这依赖于这些地标通过语义标签脱位，例如＆lt; header＆gt;，＆lt; main＆gt;和＆lt;页脚。我们在该示例中还没有使用任何这些标签，因此屏幕阅读器将无法识别任何地标。

当我运行Voiceover并按Ctrl + Option + Shift + I告诉我关于页面的时候，它说：

当我正确地标记页面的标题，页脚和主要部分时，具有＆lt;文章＆gt;围绕新闻文章本身的内容，VoiceOver允许我使用Ctrl + Option +右/左箭头之间导航它们。它告诉我：

如果ScreenReader用户正在尝试在此新闻页面中查找菜单，则它们将必须通过页面上的所有链接来尝试，并找到似乎它可能是菜单链接的所有链接。 ＆lt; div＆gt;筛选器完全忽略菜单，所以他们听到的只是每个单独的链接。没有什么可以告诉他们哪个部分是菜单。人们不必透过页面不必要地标签，以了解如何导航到网站的其他部分。

在HTML5之前，标记具有链接列表的菜单的最佳方法是无序列表 - ＆lt; ul＆gt ;.现在我们有＆lt; nav＆gt;标签，导航短。

从技术上讲，你不必在＆lt; nav＆gt内有一个列表; - 您可以刚刚放入。我个人喜欢在内部保持列表 - 清单的好处是一些屏幕读者将读出有多少物品，所以用户知道通过多长时间才能通过。如果旧屏幕读者不理解的情况下，它也很好的向后兼容性。

列表可以轻松打造（包括去除子弹点），以及＆lt; li＆gt; （列表项）元素可以包含链接和按钮。

您可以将aria-label属性添加到您的＆lt; nav＆gt;元素提供有关菜单目的的更多信息。

无论您是使用＆lt; nav＆gt;或者不是一个艰难而快速的规则。我注意到gov.uk（一个惊人的可访问设计的一个例子）实际上并不实际上使用它们，并用无序列表粘贴。只要你使用一个和/或另一个，你就会没事的。

除此之外，我建议使用Dev Tools检查器查看Gov.uk的来源，看看它们如何使用ARIA属性，因为它们非常好。

这些复选框不是真实的复选框 - 它们是＆lt; div＆gt;具有CSS的元素：在包含SVG复选框图标的伪选择器之前。 Voiceover将它们读出作为纯文本，不要想到您甚至可以单击它们。

它非常恼人的是，您无法在浏览器中屏蔽默认复选框，但仍然可以让您使用＆lt;输入类型=＆＃34;复选框＆＃34;＆gt ;.单选按钮也是如此。

如果我们将输入放回返回并视觉隐藏它（将输入元素留在DOM中），我们会获得更有用的读数：

我们隐藏来自屏幕阅读器的“漂亮”复选框，因为它们会拾取＆lt;输入＆gt ;.

。视觉上隐藏的{显示：块;高度：1 px;宽度：1 px;溢出：隐藏;剪辑：螺线（1 px 1 px 1 px 1 px）;剪辑：rect（1 px，1 px，1 px，1 px）;剪辑路径：插入（1 px）;白色空间：nowrap;位置：绝对; }

我们不能简单地使用可见性：隐藏或显示：无，因为这些属性实际应用于屏幕阅读器。任何隐藏的东西都将隐藏在筛绘器中。这个视觉上隐藏的课程确保具有此样式的元素对视力用户不可见，但仍然可见辅助技术。

有关此方法的更多信息，请查看Sara Soueidan的书呆子隐藏和amp指南;样式复选框和单选按钮。

对于更具语义的善良，我们现在可以将我们的复选框包装在＆lt; timentset＆gt;，其中群组在一起相关的形式字段。然后我们可以附上“我们可以使用哪些饼干？”通过使其成为＆lt; let;＆gt ;:

＆lt; Fieldset＆gt; ＆lt; Legend＆gt;我们可以使用哪种饼干？ ＆lt; / legend＆gt; ＆lt; =＆＃34的标签; Choc-chip＆＃34; ＆gt; ＆lt;输入ID =＆＃34; CHOC芯片＆＃34; type =＆＃34;复选框＆＃34; /＆gt; ＆lt; div类=＆＃34;漂亮的复选框＆＃34; aria-hidden =＆＃34;真＆＃34; ＆gt;＆lt; / div＆gt;巧克力芯片＆lt; / label＆gt; ＆lt; =＆＃34的标签;燕麦葡萄干＆＃34; ＆gt; ＆lt;输入ID =＆＃34;燕麦葡萄干＆＃34; type =＆＃34;复选框＆＃34; /＆gt; ＆lt; div类=＆＃34;漂亮的复选框＆＃34; ＆gt;＆lt; / div＆gt;燕麦粥＆amp; amp;葡萄干＆lt; / label＆gt; ＆lt; / fieldset＆gt;

“按钮” - 实际上是＆lt; div＆gt;添加onclick属性的元素 - 通过doicalover识别为“可点击”。并非所有筛网软件都能够以这种方式识别可点击的元素。

但是，如果我只使用键盘通过页面导航，我无法选择一个，因为浏览器不知道这是一个按钮。

当然，我们可以向这些按钮添加TabIndex属性以使其成为Tabbable，但是您可以弄乱文档的自然标签顺序的风险。最好的解决方案是使用＆lt;按钮＆gt;元素。这就是它的仿佛，你可以在使用CSS时仿造它。您甚至可以让按钮看起来像一个链接，反之亦然，这是一个在构建一个设计规范的网站时做了很多东西。

。按钮{光标：指针;显示：Flex;边框：0;盒子阴影：没有;边界半径：6 px;字体重量：粗体;字体大小：1 REM;边缘：自动0;证明 - 内容：中心;对齐 - 项目：中心;填充：0.8 REM 1 REM;白颜色 ;背景颜色：＃420a55; }。按钮：悬停{背景：＃8d6c99; }

我们页面上有三个H1元素：网站名称，文章标题和cookie横幅。网站应该只有一个＆lt; h1＆gt;元素 - 这是主标题，告诉您页面的内容。任何其他标题都应该嵌套在下面，或者可能没有甚至没有标题（在“低音扬声器时报”的情况下，这不需要是实际标题）。

文章中有一个副标题，它只是粗体文本。这应该是嵌套的标题，在这种情况下是＆lt; h2＆gt ;.

ScreenReaders允许用户借标题导航，因此它们以逻辑顺序为重要。

如果您想要大文本，请使用CSS进行样式，而不是依赖标题元素的浏览器默认大小。

按线条和图像标题使用＆lt; em＆gt显示在斜体中;标签。然而，屏幕读者实际上可以不同地读取这一点，因为它们期望＆lt; em＆gt;标记要强调 - 这就是EM意味着什么。所以声音可能会随着额外的压力而改变。划线和标题中的斜体是一种风格的选择，因此我们应该用CSS而不是＆lt; em＆gt;

＆lt; i＆gt;标签仍然存在于＆lt; em＆gt;标签，但代表了从其他语言的其他语言的科学名称，思想，技术术语和惯用术语中脱颖而出的文本：

红色狐狸，＆lt; I＆gt; v vlppes v v v v v v v v v v v v v v vμl;通常发现......这是一个＆lt;我郎=＆＃34; fr＆＃34; ＆gt;déjàvu＆lt; / i＆gt ;. ＆lt; I＆gt;当然＆lt; / i＆gt;她认为，＆lt; I＆gt;这一定是它＆lt; / i＆gt; .i＆lt; Em＆gt;真的＆lt; / em＆gt; Don＆＃39; t喜欢本书.DOD .DOD它是＆lt; EM＆gt;现在＆lt; / em＆gt;否，＆lt; Em＆gt; i＆＃39; m＆lt; / em＆gt; spartacus。

任何粗体文本 - ＆lt; b＆gt;表示显着性或关键字，也可能导致读出时的屏幕阅读器语音更改，因此如果效果纯粹呈现，则使用CSS。

有些令人困惑，两个都是＆lt;强壮＆gt;和＆lt; b＆gt;尽管浏览器中的粗体文本呈现略有不同的情况，但在稍微不同的情况下 - ＆lt; strong＆gt; “表示其内容具有强烈的重要性，严重或紧迫性”（MDN），其中＆lt; b＆gt;习惯于在没有紧急情况的情况下引起注意（例如，对于像这样的博客文章中的相关术语）。

我赢了，＆＃39;再次告诉你，＆lt;强＆gt;请勿断开火警＆lt; / strong＆gt;。这被称为＆lt;。 B＆gt;语义HTML＆lt; / b＆gt ;.

NB。令人沮丧的是，Markdown似乎没有区别于这些元素，所以一切都是＆lt;强壮的。或＆lt; em＆gt ;.如果要使用＆lt; b＆gt;或＆lt; i＆gt;您必须在Markdown中添加它们作为HTML。

观察用户明确的是，图像下的文本是一个标题，但不是屏幕读者 - 没有什么可以将这两个相关联的。

我们可以通过在＆lt;图和gt中包装图像来解决它。元素，然后添加一个＆lt;图。在图像下面。

＆lt;图类=＆＃34;图像＆＃34; ＆gt; ＆lt; img alt =＆＃34;一个可爱的蓬松萨米般的＆＃34; src =＆＃34; https：//codepen-assets.s3.eu-west-2.amazonaws.com/alex-russell-saw-dj8cxyi9ink-unsplash-1.jpg" /＆gt; ＆lt; figecaption class =＆＃34;标题＆＃34; ＆gt;＆＃34;我见过的最令人着迷的蛹;照片：＆lt; href =＆＃34; https：//unsplash.com/@alexrussellsaw" ＆gt; Alex Russell-Saw＆lt; / a＆gt; ＆lt; / figeqution＆gt; ＆lt; / /图＆gt;

如上所述，＆lt; div＆gt;元素可以非常滥用。这并不是说你根本不应该使用它们：相反。但你应该只用它们来实现他们的预期目的：完全无意义的容器。我将它们用来将元素组在一起，然后用CSS进行样式。或者我将在＆lt; div和gt中包装整个页面。并使其进入My＆lt; header＆gt;，＆lt; main＆gt;和＆lt;页脚。 ＆lt; div＆gt; s很棒，只要您不使用它们来代替更有意义的元素。

您可以在本网站上使用Dev Tools Inspector，并查看我使用的方式＆lt; div＆gt; s表示：例如，标题中的所有星星都是从屏幕阅读器中隐藏的div，因为它们完全是装饰性的。

我已经使用语义HTML标记重新创建了同一个站点，它看起来非常相同（在这里保存一些不同的边距，那么容易修复）。

还有很多改进空间。 ARIA属性在这里发挥作用，添加有关页面每个部分角色的额外信息。我只是说明了这个例子中的语义元素。

该页面被分解为＆lt;标题＆gt;，＆lt; main＆gt;和＆lt;页脚，用＆lt;物品＆gt;围绕主页内容

只有一个＆lt; h1＆gt;在页面上，因为它表示主页，告诉您页面的内容

复选框是＆lt;输入类型=＆＃34;复选框＆＃34;＆gt;，用＆lt;标签＆gt; s在每个它们上面，它们也在一个＆lt; fieldset＆gt;具有＆lt; Legend＆gt;解释复选框的内容

本文中的副标题现在是＆lt; h2＆gt; （主要标题下的第一级嵌套）

我用了一个＆lt;图＆gt;对于图像，具有＆lt;图形＆gt;对于标题表示它是该图像的标题

使用语义HTML作为网站的构建块将为您提供可爱的访问基础，用于添加您的花哨的CSS和Whazzy JavaScript。您可以在JS Frameworks中使用语义元素 - 我在工作中每天都会撰写React，始终使用语义元素。您的用户（和/或您的客户）会感谢您。