마크업 오류 방지 - by. UXKM

참고

• Lighthouse 모바일의 경우 네트워크 속도를 최대 4배정도 느리게 측정하기 때문에 모바일 Performance가 비교적 낮게 나옵니다.
• Metric 별로 어떤 성능 점수가 나는지 Lighthouse 계산기를 통해서 자세히 확인할 수 있습니다.

카테고리가 측정하는 내용

• Performance

  웹 페이지의 로딩 속도 등 실제 성능을 측정. 성능의 측정항목은 6가지 Metric으로 정의되며, 각 Metric들은 페이지가 로드되는 속도를 다양한 측면에서 측정합니다.
  상세 설명 : Lighthouse Performance Audits.

• Best practices

  Best practices를 따라 개발되었는지 확인

• Accessibility

  접근성 확인. 폰트 사이즈, 메뉴간 간격 등을 측정

• Progressive Web App (PWA)

  웹과 네이티브 앱의 기능 모두의 이점을 가지도록 만들어진 서비스인지 체크

• SEO

  Search Engine Optimization의 약자로 검색 엔진 수집 최적화 측정

사용법

1. Google Chrome에서 웹 페이지를 엽니다.
2. DevTools (F12)를 열고 ‘Lighthouse’ 탭을 선택합니다. (단축키 맥:Cmd⌘+Option⌥+I / 윈도우:Ctrl+Shift+I)
3. ‘Accessibility’ 항목을 선택하고 우측 상단의 ‘Analyze page load’를 클릭하여 보고서를 생성합니다.

   

4. Lighthouse는 접근성 점수와 함께 개선이 필요한 부분을 제시합니다.

   

사용법

1. Chrome 브라우저에서 WAVE 확장 프로그램을 설치합니다.

   

2. 페이지를 열고 WAVE 확장 프로그램을 실행하여 분석을 시작합니다.

   

3. WAVE 페이지에서 발견된 접근성 문제를 제시합니다.

   

사용법

1. Android 기기에 Accessibility Scanner 앱을 설치합니다.

   

2. 앱을 실행하고 분석하려는 화면에서 스캔을 시작합니다.

   

3. 앱은 화면에서 발견된 접근성 문제를 보고하고 개선 방법을 제시합니다.

   

사용법

1. 개발자 도구에서 Elements 항목을 선택하고 오른쪽 창에서 Accessibility를 선택하면 “Enable full-page accessibility tree” 항목을 체크합니다.

   

2. 해당 노드 선택 후 검사

   

사용법

1. eslint를 전역 설치했다면, eslint-plugin-jsx-a11y 플러그인도 전역으로 설치합니다.
   npm install eslint-plugin-jsx-a11y // 또는 yarn add eslint-plugin-jsx-a11y
2. .eslintrc.json 파일에 다음과 같이 추가합니다.
   { "extends": "plugin:jsx-a11y/recommended", "plugins": "jsx-a11y", "rules": { "jsx-a11y/aria-role": [ "error", { "allowedInvalidRoles": ["text"], "ignoreNonDOM": true } ] } }

사용법

1. Xcode에서 Accessibility Inspector 툴을 실행합니다. (Xcode > Open Developer Tool > Accessibility Inspector)

   

2. 테스트할 장치를 선택합니다. 개발 중인 앱을 Simulator로 빌드 하셨다면 Simulator를 선택하여 진단하실 수 있습니다.

   
   

3. Accessibility Inspector 툴 오른쪽 상단에서 audit 버튼을 선택합니다. Run Audit 버튼을 선택합니다.

   

4. 결과 이슈 목록을 선택하거나 눈 버튼을 선택하시면 해당 항목을 보여줍니다. 장치를 보면 노란색으로 표시되고, 물음표 버튼를 선택하면 해당 이슈를 해결할 수 있는 방법을 알려줍니다.

   

5. 물음표 버튼를 선택하면 해당 이슈를 해결할 수 있는 방법을 알려줍니다.

   

6. 목록에서 주의 깊게 봐야 할 이슈는 description에 대한 이슈입니다. 대체 텍스트 이슈는 접근성 사용자에게 매우 크리티컬한 이슈이면서 해결 방법이 매우 수월한 이슈입니다.

   
   

7. Xcode의 Identity Inspector 탭의 Accessibility 패널에 대체 텍스트를 넣어주세요.
8. 대체 텍스트 외에도 명도대비, 작은 터치영역등 다양한 접근성 이슈를 체크해주고 있습니다.

   

9. 각 요소별 접근성 항목을 확인할 수 있고, iOS 스크린리더인 VoiceOver 음성으로 들어볼 수 있습니다.

   

   1. 스피커

      현재 초점이 위치한 요소의 정보를 VoiceOver 음성으로 들려줍니다.

   2. 이전 요소 탐색

      현재 초점이 위치한 곳에서 이전 요소의 정보를 VoiceOver 음성으로 들려줍니다.

   3. 자동 탐색

      현재 초점이 위치한 곳에서 모든 요소를 자동으로 탐색하며 요소의 정보를 VoiceOver 음성으로 들려줍니다.

   4. 다음 요소 탐색

      현재 초점이 위치한 곳에서 다음 요소의 정보를 VoiceOver 음성으로 들려줍니다.

   5. 직접 탐색

      마우스로 요소를 직접 선택하여 탐색합니다.

   6. 현재 초점이 위치한 요소의 접근성 항목을 나타냅니다.

      항목은 Label(대체 텍스트), Value(값), Traits(유형 정보), Identifier(식별자), Hint(힌트 정보), User Input Labels(사용자 입력 텍스트 정보)입니다.