สวัสดี นักพัฒนาที่ยอดเยี่ยมทุกคน! ในโพสต์นี้ ฉันจะนำคุณไปสู่การสร้างแบบฟอร์มการติดต่อแบบง่ายๆ โดยใช้ semantic HTML และคลาสหลอก CSS ที่ยอดเยี่ยมที่รู้จักกันในชื่อ :focus-within. :focus-within คลาสช่วยให้สามารถควบคุมโฟกัสได้ดี และแจ้งให้ผู้ใช้ของคุณทราบว่านี่คือจุดที่พวกเขาอยู่ในประสบการณ์ ก่อนที่เราจะพูดถึงเนื้อหาหลัก การเข้าถึงเว็บคืออะไร

การเข้าถึงแบบฟอร์ม?

คุณคงเคยได้ยินคำว่า "การเข้าถึง" ทุกที่หรือชื่อ a11y มันหมายความว่าอะไร? นั่นเป็นคำถามที่ดีพร้อมคำตอบมากมาย เมื่อเรามองโลกทางกายภาพ การเข้าถึงหมายถึงสิ่งต่างๆ เช่น การมีภาชนะมีคมในห้องน้ำในธุรกิจของคุณ ตรวจสอบให้แน่ใจว่ามีทางลาดสำหรับคนที่ใช้ล้อช่วย และมีอุปกรณ์ต่อพ่วง เช่น แป้นพิมพ์พิมพ์ขนาดใหญ่สำหรับทุกคนที่ต้องการ

ช่วงของการเข้าถึงไม่ได้หยุดอยู่แค่นั้น เรายังมีการเข้าถึงแบบดิจิทัลที่เราจำเป็นต้องทราบเช่นกัน ไม่ใช่แค่สำหรับผู้ใช้ภายนอกเท่านั้น แต่ยังรวมถึงเพื่อนร่วมงานภายในด้วย สีตัดกันเป็นผลไม้ห้อยต่ำ ที่เราควรจะจิ้มตาได้ ในที่ทำงานของเรา ตรวจสอบให้แน่ใจว่าหากพนักงานคนใดต้องการเทคโนโลยีช่วยเหลือ เช่น โปรแกรมอ่านหน้าจอ เราก็ได้ติดตั้งและพร้อมใช้งานแล้ว มีหลายสิ่งที่ต้องคำนึงถึง บทความนี้จะเน้นเรื่องการเข้าถึงเว็บโดยเก็บ WCAG (แนวทางการเข้าถึงเนื้อหาเว็บ) ในใจ

คลาสหลอกนี้ยอดเยี่ยมมากเมื่อคุณต้องการเน้นว่าผู้ใช้โต้ตอบกับองค์ประกอบนั้นจริงๆ คุณสามารถเปลี่ยนสีพื้นหลังของแบบฟอร์มทั้งหมดได้ เป็นต้น หรือหากโฟกัสถูกย้ายไปยังอินพุต คุณสามารถทำให้ป้ายกำกับเป็นตัวหนาและใหญ่ขึ้นขององค์ประกอบอินพุตได้เมื่อโฟกัสถูกย้ายไปยังอินพุตนั้น สิ่งที่เกิดขึ้นด้านล่างในตัวอย่างโค้ดและตัวอย่างคือสิ่งที่ทำให้เข้าถึงแบบฟอร์มได้ :focus-within เป็นเพียงวิธีหนึ่งที่เราสามารถใช้ CSS เพื่อประโยชน์ของเรา

วิธีการโฟกัส

โฟกัสในส่วนที่เกี่ยวกับการเข้าถึงและประสบการณ์เว็บ คือตัวบ่งชี้ที่มองเห็นว่ามีบางสิ่งกำลังโต้ตอบบนเพจ ใน UI หรือภายในส่วนประกอบ CSS สามารถบอกได้ว่าเมื่อใดที่องค์ประกอบเชิงโต้ตอบถูกโฟกัส

ตรวจสอบให้แน่ใจเสมอว่าตัวแสดงโฟกัสหรือวงแหวนรอบองค์ประกอบที่สามารถโฟกัสได้จะรักษาคอนทราสต์ของสีที่เหมาะสมตลอดประสบการณ์การใช้งาน

