이동식 저장소

대체 텍스트는 화면에 직접 보여서는 안 되지만, 스크린 리더는 인식할 수 있어야 한다. 어떻게 할까? 화면에서 숨기라고? /* BAD */ visibility: hidden; display: none; width: 0; height: 0; font-size: 0; line-height: 0; 화면에서 숨겨야 한다는 말에 그만 스크린 리더가 대체 텍스트를 인식하지 못하게 돼버렸다. 곤란하다. 숨기지는 않되 보이지만 않게 하자 /* 그닥.. */ opacity: 0; text-indent: -99999px; z-index: -1; 뭐.. 안 되는 건 아니지만 예상하지 못한 문제가 발생할 수 있다. opacity: 0를 사용하면 텍스트가 투명해지긴 하지만 페이지에서 공간을 차지하고 있으며, 텍스트의 투..

지난 글에서도 이야기했지만, 이미지를 볼 수 없는 상황을 대비하여 대체 텍스트를 제공해야 한다. 보통 img 태그의 alt 속성에 대체 텍스트를 작성한다. 그런데 대체 텍스트가 일개 속성으로 적기에 너무 길다면? 이미지를 img 태그가 아니라 background로 넣었다면? 마크업 태그로 대체 텍스트를 작성한다. 이 기법을 Image Replacement, 줄여서 IR이라고 한다. Investor Relationship 아니다. 배경 이미지? 아니, 그냥 배경 넣고 alt도 넣으면 안 돼요? 배경 이미지가 계속 바뀌는 경우 alt로 대응하기 쉽지 않다. 이런 경우에는 보통 이미지 바로 다음에 p 또는 span으로 대체 텍스트를 작성한다. // 어떤..

인식의 용이성 적절한 대체 텍스트 제공 텍스트로 표현할 수 없는 콘텐츠(이미지 등)에는 스크린 리더가 읽을 수 있도록 대체 텍스트를 제공해야 한다. 멀티미디어 대체 수단 동영상의 음성을 대체할 수 있는 수단(자막, 스크립트, 원고 등)을 제공해야 한다. 음성이 없는 동영상의 경우 스크린 리더가 읽을 수 있는 자막이나 원고를 제공해야 한다. 콘텐츠의 명료성 콘텐츠는 색에 무관하게 구분되어야 한다. 굵기, 모양, 테두리 등을 이용하여 콘텐츠를 구별할 수 있다. 운용의 용이성 명확한 지시사항 제공 지시사항을 단일 감각으로만 제공해서는 안 된다. 모양, 굵기, 소리 등을 이용하여 지시사항을 명확히 표현해야 한다. 텍스트의 명도 대비 텍스트와 배경색 간의 명도는 4.5:1 이상으로 구현해야 한다. 페이지를 확대 ..

CSS에서 사용되는 길이는 크게 절대 길이와 상대 길이로 나눌 수 있다. 절대 길이 절대 길이란 어디에서나 같은 크기로 표현되는 길이를 말한다. 세상의 화면은 크기가 모두 다르기 때문에 절대 길이를 화면에 보여주기는 부적합하지만, 화면의 크기가 고정되어 있다면(ex: A4용지) 절대 길이를 사용하는 게 편하다. cm: 센티미터 mm: 밀리미터 in: 인치 *px: 픽셀 (1px = $\frac{1}{96}$ in) pt: 포인트 (1pt = $\frac{1}{72}$ in) pc: 피카 (1pc = $\frac{1}{12}$ pt) * px는 화면의 크기에 따라 상대적이다. 예를 들어 저해상도 장치에서는 1px이 화면의 점(픽셀) 하나를 의미할 수..

10월부터 프론트엔드 공부를 하고 있다. 맛보기로 Jetbrains Academy에서 HTML, CSS, JS 기초를 공부했다. 블로그에 HTML의 역사 따위를 적고 싶지는 않아서.. 한동안 뜸했다;; 이제부터는 실제로 페이지를 만들어 볼 계획이다. 만들면서 공부한 내용을 블로그에 올릴 계획.