จู่ๆ วันนี้ฉันก็พบปัญหาที่แปลกประหลาดมาก บางเว็บไซต์ที่เน้นเรื่อง CSS, XHTML, Web 2.0 และมาตรฐานเว็บกำลังคุยกันเรื่องวิธีลบกล่องประ (โครงร่าง) รอบๆ ไฮเปอร์ลิงก์เมื่อคลิกเมาส์ เช่น โครงร่าง:ไม่มี หรือโครงร่าง: 0 . บางทีบางครั้งลักษณะที่ปรากฏเริ่มต้นของกรอบประ (โครงร่าง) อาจส่งผลต่อลักษณะที่ปรากฏ แต่การมีอยู่ของมันต้องมีเหตุผล นั่นคือเพื่อปรับปรุงการใช้งานเว็บไซต์ โดยเฉพาะอย่างยิ่งเพื่อให้ผู้ใช้นำทางด้วยแป้นพิมพ์ได้รับความสะดวกสบายอย่างมาก ในขณะที่เรากำลังพูดถึงความหมายและความง่ายในการใช้งาน เราก็มักจะทำสิ่งที่ขัดแย้งกับสิ่งเหล่านั้นอยู่เสมอ
1. กล่องประ (โครงร่าง) นำความสะดวกสบายมาสู่การนำทางด้วยแป้นพิมพ์
ฉันมีนิสัยเมื่ออ่านบทความ: ฉันไม่ค่อยใช้เมาส์และพึ่งพาแป้นพิมพ์เป็นหลัก ปุ่มที่ใช้มากที่สุดคือปุ่ม Tab, PageUp, PageDown, Enter และปุ่มสี่ทิศทาง ปุ่ม Tab ใช้เพื่อนำทางไฮเปอร์ลิงก์ คุณสามารถสลับระหว่างไฮเปอร์ลิงก์ต่างๆ ได้ หลังจากเลือกลิงก์แล้ว ให้กด Enter โดยตรงเพื่อเข้าไป (ตอนนี้คุณสามารถใช้ปุ่ม Tab เพื่อดูเอฟเฟกต์ในหน้านี้ได้) เมื่อปุ่ม Tab โฟกัสที่ลิงก์ กรอบจุด (โครงร่าง) จะปรากฏขึ้นรอบๆ ลิงก์ เพื่อระบุว่าลิงก์อยู่ในโฟกัสและสามารถเข้าถึงได้หลังจากการยืนยัน แน่นอนว่าหลายคนอาจบอกว่าใช้เมาส์สะดวกมาก ทำไมต้องใช้คีย์บอร์ด? ฉันอยากจะให้เหตุผลบางประการที่นี่
ว่ากันว่าเกณฑ์หนึ่งสำหรับการเป็นผู้เชี่ยวชาญด้านคอมพิวเตอร์ที่แท้จริงคือคุณสามารถดำเนินการทั้งหมดให้เสร็จสิ้นได้โดยไม่ต้องใช้เมาส์หรือไม่ บางครั้งเมื่อฉันอ่านบทความ การถือกาแฟด้วยมือขวาและพิมพ์แป้นพิมพ์ด้วยมือซ้ายก็ไม่ส่งผลต่อการอ่านของฉัน
ความต้องการพิเศษของกลุ่มคนพิเศษ เว็บไซต์ของคุณไม่ได้มีไว้สำหรับคุณเท่านั้น คุณไม่สามารถมีอิทธิพลต่อวิธีที่ผู้อื่นใช้เว็บไซต์ของคุณได้
รูปแบบใหม่เมื่อใช้ปุ่ม Tab เพื่อเน้นที่ลิงก์ (อาจแตกต่างกันไปตามเบราว์เซอร์ที่แตกต่างกัน แต่ทุกเบราว์เซอร์มีฟังก์ชันนี้ซึ่งแสดงถึงความจำเป็น)
2. ประสบการณ์การใช้งานที่แย่ลง
ใช้เค้าร่าง:ไม่มีหรือเค้าร่าง:0เพื่อลบกรอบจุดด้านนอก แม้ว่าจะไม่สามารถมองเห็นการเปลี่ยนแปลงจากลิงก์ได้ แต่อย่างน้อยก็สามารถเห็นข้อมูลลิงก์ได้จากแถบสถานะ แต่ประสบการณ์ผู้ใช้ที่แย่ยิ่งกว่านั้นคือการใช้เหตุการณ์ onfocus ของ JavsScript เมื่อผู้ใช้โฟกัสไปที่ลิงก์ มันจะยกเลิกการโฟกัสทันที ซึ่งหมายความว่าคุณจะไม่สามารถโฟกัสไปที่ไฮเปอร์ลิงก์นี้ได้ ดังนั้นหากคุณไม่ใช้เมาส์ คุณก็สามารถทำได้อย่างแน่นอน เยี่ยมชมลิงค์ใดก็ได้ในหน้านี้ ผู้เชี่ยวชาญบางคนได้พัฒนาวิธีการใช้ JQuery เพื่อลบโครงร่าง หากคุณใช้ Google "ลบเส้นประออกจากลิงก์" คุณจะได้รับผลลัพธ์นับหมื่นรายการ ดูเหมือนว่าผู้คนจำนวนมากต้องการมันและกำลังค้นคว้าอยู่ แต่เขาละเมิดหลักการใช้งานง่ายของเว็บและไม่ได้คำนึงถึงประสบการณ์ของผู้ใช้เลย
3. ทางเลือกอื่น
หากคุณคิดว่าลักษณะของกรอบประจะส่งผลต่อลักษณะที่ปรากฏจริงๆ คุณสามารถเลือกทางเลือกที่ดีกว่าได้อย่างแน่นอน นั่นคือการใช้ :focus pseudo-class ใน CSS เช่น การใช้
a:focus { สีพื้นหลัง:#f00; }
/*หรือ*/
a:hover, a:focus {text- decoration:underline;}
เมื่อโฟกัสถูกกระตุ้น พื้นหลังของลิงก์จะเป็นสีแดง ฯลฯ แน่นอน คุณสามารถออกแบบสไตล์ที่ซับซ้อนมากขึ้นได้ตามต้องการ และคุณยังสามารถกำหนดโฟกัสและโฮเวอร์ไปที่สไตล์เดียวกันได้อีกด้วย แต่มีสิ่งหนึ่งที่คุณไม่สามารถปิดกั้นกลไกกระตุ้นโฟกัสได้
ดังนั้นอย่านำกล่องประรอบๆ ไฮเปอร์ลิงก์ออก อย่างน้อยที่สุดก็ไม่ควรปิดกั้นการกระตุ้นโฟกัส