ข้อมูลเบื้องต้นเกี่ยวกับโฟกัส

ภาพรวมของโฟกัสหน้าจอในการช่วยเหลือพิเศษ

เดฟ แกช
เดฟ แกช
เมกกิน เคียร์นี่
Meggin Kearney

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

นี่เป็นจุดเริ่มต้นที่ดีในการเริ่มเรียนรู้เกี่ยวกับการช่วยเหลือพิเศษ เพราะพวกเราทุกคนต่างรู้วิธีใช้ แป้นพิมพ์ เข้าถึงและทดสอบได้ง่าย และยังส่งผลดีต่อผู้ใช้ทุกคน

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

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

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

การโฟกัสคืออะไร

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

โฟกัสแป้นพิมพ์ในช่องข้อความ

รายการที่โฟกัสอยู่ในปัจจุบันมักจะระบุด้วยวงแหวนโฟกัส ซึ่งเป็นรูปแบบที่จะขึ้นอยู่กับทั้งเบราว์เซอร์และการจัดรูปแบบที่ผู้เขียนหน้าเว็บใช้ ตัวอย่างเช่น Chrome จะไฮไลต์องค์ประกอบที่โฟกัสด้วยขอบสีน้ำเงิน ส่วน Firefox ใช้ขอบที่เป็นเส้นประ

ปุ่มลงชื่อสมัครใช้

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

ในฐานะผู้ใช้ คุณจะควบคุมองค์ประกอบที่โฟกัสอยู่ได้โดยใช้ Tab, Shift+Tab หรือแป้นลูกศร ใน Mac OSX จะทำงานต่างออกไปเล็กน้อย: ในขณะที่ Chrome ให้คุณนำทางด้วย Tab เสมอ คุณจะต้องกด Option+Tab เพื่อเปลี่ยนโฟกัสในเบราว์เซอร์อื่นๆ เช่น Safari (เปลี่ยนการตั้งค่านี้ได้ในส่วน "แป้นพิมพ์" ของ "ค่ากำหนดของระบบ")

กล่องโต้ตอบค่ากำหนดแป้นพิมพ์

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

สิ่งที่โฟกัสได้คืออะไร

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

ช่องที่โฟกัสได้โดยนัย

แต่องค์ประกอบบางส่วนไม่สามารถโฟกัสได้ ย่อหน้า, div และองค์ประกอบอื่นๆ ของหน้าเว็บจะไม่โฟกัสขณะที่คุณกด Tab ผ่านหน้า และองค์ประกอบนั้นต้องออกแบบเอง โดยทั่วไป ลูกค้าไม่จำเป็นต้องมุ่งเน้นสิ่งใดไปหากผู้ใช้โต้ตอบกับสิ่งนั้นไม่ได้

บางองค์ประกอบอาจโฟกัสไม่ได้

มีสมาธิ

เรามาลองดูเทคนิคการโฟกัสที่เราพูดถึงกัน หากใช้ Chrome ให้ไปที่หน้าจำลองเว็บไซต์สายการบินนี้ และค้นหาตั๋วที่เฉพาะเจาะจงโดยใช้เฉพาะการป้อนข้อมูลด้วยแป้นพิมพ์ หน้าเว็บไม่ยอมรับการป้อนข้อมูลด้วยเมาส์ คุณจึงไม่สามารถปั่นแบบฝึกหัดได้ (ไม่ใช่เพราะเราไม่เชื่อถือคุณ ;-)

ตัวอย่างเว็บไซต์สายการบิน

พารามิเตอร์คำขอแจ้งปัญหาที่คุณควรระบุมีดังนี้

  • เที่ยวเดียว
  • ไปเมลเบิร์น
  • ออกเดินทางวันที่ 12 ตุลาคม 2017 (12/10/2017)
  • กลับมาในวันที่ 23 ตุลาคม 2017 (23/10/2017)
  • ที่นั่งริมหน้าต่าง
  • ไม่ต้องการรับข้อเสนอโปรโมชัน

เมื่อคุณกรอกแบบฟอร์มเรียบร้อยแล้วโดยไม่มีข้อผิดพลาดในการป้อนข้อมูล และเปิดใช้งานปุ่มค้นหา ระบบจะล้างและรีเซ็ตแบบฟอร์ม กรอกแบบฟอร์มให้เสร็จ แล้วกลับมา

มาตรวจสอบกันว่าแบบฟอร์มใช้การป้อนข้อมูลด้วยแป้นพิมพ์อย่างไร เริ่มด้วยการกด Tab 2-3 ครั้งแรก เบราว์เซอร์จะไฮไลต์รายการการนำทางสำหรับเที่ยวบิน โรงแรม และรถเช่า เมื่อกด Tab ต่อ คุณจะไปยังกลุ่มปุ่มตัวเลือกซึ่งคุณจะเลือกทั้งไป-กลับ เที่ยวเดียว หรือหลายเมืองโดยใช้ปุ่มลูกศรได้

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

การเลือกประเภทที่นั่งจะใช้ปุ่มลูกศรด้วย หรือคุณจะพิมพ์ "w", "a" หรือ "n" เพื่อข้ามไปยังตัวเลือกที่นั่งก็ได้ จากนั้นคุณสามารถปิดใช้ค่าเริ่มต้นของข้อเสนอโปรโมชันได้โดยกดแป้นเว้นวรรคขณะโฟกัสช่องทำเครื่องหมายอยู่ สุดท้าย ให้โฟกัสที่ปุ่มค้นหา แล้วกด Enter เพื่อส่งแบบฟอร์ม

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