[240627] 밀린 TIL을 써보아요.

kiseon·2024년 6월 27일

TIL

목록 보기

2/26

Today는 아니지만 더 많이 밀리기 전에 정리 가즈아~~

HTML

웹접근성

2시간씩 2번 실시간으로 강사님 강의를 들었다. 강사님의 차별성은 웹접근성과 SEO라고 하셨다. 그렇기 때문에 강의 주제가 웹 접근성으로 많이 넘어갔다.

난 웹 접근성은 구현을 먼저 하고 나서 디벨롭 하는 과정에서 진행되는줄 알았지만, 구현 과정에서부터 고려를 해야한다는것을 알게되었다.

아직 웹 접근성에 대해 많이 아는것은 아니지만 강의를 통해서 퍼블리싱 초짜가 할 수 있는 간단한 내용을 정리 해두려고 한다.

Semantic Tag

div를 대신하여 블록 태그에 그저 의미만 부여한 태그들이다.

근데 왜 웹접근성에 시맨틱 태그가 관여되는가!라고 한다면 스크린리더가 블록 태그의 의미를 이해할 수 있기 때문이다. (스크린리더는 나중에 좀 더 공부해야만한다.)
비장애인들은 웹디자이너가 고민해서 만든 화면의 레이아웃을 보며 쉽게 사이트를 이용할 수 있지만,
눈이 불편하다면 스크린리더가 읽어주는 소리에 집중하게 된다. 스크린리더에게 디자이너가 고민한 레이아웃을 설명해주지 않으면 사이트를 이용하려는 모들 이용자들에게 의도를 전달할 수 없으니 디자이너가 얼마나 슬플것인가..!

태그	내용	예시
< header>	문서나 섹션의 머릿글을 지정	로고, 탐색, 제목 및 기타 소개 정보
< main >	메인 내용을 담는 태그	웹사이트의 텍스트 본문이나 콘텐츠
< nav >	페이지 부분을 정의	메뉴, 탭, 탐색경로 등 탐색 링크
< article >	독립적인 글을 다루는 데 사용하는 태그	뉴스 기사, 제품 리뷰
< aside >	옆에 위치하는 콘텐츠를 담는 태그	문서의 사이드바
< summary >	토글을 만드는 태그	요약
< details >	사용자가 보거나 숨길 수 있는 추가 세부 정보를 정의하는 태그	< summary >의 하위항목

출처 : tbwakorea

위에 적어둔 태그 외에도 엄청 많지만 이것도 나중에 태그 하나하나 공부해볼때 정리하는걸로 하겠다.

그래서 이 태그를 사용하면 너무너무 좋겠지만, html5에서만 사용 가능하기 때문에 이거 조차 크로스브라우징 이슈가 있을수 있다.

role

Role속성을 부여해서 해당 블록은 어떤 의도를 가졌는지 알려줄 수 있다.
mdn과 w3 두곳에 아주 자세히 나와있으니 일단 링크 걸어두고 나중에 공부해야지.
role도 웹 접근성을 위해 만들어진 속성이다. 강사님은 네이버도 role을 활용하고 있고 차차 시멘틱 태그로 교체하고 있다고 하셨다.
지금 궁금해졌지만 html버전으로 인해 크로스 브라우징 이슈가 있을 수 있는데 그럼 낮은 버전 사용자를 포기 하고 시멘틱 태그를 쓰는것인가? 이것도 찾아봐야겠다.

tabindex

다들 마우스 잡기 귀찮으면 TAB키를 잘 활용할것이라고 생각한다. 근데 이 TAB조차 구조를 짤때 고려해야하는 내용 중 하나였다.

tabindex	내용
-1	연속 키보드 탐색으로 접근할 수는 없음
0	기본값
32767	최댓값

mdn
하지만 -1~32767 전부 다 일일이 지정해준다는것은 엄청난 노가다가 될것이다. 우리가 생각하지 않아도 자연스럽게 됐던것은 구조를 논리적으로 짠다면 충분히 커버가 되는 부분이기 때문에 사용은 지양하고 구조를 순서대로 잘 짜는데 집중해야한다.

CSS

flex

나는 display 속성 중 flex를 굉장히 자주 쓴다. 블록 요소에 일일이 인라인속성을 부여해주지 않아도 되고, 뷰포트 크기가 바뀔때마다 요소들에 일일이 가로 길이를 지정해 주지 않아도 되서 좋아한다.
근데 이것도 나름 최신 기능?이라 크로스브라우징에 이슈가 있을수 있다고 하셨다.
이거에 대한 기존 대처법은 float을 이용하면 된다고 한다.
참고 : 1분코딩