Này tất cả các nhà phát triển tuyệt vời ngoài kia! Trong bài đăng này, tôi sẽ hướng dẫn bạn cách tạo một biểu mẫu liên hệ đơn giản bằng cách sử dụng HTML ngữ nghĩa và một lớp giả CSS tuyệt vời được gọi là :focus-within. Các :focus-within class cho phép kiểm soát tốt tiêu điểm và cho người dùng của bạn biết đây chính xác là vị trí của họ trong trải nghiệm. Trước khi bắt đầu, chúng ta hãy tìm hiểu cốt lõi về khả năng truy cập web là gì.

Khả năng truy cập biểu mẫu?

Rất có thể bạn đã nghe thấy thuật ngữ “khả năng tiếp cận” ở mọi nơi hoặc chữ số, a11y. Nó có nghĩa là gì? Đó là một câu hỏi tuyệt vời với rất nhiều câu trả lời. Khi chúng ta nhìn vào thế giới vật chất, khả năng tiếp cận có nghĩa là những thứ như có hộp đựng vật sắc nhọn trong phòng tắm tại doanh nghiệp của bạn, đảm bảo có đường dốc cho người hỗ trợ bánh xe và có sẵn các thiết bị ngoại vi như bàn phím in lớn cho bất kỳ ai cần.

Khả năng tiếp cận đa dạng không dừng lại ở đó, chúng tôi còn có khả năng tiếp cận kỹ thuật số mà chúng tôi cần phải nhận thức được, không chỉ đối với người dùng bên ngoài mà còn cả đồng nghiệp nội bộ. Độ tương phản màu sắc là một trái cây treo thấp rằng chúng ta có thể khai thác từ trong trứng nước. Tại nơi làm việc của chúng tôi, để đảm bảo rằng nếu bất kỳ nhân viên nào cần công nghệ hỗ trợ như trình đọc màn hình, chúng tôi đã cài đặt và cung cấp sẵn công nghệ đó. Có rất nhiều điều cần được xem xét. Bài viết này sẽ tập trung vào khả năng truy cập web bằng cách giữ WCAG (hướng dẫn truy cập nội dung web) trong tâm trí.

Lớp giả này thực sự tuyệt vời khi bạn muốn nhấn mạnh rằng trên thực tế người dùng đang tương tác với phần tử. Bạn có thể thay đổi màu nền của toàn bộ biểu mẫu chẳng hạn. Hoặc, nếu tiêu điểm được chuyển vào một đầu vào, bạn có thể làm cho nhãn đậm và lớn hơn của thành phần đầu vào khi tiêu điểm được chuyển vào đầu vào đó. Những gì đang xảy ra bên dưới trong các đoạn mã và ví dụ là những gì giúp biểu mẫu có thể truy cập được. :focus-within chỉ là một cách chúng ta có thể sử dụng CSS để có lợi cho mình.

Làm thế nào để tập trung

Trọng tâm, liên quan đến khả năng truy cập và trải nghiệm web, là chỉ báo trực quan cho thấy nội dung nào đó đang được tương tác trên trang, trong giao diện người dùng hoặc trong một thành phần. CSS có thể cho biết khi nào một phần tử tương tác được tập trung.

Luôn đảm bảo rằng chỉ báo lấy nét hoặc vòng xung quanh các thành phần có thể lấy nét duy trì độ tương phản màu thích hợp trong suốt trải nghiệm.

Tiêu điểm được viết như thế này và có thể được tạo kiểu để phù hợp với thương hiệu của bạn nếu bạn chọn tạo kiểu cho nó.

