本文介绍了单页应用程序的 ARIA 实时区域的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时送ChatGPT账号..

我对网页的可访问性不熟悉.我有一个应用程序，其中正文的内容根据 ajax 调用中的标题链接单击而更改，而无需刷新页面.因此，正文中的 HTML 内容会针对每个链接点击更新，并使用不同的页面内容(表格 + 按钮 + 信息文本).

我的要求是屏幕阅读器应该在每次加载页面时宣布信息文本.这里的容器是所有页面的主体(或主体内部的直接 div).因此，我将其设为 aria-live=polite"，但每次加载页面时，它都会发布整个页面的内容，但我想让它仅发布信息文本.页面的其他元素应在焦点/访问时公布.我希望我可以应用 aria-live="off"对于所有其他元素，但我正在为此寻找任何理想的解决方案.我无法更改应用程序的布局.

有人可以帮我解决这个问题吗?提前致谢.

解决方案

SPA 模式最佳实践

您基本上遵循单页应用程序模式.因此，推荐用于处理导航的方法实际上非常简单，只需两个步骤.

告诉用户导航即将发生(在导航之前)让用户知道加载已完成(导航后).

导航前(点击链接)

如果您使用 SPA 模式(因此会中断正常导航)，您需要向用户发出正在加载页面的信号.例如我点击了你的链接，你需要让我知道一个动作正在执行(加载......)，因为你用 e.preventDefault() 或等效物拦截了正常的浏览器行为.

最简单的方法是使用 aria-live=assertive 在解释页面正在加载的区域上.你可以谷歌如何正确实现，但基本上你会更新隐藏 div 的内容(

loading

带有一些加载消息，第二个链接被点击.

这应该在进行任何 AJAX 调用之前完成.

导航后(加载新内容)

当新页面加载时，您需要管理焦点.

最好的方法是为每个具有 tabindex=-1" 的页面添加一个 1 级标题(

).使用 tabindex=-1" 这意味着标题不会被 JavaScript 以外的任何东西聚焦，因此不会干扰正常的文档流.

一旦页面加载完毕并且内容已完全填充，您在 JavaScript 导航功能中执行的最后一个操作就是将焦点放在此标题上.

这有两个好处:

它让用户知道他们现在在哪里它还让他们知道页面加载何时完成(因为在大多数屏幕阅读器中，AJAX 导航不会通知页面何时加载).

此时您可能还想清除 <div aria-live="assertive"> 内容，以便为进一步导航做好准备.

I am new to accessibility of web pages. I have an application where the content of the body changes based on the header link clicks in an ajax call without page refresh. So the HTML content inside the body gets updated for each link click with different page content (table + button + information text).

My requirement here is the screen reader should announce the information text each time when the page gets loaded. Here the container is body (or an immediate div inside body) for all pages. So I have made it aria-live="polite", but every time page loads it is announcing the whole page content but I want to make it announce only the information text. Other elements of the page should be announced on focus/visit. I hope I can apply aria-live="off" for all other elements but I'm looking for any ideal solution for this. I cannot change the layout of the application.

Can some one help me on this. Thanks in advance.

解决方案

SPA pattern best practices

You are essentially following a Single Page Application pattern. As such the method recommended for handling navigation is actually quite straight forward with two steps.

tell a user that navigation is about to occur (before navigation) let a user know that loading is complete (after navigation).

before navigation (link click)

You need to signal to a user that a page is loading if you are using a SPA pattern (and therefore interrupting normal navigation). e.g. I click your link, you need to let me know that an action is being performed (loading.....) as you intercept the normal browser behaviour with e.preventDefault() or equivalent.

The simplest way is to use aria-live=assertive on a region that explains the page is loading. You can Google how to implement that correctly but essentially you would update the content of a hidden div (<div aria-live="assertive" class="visually-hidden">loading</div> with some loading message the second a link is clicked.

This should be done before any AJAX calls are made.

after navigation (new content loaded)

When the new page loads you need to manage focus.

The best way to do this is to add a level 1 heading (<h1>) to each page that has tabindex="-1". By using tabindex="-1" it means that the heading won't be focusable by anything other than your JavaScript so won't interfere with the normal document flow.

Once the page loads and the content has been populated fully the last action you perform in your JavaScript navigation function is to place the focus onto this heading.

This has two benefits:

it lets the user know where they are now it also lets them know when the page load is complete (as AJAX navigation doesn't announce when the page is loaded in most screen readers).

At this point you may also want to clear the <div aria-live="assertive"> contents so that it is ready for further navigation.

这篇关于单页应用程序的 ARIA 实时区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！