我一直在SAP工作，如何做淘客，主要是和SAP社区团队一起参与无障碍改善项目。在我上一篇关于改进SAP社区中的web可访问性的文章中，我向您展示了一些web可访问性的最佳实践，以及如何做出贡献。在这篇文章中，云端云服务器，我将向您展示一些使用WAI-ARIA改进web可访问性的具体示例。

WAI-ARIA用例

对于基本web可访问性，必须确保屏幕阅读器能够清晰地阅读所有内容。在这里，WAI-ARIA扮演着一个重要的角色，它是一个向web内容添加附加属性的框架，用于识别它们的详细角色、属性和状态。（查看此页了解更多WAI-ARIA）以下WAI-ARIA属性在我的经验中是常用的：

ARIA角色：ARIA角色是通过向元素添加角色属性来设置的，并定义UI中元素的类型。请参阅本页以更仔细地查看六类角色。使用适当的角色可以通过提供有关网页中元素的更多信息来提高web可访问性。抽象角色：用于定义一般角色概念。它们不能被开发人员使用，而只能被浏览器使用。小部件角色：用于为交互元素提供附加信息，这些元素可以作为独立的用户界面小部件，也可以作为更大的复合小部件的一部分。下面的示例显示了使用菜单栏的小部件角色的示例。通过分配此角色，将宣布有多少菜单项以及当前有焦点的项。（如子菜单项1三选一）

文档结构：用于提供网页结构的描述。在下面的示例中，显示了role="group"的用法。通过分配此角色，屏幕阅读器在焦点移入和移出这些标记时宣布"组开始"和"组结束"。

地标角色：用于为网页的较大部分提供附加说明，然后作为"地标"使用屏幕阅读器帮助页面导航。下面的例子，role="search"被分配给表单，因此当用户进入这个表单时，屏幕阅读器宣布"search region"。

Live region Roles：用于将角色分配给通常由于外部事件而更新的元素。（例如聊天日志、警报消息等）可以配置live region属性。有关活动区域属性的详细信息，请参阅此页。（role="alert"表示活动区域属性值aria live="assertive"和aria atomic="true"）在下面的示例中，通过分配警报角色，每当消息更新时，警报消息都会被宣布。

窗口角色：用于将角色分配给在浏览器或应用程序中充当窗口的元素。下面示例中的role="dialog"使屏幕阅读器在弹出对话框时发出通知。属性tabindex="-1"也被添加来设置对话框内容的焦点。

ARIA属性：用于为网页中的元素添加特定的描述。与ARIA状态不同，ARIA属性一旦设置就不太可能更改。aria label/aria labelledby：下面的代码显示了分页中aria label的使用示例。如果没有aria标签，屏幕阅读器只读取锚定标记中的数字，大数据和数据分析区别，例如1、2或3等等。为了明确这些数字意味着分页中的页面，aria标签被添加到锚定标签中。

aria状态：用于描述表示元素特征的动态属性，淘客模板，这些特征因用户操作或自动化过程而改变。aria expanded：该示例显示了在可折叠小部件中使用aria expanded的示例。当用户切换小部件时，aria expanded属性会被JavaScript修改，以便屏幕阅读器宣布小部件的状态。（"expanded"或"collapsed"）

aria hidden：在下面的代码中，aria hidden="true"被添加到span标记中，外汇返现，这样屏幕阅读器就不会读取垂直条。如果没有这个属性，屏幕阅读器在读取内容时也会读取"垂直条"。

到目前为止，我们已经看到一些WAI-ARIA用于提高web可访问性的示例。这篇文章中列出的那些是我常用的，但是这里没有显示更多的ARIA属性。您可以访问此页面查看更多WAI-ARIA实践。