:focus {
  * / INSERT STYLES HERE /*
}

Dù bạn làm gì, đừng bao giờ đặt dàn ý của mình thành 0 or none. Làm như vậy sẽ xóa chỉ báo tiêu điểm hiển thị cho mọi người trong toàn bộ trải nghiệm. Nếu cần xóa tiêu điểm, bạn có thể thực hiện nhưng hãy đảm bảo thêm lại tiêu điểm đó sau. Khi bạn xóa tiêu điểm khỏi CSS hoặc đặt đường viền thành 0 or none, nó sẽ loại bỏ vòng lấy nét cho tất cả người dùng của bạn. Điều này được thấy rất nhiều khi sử dụng CSS reset. Đặt lại CSS sẽ đặt lại kiểu thành khung vẽ trống. Bằng cách này, bạn chịu trách nhiệm về khung vẽ trống để tạo kiểu theo ý muốn. Nếu bạn muốn sử dụng thiết lập lại CSS, hãy kiểm tra Sự thiết lập lại của Josh Comeau.

*KHÔNG LÀM những gì dưới đây!

:focus {
  outline: 0;
}

:focus {
  outline: none;
}

Nhìn vào bên trong!

Một trong những cách thú vị nhất để tạo kiểu cho tiêu điểm bằng CSS là nội dung mà bài viết này đề cập đến. Nếu bạn chưa kiểm tra :focus-within lớp giả, chắc chắn hãy xem qua! Có rất nhiều điều thú vị khi nói đến việc sử dụng đánh dấu ngữ nghĩa và CSS, và đây là một trong số đó. Theo mặc định, rất nhiều thứ bị bỏ qua có thể truy cập được, chẳng hạn như đánh dấu ngữ nghĩa theo mặc định có thể truy cập được và phải luôn được sử dụng trên div.

<header>
  <h1>Semantic Markup</h1>
  <nav>
    <ul>
      <li><a href="/vi/">Home</a></li>
      <li><a href="/vi/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>

Sản phẩm header, nav, main, section, asidevà footer đều là các yếu tố ngữ nghĩa. Các h1 và ul cũng có ngữ nghĩa và có thể truy cập được.

Trừ khi có một thành phần tùy chỉnh cần được tạo, nếu không thì div sử dụng tốt, kết hợp với ARIA (Ứng dụng Internet phong phú có thể truy cập). Chúng ta có thể tìm hiểu sâu hơn về ARIA trong bài viết sau. Bây giờ chúng ta hãy tập trung…xem tôi đã làm gì ở đó…trên lớp giả CSS này.

Sản phẩm :focus-within lớp giả cho phép bạn chọn một phần tử khi bất kỳ phần tử con nào chứa trong đó đều có tiêu điểm.

:focus-within trong hành động!

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;
}

Mã ví dụ ở trên sẽ thêm màu nền màu cam, thêm một số phần đệm và thay đổi màu của nhãn thành màu đen.

Sản phẩm cuối cùng trông giống như dưới đây. Tất nhiên, khả năng thay đổi kiểu dáng là vô tận, nhưng điều này sẽ giúp bạn đi đúng hướng để làm cho mọi người có thể truy cập web dễ dàng hơn!

Một trường hợp sử dụng khác để sử dụng :focus-within sẽ in đậm nhãn, đổi màu khác hoặc phóng to nhãn cho người dùng có thị lực kém. Mã ví dụ cho điều đó sẽ trông giống như bên dưới.

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 cũng có sự hỗ trợ trình duyệt tuyệt vời trên diện rộng theo Tôi có thể sử dụng.

Kết luận

Việc tạo ra trải nghiệm người dùng tuyệt vời, dễ tiếp cận phải luôn là ưu tiên hàng đầu khi vận chuyển phần mềm, không chỉ bên ngoài mà còn cả bên trong. Với tư cách là nhà phát triển, cho đến lãnh đạo cấp cao, chúng tôi đều phải nhận thức được những thách thức mà người khác gặp phải và cách chúng tôi có thể trở thành đại sứ cho nền tảng web để biến nó thành một nơi tốt hơn.

Việc sử dụng công nghệ như đánh dấu ngữ nghĩa và CSS để tạo không gian hòa nhập là một phần quan trọng trong việc biến web thành một nơi tốt hơn. Hãy tiếp tục tiến về phía trước và thay đổi cuộc sống.

Hãy xem một tài nguyên tuyệt vời khác ở đây trên CSS-Tricks trên sử dụng :focus-inside.

• Phân phối nội dung và PR được hỗ trợ bởi SEO. Được khuếch đại ngay hôm nay.
• PlatoData.Network Vertical Generative Ai. Trao quyền cho chính mình. Truy cập Tại đây.
• PlatoAiStream. Thông minh Web3. Kiến thức khuếch đại. Truy cập Tại đây.
• Trung tâmESG. Than đá, công nghệ sạch, Năng lượng, Môi trường Hệ mặt trời, Quản lý chất thải. Truy cập Tại đây.
• PlatoSức khỏe. Tình báo thử nghiệm lâm sàng và công nghệ sinh học. Truy cập Tại đây.
• nguồn: https://css-tricks.com/accessible-forms-with-pseudo-classes/