지난 시간에 살펴본 브라우저의 렌더링 과정은 아래 과정으로 이루어집니다. 아마 여기까지는 대부분 아실 내용일텐데요. 서버에서 HTML 파일을 수신HTML 파싱DOM 트리 생성CSSOM 트리 생성자바스크립트 파싱 및 실행DOM과 CSSOM을 결합하여 렌더트리 생성레이어레이아웃페인트Composite 아마 4번의 레이어와 레이어와 7번의 Composite 단계에 대해서는 생소하신 분도 있을 것 같습니다. 오늘은 이 두 단계에 대해 자세히 알아보겠습니다. 나머지 단계에 대해서는 지난 시간에 작성한 입문편 을 참고하시면 되겠습니다 레이어먼저 레이어 트리를 만드는 단계에 대해 알아보겠습니다. 아마 레이어 단계가 생소하신 분들이 많을텐데요.z-index 속성이나 3d transform 속성을 떠올리면 이해가 빠를 것..

🎄  A11y Advent Calendar (번역) 4일차입니다. 전체 목록을 보고싶으시면 여기로 이동해주세요 :) 이번엔 링크에 대해 이야기해 보겠습니다. 스크린 리더는 페이지의 모든 링크를 나열해 사용자가 더 빠르게 탐색할 수 있도록 돕는 기능을 제공합니다. 또한, 탭 키를 사용하면 링크 간을 이동하며 링크 사이의 텍스트는 건너뛸 수 있습니다. 이 과정에서 링크는 페이지의 콘텐츠나 문법적 문맥과 분리된 상태로 보여지게 됩니다. 이러한 이유로, 링크는 그 자체로 명확하고 설명 가능해야 합니다. 링크가 포함된 문장의 나머지 부분 없이도, 링크 자체만으로 의미를 전달할 수 있어야 합니다. 링크의 내용은 사용자가 클릭했을 때 수행될 작업이나 이동할 페이지를 명확히 설명해야 합니다. 만약 페이지에서 링크가 ..

🎄  A11y Advent Calendar (번역) 3일차입니다. 전체 목록을 보고싶으시면 여기로 이동해주세요 :) 오늘은 좀 더 기술적인 주제로 들어가서 보조 기술이 접근 가능하도록 콘텐츠를 숨기는 방법에 대해 알아보겠습니다. 대부분의 사람들은 링크와 버튼을 탭하거나 클릭하여 상호 작용하는 방식으로 웹을 탐색합니다. 이러한 방식은 시각적 입력을 사용하는 사용자에게는 효과적이지만, 스크린 리더를 사용하는 사용자들에게는 다릅니다. 스크린 리더는 페이지 내용을 음성으로 읽어주는 소프트웨어로, 시각적 정보 없이도 웹 콘텐츠를 탐색할 수 있게 돕습니다. 따라서 개발자는 스크린 리더 사용자를 고려한 접근성 높은 웹 콘텐츠를 제공해야 합니다. 예를 들어, 아이콘은 시각적으로 의미를 전달할 수 있지만, 이를 인식하..

🎄  A11y Advent Calendar (번역) 2일차입니다. 전체 목록을 보고싶으시면 여기로 이동해주세요 :) 접근성의 정의를 살펴보았으니, 이제 이를 어떻게 측정할 수 있는지 알아보겠습니다. 접근성은 현재 기술 표준인 웹 콘텐츠 접근성 지침(WCAG)을 기준으로 평가됩니다. WCAG는 인식 가능, 작동 가능, 이해 가능, 견고함의 약자인 POUR 원칙에 따라 구성된 12가지 지침을 제공합니다.Perceivable (인식 가능): 콘텐츠는 사용자가 감각적으로 접근할 수 있어야 합니다.Operable (작동 가능): 웹사이트는 다양한 입력 도구로 사용 가능해야 합니다.Understandable (이해 가능): 콘텐츠와 UI는 명확하고 예측 가능해야 합니다.Robust (견고함): 다양한 환경과 보조..

🎄  A11y Advent Calendar (번역) 1일차입니다. 전체 목록을 보고싶으시면 여기로 이동해주세요 :) 웹접근성은 주로 시각장애인을 위한 것으로만 알려져 있지만, 실제로는 더 넓은 범위를 다루며, 크게 다섯 가지 범주로 나눌 수 있습니다.시각적 어려움: 시력 저하, 색맹, 흐릿함, 완전 실명, 백내장 등의 다양한 범위를 포함합니다.웹은 주로 시각적으로 소비되기 때문에 이 분야에서 많은 기술적 발전이 이루어졌습니다. 그러나 종종 시각장애인 사용자만을 위한 것으로 좁게 이해되는 경우가 많습니다.움직임의 어려움: 웹에서는 주로 하체가 아닌 상체의 장애를 고려합니다. 건염, 손목 터널 증후군, 손이나 팔 골절, 피부 질환, 손 떨림, 파킨슨병 등이 이에 속합니다.인지적 어려움: 난독증, 외상 후 ..

Advent calendar란 크리스마스를 기다리며 매일 초콜릿을 하나씩 꺼내먹을 수 있는 달력을 말합니다. 이에 착안해 웹 접근성과 관련된 지식을 크리스마스 전까지 하루에 하나씩 공유하는 블로그를 봤는데 방식이 재미있고 유용한 내용이 많았습니다. 회사에서 이 글을 번역하여 스터디를 진행한적이 있습니다. 더 많은 사람들과 공유하고 싶어 개인 블로그에 하나씩 옮겨 적어보려합니다 여러분도 함께 웹 접근성의 가치를 느끼고 매년 크리스마스 시즌이 되면 한번씩 꺼내읽는 글이 되었으면 좋겠습니다. 이를 통해 더 많은 사람들이 편리하게 웹을 사용할 수 있도록 돕는 데 동참하셨으면 합니다 :) 목록Day 1) 웹접근성이란?Day 2) 웹접근성 평가하기Day 3) 스크린 리더 사용자만을 위한 컨텐츠 숨기기Day 4) 접..