นี่จะเป็นโพสต์ที่ 2 ในชุดเล็กๆ ที่เรากำลังดำเนินการเกี่ยวกับการเข้าถึงแบบฟอร์ม ใครพลาดกระทู้แรกลองดูครับ แบบฟอร์มที่สามารถเข้าถึงได้พร้อมคลาสหลอก- ในโพสต์นี้ เราจะดูที่ :focus-visible และวิธีใช้ในเว็บไซต์ของคุณ!
โฟกัสจุดสัมผัส
ก่อนที่เราจะก้าวไปข้างหน้าด้วย :focus-visible
เรามาทบทวนวิธีการกัน :focus
ทำงานใน CSS ของคุณ โฟกัสคือตัวบ่งชี้ที่มองเห็นได้ว่าองค์ประกอบกำลังโต้ตอบด้วยแป้นพิมพ์ เมาส์ แทร็กแพด หรือเทคโนโลยีช่วยเหลือ องค์ประกอบบางอย่างเป็นแบบโต้ตอบได้ตามธรรมชาติ เช่น ลิงก์ ปุ่ม และองค์ประกอบของแบบฟอร์ม เราต้องการให้แน่ใจว่าผู้ใช้ของเรารู้ว่าพวกเขาอยู่ที่ไหนและการโต้ตอบที่พวกเขากำลังทำอยู่
จำไว้ว่าอย่าทำเช่นนี้ใน CSS ของคุณ!
:focus {
outline: 0;
}
/*** OR ***/
:focus {
outline: none;
}
เมื่อคุณลบโฟกัส คุณจะลบออกเพื่อ ทุกคน! เราต้องการให้แน่ใจว่าเราจะรักษาโฟกัสไว้
หากจำเป็นต้องลบโฟกัสไม่ว่าด้วยเหตุผลใดก็ตาม ตรวจสอบให้แน่ใจว่ามีการใช้ทางเลือกอื่นด้วย :focus
สไตล์สำหรับผู้ใช้ของคุณ ทางเลือกนั้นสามารถจับคู่กับสีแบรนด์ของคุณได้ แต่ต้องแน่ใจว่าสีเหล่านั้นสามารถเข้าถึงได้ด้วย หากการตลาด การออกแบบ หรือการสร้างแบรนด์ไม่ชอบสไตล์วงแหวนโฟกัสเริ่มต้น ก็ถึงเวลาที่จะเริ่มการสนทนาและทำงานร่วมกับพวกเขาเพื่อหาวิธีที่ดีที่สุดในการเพิ่มกลับเข้าไป
focus-visible?
ความหมายของ คลาสหลอก :focus-visible
ก็เหมือนกับค่าเริ่มต้นของเรา :focus
คลาสหลอก มันทำให้ผู้ใช้มีตัวบ่งชี้ว่ามีบางสิ่งกำลังโฟกัสไปที่เพจ วิธีที่คุณเขียน :focus-visible
ถูกตัดและทำให้แห้ง:
:focus-visible {
/* ... */
}
เมื่อใช้ :focus-visible
ด้วยองค์ประกอบเฉพาะ ไวยากรณ์จะมีลักษณะดังนี้:
.your-element:focus-visible {
/*...*/
}
ข้อดีของการใช้ :focus-visible
คุณสามารถทำให้องค์ประกอบของคุณโดดเด่นได้ สดใสและกล้าหาญ! ไม่จำเป็นต้องกังวลเกี่ยวกับการแสดงหากมีการคลิก/แตะองค์ประกอบ หากคุณเลือกที่จะไม่ใช้คลาส ค่าเริ่มต้นจะเป็นวงแหวนโฟกัสของตัวแทนผู้ใช้ ซึ่งบางคนไม่ต้องการ
focus-visible
เบื้องหลังของ ก่อนที่เราจะมี :focus-visible
จะใช้สไตล์ตัวแทนผู้ใช้ :focus
ไปยังองค์ประกอบส่วนใหญ่บนหน้า ปุ่ม ลิงก์ ฯลฯ โดยจะใช้โครงร่างหรือ “วงแหวนโฟกัส” กับองค์ประกอบที่สามารถโฟกัสได้ สิ่งนี้ถือว่าน่าเกลียด ส่วนใหญ่ไม่ชอบวงแหวนโฟกัสเริ่มต้นที่เบราว์เซอร์ให้มา เนื่องจากวงแหวนโฟกัสดูไม่เอื้ออำนวย ผู้เขียนส่วนใหญ่จึงลบวงแหวนโฟกัสออก... โดยไม่มีทางเลือกอื่น จำไว้ว่าเมื่อคุณลบออก :focus
จะลดการใช้งานและทำให้ผู้ใช้แป้นพิมพ์ไม่สามารถเข้าถึงประสบการณ์ได้
ในสถานะปัจจุบันของเว็บ เบราว์เซอร์จะไม่แสดงให้เห็นการโฟกัสไปที่องค์ประกอบต่างๆ อีกต่อไปเมื่อมีการโฟกัส เบราว์เซอร์จะใช้การวิเคราะห์พฤติกรรมที่แตกต่างกันเพื่อพิจารณาว่าเมื่อใดจะช่วยผู้ใช้ โดยให้วงแหวนโฟกัสเป็นการตอบแทน ตาม สถาบันการศึกษาข่านฮิวริสติกคือ “เทคนิคที่แนะนำอัลกอริธึมเพื่อค้นหาตัวเลือกที่ดี”
ความหมายก็คือเบราว์เซอร์สามารถตรวจจับได้ว่าผู้ใช้โต้ตอบกับประสบการณ์นั้นหรือไม่จากแป้นพิมพ์ เมาส์ หรือแทร็กแพด และจะเพิ่มหรือลบวงแหวนโฟกัสตามประเภทอินพุตนั้น ตัวอย่างในโพสต์นี้เน้นการโต้ตอบอินพุต
ในวันแรก ๆ ของ :focus-visible
เราใช้ก โพลีฟิลล์ ในการจัดการกับวงแหวนโฟกัสที่สร้างโดย Alice Boxhall และ Brian Kardell นั้น Mozilla ก็ออกมาพร้อมกับคลาสหลอกของพวกเขาเอง :moz-focusring
ก่อนข้อกำหนดอย่างเป็นทางการ หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับยุคแรกๆ ของวงแหวนโฟกัส โปรดดู A11y นักแสดง กับร็อบ ด็อดสัน
เน้นความสำคัญ
มีเหตุผลมากมายว่าทำไมการมุ่งเน้นจึงมีความสำคัญในการสมัครของคุณ ประการแรก อย่างที่ฉันกล่าวไว้ข้างต้น เราในฐานะตัวแทนของเว็บต้องแน่ใจว่าเรากำลังมอบประสบการณ์ที่ดีที่สุดและเข้าถึงได้ที่เราสามารถทำได้ เราไม่ต้องการให้ผู้ใช้ของเราเดาว่าพวกเขาอยู่ที่ไหนในขณะที่พวกเขากำลังนำทางผ่านประสบการณ์
ตัวอย่างหนึ่งที่นึกถึงเสมอก็คือ เว็บไซต์สองพี่น้องตาบอด- หากคุณไปที่เว็บไซต์แล้วคลิก/แตะ (ใช้งานได้บนมือถือ) ตาที่ปิดอยู่ที่มุมซ้ายล่าง คุณจะเห็นดวงตาเปิด และการจำลองจะเริ่มต้นขึ้น พี่น้องทั้งสองคน ได้แก่ แบรดฟอร์ดและไบรอัน แมนนิ่ง ได้รับการวินิจฉัยว่าเป็นโรคสตาร์การ์ดตั้งแต่อายุยังน้อย โรคสตาร์การ์ดต์เป็นรูปแบบหนึ่งของจอประสาทตาเสื่อม เมื่อเวลาผ่านไปพี่น้องทั้งสองจะตาบอดสนิท เยี่ยมชมเว็บไซต์และคลิกที่ตาเพื่อดูว่าพวกเขาเห็นอย่างไร
หากคุณเป็นเหมือนพวกเขาและต้องเลื่อนดูหน้าต่างๆ คุณจะต้องการให้แน่ใจว่าคุณรู้ว่าคุณอยู่ที่ไหนตลอดประสบการณ์ทั้งหมด วงแหวนปรับโฟกัสให้พลังนั้นแก่คุณ
ทดลอง
การสาธิตด้านล่างแสดงวิธีการ :focus-visible
ใช้งานได้เมื่อเพิ่มลงใน CSS ของคุณ ส่วนแรกของวิดีโอแสดงประสบการณ์เมื่อนำทางด้วยเมาส์ ส่วนที่สองแสดงการนำทางโดยใช้เพียงคีย์บอร์ดของฉัน ฉันบันทึกตัวเองด้วยเพื่อแสดงว่าฉันเปลี่ยนจากการใช้เมาส์มาเป็นคีย์บอร์ด
เบราว์เซอร์คาดการณ์ว่าจะทำอย่างไรกับวงแหวนโฟกัสโดยอิงตามอินพุตของฉัน (แป้นพิมพ์/เมาส์) จากนั้นจึงเพิ่มวงแหวนโฟกัสให้กับองค์ประกอบเหล่านั้น ในกรณีนี้ เมื่อฉันนำทางผ่านตัวอย่างนี้ด้วยแป้นพิมพ์ ทุกอย่างจะได้รับการโฟกัส เมื่อใช้เมาส์ เฉพาะอินพุตเท่านั้นที่จะได้รับโฟกัส และปุ่มจะไม่ได้รับโฟกัส ถ้าคุณถอด :focus-visible
เบราว์เซอร์จะใช้วงแหวนโฟกัสเริ่มต้น
รหัสด้านล่างนี้ใช้อยู่ :focus-visible
ไปยังองค์ประกอบที่สามารถโฟกัสได้
:focus-visible {
outline-color: black;
font-size: 1.2em;
font-family: serif;
font-weight: bold;
}
หากคุณต้องการระบุ label
หรือปุ่มรับ :focus-visible
เพียงแค่นำหน้าชั้นเรียนด้วย input
or button
ตามลำดับ
button:focus-visible {
outline-color: black;
font-size: 1.2em;
font-family: serif;
font-weight: bold;
}
/*** OR ***/
input:focus-visible {
outline-color: black;
font-size: 1.2em;
font-family: serif;
font-weight: bold;
}
ระบบขอใช้บริการ
หากเบราว์เซอร์ไม่รองรับ :focus-visible
คุณสามารถถอยกลับเพื่อจัดการกับการโต้ตอบได้ รหัสด้านล่างมาจาก เอ็มดีเอ็น เพลย์กราวด์. คุณสามารถใช้ไฟล์ @สนับสนุน ตามกฎหรือ “แบบสอบถามคุณลักษณะ” เพื่อตรวจสอบการสนับสนุน สิ่งหนึ่งที่ควรจำไว้คือ กฎควรวางไว้ที่ด้านบนของโค้ดหรือฝังอยู่ในกลุ่มอื่นที่กฎ
<button class="button with-fallback" type="button">Button with fallback</button>
<button class="button without-fallback" type="button">Button without fallback</button>
.button {
margin: 10px;
border: 2px solid darkgray;
border-radius: 4px;
}
.button:focus-visible {
/* Draw the focus when :focus-visible is supported */
outline: 3px solid deepskyblue;
outline-offset: 3px;
}
@supports not selector(:focus-visible) {
.button.with-fallback:focus {
/* Fallback for browsers without :focus-visible support */
outline: 3px solid deepskyblue;
outline-offset: 3px;
}
}
ข้อกังวลด้านการเข้าถึงเพิ่มเติม
ข้อกังวลด้านการเข้าถึงที่ควรคำนึงถึงเมื่อสร้างประสบการณ์ของคุณ:
- ตรวจสอบให้แน่ใจว่าสีที่คุณเลือกสำหรับสัญลักษณ์โฟกัสของคุณ (หากเป็นเช่นนั้น) ยังคงสามารถเข้าถึงได้ตามข้อมูลที่บันทึกไว้ในเอกสาร WCAG 2.2 ความคมชัดที่ไม่ใช่ข้อความ (ระดับ AA)
- การรับรู้มากเกินไปอาจทำให้ผู้ใช้มีความทุกข์ ตรวจสอบให้แน่ใจว่าสไตล์ในองค์ประกอบเชิงโต้ตอบต่างๆ สอดคล้องกัน
รองรับเบราว์เซอร์
ข้อมูลสนับสนุนเบราว์เซอร์นี้มาจาก ฉันสามารถใช้ซึ่งมีรายละเอียดมากขึ้น ตัวเลขระบุว่าเบราว์เซอร์รองรับคุณสมบัติในเวอร์ชันนั้นขึ้นไป
เดสก์ทอป
Chrome | Firefox | IE | ขอบ | Safari |
---|---|---|---|---|
86 | 4* | ไม่ | 86 | 15.4 |
มือถือ / แท็บเล็ต
android-chrome | แอนดรอยด์ ไฟร์ฟอกซ์ | Android | iOS ของซาฟารี |
---|---|---|---|
123 | 124 | 123 | 15.4 |
การเชื่อมโยง
- เนื้อหาที่ขับเคลื่อนด้วย SEO และการเผยแพร่ประชาสัมพันธ์ รับการขยายวันนี้
- PlatoData.Network Vertical Generative Ai เพิ่มพลังให้กับตัวเอง เข้าถึงได้ที่นี่.
- เพลโตไอสตรีม. Web3 อัจฉริยะ ขยายความรู้ เข้าถึงได้ที่นี่.
- เพลโตESG. คาร์บอน, คลีนเทค, พลังงาน, สิ่งแวดล้อม แสงอาทิตย์, การจัดการของเสีย. เข้าถึงได้ที่นี่.
- เพลโตสุขภาพ เทคโนโลยีชีวภาพและข่าวกรองการทดลองทางคลินิก เข้าถึงได้ที่นี่.
- ที่มา: https://css-tricks.com/managing-user-focus-with-focus-visible/
- :มี
- :เป็น
- :ไม่
- :ที่ไหน
- $ ขึ้น
- 09
- 1
- 11
- 12
- 13
- 16
- 22
- 27
- 2nd
- 31
- 7
- 8
- 9
- 91
- 98
- a
- เกี่ยวกับเรา
- เกี่ยวกับมัน
- ข้างบน
- การเข้าถึง
- สามารถเข้าถึงได้
- ตาม
- ที่เพิ่ม
- เพิ่ม
- เพิ่ม
- อายุ
- ตัวแทน
- ขั้นตอนวิธี
- อลิซ
- ทั้งหมด
- ด้วย
- เสมอ
- am
- ทูต
- an
- และ
- หุ่นยนต์
- อื่น
- ใด
- การใช้งาน
- ใช้
- การประยุกต์ใช้
- เป็น
- รอบ
- AS
- At
- ผู้เขียน
- กลับ
- ตาม
- BE
- ก่อน
- เริ่มต้น
- กำลัง
- ด้านล่าง
- ที่ดีที่สุด
- Black
- กล้า
- ชายแดน
- ทั้งสอง
- ด้านล่าง
- แบรนด์ดิ้ง
- ไบรอัน
- สดใส
- พี่น้อง
- เบราว์เซอร์
- เบราว์เซอร์
- ไบรอัน
- การก่อสร้าง
- แต่
- ปุ่ม
- by
- มา
- CAN
- กรณี
- ก่อให้เกิด
- บาง
- ตรวจสอบ
- ทางเลือก
- Choose
- Chrome
- ชั้น
- คลิก
- ปิด
- รหัส
- ร่วมมือ
- มา
- อย่างสมบูรณ์
- ความกังวลเกี่ยวกับ
- ตรงกันข้าม
- การสนทนา
- มุม
- ที่สร้างขึ้น
- CSS
- ปัจจุบัน
- สถานะปัจจุบัน
- ตัด
- ข้อมูล
- วัน
- ลดลง
- ถือว่า
- ค่าเริ่มต้น
- สาธิต
- ออกแบบ
- รายละเอียด
- ตรวจจับ
- กำหนด
- DID
- โรค
- ความทุกข์
- do
- ทำ
- ไม่
- การทำ
- Dont
- วาด
- แห้ง
- ก่อน
- ขอบ
- ธาตุ
- องค์ประกอบ
- ฯลฯ
- ทุกอย่าง
- เผง
- ตัวอย่าง
- ประสบการณ์
- ตา
- ตก
- ลักษณะ
- หา
- Firefox
- ชื่อจริง
- โฟกัส
- มุ่งเน้น
- สำหรับ
- ฟอร์ม
- รูปแบบ
- ข้างหน้า
- ราคาเริ่มต้นที่
- ได้รับ
- GIF
- จะช่วยให้
- Go
- ไป
- ดี
- ยิ่งใหญ่
- บัญชีกลุ่ม
- คู่มือ
- มี
- จัดการ
- มี
- มี
- ช่วย
- จุดสูง
- ไฮไลท์
- หน้าแรก
- สรุป ความน่าเชื่อถือของ Olymp Trade?
- ทำอย่างไร
- HTML
- ที่ http
- HTTPS
- i
- ie
- if
- ภาพ
- การดำเนินการ
- สำคัญ
- in
- ไม่สามารถเข้าถึงได้
- บ่งชี้ว่า
- ตัวบ่งชี้
- ข้อมูล
- อินพุต
- ภายใน
- แทน
- การมีปฏิสัมพันธ์
- ปฏิสัมพันธ์
- ปฏิสัมพันธ์
- การโต้ตอบ
- iOS
- IT
- เพียงแค่
- เก็บ
- ทราบ
- เรียนรู้
- ซ้าย
- ชั้น
- กดไลก์
- การเชื่อมโยง
- อีกต่อไป
- ดู
- LOOKS
- ทำ
- ทำให้
- การทำ
- การจัดการ
- ขอบ
- การตลาด
- การจับคู่
- วิธี
- ใจ
- พลาด
- โทรศัพท์มือถือ
- ข้อมูลเพิ่มเติม
- มากที่สุด
- ย้าย
- เดินหน้าต่อไป
- Mozilla
- my
- ตนเอง
- นำทาง
- การนำทาง
- การเดินเรือ
- จำเป็นต้อง
- ไม่
- ไม่มี
- จำนวน
- of
- เป็นทางการ
- on
- ONE
- เพียง
- เปิด
- or
- ของเรา
- ออก
- เค้าโครง
- เกิน
- ของตนเอง
- หน้า
- ส่วนหนึ่ง
- สถานที่
- เพลโต
- เพลโตดาต้าอินเทลลิเจนซ์
- เพลโตดาต้า
- ความอุดมสมบูรณ์
- โพสต์
- อำนาจ
- ทำนาย
- การรักษา
- ให้
- การให้
- เหตุผล
- เหตุผล
- รับ
- ที่ได้รับ
- บันทึก
- จำ
- เอาออก
- ลบออก
- ลบ
- ตามลำดับ
- ผล
- กลับ
- แหวน
- ปล้น
- กฎ
- Safari
- ที่สอง
- เห็น
- ชุด
- น่า
- โชว์
- การแสดง
- แสดงให้เห็นว่า
- จำลอง
- เว็บไซต์
- เล็ก
- ของแข็ง
- บาง
- บางสิ่งบางอย่าง
- โดยเฉพาะ
- สเปค
- ยืน
- เริ่มต้น
- สถานะ
- ระบุ
- ยังคง
- สนับสนุน
- ที่สนับสนุน
- รองรับ
- แน่ใจ
- สวิตซ์
- วากยสัมพันธ์
- เทคนิค
- เทคโนโลยี
- ที่
- พื้นที่
- ข้อมูล
- ของพวกเขา
- พวกเขา
- แล้วก็
- ที่นั่น
- พวกเขา
- สิ่ง
- นี้
- เหล่านั้น
- ตลอด
- ตลอด
- เวลา
- ไปยัง
- ด้านบน
- วิกฤติ
- จริง
- สอง
- ชนิด
- การใช้งาน
- ใช้
- ผู้ใช้งาน
- ผู้ใช้
- ใช้
- การใช้
- ต่างๆ
- แตกต่างกัน
- รุ่น
- ผ่านทาง
- วีดีโอ
- มองเห็นได้
- เยี่ยมชมร้านค้า
- ภาพ
- W3
- ต้องการ
- คือ
- ทาง..
- we
- เว็บ
- Website
- ดี
- คือ
- อะไร
- เมื่อ
- ว่า
- ที่
- ในขณะที่
- ทั้งหมด
- ทำไม
- จะ
- กับ
- ไม่มี
- โรงงาน
- กังวล
- จะ
- คุณ
- หนุ่มสาว
- ของคุณ
- ลมทะเล