如何让屏幕阅读器在本机反应中读取标签？

问题描述

我正在使用辅助功能扫描器来检查我的应用的辅助功能。

它发现屏幕阅读器无法读取我表单中的标签。我用谷歌搜索了一整天，但没有找到一个如何做到这一点的例子。有什么帮助吗？ 我的表单代码：

    import React,{ Component } from 'react';
    import { TextInput } from 'react-native';
    
    const MakemeAccessible= () => {
      const [value,onChangeText] = React.useState('');
    
      return (
        <Text>Username</Text>
        <TextInput
          style={{ height: 40,borderColor: 'gray',borderWidth: 1 }}
          onChangeText={text => onChangeText(text)}
          value={value}
        />
      );
    }
    
    export default UselesstextInput;

解决方法

Inputs should have associated labels，这意味着屏幕阅读器可以理解输入的用途，用户可以点击标签来聚焦输入等等。

要在 React 中执行此操作，请使用 htmlFor 而不是标准的 HTML def password_checking(username,password): while True: usr = search_user(username)[0] status = session.execute( select([models.User.username,models.User.password_hash]) ) for row in status: if row[0] == username: result = models.User.check_password_after_signup(password,row[1]) if result == False: print("Passwords do not match.") password = getpass("Re-enter password: ") else: break 属性。

您还需要使用 for 元素而不是 <label> 元素来确保语义和关联正常工作。

您为每个输入分配一个唯一 ID，并在该 ID 处指向 <text> 以获取关联标签。

htmlfor

或者，您可以简单地将输入包装在 return ( <label htmlFor="uniqueInputID">Username</label> <TextInput id="uniqueInputID" style={{ height: 40,borderColor: 'gray',borderWidth: 1 }} onChangeText={text => onChangeText(text)} value={value} /> ); 元素中，这会将标签与 label 正确关联，而无需使用 TextInput 和 ID。这取决于您使用的用例，两者都是有效的，现在都得到了很好的支持。

htrmlfor

我很确定这同样适用于 React Native，但我已经有一段时间没有使用它了。