การเข้าถึงและหัวข้อ: การออกแบบสำหรับผู้ใช้ที่มีความบกพร่องทางสายตา

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

กรณีการเข้าถึง

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

สถิติช่วยเสริมความแข็งแกร่งให้กับกรณีของเราในการเข้าถึง:

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

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

แง่มุมง่ายๆ เช่น การใช้หัวเรื่องอย่างถูกต้องสามารถสร้างความแตกต่างได้อย่างมาก และนำไปใช้ได้ไม่ยาก นอกจากนี้ยังสามารถประหยัดค่าใช้จ่ายในการดำเนินคดีได้อีกด้วย

คดีโดมิโน

Domino's Pizza เป็นตัวอย่างที่ดีที่แสดงให้เห็นว่าการละเลยการเข้าถึงสำหรับผู้ใช้ที่มีความบกพร่องทางสายตานั้นมีค่าใช้จ่ายสูง

ลูกค้าตาบอดในสหรัฐอเมริการายหนึ่งยื่นเรื่องร้องเรียนในปี 2559 หลังจากพยายามเลือกท็อปปิ้ง ใช้รหัสส่วนลด และสั่งอาหารในแอป iPhone ของร้านอาหารจนเสร็จ ปัญหาคือแอปไม่ได้รวมเข้ากับซอฟต์แวร์อ่านหน้าจอของโทรศัพท์ ซึ่งเปล่งเสียงเนื้อหาตามข้อความที่ใช้อย่างถูกต้องและรูปภาพถูกแท็กด้วยข้อความ แอปและเว็บไซต์ของบริษัทไม่มีรหัสที่ถูกต้องเพื่อให้ iPhone อ่านตัวเลือกต่างๆ ได้

ในขณะที่ผู้พิพากษาเข้าข้าง Domino's ในขั้นต้น ศาลอุทธรณ์ได้ตัดสินในความโปรดปรานของลูกค้าเมื่อสัปดาห์ที่แล้วโดยอ้างว่า " การไม่สามารถเข้าถึงเว็บไซต์และแอปของ Domino ที่ถูกกล่าวหาได้ขัดขวางการเข้าถึงสินค้าและบริการของแฟรนไชส์พิซซ่าทางกายภาพซึ่งเป็นที่สาธารณะ ที่พัก ”.

ในสหราชอาณาจักร Royal National Institute of Blind People ยินดีต่อคำตัดสิน ของ BCC ว่า “ทุกองค์กรมีหน้าที่รับผิดชอบภายใต้ พระราชบัญญัติความเท่าเทียมกัน 2010 เพื่อให้แน่ใจว่าเว็บไซต์และแอพของพวกเขาสามารถใช้งานได้โดยคนตาบอดและผู้ที่มองเห็นบางส่วนรวมถึงเหล่านั้น ที่ใช้โปรแกรมอ่านหน้าจอ”

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

แนวทางปฏิบัติที่ดีที่สุดสำหรับการเข้าถึงข้อมูล

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

หากคุณไม่แน่ใจว่าหัวเรื่องคืออะไร W3C ก็มีคำจำกัดความที่ดีและ Yoast อธิบายการใช้ SEO

W3C กำหนดการใช้งานที่ถูกต้องดังนี้:

“องค์ประกอบส่วนหัวทั้งหก H1 ถึง H6 หมายถึงส่วนหัวของส่วน แม้ว่าการเรียงลำดับและการเกิดของส่วนหัวจะไม่ถูกจำกัดโดย HTML DTD แต่เอกสาร ไม่ควรข้ามระดับ (เช่น จาก H1 ถึง H3) เนื่องจากการแปลงเอกสารดังกล่าวเป็นการนำเสนอแบบอื่นมักมีปัญหา”

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

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

จะตรวจสอบหัวเรื่องได้อย่างไร?

หากนักพัฒนาหรือธีมของคุณใช้หัวเรื่องที่ถูกต้อง คุณก็ควรจะเพิ่มเนื้อหาของคุณและเพิ่มหัวเรื่องในลักษณะที่ถูกต้องผ่านตัวแก้ไข/CMS ได้

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

• แผนที่ส่วนหัวสำหรับ Chrome
• หัวเรื่องแผนที่สำหรับ Firefox

เมื่อติดตั้งแล้วจะใช้งานง่ายมากและส่วนหัวที่ไม่ถูกต้องจะแสดงเป็นสีแดงในแถบด้านข้างเมื่อคุณคลิกปุ่มปลั๊กอิน คุณลักษณะนี้จะเป็นตัวเลือกเริ่มต้นในตัวแก้ไข Gutenberg ใน WordPress 5.0 และอธิบายไว้ในไซต์นี้

วิธีที่ถูกต้องในการใช้หัวเรื่อง:

วิธีที่ไม่ถูกต้องในการใช้หัวเรื่อง:

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

หวังว่าโพสต์นี้จะช่วยให้คุณจัดโครงสร้างหน้าเว็บสำหรับทุกคนได้อย่างถูกต้อง

หากคุณต้องการความช่วยเหลือเกี่ยวกับการพัฒนาเว็บ อย่าลังเลที่จะติดต่อเรา