为 React-leaflet 地图添加可访问性

Question

大家早上好，我用 React-leaflet 创建了一个 SPA，除了可访问性之外，它的所有功能都运行良好。

我的地图有多个自动添加的标记，但是当我尝试在地图中切换时，我得到的只是缩放 in/out 按钮和地图名称，这些标记被完全忽略，所以我无法向它们添加 ARIA .

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

我是这样的generating/populating地图如果有帮助的话：

标记：--

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

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

但是，您可以 TAB 的元素应该是交互式元素。单击或悬停时，您的标记会执行任何操作吗？标记将需要一个“角色”（WCAG 4.1.2) if it's a keyboard focusable element. If all you want the marker to do is announce the data value, then perhaps role="tooltip" would suffice. Possibly role="note" 也可以，但这有点牵强，因为数据值可能不被视为“辅助”。

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

Note
At the time of this writing, aria-hidden="false" is known to work inconsistently in browsers. As future implementations improve, use caution and test thoroughly before relying on this approach.

Answer 2

问题已解决。将 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>

所以现在，当圆圈被点击时，我强制关注 popWrapper div 并读取内容。

为 React-leaflet 地图添加可访问性

Add accessibility to React-leaflet map

reactjs

leaflet

accessibility

wai-aria

react-leaflet