บทบาทของความหมายในการนําทางหน้าเว็บ
คุณได้ทราบเกี่ยวกับลักษณะที่นําไปใช้ได้ ความหมาย และวิธีที่เทคโนโลยีความช่วยเหลือพิเศษใช้ลําดับชั้นการช่วยเหลือพิเศษเพื่อสร้างประสบการณ์การใช้งานทางเลือกสําหรับผู้ใช้ คุณจะเห็นว่าการเขียน 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เป้าหมายลิงก์เหล่านี้มักใช้ในแอปพลิเคชันหน้าเดียว ซึ่งจะทำให้เกิดปัญหากับโปรแกรมอ่านหน้าจอ อ่านเพิ่มเติมได้ในบทความนี้เกี่ยวกับแอปหน้าเดียว - ปุ่มที่ใช้กับลิงก์ ซึ่งจะทำให้โปรแกรมอ่านหน้าจอตีความเนื้อหาเป็นลิงก์ และฟังก์ชันของปุ่มจะหายไป ในกรณีเหล่านี้ ให้แทนที่แท็กแอตทริบิวต์ด้วยปุ่มจริงและจัดสไตล์ให้เหมาะสม
- รูปภาพที่ใช้เป็นเนื้อหาลิงก์ ในบางครั้ง รูปภาพที่ลิงก์ซึ่งจำเป็น
อาจใช้กับโปรแกรมอ่านหน้าจอไม่ได้ ตรวจสอบว่ารูปภาพมีข้อความแอตทริบิวต์
altเพื่อให้มั่นใจว่าลิงก์จะแสดงในเทคโนโลยีความช่วยเหลือพิเศษอย่างถูกต้อง
ข้อความลิงก์ที่ไม่ดีก็เป็นอีกปัญหาหนึ่ง ข้อความที่คลิกได้ เช่น "ดูข้อมูลเพิ่มเติม" หรือ "คลิกที่นี่" ไม่ได้ให้ข้อมูลเชิงความหมายเกี่ยวกับปลายทางของลิงก์ แต่ให้ใช้ข้อความอธิบาย เช่น "ดูข้อมูลเพิ่มเติมเกี่ยวกับการออกแบบที่ตอบสนอง" หรือ "ดูบทแนะนำเกี่ยวกับ Canvas นี้" เพื่อช่วยโปรแกรมอ่านหน้าจอให้บริบทที่มีความหมายเกี่ยวกับลิงก์
โรเตอร์ยังดึงข้อมูลรายการการควบคุมแบบฟอร์มได้ด้วย รายการนี้ช่วยให้ผู้อ่านค้นหารายการที่ต้องการและไปยังรายการนั้นๆ ได้โดยตรง
ข้อผิดพลาดที่พบบ่อยที่โปรแกรมอ่านหน้าจอทำคือเรื่องการออกเสียง เช่น โปรแกรมอ่านหน้าจออาจออกเสียง "Udacity" เป็น "oo-dacity" หรืออ่านหมายเลขโทรศัพท์เป็นจำนวนเต็มขนาดใหญ่ หรืออ่านข้อความตัวพิมพ์ใหญ่ราวกับว่าเป็นอักษรย่อ สิ่งที่น่าสนใจคือผู้ใช้โปรแกรมอ่านหน้าจอค่อนข้างคุ้นเคยกับลักษณะการทำงานนี้และรับทราบข้อจำกัดดังกล่าว
นักพัฒนาซอฟต์แวร์บางรายพยายามปรับปรุงสถานการณ์นี้โดยจัดเตรียมข้อความที่สะกดตามวิธีออกเสียงสำหรับโปรแกรมอ่านหน้าจอเท่านั้น กฎง่ายๆ สำหรับการสะกดคำตามการออกเสียงมีดังนี้ อย่าทำมีแต่จะทำให้ปัญหาแย่ลง ตัวอย่างเช่น หากผู้ใช้ใช้เครื่องแสดงผลอักษรเบรลล์ ระบบจะสะกดคำไม่ถูกต้อง ซึ่งทำให้เกิดความสับสนมากขึ้น โปรแกรมอ่านหน้าจอช่วยให้สะกดคำแบบออกเสียงได้ ดังนั้นควรปล่อยให้ผู้อ่านควบคุมประสบการณ์การใช้งานของตนและตัดสินใจว่าต้องทำงานเมื่อใด
ผู้อ่านสามารถใช้โรเตอร์เพื่อดูรายการจุดสังเกต รายการนี้ช่วยให้ผู้อ่านค้นหาเนื้อหาหลักและชุดจุดสังเกตในการนําทางที่ได้จากองค์ประกอบจุดสังเกต HTML
HTML5 ได้แนะนำองค์ประกอบใหม่ที่ช่วยกำหนดโครงสร้างทางอรรถศาสตร์ของหน้าเว็บ ได้แก่ header, footer, nav, article, section, main และ aside องค์ประกอบเหล่านี้จะให้ข้อมูลเชิงโครงสร้างในหน้าเว็บอย่างเจาะจง
โดยไม่ต้องบังคับใช้การจัดรูปแบบในตัว (ซึ่งคุณควรทำกับ CSS อยู่แล้ว)
องค์ประกอบโครงสร้างเชิงความหมายจะแทนที่บล็อก div ซ้ำๆ หลายรายการ และแสดงโครงสร้างหน้าเว็บได้ชัดเจนขึ้นและสื่อความหมายได้ดียิ่งขึ้นสำหรับทั้งผู้เขียนและผู้อ่าน