针对 hugo 的 MemE 主题的一段无障碍优化脚本

下面这段代码是针对 hugo 的 MemE 主题的无障碍优化。

主要做了这样几件事情：

对读屏软件屏蔽所有 svg 元素，因为所有的 svg 都是图标，屏蔽掉不影响功能。
对于深色和浅色主题的切换增加具体的文本提示。
对于回到顶部加了文本提示。

将下面的代码保存为 custom.js 文件，放到 assets/js 目录下即可。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


window.addEventListener("DOMContentLoaded", event => {
    document.querySelectorAll('svg').forEach(svg => {
        svg.setAttribute('aria-hidden', 'true');
    });
    const getCurrentTheme = () => document.querySelector('html').dataset['theme'] == 'light' ? '当前是浅色' : '当前是深色';
    document.querySelectorAll('#theme-switcher').forEach(a => {
        a.setAttribute('aria-label', '切换主题');
        a.setAttribute('aria-description', getCurrentTheme());
        a.addEventListener('click', function(e) {
            this.setAttribute('aria-description', getCurrentTheme());
        }, null);
    });
    document.querySelectorAll('#back-to-top a').forEach(a => {
        a.setAttribute('aria-label', '返回顶部');
    });
}, {once: true});

针对 hugo 的 MemE 主题的一段无障碍优化脚本

相关文章：