Skip to content

Latest commit

 

History

History
60 lines (52 loc) · 3.4 KB

20210813.md

File metadata and controls

60 lines (52 loc) · 3.4 KB
Raw

HTML / CSS

배운 것들

접근성 대원칙(WSAG POUR Principles)

  1. Perceivable(인식의 용이성)
  2. Operable(운용의 용이성)
  3. Understandable(이해의 용이성)
  4. Robust(견고성)

본문 바로가기 제공

  • 화면에 많은 정보들이 있을 때, 키보드로 모두 거쳐가게 하기보다는 중요한 부분(로그인 입력창 등)으로 바로 갈 수 있게끔 container div 위에 마크업해준다.
  • a태그에 href="#{해당태그의 id}"를 넣어 마크업
  • 기본 a태그일 때는 숨김콘텐츠 처리를 하고, focus를 받았을 때 width와 height을 되찾도록 하는 방식으로 접근
    • { display: none; }으로 했다가 나타나는 방식은 스크린리더에서 읽지 못하므로 전맹시각장애인 등에게 접근성을 제공하지 못한다.

Miscellany

  • position의 값으로 relative나 absolute, fixed를 갖는 요소들은 모두 떠 있는 레이어
    • 서로 차지하는 영역이 겹치는 경우 나중에 마크업된 요소가 더 위로 온다.
    • z-index로 조율해야 한다.
  • clip 속성은 position이 absolute나 fixed일 때만 적용된다.
    • clip-path는 모든 요소에 적용되는 모던 속성이지만 구형브라우저를 위해 clip 속성을 먼저 선언해주자.
    • IE에서는 rect함수의 각 좌표값을 콤마 없이 기재
.a11y-hidden {
  clip: rect(0 0 0 0);
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
}
  • aria-live는 동적으로 변경된 요소를 감지하여 스크린리더에게 읽게 한다. (로그인 오류 메시지 등)
  • 폰트어썸이나 폰텔로 등의 아이콘 삽입 시 자주 사용하는 <i> 태그는 icon이 아니라 italic으로, 주변 맥락에서 구분하여 돋보이게 하기 위한 태그이므로 <span> 태그를 사용하도록 하자.

form 태그

  • <section>으로 묶지 않는 경우, heading을 줘서 어떤 form인지 알 수 있도록 하거나 form 태그의 aria-label로 설명을 붙여준다.
  • HTML5에 새롭게 추가된 input의 type 중 search
    • 해당 타입을 지원하지 않는 브라우저에서는 안전하게 text로 작동한다.
    • datalist로 마크업한 영역에 미리 정의된 option을 드롭다운 옵션들로 제공한다.
    • <option>태그 속 label로 된 부분이 사용자에게 제공되는 옵션 값이며, value는 서버로 가는 값
<label>자료검색
  <input type="search" name="search" list="sports"/>
  <datalist id="sports">
    <option label="배구" value="volleyball" />
    <option label="야구" value="baseball" />
    <option label="축구" value="soccer" />
  </datalist>
</label>
  • input 태그의 placeholder도 custom이 가능하다.
    • ::placeholder을 통해서 할 수 있지만 크로스브라우징을 위해 prefix 붙인 버전들도 정의해줘야.

조사해 볼 것들

  • Modernizr: HTML5Shiv(semantic 태그들이 안 먹을 때 유효한 태그로 바꿔준다. 대신 인라인이라서 블록처리를 따로 해줘야한다)와 같이 구형 브라우저에서 지원하지 않는 기술을 지원하는 방향으로 변경해주는 cross browsing 도구 (poly-fill)
  • input 태그의 placeholder나 clear 커스텀 및 크로스브라우징

느낀 점

  • 파도파도 새로운 지식이 나와서 힘들기도 하고 좋기도 하다.