老旧RSS阅读器Web应用无障碍改造：ARIA role选main还是feed？

解决方案 #

你可以直接为该容器同时指定两个role，写法如下：

<div role="main feed">
  <div role="article"></div>
  <div role="article"></div>
  <div role="article"></div>
</div>

说明 #

• WAI-ARIA规范支持单个元素声明多个空格分隔的role值，两个role的语义完全不冲突，不会产生语义歧义
• 排在前面的main role会被辅助设备优先识别，标记该区域为页面主内容，满足用户快速跳转主内容的常规无障碍需求
• 后续的feed role会被支持该属性的辅助设备识别，适配动态加载文章的RSS阅读场景，你现有的子节点article role配置也完全符合feed角色的语义要求
• 该方案不需要修改现有DOM结构、不需要额外添加父容器，完全符合你的改造限制

内容的提问来源于stack exchange，提问作者kruseva