과제 - 웹 표준 & 접근성 개선
- 적절한 시멘틱 요소를 사용하는 방법,
웹 표준에 맞는 HTML 코드를 작성하는 방법,
WAI-ARIA 사용법,
웹 콘텐츠 접근성 지침 중 일부를 충족하는 방법을 실습한다.- Cmarket Redux 과제의 웹 표준과 웹 접근성을
개선하는 리팩토링한다.
-
웹 표준에 맞는 HTML 코드를 작성할 수 있다.
o
-
<div>요소,<span>요소를 적절한 시멘틱 태그로 바꿀 수 있다.o
-
자주 틀리는 마크업 규칙을 발견하고 수정할 수 있다.
o
-
스크린 리더를 활용하여 웹 접근성을 개선할 수 있다.
o
-
WAI-ARIA 속성을 적절하게 사용할 수 있다.
o
+) 추가 학습
- 웹 표준 & 웹 접근성이 잘 갖춰진 사례와 그렇지 않은 사례 찾아보고 분석하기
- 웹 접근성을 고려한 UI 컴포넌트 예시 찾아보고 분석하기
소감
🔡➡️💻➡️🤓👍
오늘 과제는 어렵지 않았지만, 과제 제출하는 게 어려웠다.
리팩토링할 폴더를 웹 접근성 과제 폴더에 포함시켜서 pull request를 하는 거였는데, 폴더 2개를 클론해서 git 연결이 겹쳐서 commit을 해도 리팩토링 폴더가 보이지 않고 빈 껍데기로 commit 되는 현상이 발생했다.
검색해보니 이런 경우, 서브모듈 방법으로 올려야 하는데
나는 리팩토링 폴더도 push가 되지 않아서
다시 다 삭제하고 처음부터 시작해야했다.. 🤯
웹 접근성 과제 폴더는 클론 받아오고,
리팩토링할 과제 폴더는 클론이 아닌 다운로드로 받아와서
리팩토링 과제 폴더를 웹 접근성 과제 폴더에 넣어서
git add - git commit - git push - pull request로 진행하여 과제를 제출하였다.
미리 하나만 클론하고 포함될 폴더는 다운로드 받아서 진행하라고 했으면, 수월했을 텐데 둘 다 클로하여 진행하라고 해서 어려움을 겪었다.. 😫
그래도 제출했으니 속은 시원하다.
웹 표준과 웹 접근성에 대해 알아볼 수 있는 시간이어서 유익했다.
생각보다 내가 사용하고 있는 사이트들에서 스크린 리더가 읽기 쉬운 사이트는 별로 없었다.
쇼핑 사이트만 보아도 상품 설명이 이미지 내에 들어가 있어서
스크린 리더가 읽지 못한다고 한다.
아마존과 같은 해외 사이트는 상품의 이미지와 별도로
텍스트로 상품 설명을 한다.
시각적으로 간결하고 깨끗한 국내 사이트에 비해 보기에
다소 복잡하고 어지럽다고 느껴지지만
다양한 사용자를 고려하여 제작한 거였다.
얼마나 국내 사이트에 익숙해져있으면..
해외 사이트를 보고 이런 불편함을 느끼다니 충격...
'다양한 사용자와 다양한 환경을 고려하여
좀 더 신경써서 사용자 친화적인 웹 애플리케이션을 개발해야겠다'
느낄 수 있었던 학습이었다.
