안녕하세요, 훌륭한 개발자 여러분! 이 게시물에서는 의미론적 HTML과 다음과 같은 멋진 CSS 의사 클래스를 사용하여 간단한 문의 양식을 만드는 과정을 안내하겠습니다. :focus-within. 그만큼 :focus-within 클래스를 사용하면 초점을 효과적으로 제어할 수 있으며 사용자에게 이것이 경험의 정확한 위치임을 알려줍니다. 시작하기 전에 웹 접근성이 무엇인지 핵심부터 살펴보겠습니다.
양식 접근성?
여러분은 어디에서나 "접근성"이라는 용어나 a11y라는 숫자를 들어보셨을 것입니다. 무슨 뜻이에요? 답변이 너무 많은 훌륭한 질문입니다. 실제 세계를 볼 때 접근성이란 회사의 욕실에 날카로운 물건 용기를 두는 것, 바퀴 보조 인력을 위한 경사로가 있는지 확인하는 것, 필요한 모든 사람을 위해 대형 인쇄 키보드와 같은 주변 장치를 준비하는 것 등을 의미합니다.
접근성의 범위는 여기서 끝나지 않습니다. 외부 사용자뿐만 아니라 내부 동료도 인식해야 하는 디지털 접근성이 있습니다. 색상 대비는 낮게 매달린 과일입니다 우리는 새싹을 싹쓸이할 수 있어야 합니다. 직장에서는 직원에게 스크린 리더와 같은 보조 기술이 필요한 경우 이를 설치하여 사용할 수 있도록 합니다. 고려해야 할 사항이 많이 있습니다. 이 기사에서는 웹 접근성에 중점을 두고 있습니다. WCAG(웹 콘텐츠 접근성 지침) 마음에있다.
XNUMXD덴탈의
:focus-withinCSS 의사 클래스는 요소 또는 해당 하위 요소에 초점이 맞춰진 경우 해당 요소와 일치합니다. 즉, :focus 의사 클래스와 일치하거나 :focus와 일치하는 하위 항목이 있는 요소를 나타냅니다. (여기에는 그림자 나무의 자손도 포함됩니다.)
이 의사 클래스는 사용자가 실제로 요소와 상호 작용하고 있음을 강조하고 싶을 때 정말 유용합니다. 예를 들어 전체 양식의 배경색을 변경할 수 있습니다. 또는 포커스가 입력으로 이동된 경우 포커스가 해당 입력으로 이동될 때 입력 요소의 레이블을 굵게 만들고 더 크게 만들 수 있습니다. 아래 코드 조각과 예제에서 일어나는 일은 양식에 액세스할 수 있게 만드는 것입니다. :focus-within 이는 CSS를 유리하게 사용할 수 있는 한 가지 방법일 뿐입니다.
집중하는 방법
접근성 및 웹 경험과 관련하여 초점은 페이지, UI 또는 구성 요소 내에서 무언가가 상호 작용하고 있음을 나타내는 시각적 표시기입니다. CSS는 대화형 요소에 포커스가 맞춰진 시기를 알 수 있습니다.
"그만큼
:focusCSS 의사 클래스는 포커스를 받은 요소(예: 양식 입력)를 나타냅니다. 일반적으로 사용자가 요소를 클릭하거나 탭하거나 키보드의 Tab 키를 사용하여 선택할 때 트리거됩니다.”
항상 초점 표시기 또는 초점 가능 요소 주위의 링이 경험 전반에 걸쳐 적절한 색상 대비를 유지하는지 확인하십시오.
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/