โฟกัสเขียนไว้เช่นนี้และสามารถจัดสไตล์ให้เข้ากับแบรนด์ของคุณได้ หากคุณเลือกที่จะจัดสไตล์

:focus {
  * / INSERT STYLES HERE /*
}

ไม่ว่าคุณจะทำอะไรก็ตาม อย่ากำหนดโครงร่างของคุณไว้ 0 or none. การทำเช่นนี้จะลบตัวบ่งชี้โฟกัสที่มองเห็นได้สำหรับทุกคนตลอดประสบการณ์ทั้งหมด หากคุณต้องการลบโฟกัส คุณสามารถทำได้ แต่อย่าลืมเพิ่มกลับเข้าไปในภายหลัง เมื่อคุณลบโฟกัสออกจาก CSS ของคุณหรือตั้งค่าโครงร่างเป็น 0 or noneโดยจะลบวงแหวนโฟกัสสำหรับผู้ใช้ทั้งหมดของคุณ สิ่งนี้จะเห็นได้บ่อยเมื่อใช้การรีเซ็ต CSS การรีเซ็ต CSS จะรีเซ็ตสไตล์เป็นผืนผ้าใบเปล่า ด้วยวิธีนี้ คุณจะเป็นผู้ควบคุมผืนผ้าใบที่ว่างเปล่าเพื่อจัดสไตล์ตามที่คุณต้องการ หากคุณต้องการใช้การรีเซ็ต CSS ให้ลองดู การรีเซ็ตของ Josh Comeau.

*อย่าทำสิ่งต่อไปนี้!

:focus {
  outline: 0;
}

:focus {
  outline: none;
}

มองเข้าไปข้างใน!

หนึ่งในวิธีที่เจ๋งที่สุดในการเน้นสไตล์โดยใช้ CSS คือเนื้อหาเกี่ยวกับบทความนี้ หากคุณยังไม่ได้ตรวจสอบ :focus-within คลาสหลอก ลองดูสิ! มีอัญมณีที่ซ่อนอยู่มากมายเมื่อพูดถึงการใช้มาร์กอัปเชิงความหมายและ CSS และนี่คือหนึ่งในนั้น มีหลายสิ่งที่ถูกมองข้ามสามารถเข้าถึงได้โดยค่าเริ่มต้น ตัวอย่างเช่น มาร์กอัปเชิงความหมายสามารถเข้าถึงได้โดยค่าเริ่มต้น และควรใช้กับ div ตลอดเวลา

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

พื้นที่ header, nav, main, section, asideและ footer เป็นองค์ประกอบทางความหมายทั้งหมด ที่ h1 และ ul ยังมีความหมายและเข้าถึงได้

เว้นแต่ว่าจะต้องมีการสร้างองค์ประกอบแบบกำหนดเอง ดังนั้นก div ใช้คู่กันก็ดี. ARIA (แอปพลิเคชันอินเทอร์เน็ตที่เข้าถึงได้มากมาย). เราสามารถเจาะลึก ARIA ได้ในโพสต์ภายหลัง ตอนนี้มาโฟกัสกันก่อน…ดูสิ่งที่ฉันทำที่นั่น…ในคลาสหลอก CSS นี้

พื้นที่ :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 และการเผยแพร่ประชาสัมพันธ์ รับการขยายวันนี้
• PlatoData.Network Vertical Generative Ai เพิ่มพลังให้กับตัวเอง เข้าถึงได้ที่นี่.
• เพลโตไอสตรีม. Web3 อัจฉริยะ ขยายความรู้ เข้าถึงได้ที่นี่.
• เพลโตESG. คาร์บอน, คลีนเทค, พลังงาน, สิ่งแวดล้อม แสงอาทิตย์, การจัดการของเสีย. เข้าถึงได้ที่นี่.
• เพลโตสุขภาพ เทคโนโลยีชีวภาพและข่าวกรองการทดลองทางคลินิก เข้าถึงได้ที่นี่.
• ที่มา: https://css-tricks.com/accessible-forms-with-pseudo-classes/