นี่จะเป็นโพสต์ที่ 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)
• การรับรู้มากเกินไปอาจทำให้ผู้ใช้มีความทุกข์ ตรวจสอบให้แน่ใจว่าสไตล์ในองค์ประกอบเชิงโต้ตอบต่างๆ สอดคล้องกัน

รองรับเบราว์เซอร์

การเชื่อมโยง

• เนื้อหาที่ขับเคลื่อนด้วย SEO และการเผยแพร่ประชาสัมพันธ์ รับการขยายวันนี้
• PlatoData.Network Vertical Generative Ai เพิ่มพลังให้กับตัวเอง เข้าถึงได้ที่นี่.
• เพลโตไอสตรีม. Web3 อัจฉริยะ ขยายความรู้ เข้าถึงได้ที่นี่.
• เพลโตESG. คาร์บอน, คลีนเทค, พลังงาน, สิ่งแวดล้อม แสงอาทิตย์, การจัดการของเสีย. เข้าถึงได้ที่นี่.
• เพลโตสุขภาพ เทคโนโลยีชีวภาพและข่าวกรองการทดลองทางคลินิก เข้าถึงได้ที่นี่.
• ที่มา: https://css-tricks.com/managing-user-focus-with-focus-visible/