老猫 程序员
接插件定制 • 2023-11-30

  无障碍访问脚本

无障碍访问脚本

如需下载请先回复并刷新本帖!
拯救了 15808 人的帖子
最新回复6
  • 只有原装主题才能用。这个JS提供的大致功能如下:

    1. 通过选择器找到所有带有包含"icon"的class的<i>元素,并将它们的aria-hidden属性设置为true,从而对屏幕阅读器隐藏这些图标。 
    2. 隐藏了帖子中的头像(avatar)(通过设置aria-hidden属性的方式做到的)。 
    3. 将包含"←"符号的元素的aria-hidden属性设置为true,隐藏这些元素。 
    4. 将包含回复信息的元素的aria-hidden属性设置为true,隐藏这些元素。 
    5. 对每个帖子中的正文(.message)进行处理,为每条消息添加一个只能被屏幕阅读器识别的<span>元素,同时将tabindex属性设置为-1,以确保这些消息不会被键盘焦点访问。 
    6. 移除最后一条消息的tabindex属性、accesskey属性和accesskey-x类,并移除其中的<span>元素。 
    7. 将回复按钮的提示文字样式从d-none改为sr-only,以确保只有屏幕阅读器能够读取到这些文字。 
    8. 当页面加载完成后,将焦点设置在第一条消息或者邮箱输入框上,并在200毫秒后将焦点设置在主题输入框上。

    而关于accesskey属性:

    1. 使用 document.addEventListener 监听键盘事件,
    2. 同时按下Alt键和Shift键并且按下了键盘上的'X'键时,会调用 previousFocus('accesskey-x') 函数,移动焦点到上一个具有'accesskey-x'类名的元素。
    3. 同理,当按下Alt键并且按下了'X'键时,会调用 nextFocus('accesskey-x') 函数,移动焦点到下一个具有'accesskey-x'类名的元素。
    4. 对于'Z'键也有类似的处理逻辑。 

    accesskey-x包含这些CSS选择器:a.page-link, a.page-link(可能是重复的选择器,可能是一个错误), .subject a[href*=thread], .message

    accesskey-z包含这些CSS选择器:textarea, a[href*=thread-create], .nav-link, a[href*=user-log], a[href*=my]

    2024-02-16

  • that's  good
    2024-02-16 • #1
  • 来啦
    2024-09-14 • #3
  • 2024-09-15 • #4
  • 2024-09-27 • #5
  • 2024-10-23 • #6
    • Xiuno插件网 - 超论
      7
免签约码支付 大圣云计算热门活动