[react] 리액트 네이티브 지도의 접근성 향상을 위한 기능 추가하기

22 Dec 2023

react

리액트 네이티브를 사용하여 지도를 표시할 때, 모든 사용자들이 앱을 쉽게 이용할 수 있도록 접근성에 신경을 써야 합니다. 이를 위해 화면 낭독기와 같은 보조 기술을 통해 지도를 사용할 수 있는 기능을 추가하는 것이 중요합니다.

이 포스트에서는 리액트 네이티브 지도의 접근성 향상을 위한 기능을 추가하는 방법에 대해 알아보겠습니다.

1. 현재 위치 표시 기능 추가

지도 위에 현재 위치를 표시하는 기능을 추가하여 시각 장애인이나 저시력자도 쉽게 자신의 위치를 파악할 수 있도록 도와줍니다.

import React, { useState, useEffect } from 'react';
import { View, Text } from 'react-native';
import MapView, { Marker } from 'react-native-maps';

const App = () => {
  const [currentLocation, setCurrentLocation] = useState(null);

  useEffect(() => {
    // 현재 위치 가져오는 로직 추가
  }, []);

  return (
    <View style={{ flex: 1 }}>
      <MapView
        style={{ flex: 1 }}
        region={currentLocation}
      >
        {currentLocation && <Marker coordinate={currentLocation} title="현재 위치" />}
      </MapView>
    </View>
  );
};

export default App;

2. 지도 탐색을 위한 음성 안내 추가

지도를 터치하고 이동할 때, 음성 안내를 추가하여 사용자가 현재 지도 상황을 파악할 수 있도록 도와줍니다.

import React from 'react';
import { View, Text } from 'react-native';
import MapView from 'react-native-maps';
import VoiceOverHelper from 'voice-over-helper';

const App = () => {
  const handleMapPress = (event) => {
    // 지도 터치 이벤트 처리
    VoiceOverHelper.speak('지도 이동');
  };

  return (
    <View style=>
      <MapView
        style=
        onPress={handleMapPress}
      />
    </View>
  );
};

export default App;

3. 지도 요소에 접근성 라벨 추가

지도의 각 요소에 접근성 라벨을 추가하여 화면 낭독기가 해당 지도 요소를 읽을 수 있도록 도와줍니다.

import React from 'react';
import { View, Text } from 'react-native';
import MapView, { Marker } from 'react-native-maps';

const App = () => {
  return (
    <View style={{ flex: 1 }}>
      <MapView style={{ flex: 1 }}>
        <Marker
          coordinate={{latitude: 37.78825, longitude: -122.4324}}
          title="마커 제목"
          description="마커 설명"
          accessibilityLabel="마커 접근성 라벨"
        />
      </MapView>
    </View>
  );
};

export default App;

결론

이러한 접근성 기능을 추가함으로써 리액트 네이티브 지도를 사용하는 모든 사용자가 편리하게 이용할 수 있도록 도움을 줄 수 있습니다. 이는 앱의 사용자 경험을 향상시키는 데 중요한 부분이며, 모든 사용자들이 동등하게 서비스를 이용할 수 있도록 돕는 데 큰 도움이 될 것입니다.

참고자료