a11y 썸네일형 리스트형 storybook에서 웹접근성 검사하기(feat. storybook-addon-a11y) 프로젝트: loplat UI키워드: storybook-addon-a11y, accessibility상황loplat ui의 컴포넌트들이 웹접근성을 잘 고려하고 있는지 확인하고 싶었다.팀원의 도움으로 storybook a11y 관련 addon을 알게되었다.(https://storybook.js.org/addons/@storybook/addon-a11y)각 컴포넌트의 웹접근성을 파악하고 개선하고자 한다.해결방법먼저 addon을 설치하고 addon 관련 global config를 설정한다. yarn add -D @storybook/addon-a11y이 때, color-contrast(명암비)는 디자이너의 판단 하에 rule을 무시하기로 한다.또한 a11y 속성과 관련된 'aria-*'과 'role' attri.. 더보기 웹접근성(web accessibility), SEO 개선하기 프로젝트: loplat homepage 키워드: web accessibility, SEO, lighthouse, semantic tag, screen reader, aria 상황 로플랫 홈페이지를 chrome lighthouse로 검사한 결과, a11y과 SEO에서 만족스럽지 못한 점수가 나왔다. 패스트캠퍼스에서 'TheRED: 견고한 UI 설계를 위한 마크업 가이드 by정찬명' 이라는 강의를 수강한 뒤, 홈페이지 웹접근성 개선을 위한 작업을 수행하였다. 해결과정 'HeadingsMap'이라는 크롬 확장 프로그램을 이용하여 페이지의 heading 구조를 확인해보았다. heading tag는 (구글 등의) 웹 크롤러가 페이지의 목차를 파악하는데 중요한 태그이며, 스크린 리더 사용자가 페이지를 빠르게 탐색할.. 더보기 이전 1 다음
