สวัสดี นักพัฒนาที่ยอดเยี่ยมทุกคน! ในโพสต์นี้ ฉันจะนำคุณไปสู่การสร้างแบบฟอร์มการติดต่อแบบง่ายๆ โดยใช้ 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/
- :มี
- :เป็น
- :ไม่
- :ที่ไหน
- $ ขึ้น
- 09
- 1
- 11
- 12
- 13
- 16
- 22
- 27
- 31
- 362
- 7
- 8
- 9
- 91
- 98
- a
- สามารถ
- เกี่ยวกับเรา
- ข้างบน
- การเข้าถึง
- สามารถเข้าถึงได้
- ตาม
- ข้าม
- เพิ่ม
- ความได้เปรียบ
- ทั้งหมด
- ช่วยให้
- ด้วย
- เสมอ
- am
- น่าอัศจรรย์
- ทูต
- an
- และ
- อื่น
- คำตอบ
- ใด
- ทุกคน
- การใช้งาน
- เป็น
- เพลง
- รอบ
- บทความ
- AS
- ช่วย
- At
- ใช้ได้
- กลับ
- พื้นหลัง
- BE
- ก่อน
- กำลัง
- ด้านล่าง
- ดีกว่า
- Black
- ปิดกั้น
- คณะกรรมการ
- กล้า
- แบรนด์ดิ้ง
- เบราว์เซอร์
- ธุรกิจ
- แต่
- by
- CAN
- ผ้าใบ
- กรณี
- ความท้าทาย
- เปลี่ยนแปลง
- เปลี่ยนแปลง
- รับผิดชอบ
- ตรวจสอบ
- ตรวจสอบแล้ว
- Choose
- ชั้น
- ชั้นเรียน
- รหัส
- เพื่อนร่วมงาน
- สี
- มา
- ส่วนประกอบ
- ข้อสรุป
- การพิจารณา
- ติดต่อเรา
- ภาชนะบรรจุ
- มี
- เนื้อหา
- ต่อ
- ตรงกันข้าม
- ควบคุม
- แกน
- คอร์ส
- สร้าง
- ที่สร้างขึ้น
- การสร้าง
- สำคัญมาก
- CSS
- ประเพณี
- ลึก
- ดำน้ำลึก
- ค่าเริ่มต้น
- อย่างแน่นอน
- ผู้พัฒนา
- นักพัฒนา
- DID
- ต่าง
- ดิจิตอล
- การเข้าถึงระบบดิจิตอล
- แสดง
- การดำน้ำ
- do
- ทำ
- ไม่
- การทำ
- ธาตุ
- องค์ประกอบ
- เน้น
- ลูกจ้าง
- ไม่มีที่สิ้นสุด
- ทุกคน
- ทุกที่
- เผง
- ตัวอย่าง
- ตัวอย่าง
- ประสบการณ์
- ภายนอก
- อย่างผิวเผิน
- ใบหน้า
- ความจริง
- สุดท้าย
- ปลาย
- ชื่อจริง
- โฟกัส
- มุ่งเน้น
- สำหรับ
- ฟอร์ม
- รูปแบบ
- ข้างหน้า
- ราคาเริ่มต้นที่
- โทนเสียงดนตรี
- อัญมณี
- โดยทั่วไป
- ได้รับ
- GIF
- ให้
- ไป
- ไป
- ดี
- ยิ่งใหญ่
- แนวทาง
- มือ
- สิ่งที่เกิดขึ้น
- มี
- มี
- ได้ยิน
- โปรดคลิกที่นี่เพื่ออ่านรายละเอียดเพิ่มเติม
- ซ่อนเร้น
- จุดสูง
- ไฮไลต์
- สรุป ความน่าเชื่อถือของ Olymp Trade?
- ทำอย่างไร
- HTML
- HTTPS
- i
- if
- in
- ในอื่น ๆ
- รวมถึง
- รวมทั้ง
- ตัวบ่งชี้
- อินพุต
- การติดตั้ง
- ตัวอย่าง
- การมีปฏิสัมพันธ์
- การโต้ตอบ
- ภายใน
- ภายใน
- อินเทอร์เน็ต
- เข้าไป
- IT
- ITS
- ตัวเอง
- กระโดด
- เพียงแค่
- แค่หนึ่ง
- การเก็บรักษา
- เก็บไว้
- คีย์
- ทราบ
- ที่รู้จักกัน
- ฉลาก
- ป้ายกำกับ
- ใหญ่
- ที่มีขนาดใหญ่
- ชื่อสกุล
- ต่อมา
- ความเป็นผู้นำ
- การให้
- กดไลก์
- น่าจะ
- ชีวิต
- ดู
- LOOKS
- Lot
- ต่ำ
- รักษา
- ทำ
- การทำ
- หลาย
- การจับคู่
- จับคู่
- ที่ตรงกัน
- หมายความ
- วิธี
- ข่าวสาร
- ใจ
- ข้อมูลเพิ่มเติม
- มากที่สุด
- ย้าย
- การย้าย
- Mozilla
- ชื่อ
- จำเป็นต้อง
- ความต้องการ
- เครือข่าย
- ไม่เคย
- ไม่มี
- ตอนนี้
- จำนวน
- of
- on
- ONE
- or
- ส้ม
- อื่นๆ
- ผลิตภัณฑ์อื่นๆ
- ของเรา
- ออก
- เค้าโครง
- เกิน
- หน้า
- จับคู่
- ส่วนหนึ่ง
- คน
- อุปกรณ์ต่อพ่วง
- โทรศัพท์
- กายภาพ
- สถานที่
- เวที
- เพลโต
- เพลโตดาต้าอินเทลลิเจนซ์
- เพลโตดาต้า
- ความเป็นไปได้
- โพสต์
- พิมพ์
- ลำดับความสำคัญ
- ผลิตภัณฑ์
- เหมาะสม
- คำถาม
- ทางลาด
- ผู้อ่าน
- จริงๆ
- ที่ได้รับ
- สีแดง
- ความนับถือ
- เอาออก
- ลบ
- แสดงให้เห็นถึง
- ทรัพยากร
- รวย
- แหวน
- จอภาพ
- เห็น
- เลือก
- ความหมาย
- ระดับอาวุโส
- ผู้นำระดับสูง
- ชุด
- เงา
- การส่งสินค้า
- น่า
- การแสดง
- ง่าย
- ขนาด
- So
- ซอฟต์แวร์
- บาง
- บางสิ่งบางอย่าง
- ช่องว่าง
- หยุด
- สไตล์
- อย่างเช่น
- สนับสนุน
- แน่ใจ
- เอา
- ก๊อก
- เทคโนโลยี
- เทคโนโลยี
- โทร
- บอก
- ระยะ
- ข้อความ
- ที่
- พื้นที่
- พวกเขา
- แล้วก็
- ที่นั่น
- พวกเขา
- สิ่ง
- นี้
- ตลอด
- ครั้ง
- ไปยัง
- ด้านบน
- ลู่
- ต้นไม้
- ทริกเกอร์
- จริง
- การหมุน
- ui
- ใช้
- ใช้กรณี
- มือสอง
- ผู้ใช้งาน
- ประสบการณ์ของผู้ใช้
- ผู้ใช้
- การใช้
- มองเห็นได้
- วิสัยทัศน์
- ภาพ
- W3
- ต้องการ
- ทาง..
- วิธี
- we
- เว็บ
- Website
- ดี
- อะไร
- ความหมายของ
- ล้อ
- เมื่อ
- ทั้งหมด
- จะ
- ต้องการ
- กับ
- ภายใน
- ยอดเยี่ยม
- คำ
- โลก
- จะ
- เขียน
- คุณ
- ของคุณ
- ลมทะเล