WordPress One Click Accessibility插件无法适配输入框Placeholder问题咨询

核心原因 #

你的输入框带有readonly=""属性，One Click Accessibility插件默认会跳过只读状态的表单元素——这类元素通常被判定为无需用户交互，因此插件没有对其placeholder做无障碍增强处理。

解决方法 #

1. 移除readonly属性（优先推荐，若业务允许）

如果这个输入框不需要保持只读状态，直接删除readonly=""属性，插件就能正常识别并处理placeholder：

<input type="text" class="input-box" autocomplete="off" id="test" name="test" placeholder="text not works with plugin?">

2. 手动添加无障碍属性（必须保留readonly时）

即使是只读元素，也可以手动补充无障碍标识，让屏幕阅读器能识别placeholder内容：

• 用aria-label直接声明内容：

<input type="text" class="input-box" autocomplete="off" id="test" name="test" placeholder="text not works with plugin?" readonly="" aria-label="text not works with plugin?">

• 或者用隐藏标签关联（更符合无障碍标准）：

<label for="test" class="screen-reader-text">text not works with plugin?</label>
<input type="text" class="input-box" autocomplete="off" id="test" name="test" placeholder="text not works with plugin?" readonly="">

注：如果主题没有screen-reader-text类，可添加CSS样式：.screen-reader-text { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

3. 让插件强制处理只读输入框

通过WordPress钩子扩展插件的处理范围，将以下代码添加到主题的functions.php文件：

add_filter('pojo_a11y_elements_to_process', function($target_elements) {
    // 让插件包含readonly的input元素
    $target_elements[] = 'input[readonly]';
    return $target_elements;
});

注：若钩子名称不符（插件版本可能变更），可查看插件源码或文档确认正确的过滤钩子。

4. 自定义JavaScript处理

如果上述方法无效，可自行编写JS模拟插件逻辑，给只读输入框添加无障碍属性：

document.addEventListener('DOMContentLoaded', function() {
    const readonlyInputs = document.querySelectorAll('input[readonly][placeholder]');
    readonlyInputs.forEach(input => {
        if (!input.getAttribute('aria-label') && !input.getAttribute('aria-labelledby')) {
            input.setAttribute('aria-label', input.getAttribute('placeholder'));
        }
    });
});

将这段代码添加到主题自定义JS区域，或通过Code Snippets类插件添加。

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