บทบาทของอรรถศาสตร์ในการนำทางหน้าเว็บ
คุณได้เรียนรู้เกี่ยวกับความประหยัด ความหมาย และวิธีที่เทคโนโลยีความช่วยเหลือพิเศษใช้โครงสร้างการช่วยเหลือพิเศษเพื่อสร้างประสบการณ์ทางเลือกสำหรับผู้ใช้ คุณจะเห็นได้ว่าการเขียน HTML ที่สื่อความหมายและชัดเจนทำให้คุณเข้าถึงได้อย่างง่ายดายโดยไม่ต้องลงแรงมาก เนื่องจากองค์ประกอบมาตรฐานจำนวนมากมีทั้งความหมายและลักษณะการสนับสนุนอยู่ในตัว
ในบทเรียนนี้ เราจะกล่าวถึงความหมายที่ไม่ค่อยชัดเจนมากนัก ซึ่งสำคัญมากต่อผู้ใช้โปรแกรมอ่านหน้าจอ โดยเฉพาะในเรื่องการนำทาง ในหน้าเว็บง่ายๆ ที่มีการควบคุมมากมาย แต่มีเนื้อหาไม่มากนัก คุณสามารถสแกนหน้าเพื่อหาสิ่งที่ต้องการได้ง่ายๆ แต่ในหน้าเว็บที่มีเนื้อหามากมาย เช่น รายการ Wikipedia หรือแหล่งรวบรวมข่าว จะไม่สามารถอ่านทุกอย่างตั้งแต่ด้านบนลงล่าง คุณจะต้องเข้าใจวิธีไปยังส่วนต่างๆ ของเนื้อหาได้อย่างมีประสิทธิภาพ
นักพัฒนาซอฟต์แวร์มักมีความเข้าใจผิดว่าโปรแกรมอ่านหน้าจอน่าเบื่อและใช้งานช้า หรือต้องโฟกัสทุกอย่างบนหน้าจอเพื่อให้โปรแกรมอ่านหน้าจอค้นหาได้ ซึ่งมักจะไม่เป็นเช่นนั้น
ผู้ใช้โปรแกรมอ่านหน้าจอมักอาศัยรายการส่วนหัวเพื่อค้นหาข้อมูล โปรแกรมอ่านหน้าจอส่วนใหญ่มีวิธีง่ายๆ ในการแยกแยะและสแกนรายการส่วนหัวของหน้า ซึ่งเป็นฟีเจอร์สำคัญที่เรียกว่าโรเตอร์ ดูว่าเราจะใช้ส่วนหัว HTML อย่างมีประสิทธิภาพเพื่อรองรับฟีเจอร์นี้ได้อย่างไร
การใช้ส่วนหัวอย่างมีประสิทธิภาพ
ก่อนอื่น เรามาเน้นย้ำประเด็นก่อนหน้านี้กันว่าลำดับ DOM มีความสำคัญ ซึ่งไม่ใช่เพียงแค่ลำดับโฟกัสเท่านั้น แต่สำหรับลำดับโปรแกรมอ่านหน้าจอ เมื่อทดลองใช้โปรแกรมอ่านหน้าจอ เช่น VoiceOver, NVDA, JAWS และ ChromeVox คุณจะเห็นรายการส่วนหัวเป็นไปตามลำดับของ DOM แทนที่จะเป็นลำดับภาพ
ในกรณีเช่นนี้สำหรับโปรแกรมอ่านหน้าจอโดยทั่วไป เนื่องจากโปรแกรมอ่านหน้าจอโต้ตอบกับแผนผังการช่วยเหลือพิเศษ และแผนผังการช่วยเหลือพิเศษนั้นอิงตามแผนผัง DOM ลำดับที่โปรแกรมอ่านหน้าจอรับรู้จึงอิงตามลำดับ DOM โดยตรง นั่นหมายความว่าโครงสร้างหัวข้อที่เหมาะสมมีความสำคัญมากกว่าที่เคย
ในหน้าเว็บที่มีโครงสร้างดีส่วนใหญ่ ระดับส่วนหัวจะซ้อนกันอยู่เพื่อแสดงความสัมพันธ์ระหว่างระดับบนสุดและระดับย่อยในการบล็อกเนื้อหาต่างๆ รายการตรวจสอบ WebAIM กล่าวถึงเทคนิคนี้ซ้ำๆ
- 1.3.1 พูดถึง "ใช้มาร์กอัปที่สื่อความหมายเพื่อระบุส่วนหัว"
- 2.4.1 พูดถึงโครงสร้างส่วนหัวว่าเป็นเทคนิคในการข้ามการบล็อกเนื้อหา
- 2.4.6 กล่าวถึงรายละเอียดบางอย่างในการเขียนหัวข้อที่เป็นประโยชน์
- 2.4.10 ระบุว่า "แต่ละส่วนของเนื้อหามีการกำหนดโดยใช้ส่วนหัว ตามความเหมาะสม"
หัวข้อบางรายการไม่จำเป็นต้องปรากฏบนหน้าจอ ตัวอย่างเช่น วิกิพีเดียใช้เทคนิคที่จงใจวางส่วนหัวบางส่วนไว้นอกหน้าจอเพื่อทำให้เข้าถึงได้ด้วยโปรแกรมอ่านหน้าจอและเทคโนโลยีความช่วยเหลืออื่นๆ เท่านั้น
<style>
.sr-only {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}
</style>
<h2 class="sr-only">This heading is offscreen.</h2>
สำหรับแอปพลิเคชันที่ซับซ้อน วิธีนี้อาจเป็นวิธีที่ดีในการรองรับส่วนหัวเมื่อไม่จำเป็นต้องใช้การออกแบบภาพ หรือไม่จำเป็นต้องมีพื้นที่สำหรับหัวข้อที่มองเห็นได้
ตัวเลือกการนำทางอื่นๆ
แม้ว่าหน้าที่มีส่วนหัวที่ดีจะช่วยให้ผู้ใช้โปรแกรมอ่านหน้าจอไปยังส่วนต่างๆ ได้ แต่ก็ยังมีองค์ประกอบอื่นๆ ที่ผู้ใช้ใช้เพื่อไปยังส่วนต่างๆ ของหน้าได้ เช่น ลิงก์ ตัวควบคุมฟอร์ม และจุดสังเกต
ผู้อ่านจะใช้ฟีเจอร์โรเตอร์ของโปรแกรมอ่านหน้าจอ (วิธีง่ายๆ ในการแยกแยะและสแกนรายการส่วนหัวของหน้า) เพื่อเข้าถึงรายการลิงก์ในหน้า บางครั้งอย่างในวิกิจะมีลิงก์จำนวนมาก ผู้อ่านอาจค้นหาคำภายในลิงก์ ซึ่งจะจำกัด Hit เฉพาะลิงก์ที่มีคำดังกล่าวอยู่จริง แทนที่จะแสดงทุกคำที่อยู่ในหน้า
ฟีเจอร์นี้มีประโยชน์ก็ต่อเมื่อโปรแกรมอ่านหน้าจอพบลิงก์และข้อความลิงก์มีความหมาย ตัวอย่างเช่น ต่อไปนี้เป็นรูปแบบทั่วไปที่ทำให้ค้นหาลิงก์ได้ยาก
- แท็ก Anchor ที่ไม่มีแอตทริบิวต์
hrefเป้าหมายลิงก์เหล่านี้มักใช้ในแอปพลิเคชันหน้าเว็บเดียว เพราะมักจะทำให้เกิดปัญหากับโปรแกรมอ่านหน้าจอ อ่านข้อมูลเพิ่มเติมได้ในบทความนี้เกี่ยวกับแอปหน้าเดียว - ปุ่มที่ใช้งานพร้อมลิงก์ ซึ่งจะทำให้โปรแกรมอ่านหน้าจอตีความเนื้อหาเป็นลิงก์ และฟังก์ชันของปุ่มจะหายไป ในกรณีเหล่านี้ ให้แทนที่แท็ก Anchor ด้วยปุ่มจริงและจัดรูปแบบให้เหมาะสม
- รูปภาพที่ใช้เป็นเนื้อหาลิงก์ ในบางครั้ง รูปภาพที่ลิงก์ซึ่งจำเป็น
อาจใช้กับโปรแกรมอ่านหน้าจอไม่ได้ ตรวจสอบว่ารูปภาพมีข้อความแอตทริบิวต์
altเพื่อให้แน่ใจว่าลิงก์จะแสดงเทคโนโลยีความช่วยเหลือพิเศษได้อย่างถูกต้อง
ข้อความลิงก์ที่ไม่น่าพอใจเป็นอีกปัญหาหนึ่ง ข้อความที่คลิกได้ เช่น "ดูข้อมูลเพิ่มเติม" หรือ "คลิกที่นี่" จะไม่ให้ข้อมูลเชิงความหมายเกี่ยวกับตำแหน่งของลิงก์ แต่ให้ใช้ข้อความอธิบาย เช่น "ดูข้อมูลเพิ่มเติมเกี่ยวกับการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์" หรือ "ดูบทแนะนำสำหรับ Canvas นี้" แทน เพื่อช่วยให้โปรแกรมอ่านหน้าจอให้บริบทที่เป็นประโยชน์เกี่ยวกับลิงก์
นอกจากนี้ โรเตอร์ยังเรียกรายการควบคุมแบบฟอร์มได้ด้วย ผู้อ่านจะใช้รายการนี้เพื่อค้นหารายการที่เจาะจงและไปยังรายการเหล่านั้นได้โดยตรง
ข้อผิดพลาดที่พบบ่อยซึ่งโปรแกรมอ่านหน้าจอทำคือการออกเสียง เช่น โปรแกรมอ่านหน้าจออาจออกเสียง "Udacity" ว่า "oo-dacity" หรืออ่านหมายเลขโทรศัพท์เป็นจำนวนเต็มขนาดใหญ่ หรืออ่านข้อความที่เป็นอักษรตัวพิมพ์ใหญ่เหมือนเป็นตัวย่อ ที่น่าสนใจคือผู้ใช้โปรแกรมอ่านหน้าจอค่อนข้างชินกับพฤติกรรมประหลาดนี้แล้ว และนำมาพิจารณาด้วย
นักพัฒนาซอฟต์แวร์บางรายพยายามทำให้สถานการณ์นี้แย่กว่าเดิมด้วยการแสดงข้อความสำหรับโปรแกรมอ่านหน้าจอเท่านั้นซึ่งสะกดตามการออกเสียง กฎง่ายๆ สำหรับการสะกดคำตามการออกเสียงมีดังนี้ อย่าทำมีแต่จะทำให้ปัญหาแย่ลง เช่น หากผู้ใช้กำลังใช้จอแสดงผลอักษรเบรลล์ คำดังกล่าวสะกดไม่ถูกต้อง ซึ่งจะทำให้เกิดความสับสนมากขึ้น โปรแกรมอ่านหน้าจอช่วยให้สะกดคำแบบออกเสียงได้ ดังนั้นควรปล่อยให้ผู้อ่านควบคุมประสบการณ์การใช้งานและตัดสินใจว่าต้องทำงานเมื่อใด
ผู้อ่านสามารถใช้โรเตอร์เพื่อดูรายการจุดสังเกต รายการนี้จะช่วยให้ผู้อ่านค้นพบเนื้อหาหลักและชุดจุดสังเกตการนำทางที่มาจากองค์ประกอบจุดสังเกต HTML
HTML5 ได้แนะนำองค์ประกอบใหม่ที่ช่วยกำหนดโครงสร้างทางอรรถศาสตร์ของหน้าเว็บ ได้แก่ header, footer, nav, article, section, main และ aside องค์ประกอบเหล่านี้จะให้ข้อมูลเกี่ยวกับโครงสร้างในหน้าโดยเฉพาะ โดยไม่ต้องบังคับใช้การจัดรูปแบบในตัว (ซึ่งคุณควรทำกับ CSS อยู่แล้ว)
องค์ประกอบโครงสร้างเชิงความหมายจะแทนที่บล็อก div ที่ซ้ำๆ กันหลายบล็อก และให้วิธีการที่ชัดเจนและสื่อความหมายมากขึ้นในการแสดงโครงสร้างหน้าเว็บสำหรับทั้งผู้เขียนและผู้อ่านโดยสัญชาตญาณ