在 React 中为机器人和屏幕阅读器显示初始元素

Question

考虑到可访问性和爬虫，假设我有一个每秒更新的动态组件。

<LiveComponent />

输出：

<div id="live">
  <!-- Something that changes very frequently -->
</div>

但是，如果有人有屏幕 reader，或者机器人抓取它，则不断更新的组件将不会很有帮助。我宁愿在机器人将抓取的第一个油漆上显示诸如快照、摘要或替代信息之类的东西，并且屏幕 readers 将处理，但不会对用户可见。（最好不要刷新。）：

<div id="live">
  <p>This is a static version of the dynamic data that's just as informative</p>
</div>

可能的选项：

useEffect(()=>{ }, []); 绑定到显示器 class... 但隐藏 / 使用 CSS 显示元素会使事情变得混乱（信息的两个位将被机器人看到 / readers)
条件渲染：不会工作（我认为）因为我需要它作为客户端...

Answer 1

我会使用不同的 <div class="accessibility-live"> 来实现可访问性，并将动态数据的静态版本放在那里。你可以使用 CSS: position absolute off-screen, 类似:

.accessibility-live {
position: absolute;
left: -9999em;
}

因此内容将成为 DOM 的一部分，并由辅助技术和抓取工具检测。

然后你可以为你的#live 使用 aria-hidden div: <div aria-hidden="true" id="live" >

Here you can read more about the aria-hidden attribute.

Answer 2

当我想显示和隐藏后面跟着另一个数据的 UI 时，我将使用 useState 来处理状态变化时如何处理

例如：

const [data, setData] = useState({isShow: true})';

<div>
{
   (data.isShow)? <p>show your content here</p> : ""
}
</div>

这将在 useState 中的数据发生变化时隐藏和显示内容

Answer 3

如果我没看错，请添加到@AleDP，您可以查看 React-Accessibility 相信事半功倍，你需要在reducer内部做，

在减速器中你需要return当前值和快照值

// your reducer here
const main = (state = initialState, action) => {
  switch (action.type) {
    case API_CALL_SUCCESS:

      let snapshot= youfunctionhere(action.payload.data)

      return { ...state,   snapshot_info:snapshot,live_info:action.payload.data  };
    default:
      return state;

  }
}

// 在你的渲染中

<p>
  this.props.snaphot_info <span aria-hidden="true">this.props.live_info</span>!
</p>

在 React 中为机器人和屏幕阅读器显示初始元素

Display initial element in React for bots and screen readers

seo

web-crawler

wai-aria

reactjs