이동식 저장소

대체 텍스트는 화면에 직접 보여서는 안 되지만, 스크린 리더는 인식할 수 있어야 한다. 어떻게 할까? 화면에서 숨기라고? /* 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``는 화면의 크기에 따라 상대적이다. 예를 들어 저해상도 장치에서는 1``px``이 화면의 점(픽셀) 하나를 의미할 수..

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