케이스 소스 코드:
https://codepen.io/shadeed/pen/03caf6b36727accb692eecbc38f95d39?editors=1100
5. 접근성이 가시성에 미치는 영향: 숨김
요소가 숨겨지고 해당 하위 요소가 접근성 트리에서 제거되며 화면 판독기가 요소를 렌더링하지 않습니다.
(1) 포지셔닝
위치 속성이 있는 요소를 숨기려면 해당 요소를 화면 밖으로 이동하고 크기를 0(너비 및 높이)으로 설정해야 합니다. 예를 들어 점프 탐색 링크가 있습니다. 다음 다이어그램을 고려하십시오.
링크를 화면 밖에 두려면 다음을 추가해야 합니다.
「CSS」
.skip-링크 {
위치: 절대;
상단: -100%;
}-100% 값은 요소를 뷰포트 높이의 100%로 푸시합니다. 결과적으로 완전히 숨겨집니다. 키보드에 초점을 맞추면 다음과 같이 표시됩니다.
.skip-link:초점 {
위치: 절대;
상단: 0;
}케이스 소스 코드:
https://codepen.io/shadeed/pen/707992e7c98ea633fc6606e576ef8a04?editors=0100
6. 접근성이 위치에 미치는 영향: 절대 고정 |
요소는 스크린 리더에서 액세스할 수 있고 키보드로 초점을 맞출 수 있습니다. 뷰포트에서 숨겨져 있을 뿐입니다.
클립 경로 요소에 클립 경로를 사용하면 표시하고 숨겨야 하는 부분을 정의하는 클리핑 영역이 생성됩니다.
위의 예에서 투명한 검정색 영역에는 클립 경로가 있습니다. 요소에 클립 경로를 적용하면 투명한 검정색 영역 아래에 있는 항목이 표시되지 않습니다.
위 내용을 좀 더 시각적으로 보여주기 위해 Clippy 도구를 사용하겠습니다. 아래 GIF에는 다음과 같은 클립 경로가 있습니다.
각 방향의 다각형 값을 0 0으로 설정하면 자르기 영역의 크기가 0으로 조정됩니다. 결과적으로 이미지가 표시되지 않습니다. 마찬가지로 다각형을 원으로 대체하여 이 작업을 수행할 수도 있습니다.
img {
클립 경로: 원(0에서 50% 50%);
} 
7. 접근성이 클립 경로에 미치는 영향
요소는 시각적으로만 숨겨져 있으며 스크린 리더와 키보드 포커스에서는 계속 사용할 수 있습니다.
케이스 소스 코드:
https://codepen.io/shadeed/pen/9fdbd7be9fd9dac17a614c96ba7f64b1?editors=0100
3. 색상 및 글꼴 크기 제어
이 두 기술은 앞서 논의한 기술만큼 일반적이지는 않지만 특정 사용 사례에는 유용할 수 있습니다.
1. 투명한 색상
텍스트 색상을 투명하게 만들어 시각적으로 숨겨집니다. 이는 아이콘만 있는 버튼에 유용합니다.
2. 글꼴 크기
또한 글꼴 크기를 0으로 설정하면 텍스트가 시각적으로 숨겨지므로 유용합니다. 다음 구조의 버튼이 있는 다음 예를 살펴보세요.
<버튼> <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="false" focusable="false"> <!-- 경로 데이터 --> </svg> <span>좋아요</span> </버튼>
우리의 목표는 접근 가능한 방식으로 텍스트를 숨기는 것입니다. 이를 위해 다음 CSS를 추가했습니다.
.버튼 범위 {
색상: 투명;
글꼴 크기: 0;
}이렇게 하면 텍스트가 숨겨집니다. 색상을 변경하지 않고도 작동하지만 설명을 위해 추가했습니다.
케이스 소스 코드:
https://codepen.io/shadeed/pen/4eacdf50c3339fced7f787156c569372?editors=1100
3. 아리아 히든
aria-hidden 속성을 요소에 추가하면 접근성 트리에서 해당 요소가 제거되어 스크린 리더 사용자의 경험이 향상될 수 있습니다. 요소를 시각적으로 숨기지 않으며 스크린 리더 사용자만을 위한 것입니다.
<버튼> 메뉴 <svg aria-hidden="true"><!-- --></svg> </버튼>
위의 예에는 라벨과 아이콘이 있는 메뉴 버튼이 있습니다. 스크린 리더에서 아이콘을 숨기기 위해 aria-hidden이 추가되었습니다.
MDN(Mozilla Developer Network)에 따르면 속성 사용 사례는 다음과 같습니다.
아이콘, 이미지 등 장식적인 콘텐츠를 숨깁니다. 복사된 텍스트를 숨깁니다. 화면 밖에 있거나 접힌 콘텐츠를 숨깁니다.
4. aria-hidden="true"에 대한 접근성의 영향
화면 판독기에서만 콘텐츠를 숨기므로 화면 판독기용으로 설계되었습니다. 그러나 콘텐츠는 시력이 있는 사용자에게 계속 표시되며 키보드에 초점을 맞출 수 있습니다.
(1) 애니메이션과 인터랙션
예를 들어 숨겨진 모바일 내비게이션을 표시하기 위해 숨겨진 요소에 애니메이션을 적용하려면 접근 가능한 방식으로 수행되어야 합니다. 접근 가능한 환경을 위해 배울 수 있는 몇 가지 좋은 예와 스크린 리더 사용자에게 나쁜 경험을 만들 수 있는 실수를 방지하기 위한 몇 가지 나쁜 예를 살펴보겠습니다.
메뉴 애니메이션 - 나쁜 예
확장 시 슬라이딩 애니메이션이 필요한 메뉴가 있습니다. 가장 쉬운 방법은 메뉴에 다음을 추가하는 것입니다.
울 {
불투명도: 0;
변환: 번역X(100%);
전환: 0.3초 완화;
}
ul.활성 {
불투명도: 1;
변환: 번역X(0);
}위와 같이 메뉴는 .active 클래스를 기반으로 확장 및 축소되며, 이는 다음과 같이 JavaScript를 통해 추가됩니다.
menuToggle.addEventListener('클릭', function(e){
e.preventDefault();
navMenu.classList.toggle('활성');
});
결과는 좋아 보이지만 큰 버그가 있습니다. opacity: 0을 사용하면 접근성 트리 탐색이 숨겨지지 않습니다. 탐색이 시각적으로 숨겨져 있더라도 키보드를 통해 초점을 맞추고 화면 판독기로 액세스할 수 있습니다. 사용자에게 혼란을 주지 않도록 숨겨져 있어야 합니다.
다음은 Chrome 개발자 도구의 접근성 트리 스크린샷입니다.
간단히 말해서 접근성 트리는 화면 판독기 사용자가 액세스할 수 있는 모든 콘텐츠의 목록입니다. 우리의 경우에는 탐색 목록이 있지만 시각적으로 숨겨져 있습니다. 우리는 두 가지 문제를 해결해야 합니다.
메뉴가 숨겨져 있을 때 키보드 포커스를 사용하지 마세요. 탐색이 숨겨져 있을 때 스크린 리더를 통해 탐색을 알려주지 마세요.
아래 스크린샷은 Mac OS의 VoiceOver 로터가 페이지를 보는 방법을 보여줍니다. 탐색 목록은 숨겨져 있지만 존재합니다.
케이스 소스 코드:
https://codepen.io/shadeed/pen/e94f377dae6104fe45a71c80d59bb58d?editors=0100
메뉴 애니메이션 - 좋은 예
이 오류를 해결하려면 탐색 메뉴에 visible:hidden을 사용해야 합니다. 이렇게 하면 시각적 판독기와 화면 판독기에서 메뉴가 숨겨집니다.
「CSS」
울 {
가시성: 숨김;
불투명도: 0;
변환: 번역X(100%);
전환: 0.3초 완화;
}
ul.활성 {
가시성: 가시성;
불투명도: 1;
변환: 번역X(0);
}추가되면 메뉴가 화면 판독기에서 숨겨집니다. 다시 테스트하여 VoiceOver가 표시하는 내용을 살펴보겠습니다.
케이스 소스 코드:
https://codepen.io/shadeed/pen/e94f377dae6104fe45a71c80d59bb58d?editors=0110
5. 맞춤 체크박스
기본 체크박스 디자인은 맞춤화가 어렵기 때문에 체크박스에 대한 맞춤 디자인을 만들어야 합니다. 기본 HTML을 살펴보겠습니다.
<p class="c-체크박스"> <input class="sr-only" type="checkbox" name="" id="c1"> <label class="c-checkbox__label" for="c1">맞춤 체크박스</label> </p>
확인란을 사용자 정의하려면 접근 가능한 방식으로 입력을 숨겨야 합니다. 이를 위해서는 위치 및 기타 속성을 사용해야 합니다. 요소를 시각적으로만 숨기고 키보드 및 화면 판독기 사용자가 액세스할 수 있도록 하는 sr-only 또는 Visual-hidden이라는 일반적인 CSS 클래스가 있습니다.
.sr 전용 {
테두리: 0;
클립: 직사각형(0 0 0 0);
-webkit-clip-path: 다각형(0px 0px, 0px 0px, 0px 0px);
클립 경로: 다각형(0px 0px, 0px 0px, 0px 0px);
높이: 1px;
여백: -1px;
오버플로: 숨김;
패딩: 0;
위치: 절대;
너비: 1px;
공백: nowrap;
}사례 소스 코드: https://codepen.io/shadeed/pen/b722aa72dbe3574617f6506d14e5ac03?editors=1100
숨기기 버튼
트위터에는 아리아가 숨겨진 콘텐츠가 있는 스크린 리더에게는 숨겨져 있고 새 트윗이 나올 때만 나타나는 "새 트윗 보기"라는 버튼이 있습니다.
요약
이것으로 웹에서 요소를 숨기는 방법과 장점 및 단점에 대한 자세한 튜토리얼을 마치겠습니다. 웹에서 요소를 숨기는 방법에 대한 자세한 내용을 보려면 downcodes.com에서 이전 기사를 검색하거나 아래의 관련 기사를 계속 찾아보세요. 앞으로도 downcodes.com을 더 많이 응원해주세요!