วิธีทำให้ทุกคนเข้าถึงประสบการณ์หลังคลิกได้โดยปฏิบัติตามมาตรฐานการปฏิบัติตาม ADA & WCAG

เมื่อสร้างหน้า Landing Page หลังคลิก มีผู้ลงโฆษณากี่คนที่คิดเกี่ยวกับการเข้าถึงเว็บ

หากนี่เป็นครั้งแรกที่ คุณ นึกถึงการช่วยเหลือพิเศษ เป็นไปได้ว่าคุณสูญเสีย Conversion ไปแล้ว ความจริงก็คือผู้ใช้ออนไลน์หนึ่งในห้าต้องการที่พักเพื่อใช้หน้าเว็บ สถิติเหล่านี้จาก CDC และ Epilepsy Foundation เน้นย้ำถึงความจำเป็นในการให้ทุกคนเข้าถึงหน้า Landing Page หลังคลิก:

ตรวจสอบให้แน่ใจว่าหน้าหลังการคลิกของคุณเป็นไปตาม ADA และสอดคล้องกับ WCAG เป็นวิธีเพื่อให้แน่ใจว่าทุกคนสามารถเข้าถึงได้

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

การปฏิบัติตามข้อกำหนดของ ADA ทางออนไลน์ก่อให้เกิดอะไร

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

อย่างไรก็ตาม คุณสามารถดูแนวทางที่ครอบคลุมที่สุดสำหรับการสร้างและบำรุงรักษาเว็บไซต์ที่สามารถเข้าถึงได้เพื่อเป็นแนวทาง — แนวทางการเข้าถึงเนื้อหาเว็บ (WCAG) ซึ่งเผยแพร่โดย W3C

WCAG คืออะไร?

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

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

WCAG มีสามเวอร์ชัน:

• WCAG 1.0 ถูกร่างขึ้นในปี 1999
• WCAG 2.0 เผยแพร่ในปี 2008
• WCAG 2.1 ถูกสร้างขึ้นในเดือนมิถุนายน 2018

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

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

แนวทางของ WCAG แบ่งปัญหาด้านความสามารถในการเข้าถึงและคำแนะนำออกเป็นสามระดับ:

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

คุณจะเข้าถึงหน้า Landing Page หลังการคลิกได้อย่างไร

เก้าวิธีที่คุณสามารถมั่นใจได้ว่าหน้าหลังการคลิกของคุณเป็นไปตามมาตรฐานการช่วยสำหรับการเข้าถึง:

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

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

3. รวมข้อความ Alt กับรูปภาพทั้งหมด: การ เพิ่มข้อความแสดงแทนให้กับรูปภาพรับประกันว่าข้อความจะปรากฏแทนรูปภาพหากไม่สามารถโหลด อธิบาย และให้บริบทเกี่ยวกับรูปภาพได้

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

5. ใช้ส่วนหัวเพื่อจัดโครงสร้างเนื้อหา: H1, H2 และ H3 ช่วยจัดโครงสร้างสำเนาของคุณและช่วยให้ผู้ใช้ตีความได้ง่าย

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

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

8. หลีกเลี่ยงสื่อและตัวเลื่อนที่ เล่นอัตโนมัติ : วิดีโอที่เล่นอัตโนมัติอาจทำให้ผู้ใช้ที่ใช้โปรแกรมอ่านหน้าจอหงุดหงิดใจ เนื่องจากอาจเป็นเรื่องยากที่จะปิดเสียงหรือหยุดชั่วคราว ในทำนองเดียวกัน แถบเลื่อนและวงล้ออาจทำให้ผู้ใช้มีปัญหาในการทำความเข้าใจ

9. สร้างสำเนาที่เข้าถึงได้: หลีกเลี่ยงคำย่อและศัพท์แสงทางเทคนิค เพื่อให้ผู้ใช้ทุกคนเข้าใจสิ่งที่คุณนำเสนอ

คุณจะตรวจสอบได้อย่างไรว่าเพจของคุณสอดคล้องกับ ADA และ WCAG

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

สำนักการเข้าถึงอินเทอร์เน็ต

BOIA อนุญาตให้ผู้โฆษณาตรวจสอบว่าหน้าเว็บของตนสอดคล้องกับมาตรฐานการช่วยสำหรับการเข้าถึงหรือไม่:

AudioEye

AudioEye สแกนหน้าของคุณได้ฟรีและดูว่ามันวัดกันอย่างไรในแง่ของการช่วยสำหรับการเข้าถึง:

ปรับปรุงเว็บไซต์

Siteimprove ตรวจสอบการเข้าถึงหน้าเว็บของคุณและให้การทดสอบอัตโนมัติที่เป็นไปตามมาตรฐาน WCAG:

คุณยังสามารถดาวน์โหลดส่วนขยาย Chrome ต่อไปนี้เพื่อตรวจสอบการช่วยสำหรับการเข้าถึง

เครื่องมือประเมินคลื่น

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

UserWay

ผู้โฆษณาสามารถดาวน์โหลดวิดเจ็ต UserWay เพื่อประเมินโซลูชันการช่วยสำหรับการเข้าถึงหน้าเว็บโดยไม่ต้องปรับโครงสร้างโค้ดที่มีอยู่ใหม่ เพื่อให้มั่นใจว่ากรอบงานการปฏิบัติตามกฎหมายและระเบียบข้อบังคับที่ครอบคลุมครอบคลุม ADA, Section 508 และ WCAG 2.1 AA

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

Round Table Pizza มีวิดเจ็ต UserWay เพื่อให้แน่ใจว่าสามารถเข้าถึงได้ ขั้นแรก ใช้เส้นบอกแนวการอ่าน จากนั้นสลับสีบนหน้าจอ:

ChromeVox

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

ส่วนขยายจะไฮไลต์แต่ละส่วนของหน้าและอ่านออกเสียงสำหรับผู้ใช้:

สิ่งที่คุณสามารถทำได้ใน Instapage เพื่อให้เป็นไปตามข้อกำหนด

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

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

การสร้างภาษาของเพจด้วยแอตทริบิวต์ lang เป็นข้อกำหนดของ WCAG และในการทำเช่นนั้นจะเป็นประโยชน์ต่อผู้ใช้ในสองวิธี:

1. อนุญาตให้บริการแปลภาษาเช่น Google Chrome ทำงานได้อย่างถูกต้อง
2. แอตทริบิวต์บอกโปรแกรมอ่านหน้าจอวิธีการออกเสียงเนื้อหาของหน้าอย่างถูกต้อง

ทำให้ทุกคนสามารถเข้าถึงหน้าโพสต์การคลิกของคุณ

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

หากต้องการสำรวจเพิ่มเติมเกี่ยวกับการสร้างหน้า Landing Page ที่เข้าถึงได้และเป็นส่วนตัวในวงกว้าง ขอตัวอย่าง Instapage Enterprise วันนี้