Reactjs react组件的屏幕阅读器支持

我目前正在用react开发一个web应用程序。为此，我使用了

react progressbar

库和组件，如下所示

当我使用“讲述人”进行屏幕阅读时，它会说

图像，一些文本

我想把它翻过来当作

百分之六十的人喜欢一些文字

是否有任何方法排除当前语义并覆盖或添加句子以支持屏幕阅读器。 这是我的密码

<Card style={{ boxShadow: " 0 4px 8px 0 rgba(0,0,0,0.2)", marginTop: "10px" }} >
        <CardBody>
            <Row>
                <Col lg={5} >
                    <div style={{ width: "6.5em", height: "6.5em" }} >
                        <CircularProgressbar className={factorName} value={value} text={`${value}%`} styles={buildStyles({
                            pathColor: color,
                            textColor: color
                        })} />
                    </div>
                </Col>
                <Col lg={7}>
                    <div style={{ display: "table", height: "90px", overflow: "hidden" }} className="pl-2">
                        <div style={{ display: "table-cell", verticalAlign: "middle" }}>
                            <span id={factorName} style={{ fontWeight: "bold", fontSize: "15px" }}>some text</span>
                        </div>
                    </div>
                </Col>
            </Row>
        </CardBody>
    </Card>

一些文本

您可以在正在向读者读取的元素上尝试一个aria标签，尽管我认为您的问题需要深入了解一般的可访问性。我尝试将区域标签添加到CircularProgressbar也div中。但它不起作用编辑始终聚焦到图形并显示“图像”