คู่มือใช้งาน
ใช้อักษรพิเศษอย่างไรให้เว็บไซต์และข้อความยังเข้าถึงได้
แนวทางใช้อักษรพิเศษ อีโมจิ และเส้นคั่นโดยคำนึงถึงโปรแกรมอ่านหน้าจอ การค้นหา การคัดลอก และผู้ใช้ทุกกลุ่ม
SPECIAL CHARACTERS GUIDE
ใช้อักษรพิเศษอย่างไรให้เว็บไซต์และข้อความยังเข้าถึงได้
อักษรพิเศษมีทั้งความหมายและของตกแต่ง
สัญลักษณ์ที่บอกสถานะ เช่น ✓ และ ⚠ มีความหมาย ส่วนดาวหรือเส้นคั่นอาจเป็นของตกแต่ง การแยกหน้าที่ช่วยตัดสินใจว่าต้องมีข้อความกำกับหรือซ่อนจากเทคโนโลยีช่วยเหลือ
ในเว็บไซต์ควรใส่ label สำหรับปุ่มและใช้ aria-hidden เฉพาะตัวตกแต่งที่ไม่มีข้อมูล ไม่ซ่อนสัญลักษณ์ที่เป็นสาระ
เมื่อลองเรื่อง “อักษรพิเศษมีทั้งความหมายและของตกแต่ง” ให้เก็บข้อความต้นฉบับและผลลัพธ์ไว้เปรียบเทียบ จากนั้นตรวจ ระบุหน้าที่ของทุกสัญลักษณ์, ข้อความกำกับสถานะ, ซ่อนเฉพาะของตกแต่ง ตามลำดับ วิธีนี้ช่วยแยกสาเหตุของปัญหา และทำให้เลือกแบบที่ผู้อื่นอ่าน ค้นหา และคัดลอกต่อได้จริง แทนการตัดสินจากหน้าตาเพียงอย่างเดียว
- ระบุหน้าที่ของทุกสัญลักษณ์
- ข้อความกำกับสถานะ
- ซ่อนเฉพาะของตกแต่ง
โปรแกรมอ่านหน้าจออ่าน Unicode อย่างไร
โปรแกรมอ่านหน้าจออาจอ่านชื่อ Unicode อ่านเป็นเครื่องหมาย หรือข้ามบางตัว ลำดับอีโมจิยาวและเส้นซ้ำทำให้ผู้ใช้ต้องฟังคำจำนวนมากก่อนถึงเนื้อหา
อ่านหน้าเว็บด้วย Narrator, VoiceOver หรือ TalkBack และลดสัญลักษณ์ซ้ำหากขัดจังหวะการทำความเข้าใจ
เมื่อลองเรื่อง “โปรแกรมอ่านหน้าจออ่าน Unicode อย่างไร” ให้เก็บข้อความต้นฉบับและผลลัพธ์ไว้เปรียบเทียบ จากนั้นตรวจ ทดสอบอย่างน้อยหนึ่ง screen reader, ไม่ทำเส้นจากอีโมจิหลายสิบตัว, วางข้อความสำคัญก่อนของตกแต่ง ตามลำดับ วิธีนี้ช่วยแยกสาเหตุของปัญหา และทำให้เลือกแบบที่ผู้อื่นอ่าน ค้นหา และคัดลอกต่อได้จริง แทนการตัดสินจากหน้าตาเพียงอย่างเดียว
- ทดสอบอย่างน้อยหนึ่ง screen reader
- ไม่ทำเส้นจากอีโมจิหลายสิบตัว
- วางข้อความสำคัญก่อนของตกแต่ง
อักษรแฟนซีกับการค้นหา
Mathematical alphanumeric symbols ดูคล้ายตัวอังกฤษแต่เป็น code point คนละชุด ระบบค้นหา การตรวจสะกด และการอ่านออกเสียงอาจไม่เท่ากับข้อความปกติ
ใช้แฟนซีกับชื่อสั้นและเก็บคำสำคัญ hashtag URL และข้อมูลติดต่อเป็นอักษรปกติ เพื่อให้ค้นหาและคัดลอกกลับได้
เมื่อลองเรื่อง “อักษรแฟนซีกับการค้นหา” ให้เก็บข้อความต้นฉบับและผลลัพธ์ไว้เปรียบเทียบ จากนั้นตรวจ ไม่ใช้กับย่อหน้ายาว, เก็บ keyword เป็นตัวปกติ, มีชื่อปกติใกล้เคียง ตามลำดับ วิธีนี้ช่วยแยกสาเหตุของปัญหา และทำให้เลือกแบบที่ผู้อื่นอ่าน ค้นหา และคัดลอกต่อได้จริง แทนการตัดสินจากหน้าตาเพียงอย่างเดียว
- ไม่ใช้กับย่อหน้ายาว
- เก็บ keyword เป็นตัวปกติ
- มีชื่อปกติใกล้เคียง
สี รูปทรง และอีโมจิไม่ควรเป็นคำตอบเดียว
ผู้ใช้บางคนไม่เห็นสีหรือภาพอีโมจิเหมือนกัน การใช้หัวใจสีหรือวงกลมเพียงอย่างเดียวแทนสถานะจึงทำให้ตีความผิดได้
ใช้ข้อความ ไอคอน และรูปแบบร่วมกัน เช่น สำเร็จ ✓ แทนเครื่องหมายถูกอย่างเดียว และรักษา contrast ขององค์ประกอบเว็บ
เมื่อลองเรื่อง “สี รูปทรง และอีโมจิไม่ควรเป็นคำตอบเดียว” ให้เก็บข้อความต้นฉบับและผลลัพธ์ไว้เปรียบเทียบ จากนั้นตรวจ ข้อความ + สัญลักษณ์, ไม่พึ่งสีเพียงอย่างเดียว, ตรวจ contrast ตามลำดับ วิธีนี้ช่วยแยกสาเหตุของปัญหา และทำให้เลือกแบบที่ผู้อื่นอ่าน ค้นหา และคัดลอกต่อได้จริง แทนการตัดสินจากหน้าตาเพียงอย่างเดียว
- ข้อความ + สัญลักษณ์
- ไม่พึ่งสีเพียงอย่างเดียว
- ตรวจ contrast
คีย์บอร์ดและพื้นที่กด
ปุ่มสัญลักษณ์ต้องเข้าถึงด้วย Tab มี focus ที่เห็นชัด และมีพื้นที่กดเหมาะกับมือถือ การเปลี่ยนสีเมื่อ hover อย่างเดียวไม่พอสำหรับผู้ใช้คีย์บอร์ด
ทดสอบเลือก คัดลอก เปิดข้อมูล และปิด modal โดยไม่ใช้เมาส์ รวมถึงตรวจลำดับ focus หลังปิดหน้าต่าง
เมื่อลองเรื่อง “คีย์บอร์ดและพื้นที่กด” ให้เก็บข้อความต้นฉบับและผลลัพธ์ไว้เปรียบเทียบ จากนั้นตรวจ Tab เข้าถึงทุกปุ่ม, Enter หรือ Space ทำงาน, focus กลับตำแหน่งเดิม ตามลำดับ วิธีนี้ช่วยแยกสาเหตุของปัญหา และทำให้เลือกแบบที่ผู้อื่นอ่าน ค้นหา และคัดลอกต่อได้จริง แทนการตัดสินจากหน้าตาเพียงอย่างเดียว
- Tab เข้าถึงทุกปุ่ม
- Enter หรือ Space ทำงาน
- focus กลับตำแหน่งเดิม
เช็กลิสต์ก่อนเผยแพร่
ตรวจว่าข้อความยังเข้าใจเมื่อปิดภาพ ตัดสัญลักษณ์ตกแต่ง หรือฟอนต์ไม่รองรับ และไม่มีลำดับที่อ่านซ้ำยาวผิดปกติ
ให้ผู้ใช้อื่นทดลองบนมือถือและคีย์บอร์ด พร้อมตรวจชื่อ accessible ของปุ่มก่อนเพิ่มสัญลักษณ์จำนวนมากในหน้าจริง
เมื่อลองเรื่อง “เช็กลิสต์ก่อนเผยแพร่” ให้เก็บข้อความต้นฉบับและผลลัพธ์ไว้เปรียบเทียบ จากนั้นตรวจ ใจความไม่หายเมื่อ glyph ไม่แสดง, ปุ่มมี accessible name, ข้อความยังค้นหาได้ ตามลำดับ วิธีนี้ช่วยแยกสาเหตุของปัญหา และทำให้เลือกแบบที่ผู้อื่นอ่าน ค้นหา และคัดลอกต่อได้จริง แทนการตัดสินจากหน้าตาเพียงอย่างเดียว
- ใจความไม่หายเมื่อ glyph ไม่แสดง
- ปุ่มมี accessible name
- ข้อความยังค้นหาได้
Original Practical Lab
แบบตรวจข้อความเมื่อไม่มีภาพสัญลักษณ์
เขียนข้อความที่ยังเข้าใจได้เมื่อโปรแกรมอ่านหน้าจออ่านชื่อ Unicode แทนรูปร่างที่ผู้ใช้มองเห็น
ดาวน์โหลด ↓
สถานะ: สำเร็จ ✅
ติดต่อเรา →
วิธีตรวจผลด้วยตัวเอง
- 1.มีคำกำกับทุกไอคอนที่เป็นการกระทำ
- 2.ไม่ใช้ตัวอักษรตกแต่งแทนหัวข้อทั้งหมด
- 3.รักษาลำดับข้อความเมื่อคัดลอกเป็น plain text
คำถามที่พบบ่อย
อักษรพิเศษผิดหลักการเข้าถึงหรือไม่?
ไม่เสมอไป ปัญหาเกิดเมื่อใช้แทนข้อความสำคัญ ใส่ซ้ำมาก หรือไม่มี label ที่อธิบายการทำงาน
อักษรแฟนซีใช้กับหัวข้อได้ไหม?
ใช้ได้ในปริมาณน้อย แต่ควรมีข้อความปกติที่สื่อคำเดียวกันและไม่ใช้กับข้อมูลที่ต้องค้นหา
ทำไมเส้นคั่น Unicode มีปัญหากับ screen reader?
บางโปรแกรมอ่านชื่อเครื่องหมายทุกตัว ทำให้เส้นยาวสร้างเสียงซ้ำโดยไม่เพิ่มข้อมูล
ควรเริ่มทดสอบจากอะไร?
เริ่มด้วยคีย์บอร์ดและ screen reader ที่มีในระบบ ตรวจปุ่ม ชื่อสถานะ และลำดับการอ่าน