添加对 React 传单地图的可访问性

Question

大家早上好， 我创建了一个带有 React-leaflet 的 SPA，除了可访问性之外，它都可以正常工作。

我的地图自动添加了多个标记，但是当我尝试使用 Tab 进入地图时，我得到的只是放大/缩小按钮和地图名称，标记被完全忽略，因此我无法将 ARIA 添加到它们。

有谁知道是否可以为每个标记添加制表符？ 理想情况下，我希望拥有它，这样当用户点击标记时，它会读取特定数据，但是如果这不可能，我愿意接受建议。

如果有帮助，我将如何生成/填充地图：

标记：--

const showDataOnMap = (countryList, y) => (
        countryList.map(country => (
            <Circle
                key = {country.country}
                center={[country.countryInfo.lat, country.countryInfo.long]}
                fillOpacity={0.4}
                pathOptions={{color:casesTypeColors[y].hex,
                fillColor:casesTypeColors[y].hex}}
                radius={
                    Math.sqrt(country[y] * 12000)
                }
                eventHandlers={{
                    click: () => {
                      console.log(mapRef.current)
                    },
                  }}
                tabIndex="0"
                aria-label="circle"
            >
                <Popup tabIndex="0" aria-live="polite" ref={mapRef}>
                    <div>
                        <img className="mapFlag" src={country.countryInfo.flag} alt={country.country} role="image"/>
                        {country.country}
                    </div>
                    <p>
                        {`${y}: ${numeral(country[y]).format("0,0")}`}
                    </p>
                </Popup>

            </Circle>
        )
    )
    )

地图：--

return (
    <div className="map" aria-label={`World-map-${active}`} tabIndex="0" role="application">
        <MapContainer center={coords} zoom={2}>
            <TileLayer
            attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            aria-label="Copyright-information"
            aria-hidden="true"
            />
            {showDataOnMap(table,checkActive())}
        </MapContainer>
    </div>
)

Answer 1

对问题进行了排序。 将 ARIA 添加到 React 传单组件是问题所在，它只是一直忽略它们，所以我在 Popup 中添加了一个包装器并解决了问题。

                 <Popup>
                    <div className="popWrapper" tabIndex="0" ref={mapRef}>
                    <div>
                        <img className="mapFlag" src={country.countryInfo.flag} alt={country.country} role="image" aria-hidden="true"/>
                        {country.country}
                    </div>
                    <p>
                        {`${y}: ${numeral(country[y]).format("0,0")}`}
                    </p>
                    </div>
                </Popup>

所以现在当点击 Circles 时，我强制将焦点放在 popWrapper div 上并读取内容。

Answer 2

我看到您在<Circle> 元素上使用了tabindex，所以我假设您已经知道tabindex 的工作原理。将 tabindex 添加到您的标记将允许它们被 TABBED 到。

但是，您可以 TAB 的元素应该是交互式元素。单击或悬停时，您的标记有什么作用吗？如果标记是键盘可聚焦元素，则标记将需要一个“角色”(WCAG 4.1.2)。如果您希望标记器做的只是宣布数据值，那么role="tooltip" 可能就足够了。可能role="note" 也可以，但这有点牵强，因为数据值可能不被视为“辅助”。

我还注意到您在<TileLayer> 上使用了aria-hidden="true"。您的标记是否作为子节点添加到<TileLayer>？在父容器上设置的aria-hidden 将向下传播到子容器，并且它们也将从辅助技术中隐藏。在子元素上设置aria-hidden="false" 可能不会解决问题，因为不完全支持“false”值。请参阅aria-hidden 规范中的第二个“注意”：

注意
在撰写本文时，已知aria-hidden="false" 在浏览器中的工作方式不一致。随着未来实施的改进，请谨慎使用并在依赖此方法之前进行彻底测试。