语义分割辅助回环检测
Web Accessibility is vast and complex. This has become abundantly clear as I endeavour to teach myself the tools necessary to make the Web truly egalitarian, as it was designed to be. As such, this blog is designed to an overview, in an attempt to provide those that are interested in the field a foundation to build upon, as I will continue doing so! It will focus on Semantic HTML and ARIA, two means of providing a web page with the tools necessary to add meaning to its content. Crucially, this is paramount in allowing assistive technology, such as screen readers, to function as intended.
Web可访问性是巨大而复杂的。 当我努力向自己学习如何使Web真正按计划实现平等时，这已经变得非常清楚。 因此，本博客旨在进行概述，以期为那些对该领域感兴趣的人提供基础，而我将继续这样做！ 它将着重于语义HTML和ARIA，这是为网页提供为内容添加含义所必需的工具的两种方法。 至关重要的是，这对于允许诸如屏幕阅读器之类的辅助技术按预期起作用至关重要。
语义HTML (Semantic HTML)
Semantic HTML elements are those that “clearly describes its meaning to both the browser and the developer”¹. As such, they come with built-in functionality that aids massively in coding for accessibility. Thus, the use of native HTML elements is encouraged, if the website is to be accessible. There are around 100 semantic elements, each with a clear role and meaning. For instance, the <h1> element is semantic as it is clearly intended to be a top level heading on the page. However, a <div> is not semantic as it has no inherent meaning; we cannot ascertain its contents.
语义HTML元素是“清楚地向浏览器和开发人员描述其含义”的元素¹ 。 因此，它们带有内置功能，可极大地帮助进行可访问性编码。 因此，如果要访问该网站，则鼓励使用本机HTML元素。 大约有100个语义元素 ，每个元素都有明确的作用和含义。 例如，<h1>元素是语义的，因为显然它是页面上的顶级标题。 但是，<div>不是语义的，因为它没有内在的含义。 我们无法确定其内容。
Why use Semantic HTML?
为什么要使用语义HTML？
As far as this blog is concerned, the main benefit of semantic HTML is more accessible websites. There are other benefits such as increased Search Engine Optimisation and cleaner code, but that is beyond the scope of this post.
就此博客而言，语义HTML的主要好处是可访问性更高的网站。 还有其他好处，例如增强的搜索引擎优化和更简洁的代码，但这超出了本文的范围。
As we touched on before, semantic HTML is code that a screen reader can more readily understand. Using semantic elements such as <header>, <main>, <aside> and <footer>, it is clear to the screen reader where these elements should be on the page, and it can translate this information more efficiently to the user.
如前所述，语义HTML是屏幕阅读器可以更容易理解的代码。 使用诸如<header>，<main>，<aside>和<footer>之类的语义元素，屏幕阅读器可以清楚地知道这些元素在页面上的位置，并且可以将这些信息更有效地转换给用户。
An interesting example is the difference between how a screen reader interprets non-semantic italic<i> and bold <b> elements, and the semantic emphasize <em> and strong <strong> elements. Both produce the same result, italic and bold text respectively in the browser. However, a screen reader will only acknowledge semantic elements. Text wrapped in<em> would be announced to the user with emphasis, whereas an <i> element would be completely skipped over.
一个有趣的例子是屏幕阅读器解释非语义斜体<i>和粗体<b>元素与语义强调<em>和强<strong>元素之间的区别。 两者在浏览器中分别产生相同的结果，斜体和粗体文本。 但是，屏幕阅读器只会识别语义元素。 包装在<em>中的文本将重点向用户宣布，而<i>元素将被完全跳过。
Considerations
注意事项
- Ensure you use the correct HTML element for the functionality you are trying to achieve. Using a button element purely for styling purposes is bad practice. A screen reader would still interpret the element as a button. 确保为要实现的功能使用正确HTML元素。 仅将按钮元素用于样式目的是不好的做法。 屏幕阅读器仍会将元素解释为按钮。
- Using headers correctly and making them as descriptive as possible is very important as many screen reader users rely on headers to jump to different parts of the website more efficiently. Therefore, the heading levels must reflect the content hierarchy. 正确使用标题并使其具有尽可能好的描述性非常重要，因为许多屏幕阅读器用户都依赖标题来更有效地跳转到网站的不同部分。 因此，标题级别必须反映内容层次结构。
The use of the <h4> as the main heading and the application of a reverse heading order, the <h1> coming after the <h4>, fails the Web Content Accessibility Guidelines.
将<h4>用作主要标题并应用反向标题顺序(<h1>紧随<h4>)将使Web Content Accessibility Guidelines失效。
Ultimately, there may be limitations in the functionality semantic HTML elements can provide. This is where ARIA comes into its own.
最终，语义HTML元素可以提供的功能可能会受到限制。 这是ARIA独树一帜的地方。
可访问的富Internet应用程序 (Accessible Rich Internet Applications)
WAI-ARIA, Accessible Rich Internet Applications, “defines a way to make Web content and Web applications more accessible to people with disabilities”². Websites have become more complex as the Web has matured, resulting in advanced user interface controls which may not currently exist in semantic HTML. ARIA can be utilised to remedy this lack of support and to provide extra information to assistive technology. The three main components of ARIA are roles, states and properties.
WAI-ARIA，可访问的富Internet应用程序，“ 定义了一种使残障人士更容易访问Web内容和Web应用程序的方式” 。 随着Web的成熟，网站变得越来越复杂，从而导致高级用户界面控件(目前可能尚不存在于语义HTML中)。 可以利用ARIA来弥补这种缺乏支持的情况，并为辅助技术提供更多信息。 ARIA的三个主要组成部分是角色，状态和属性。
ARIA Roles
ARIA角色
A role indicates the type of user interface pattern the element should follow. For instance, the semantic HTML <button> element has a default role of “button”. Besides allowing for non-semantic elements such as <div> and <span> to have a role assigned to them, roles can also convey new semantic patterns that do not currently exist in HTML, such as a menu for example. Furthermore, ARIA roles can also be used to change default roles of HTML elements but this is actively discouraged. The snippet below is one of the few examples where you might want to change a default role, in this case using a semantic <form> tag for the purposes of searching your website. The <form> element has a default role of “form”.
角色指示元素应遵循的用户界面模式的类型。 例如，语义HTML <button>元素的默认角色为“ button”。 除了允许诸如<div>和<span>之类的非语义元素分配角色，角色还可以传达HTML中当前不存在的新语义模式，例如菜单。 此外，ARIA角色也可以用于更改HTML元素的默认角色，但是我们不鼓励这样做。 下面的代码段是您可能想要更改默认角色的少数几个示例之一，在这种情况下，为了搜索您的网站，使用语义<form>标记。 <form>元素的默认角色为“ form”。
Note: there is no need to declare a role on the element if you intend to use the default role.
注意：如果要使用默认角色，则无需在元素上声明角色。
There are six categories of ARIA roles;
ARIA角色分为六类：
Landmark -used by screen readers to quickly navigate to different parts of the page. Examples include “banner”, “navigation”, “main” and “form”.
地标 - 屏幕阅读器用于快速导航到页面的不同部分。 例子包括“横幅”，“导航”，“主要”和“形式”。
Document Structure -used as a section description, when the use of semantic elements is not possible. Also organises content on the page. Examples include “img”, “heading”, “table” and “presentation”.
文档结构 - 当无法使用语义元素时，用作节描述。 还可以组织页面上的内容。 示例包括“ img”，“标题”，“表”和“演示文稿”。
Widget -used to describe an interactive element or pattern, when there is no semantic equivalent currently available in HTML. Examples include “tab”, “tabpanel”, “slider” and “progressbar”.
窗口 小部件 -当HTML中当前没有语义等效项时，用于描述交互式元素或模式。 例如“ tab”，“ tabpanel”，“ slider”和“ progressbar”。
Window -used with a sub-window, such as a modal. There are only two roles; “alertdialog” and “dialog”.
窗口 -与子窗口(如模式窗口)一起使用。 只有两个角色； “ alertdialog”和“ dialog”。
Live Regions -used to notify the user of a change that takes place on the page after the web page has initially loaded. For instance, news feeds or search results can periodically update without requiring the entire page to reload. The five roles are “alert”, “log”, “marquee”, “timer” and “status”. Typically, a live region is created using the aria-live attribute.
实时区域 -用于在网页最初加载后通知用户页面上发生的更改。 例如，新闻源或搜索结果可以定期更新，而无需重新加载整个页面。 这五个角色是“警报”，“日志”，“选取框”，“计时器”和“状态”。 通常，使用aria-live属性创建活动区域。
Abstract -only used by browsers and provides the foundation upon which other roles are built. Developers should never use this role.
摘要 - 仅由浏览器使用，并提供了构建其他角色的基础。 开发人员永远不要使用此角色。
ARIA States
阿里亚州
ARIA States describe the current state of the element. Hence, they are dynamic in nature, and usually updated with JavaScript. An example is the aria-disabled attribute. Most developers will know the disabled attribute, and sighted users will get sufficient feedback from a disabled element. For instance, a button might be semi-transparent, or a click does not have any effect. However, screen readers will completely ignore any element with the disabled attribute. Utilising the aria-disabled attribute will allow a screen reader to acknowledge the existence of the button and its current state.
ARIA国家描述了元素的当前状态。 因此，它们本质上是动态的，通常使用JavaScript进行更新。 一个示例是aria禁用属性。 大多数开发人员都知道禁用的属性，并且有视力的用户将从禁用的元素中获得足够的反馈。 例如，一个按钮可能是半透明的，或者单击没有任何效果。 但是，屏幕阅读器将完全忽略具有禁用属性的任何元素。 利用禁用aria的属性，屏幕阅读器可以确认按钮的存在及其当前状态。
Using JavaScript, the state can be changed to false dynamically, once all conditions are satisfied. Assistive Technology such as a screen reader would be able to notify the user if a change takes place after the initial interaction with the element.
使用JavaScript，一旦满足所有条件，状态就可以动态更改为false。 诸如屏幕阅读器之类的辅助技术将能够在与元素进行初始交互之后通知用户是否发生了更改。
Note: Unlike the disabled attribute, aria-disabled does not style the element by default. You could use the following CSS selector to style the element to accommodate visual users.
注意：与disable属性不同，aria-disabled默认情况下不设置元素的样式。 您可以使用以下CSS选择器来设置元素的样式以适应视觉用户。
ARIA Properties
ARIA属性
ARIA properties “define additional semantics not supported in standard HTML”³. Often, they are used to describe relationships with other elements. Two commonly used properties are aria-label and aria-labelledby. The former labels the element, which the assistive technology will then announce to the user. The label is not visible in the browser.
ARIA属性“定义标准HTML不支持的其他语义” ³。 通常，它们用于描述与其他元素的关系。 两种常用的属性是aria-label和aria-labeledby。 前者标记元素，然后辅助技术将向用户宣布该元素。 标签在浏览器中不可见。
Note: A screen reader will read text content, so an aria-label is not necessary if the text content makes its purpose abundantly clear.
注意：屏幕阅读器将读取文本内容，因此，如果文本内容明确表明其目的，则无需使用aria标签。
Aria-labelledby becomes useful when label text is visible in the browser. The property can be employed to reference the element with the text content. In the first snippet below, using aria-label contravenes the DRY principle of Software Engineering. Don’t Repeat Yourself!
当标签文本在浏览器中可见时，Aria-labelledby变得很有用。 可以使用该属性来引用具有文本内容的元素。 在下面的第一个代码段中，使用aria标签违反了软件工程的DRY原理。 不要重复自己！
Both states and properties are typically used to support ARIA roles on the page and are often collectively referred to as attributes. I was only able to cover a few of these in this blog, but there are many resources that list the plethora of ARIA roles, states and properties available to create accessible websites. An excellent option is the Digital A11Y cheatsheet, as well as the ever-dependable MDN Web Docs.
状态和属性通常都用于支持页面上的ARIA角色，并且通常统称为属性。 我只能在此博客中介绍其中的一些内容，但是有许多资源列出了可用于创建可访问网站的大量ARIA角色，状态和属性。 一个很好的选择是Digital A11Y速查表 ，以及永远可靠的MDN Web文档 。
This has been as much a learning experience for me as I hope it has been for you. The next blog in the series will be about Keyboard Accessibility. This is vitally important as many users who require websites to be accessible cannot use a mouse. The use of tab index, bypass blocks and focus using JavaScript will be some of the topics covered.
对我来说，这既是我的学习经验，也希望对您来说是一种学习经验。 该系列的下一个博客将有关键盘辅助功能。 这一点至关重要，因为许多需要访问网站的用户无法使用鼠标。 标签主题的使用，旁路块和使用JavaScript的焦点将是其中的一些主题。
翻译自: https://medium.com/dev-genius/accessibility-part-3-semantic-html-and-aria-2a9934e162c6
语义分割辅助回环检测
2087
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
