Android WebView自定义无障碍树适配TalkBack处理MathML/LaTeX技术问询

结论先行：拦截WebView的无障碍树创建、自定义虚拟节点供TalkBack处理是完全可行的，核心思路是通过AccessibilityDelegate结合Web端的Math解析能力，生成转译后的自然语言描述替换原无障碍节点，同时保留WebView+TalkBack的标准交互逻辑。

核心实现路径 #

1. 拦截WebView无障碍节点初始化 #

通过重写AccessibilityDelegate的onInitializeAccessibilityNodeInfo方法，替换WebView生成的默认无障碍节点信息，将MathML/LaTeX内容替换为转译后的可读描述。

2. Web端预解析Math内容 #

页面加载完成后，用JavaScript遍历DOM中的MathML/LaTeX元素，借助MathJax、KaTeX等库生成自然语言描述，再通过addJavascriptInterface传递给Android原生层。

3. 替换无障碍节点内容 #

原生层接收转译结果后，修改对应无障碍节点的contentDescription，确保TalkBack读取的是转译后的文本而非原始Math代码。

示例代码实现 #

步骤1：自定义WebView配置 #

class MathWebView(context: Context, attrs: AttributeSet) : WebView(context, attrs) {
    private val mathAccessibilityHelper = MathAccessibilityHelper(this)

    init {
        settings.javaScriptEnabled = true
        settings.domStorageEnabled = true
        // 注入原生交互接口
        addJavascriptInterface(mathAccessibilityHelper, "MathAccessibilityBridge")
        
        // 设置自定义无障碍代理
        accessibilityDelegate = object : View.AccessibilityDelegate() {
            override fun onInitializeAccessibilityNodeInfo(
                host: View,
                info: AccessibilityNodeInfo
            ) {
                super.onInitializeAccessibilityNodeInfo(host, info)
                // 更新Math元素的无障碍节点信息
                mathAccessibilityHelper.updateMathNodeInfo(info)
            }
        }

        webViewClient = object : WebViewClient() {
            override fun onPageFinished(view: WebView?, url: String?) {
                super.onPageFinished(view, url)
                // 页面加载完成后触发Math解析
                view?.loadUrl("javascript:parseMathElements()")
            }
        }
    }
}

步骤2：Web端Math解析脚本 #

将以下代码嵌入EPUB的HTML中，或通过WebView动态注入：

function parseMathElements() {
    const mathDescriptions = [];
    // 处理MathML元素
    document.querySelectorAll('math').forEach(elem => {
        const desc = MathJax.mathml2text(elem.outerHTML);
        mathDescriptions.push({
            id: elem.id || `math-${Date.now()}`,
            description: desc,
            bounds: getElementRect(elem)
        });
    });
    // 处理KaTeX渲染的LaTeX元素
    document.querySelectorAll('.katex').forEach(elem => {
        const latex = elem.getAttribute('data-content') || elem.previousElementSibling?.textContent;
        if (latex) {
            const desc = katex.renderToString(latex, {output: 'text'});
            mathDescriptions.push({
                id: elem.id || `latex-${Date.now()}`,
                description: desc,
                bounds: getElementRect(elem)
            });
        }
    });
    // 传递结果给原生
    window.MathAccessibilityBridge.receiveMathDescriptions(JSON.stringify(mathDescriptions));
}

function getElementRect(elem) {
    const rect = elem.getBoundingClientRect();
    return {left: rect.left, top: rect.top, right: rect.right, bottom: rect.bottom};
}

步骤3：原生层辅助处理类 #

class MathAccessibilityHelper(private val webView: WebView) {
    private val mathDescMap = mutableMapOf<String, Pair<String, Rect>>()

    @JavascriptInterface
    fun receiveMathDescriptions(json: String) {
        val gson = Gson()
        val descriptions = gson.fromJson(json, Array<MathDesc>::class.java)
        descriptions.forEach {
            val rect = Rect(
                it.bounds.left.toInt(),
                it.bounds.top.toInt(),
                it.bounds.right.toInt(),
                it.bounds.bottom.toInt()
            )
            mathDescMap[it.id] = Pair(it.description, rect)
        }
        // 通知无障碍服务更新内容
        webView.sendAccessibilityEvent(AccessibilityEvent.TYPE_WINDOW_CONTENT_CHANGED)
    }

    fun updateMathNodeInfo(nodeInfo: AccessibilityNodeInfo) {
        // 递归遍历子节点，替换Math元素的描述
        for (i in 0 until nodeInfo.childCount) {
            val childNode = nodeInfo.getChild(i) ?: continue
            mathDescMap.forEach { (id, descPair) ->
                if (childNode.viewIdName == id || isMathNode(childNode)) {
                    childNode.contentDescription = descPair.first
                    childNode.setBoundsInScreen(descPair.second)
                }
            }
            updateMathNodeInfo(childNode)
        }
    }

    private fun isMathNode(node: AccessibilityNodeInfo): Boolean {
        val content = node.contentDescription?.toString() ?: ""
        return content.contains("$$") || content.contains("<math")
    }

    data class MathDesc(val id: String, val description: String, val bounds: Bounds)
    data class Bounds(val left: Double, val top: Double, val right: Double, val bottom: Double)
}

关键注意事项 #

• 依赖库适配：前端需引入MathJax或KaTeX，确保转译后的文本符合无障碍阅读逻辑（例如将a^2 + b^2 = c^2转译为"a的平方加b的平方等于c的平方"）。
• 性能优化：避免一次性解析大量Math元素，可采用懒加载或分块解析，减少无障碍树更新的性能开销。
• 安全规范：使用addJavascriptInterface时，仅暴露必要方法，避免敏感逻辑泄露。
• 兼容性测试：针对WebView 109及不同Android版本测试无障碍节点拦截效果，确保TalkBack交互逻辑与原生一致。

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