안녕하세요, 훌륭한 개발자 여러분! 이 게시물에서는 의미론적 HTML과 다음과 같은 멋진 CSS 의사 클래스를 사용하여 간단한 문의 양식을 만드는 과정을 안내하겠습니다. :focus-within
. 그만큼 :focus-within
클래스를 사용하면 초점을 효과적으로 제어할 수 있으며 사용자에게 이것이 경험의 정확한 위치임을 알려줍니다. 시작하기 전에 웹 접근성이 무엇인지 핵심부터 살펴보겠습니다.
양식 접근성?
여러분은 어디에서나 "접근성"이라는 용어나 a11y라는 숫자를 들어보셨을 것입니다. 무슨 뜻이에요? 답변이 너무 많은 훌륭한 질문입니다. 실제 세계를 볼 때 접근성이란 회사의 욕실에 날카로운 물건 용기를 두는 것, 바퀴 보조 인력을 위한 경사로가 있는지 확인하는 것, 필요한 모든 사람을 위해 대형 인쇄 키보드와 같은 주변 장치를 준비하는 것 등을 의미합니다.
접근성의 범위는 여기서 끝나지 않습니다. 외부 사용자뿐만 아니라 내부 동료도 인식해야 하는 디지털 접근성이 있습니다. 색상 대비는 낮게 매달린 과일입니다 우리는 새싹을 싹쓸이할 수 있어야 합니다. 직장에서는 직원에게 스크린 리더와 같은 보조 기술이 필요한 경우 이를 설치하여 사용할 수 있도록 합니다. 고려해야 할 사항이 많이 있습니다. 이 기사에서는 웹 접근성에 중점을 두고 있습니다. WCAG(웹 콘텐츠 접근성 지침) 마음에있다.
이 의사 클래스는 사용자가 실제로 요소와 상호 작용하고 있음을 강조하고 싶을 때 정말 유용합니다. 예를 들어 전체 양식의 배경색을 변경할 수 있습니다. 또는 포커스가 입력으로 이동된 경우 포커스가 해당 입력으로 이동될 때 입력 요소의 레이블을 굵게 만들고 더 크게 만들 수 있습니다. 아래 코드 조각과 예제에서 일어나는 일은 양식에 액세스할 수 있게 만드는 것입니다. :focus-within
이는 CSS를 유리하게 사용할 수 있는 한 가지 방법일 뿐입니다.
집중하는 방법
접근성 및 웹 경험과 관련하여 초점은 페이지, UI 또는 구성 요소 내에서 무언가가 상호 작용하고 있음을 나타내는 시각적 표시기입니다. CSS는 대화형 요소에 포커스가 맞춰진 시기를 알 수 있습니다.
항상 초점 표시기 또는 초점 가능 요소 주위의 링이 경험 전반에 걸쳐 적절한 색상 대비를 유지하는지 확인하십시오.
Focus는 이렇게 작성되며 스타일을 선택하면 브랜딩에 맞게 스타일을 지정할 수 있습니다.
:focus {
* / INSERT STYLES HERE /*
}
무엇을 하든 개요를 다음과 같이 설정하지 마세요. 0
or none
. 그렇게 하면 전체 환경에서 모든 사람에게 표시되는 초점 표시기가 제거됩니다. 포커스를 제거해야 하는 경우 가능하지만 나중에 다시 추가해야 합니다. CSS에서 포커스를 제거하거나 개요를 다음으로 설정하면 0
or none
, 모든 사용자의 포커스 링을 제거합니다. 이는 CSS 재설정을 사용할 때 많이 나타납니다. CSS 재설정은 스타일을 빈 캔버스로 재설정합니다. 이렇게 하면 빈 캔버스를 담당하여 원하는 대로 스타일을 지정할 수 있습니다. CSS 재설정을 사용하려면 다음을 확인하세요. 조쉬 코모의 재설정.
*아래 내용은 하지 마세요!
:focus {
outline: 0;
}
:focus {
outline: none;
}
내면을 보세요!
CSS를 사용하여 포커스 스타일을 지정하는 가장 멋진 방법 중 하나가 이 문서의 내용입니다. 아직 확인하지 않으셨다면 :focus-within
의사 클래스, 꼭 한 번 보세요! 의미론적 마크업과 CSS를 사용하는 데는 숨겨진 보석이 많이 있는데, 이것이 그 중 하나입니다. 간과되는 많은 항목은 기본적으로 액세스 가능합니다. 예를 들어 의미 체계 마크업은 기본적으로 액세스 가능하며 항상 div 위에 사용해야 합니다.
<header>
<h1>Semantic Markup</h1>
<nav>
<ul>
<li><a href="/ko/">Home</a></li>
<li><a href="/ko/about">About</a></li>
</ul>
</nav>
</header>
<section><!-- Code goes here --></section>
<section><!-- Code goes here --></section>
<aside><!-- Code goes here --></aside>
<footer><!-- Code goes here --></footer>
XNUMXD덴탈의 header
, nav
, main
, section
, aside
및 footer
모두 의미적 요소입니다. 그만큼 h1
및 ul
또한 의미론적이며 접근 가능합니다.
생성해야 하는 사용자 정의 구성 요소가 없으면 div
함께 사용해도 괜찮습니다 ARIA(액세스 가능한 리치 인터넷 애플리케이션). 이후 게시물에서 ARIA에 대해 자세히 알아볼 수 있습니다. 지금은 이 CSS 의사 클래스에 집중해 보겠습니다. 제가 거기서 무엇을 했는지 살펴보겠습니다.
XNUMXD덴탈의 :focus-within
의사 클래스를 사용하면 포함된 하위 요소에 포커스가 있을 때 해당 요소를 선택할 수 있습니다.
:focus-within
행동 중!
HTML
<form>
<div>
<label for="firstName">First Name</label><input id="firstName" type="text">
</div>
<div>
<label for="lastName">Last Name</label><input id="lastName" type="text">
</div>
<div>
<label for="phone">Phone Number</label><input id="phone" type="text">
</div>
<div>
<label for="message">Message</label><textarea id="message"></textarea>
</div>
</form>
CSS
form:focus-within {
background: #ff7300;
color: black;
padding: 10px;
}
위의 예제 코드에서는 배경색인 주황색을 추가하고 패딩을 추가한 다음 레이블 색상을 검정색으로 변경합니다.
최종 제품은 아래와 같습니다. 물론 스타일을 변경할 수 있는 가능성은 무궁무진하지만 이를 통해 모든 사람이 웹에 더 쉽게 접근할 수 있도록 하는 좋은 방향으로 나아갈 수 있을 것입니다!
또 다른 사용 사례 :focus-within
저시력 사용자를 위해 레이블을 굵게 바꾸거나 다른 색상으로 바꾸거나 확대할 것입니다. 이에 대한 예제 코드는 아래와 같습니다.
HTML
<form>
<h1>:focus-within part 2!</h1>
<label for="firstName">First Name: <input name="firstName" type="text" /></label>
<label for="lastName">Last Name: <input name="lastName" type="text" /></label>
<label for="phone">Phone number: <input type="tel" id="phone" /></label>
<label for="message">Message: <textarea name="message" id="message"/></textarea></label>
</form>
CSS
label {
display: block;
margin-right: 10px;
padding-bottom: 15px;
}
label:focus-within {
font-weight: bold;
color: red;
font-size: 1.6em;
}
:focus-within
또한 전반적으로 훌륭한 브라우저 지원을 제공합니다. 사용해도 되나요.
결론
외부적으로뿐만 아니라 내부적으로도 소프트웨어를 출시할 때 놀랍고 접근 가능한 사용자 경험을 만드는 것이 항상 최우선 순위여야 합니다. 개발자로서 우리는 고위 경영진에 이르기까지 다른 사람들이 직면한 어려움을 인식하고 웹 플랫폼을 더 나은 곳으로 만들기 위한 홍보대사가 될 수 있는 방법을 인식해야 합니다.
시맨틱 마크업 및 CSS와 같은 기술을 사용하여 포괄적인 공간을 만드는 것은 웹을 더 나은 곳으로 만드는 데 중요한 부분입니다. 계속해서 전진하고 삶을 변화시키도록 합시다.
여기 CSS-Tricks에 대한 또 다른 훌륭한 리소스를 확인하세요. :focus-within 사용.
- SEO 기반 콘텐츠 및 PR 배포. 오늘 증폭하십시오.
- PlatoData.Network 수직 생성 Ai. 자신에게 권한을 부여하십시오. 여기에서 액세스하십시오.
- PlatoAiStream. 웹3 인텔리전스. 지식 증폭. 여기에서 액세스하십시오.
- 플라톤ESG. 탄소, 클린테크, 에너지, 환경, 태양광, 폐기물 관리. 여기에서 액세스하십시오.
- PlatoHealth. 생명 공학 및 임상 시험 인텔리전스. 여기에서 액세스하십시오.
- 출처: https://css-tricks.com/accessible-forms-with-pseudo-classes/
- :있다
- :이다
- :아니
- :어디
- $UP
- 09
- 1
- 11
- 12
- 13
- 16
- 22
- 27
- 31
- 362
- 7
- 8
- 9
- 91
- 98
- a
- 할 수 있는
- 소개
- 위의
- 접근성
- 얻기 쉬운
- 에 따르면
- 가로질러
- 더하다
- 이점
- All
- 수
- 또한
- 항상
- am
- 놀라운
- 대사
- an
- 및
- 다른
- 답변
- 어떤
- 누군가
- 어플리케이션
- 있군요
- 공기
- 약
- 기사
- AS
- 도움
- At
- 가능
- 뒤로
- 배경
- BE
- 전에
- 존재
- 이하
- 더 나은
- 검정
- 블록
- 판
- 일시: XNUMX년 XNUMX월 XNUMX일 화요일 XNUMX:XNUMXpm - XNUMX:XNUMXpm 장소: 여의도 페어몬트 앰배서더 서울 호텔 XNUMXF 아잘레아스 룸 [약도] 행사 문의: info.korea@rescale.com
- 브랜드
- 브라우저
- 사업
- 비자 면제 프로그램에 해당하는 국가의 시민권을 가지고 있지만
- by
- CAN
- 캔버스
- 케이스
- 과제
- 이전 단계로 돌아가기
- 변화
- 요금
- 검사
- 체크
- 왼쪽 메뉴에서
- 수업
- 수업
- 암호
- 동료
- 색
- 제공
- 구성 요소
- 결론
- 고려
- CONTACT
- 용기
- 이 포함되어 있습니다
- 함유량
- 계속
- 대조
- 제어
- 핵심
- 코스
- 만들
- 만든
- 만들기
- 결정적인
- CSS
- 관습
- 깊은
- 심해 잠수
- 태만
- 명확히
- 개발자
- 개발자
- DID
- 다른
- 디지털
- 디지털 접근성
- 디스플레이
- 잠수
- do
- 하지
- 하지 않습니다
- 하기
- 요소
- 요소
- 강조하다
- 종업원
- 끝없는
- 사람
- 모든 곳
- 정확하게
- 예
- 예
- 경험
- 외부
- 외부 적으로
- 페이스메이크업
- 사실
- 최후의
- 끝
- 먼저,
- 초점
- 집중
- 럭셔리
- 형태
- 양식
- 앞으로
- 에
- 영역
- 보석
- 일반적으로
- 얻을
- 지프
- 주기
- 간다
- 가는
- 좋은
- 큰
- 가이드 라인
- 손
- 무슨 일이
- 있다
- 데
- 들었다
- 여기에서 지금 확인해 보세요.
- 숨겨진
- 높은
- 강조
- 방법
- How To
- HTML
- HTTPS
- i
- if
- in
- 기타의
- 포함
- 포함한
- 지시자
- 입력
- 설치
- 예
- 상호 작용
- 대화형
- 내부의
- 내부로
- 인터넷
- 으로
- IT
- 그
- 그 자체
- 도약
- 다만
- 딱 하나만
- 유지
- 보관 된
- 키
- 알아
- 알려진
- 라벨
- 레이블
- 넓은
- 큰
- 성
- 후에
- Leadership
- 시키는
- 처럼
- 아마도
- 삶
- 보기
- 봐라.
- 롯
- 낮은
- 유지
- 확인
- 유튜브 영상을 만드는 것은
- .
- 경기
- 일치하는
- 성냥
- 평균
- 방법
- 메시지
- 신경
- 배우기
- 가장
- 움직이는
- 움직이는
- 모질라
- name
- 필요
- 요구
- 네트워크
- 못
- 없음
- 지금
- 번호
- of
- on
- ONE
- or
- 주황색
- 기타
- 기타
- 우리의
- 아웃
- 개요
- 위에
- 페이지
- 쌍을 이루는
- 부품
- 사람들
- 주변 장치
- 전화
- 물리적
- 장소
- 플랫폼
- 플라톤
- 플라톤 데이터 인텔리전스
- 플라토데이터
- 가능성
- 게시하다
- 인쇄
- 우선
- 프로덕트
- 적절한
- 문제
- 램프
- 리더
- 정말
- 접수
- 빨간색
- 관련
- 제거
- 제거하다
- 대표
- 의지
- 풍부한
- 반지
- 화면
- 본
- 고르다
- 시맨틱
- 연장자
- 고위 리더십
- 세트
- 그림자
- 배송
- 영상을
- 보여주는
- 단순, 간단, 편리
- 크기
- So
- 소프트웨어
- 일부
- 무언가
- 공간
- 중지
- 스타일
- 이러한
- SUPPORT
- 확인
- 받아
- 도청 장치
- 기술
- Technology
- 전화
- 이야기
- 기간
- 본문
- 그
- XNUMXD덴탈의
- 그들
- 그때
- 그곳에.
- 그들
- 일
- 이
- 을 통하여
- 시대
- 에
- 상단
- 선로
- 나무
- 방아쇠를 당긴
- 참된
- 선회
- ui
- 사용
- 유스 케이스
- 익숙한
- 사용자
- 사용자 경험
- 사용자
- 사용
- 눈에 보이는
- 시력
- 시각
- W3
- 필요
- 방법..
- 방법
- we
- 웹
- 웹 사이트
- 잘
- 뭐
- 바퀴
- 언제
- 모든
- 의지
- 소원
- 과
- 이내
- 훌륭한
- 말
- 세계
- 겠지
- 쓴
- 자신의
- 너의
- 제퍼 넷