Screen reader support for react components

610 Views Asked by At

I'm currently developing a web app with react. For that I used react-circular-progressbar library and component look as follows.

enter image description here

When I use narrator for screen reading it will says as

image, some texts

I want to overide it as

60 percent some text

Is there any way to exclude current semantics and override or add a sentence to support screen reader. Here is my code

<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>
0

There are 0 best solutions below