React 개발자의 액세스 가능성
소개
모든 사람은 능력이 어떻든지 간에 방문할 수 있는 사이트를 사용할 수 있다.액세스 가능한 사이트를 설계하고 구축하는 것은 스크린 리더나 키보드 내비게이션 등 보조 기술과 피부색 결함을 가진 사람들과 작업할 수 있도록 확보하는 것을 의미한다.
물론 더 많은 장애가 있지만, 이것은 웹 응용 프로그램을 구축할 때 기억해야 할 가장 흔히 볼 수 있는 장애물이다.본고는 접근 가능성을 소개하고 접근 가능한React 응용 프로그램을 구축하는 기초 지식을 가르칩니다.
쾌속 승리
React 응용 프로그램은 최종적으로 HTML을 보여 줍니다. 따라서 중요한 것은 복잡한 상호작용에 접근할 수 있고 기본적인 태그와 스타일입니다.대화식 JavaScript 재구성 부품에 액세스할 수 있도록 하는 경우에도 태그 개선이 주로 포함됩니다.
그러나 JavaScript를 고려하지 않아도 할 수 있는 일은 사이트의 접근성을 크게 향상시켰다.
색상 명암비
WCAG 2규범은 색의 대비도를 두 가지 색 간의 감지 밝기로 정의한다.이것은 1:1(흰색 배경의 흰색 텍스트)에서 21:1(흰색 배경의 검은색 텍스트) 사이의 비율을 나타냅니다.
Accessible Web 삽화.
WCAG는 24픽셀보다 큰 텍스트의 명암비를 각각 4.5:1, 3:1로 권장합니다.적어도 여기에 키를 입력하세요.가능한 한 최저 요구를 초과한 대비도를 사용하세요.Chrome과 Firefox 개발 도구는 요소를 검사할 때 요소의 대비도를 표시합니다.
Alt 속성
익숙해졌을 거예요.alt 속성은 이미지의 내용을 설명합니다.이미지 로드가 올바르지 않으면 색인 사이트의 검색엔진과 가장 중요한 것은 화면 판독기에 의존하는 시력이 손상된 사용자에게 유용합니다.
<img src="image.jpeg" alt="Birch tree on a meadow" />
양식 레이블
표의 모든 상호작용 요소에 대해 라벨을 사용하는데, 이 요소들을 표 컨트롤러라고도 부른다.그것들은 사용자가 폼 컨트롤러의 작용을 이해하도록 도와준다.
// JSX uses htmlFor to associate a label with a form control
<label htmlFor="firstname">First name:</label>
<input type="text" name="firstname" id="firstname"><br>
aria-label을 사용하여 화면 독자에게 요소의 목적을 알려 주십시오.<input type="text" name="search" aria-label="Search">
<button type="submit">Search</button>
버튼 텍스트
단추, 예를 들어 아이콘 단추만 있으면 그 목적은 시각적으로 나타날 때만 뚜렷하고
aria-label을 사용하여 설명해야 한다.<button type="submit" aria-label="Search">Search</button>
문서 언어
화면 독자는 사이트 내용의 언어를 알아야 정확한 발음을 사용할 수 있다.
<html lang="en"></html>
lang 속성을 그 주위의 모든 HTML 요소에 추가할 수 있습니다.<span lang="fr">C'est en français</span>
대화형 구성 요소에 액세스 가능
하이파이, 인터랙티브 응용 프로그램의 접근성을 높이는 데는 추가 절차가 있다.따라서 상기 절차를 실현하면 인터랙티브 구성 요소의 접근성을 높이십시오. 예를 들어 밑에 있는 메뉴입니다.
의미 HTML 요소 사용
의미 HTML 요소는 개발자와 브라우저에 의미를 전달하는 요소입니다.W3Schools의 article은 의미 요소로 여겨지는 목록을 제공합니다.
응용 프로그램 레이아웃을 div에 의존하지 말고 HTML에서 제공하는 적절한 의미 요소를 사용하십시오.이것은 화면 판독기와 다른 도구가 관련 내용을 식별하는 데 도움이 된다.
React 응용 프로그램을 개발할 때div와span만 사용하여 거의 모든 내용을 구축할 수 있습니다.
button 또는 select 요소는 공식적으로 의미 HTML 요소로 간주되지 않지만 div에 비해 더 뚜렷한 의미를 전달합니다. 따라서 div를 상호작용적이고 클릭 가능한 요소로 바꾸지 말고 사용할 때 적당한 HTML 요소를 사용하십시오.이렇게 하면 대량의 ARIA 속성을 사용할 필요가 없습니다. 나중에 이 속성을 소개하겠습니다.<div role="button" tabIndex="0" onClick={clickHandler}>
<!-- Content-->
</div>
// use the HTML button element!
<button onClick={clickHandler}>
Click me
</button>
키보드 탐색
키보드 내비게이션은 접근성의 중요한 구성 부분이지만 가끔 마우스를 만지지 않고 사이트를 방문하는 것을 좋아하는 누구에게도 유용하다.키보드 내비게이션의 작업 원리는tab키를 누르면 모든 상호작용 요소 사이를 순환한 다음enter키나 스페이스바를 누르면 이 요소를 활성화시키는 것이다.키보드 내비게이션이 사이트에서 정상적으로 작동하는지 확인하려면 두 가지 중요한 요소를 고려해야 한다. 즉, 모든 상호작용 요소가 접근할 수 있고 선택한 항목의 테두리를 강조 표시하기 위한 사용자 정의 CSS가 없다.프로젝트 선택을 관리하려면
tabIndex을 사용하십시오.기본적으로 링크나 버튼 등의 요소는 탭 순서 내에 있기 때문에 가능한 한 사용할 수 있습니다.언제든지 사용자 정의 상호작용, 예를 들어 클릭할 수 있는div가 있다면, 키보드 사용자가 사용자의 구성 요소에 접근할 수 없기 때문에,
tabIndex을 사용하는 것을 고려해야 한다.tabIndex="0" // in tab order, can be selected
tabIndex="-1" // removed from tab order, cannot be selected
tabIndex="1234" // manually manage tab order, usually not needed
tabIndex을 사용해야 합니다. 그렇지 않으면 키보드 사용자가 사용할 수 없습니다.영탄조
ARIA는 웹 응용 프로그램에 접근할 수 있는 관건적인 도구를 구축하는 규범이다.그것은 접근 가능한 정보를 제공하는 데 사용되는 많은 속성을 제공한다.액세스 가능한 JavaScript 응용 프로그램을 개발하려면 ARIA가 가장 중요한 기술임에 틀림없습니다.
ARIA가 좀 복잡하기 때문에 가능한 한 묘사적인 HTML 요소를 사용하는 것을 권장합니다.일반적으로 ARIA에 대한 요구 사항은 제거됩니다.그러나 어떤 경우에는 적절한 HTML만으로는 충분하지 않습니다.이것이 바로 영탄조가 작용하는 곳이다.ARIA 속성은 역할, 속성 및 상태의 세 가지 유형 중 하나입니다.
ARIA 속성은 역할, 속성 및 상태의 세 가지 유형 중 하나입니다.
캐릭터: 요소가 무엇인지 정의하고
상태: 체크 상자
속성: 의미 HTML에 포함되지 않는 추가 속성
다음 장에서는 ARIA를 사용하여 React 구성 요소를 쉽게 액세스하는 방법을 연구할 것입니다.
예: 진행률 막대
이런 일반 진도표를 하나 가져가세요.이제 화면 리더에 의존하는 모든 사람들이 어떻게 그 내용을 이해할 수 있는지 상상해 보세요.모든 정보가 스타일에 숨겨져 있기 때문에 화면 판독기에는 쓸모가 없다.태그는 빈 div만 있을 수 있습니다.
ARIA 덕분에 우리는 몇 가지 속성을 이용하여 이 구성 요소를 완전히 접근할 수 있다.
const ProgressBar = ({ progress }) => {
// some CSS-in-JS
return (
<div
role="progress-bar" // purpose of this element
aria-valuenow={progress} // current progress value
aria-valuemin="0" // minimum value of progress bar
aria-valuemax="100" // maximum value of progress bar
></div>
);
};
progress 요소가 포함되어 있습니다.화면 판독기는 기본 HTML 요소를 처리할 수 있기 때문에 ARIA 속성을 추가할 필요가 없습니다.<progress id="progress-bar" value="50" max="100">50%</progress>
테스트
다른 모든 특성을 테스트하는 것처럼 개발 과정에서 접근성을 테스트하는 것이 중요하다.초보자에게는 어떤 자동 테스트를 사용한다.Google Lighthouse에서 액세스 가능한 문제를 발견할 수 있습니다.마이크로소프트의 Accessibility Insights과axe 핵심 엔진을 기반으로 한 다른 도구도 좋은 선택이다.
자동화 테스트는 좋은 시작이지만, 그것에만 의존해서는 안 된다.액세스 가능한 기능에 의존하는 사람처럼 귀하의 사이트를 이용하여 수동 검사를 하는 것은 가치가 있습니다.화면 리더(예를 들어 macOS의 외음)와 키보드 테스트 컨트롤만 사용하는 것이 좋습니다.
리소스
반응 라이브러리
처음부터 접근 가능한 React 프로그램을 구축하는 방법을 아는 것이 중요하다고 생각하지만, 기본적으로 접근 가능한 맞춤형 구성 요소를 제공하여 생활을 간소화할 수 있는 좋은 도구가 많습니다.
만약 당신이
Chakra UI은 제가 가장 좋아하는 React 구성 요소 라이브러리입니다. 접근성에 대한 관심으로 인해
한층 더 읽다
Reference
이 문제에 관하여(React 개발자의 액세스 가능성), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/noahflk/accessibility-for-react-developers-3a85텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
