แจกฟรี! โปสเตอร์ Accessibility การออกแบบให้เข้าถึงได้

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

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

โปสเตอร์ Accessibility ด้านล่างนี้ Designil ได้นำข้อมูลมาจาก infographic ในเรื่องของการทำเว็บไซต์ให้เข้าถึงง่าย สำหรับบุคคลที่มีความบกพร่องทั้ง 6 ประเภท จากรัฐบาลอังกฤษมาแจกกัน

ผู้แปล: เกษสุรางค์ งามตระกูลชล & คุณหลง พัทยา อุประ
ผู้จัดทำภาพ: เกษสุรางค์ งามตระกูลชล
ผู้ตรวจสอบ: สิริมา แถลงกิจ, พาฝัน จุลศักดิ์ศรีสกุล

โปสเตอร์ Accessibility 7 ประเภท

1. Anxiety – ผู้ใช้ที่มีอาการวิตกกังวล
2. Autistic spectrum – ผู้ใช้ที่มีอาการออทิสติก
3. Screen readers – ผู้ใช้ที่ต้องการระบบอ่านออกเสียงบนหน้าจอ
4. Low vision – ผู้ใช้ที่มีภาวะสายตาเลือนราง
5. Dyslexia – ผู้ใช้ที่มีอาการดิสเล็กเซีย
6. Physical or motor disabilities – ผู้ใช้ที่ขาดอวัยวะบางส่วนหรือเคลื่อนไหวไม่ได้
7. Deaf or hard of hearing – ผู้ที่สูญเสียการได้ยิน

ในโปสเตอร์ Accessibility มีเนื้อหาอะไรบ้าง ?

1. Anxiety – การออกแบบสำหรับผู้ใช้ที่มีอาการวิตกกังวล

ควรทำ

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

ไม่ควรทำ

1. เร่งหรือจำกัดเวลาอย่างไม่สมเหตุสมผล
2. ปล่อยให้ผู้ใช้ไม่รู้ขั้นต่อไปหรือไม่แจ้งเวลาที่จำกัดไว้
3. ปล่อยให้ผู้ใช้สับสนผลของการทำรายการ
4. ทำให้บริการช่วยเหลือเข้าถึงยาก
5. ทิ้งให้ผู้ใช้สงสัยว่าส่งคำตอบอะไรไป

2. Autistic sprectum – การออกแบบสำหรับผู้ใช้ที่มีอาการออทิสติก

ควรทำ

1. ใช้สีที่เรียบง่าย
2. ใช้ภาษาที่เข้าใจง่าย
3. ใช้ประโยคที่เข้าใจง่าย และใช้หัวข้อย่อย
4. ใช้ข้อความบนปุ่มเพื่อบรรยายสิ่งที่กำลังจะทำ
5. จัดเรียงเนื้อหาอย่างเป็นระเบียบและเรียบง่าย

ไม่ควรทำ

1. ใช้สีสว่างฉูดฉาด
2. ใช้คำเปรียบเปรย หรือใช้สำนวน
3. จัดวางข้อความอัดแน่นจนเกินไป ไมมีช่องว่าง
4. ใช้ข้อความบนปุ่มคลุมเครือและคาดเดาไม่ได้
5. จัดเรียงเนื้อหาซับซ้อน ระเกะระกะ

3. Screen readers – การออกแบบสำหรับผู้ใช้ระบบอ่านออกเสียงบนหน้าจอ

ควรทำ

1. มีคำบรรยายภาพและอธิบายวิดีโอ โดยใช้แท็ก <alt>
2. วางโครงสร้างหน้าตามลำดับการอ่าน
3. ใช้ HTML5 เป็นโครงสำหรับใส่เนื้อหาเว็บไซต์
4. ทำให้สั่งงานด้วยแป้นพิมพ์เพียงอย่างเดียวได้
5. เขียนคำบรรยายลิ้งค์และหัวข้อให้สื่อความหมาย

ไม่ควรทำ

1. มีเนื้อหาอยู่แค่ในไฟล์เสียงหรือวิดีโอ
2. วางเนื้อหากระจัดกระจายโดยไม่จัดเรียง
3. พึ่งพาการจัดหน้าและขนาดตัวหนังสือเพื่อช่วยการอ่าน
4. บังคับให้ต้องใช้เม้าส์หรือการสัมผัสหน้าจอ
5. ใช้คำในหัวข้อและลิ้งค์ที่ไม่สื่อความหมาย

4. Low vision – การออกแบบสำหรับผู้ใช้ที่มีภาวะสายตาเลือนราง

ควรทำ

1. ใช้สีตัดพื้นหลังชัดเจน และขนาดตัวหนังสืออ่านออกง่าย
2. แสดงข้อมูลทั้งหมดบนเว็บเพจ
3. สื่อความหมายโดยใช้สี รูปร่าง และข้อความร่วมกัน
4. วางโครงสร้างหน้าตามลำดับการอ่าน เหมาะสำหรับผู้ใช้โปรแกรมซูมภาพในการอ่าน
5. วางปุ่มและคำแนะนำในตำแหน่งที่ใกล้กัน

ไม่ควรทำ

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

5. Dyslexia – การออกแบบสำหรับผู้ใช้ที่มีอาการดิสเล็กเซีย

ควรทำ

1. ใช้รูปภาพและแผนภาพเพื่อเสริมคำอธิบาย
2. จัดตัวหนังสือชิดซ้าย และจัดโครงสร้างหน้าให้มีความสม่ำเสมอ
3. ลองเสนอเนื้อหาเป็นรูปแบบอื่น เช่น วิดีโอหรือไฟล์เสียง
4. พยายามให้เนื้อหากระชับ อธิบายง่ายๆ และชัดเจน
5. อนุญาตให้ผู้ใช้ปรับความต่างสีพื้นกับตัวหนังสือได้เอง

ไม่ควรทำ

1. จัดวางข้อความอัดแน่นจนเกินไป ไมมีช่องว่าง
2. ขีดเส้นใต้ ใช้ตัวเอน หรือเขียนภาษาอังกฤษทั้งหมดด้วยตัวพิมพ์ใหญ่
3. ฝืนให้ผู้ใช้พยายามจำเรื่องจากหน้าที่แล้ว — ใช้การเท้าความหรือการสรุปใจความช่วยได้
4. คาดหวังการสะกดให้ถูก — ใช้ autocorrect หรือการเสนอคำใกล้เคียงเข้ามาช่วย
5. ใส่ข้อมูลจำนวนมากในพื้นที่เดียว

6. Physical or motor disabilities – การออกแบบสำหรับผู้ใช้ที่ขาดอวัยวะบางส่วนหรือเคลื่อนไหวไม่ได้

ควรทำ

1. ทำพื้นที่กดปุ่มให้มีขนาดใหญ่
2. เว้นพื้นที่ว่างระหว่างสิ่งที่กดได้บนหน้าจอ
3. ออกแบบให้ใช้งานกับแป้นพิมพ์หรือระบบเสียงพูดอย่างเดียวได้
4. คำนึงถึงการใช้งานบนมือถือและระบบสัมผัสหน้าจอ
5. เสนอทางรวบรัด เช่น ให้กรอกรหัสไปรษณีย์เพื่อให้หาที่อยู่ได้เร็วขึ้น

ไม่ควรทำ

1. ทำปุ่มขนาดเล็ก ทำให้ต้องใช้ความแม่นยำในการกดปุ่ม
2. รวมสิ่งที่กดได้หลายอย่างไว้ใกล้กัน
3. สร้างเนื้อหาเป็นชั้น ต้องเลื่อนเม้าส์หลายครั้ง
4. ให้เวลาในการทำรายการสั้นเกินไป (session time out)
5. ช่องกรอกข้อมูลมากเกินความจำเป็น ทำให้ต้องเลื่อนขึ้นลง

7. Deaf or hard of hearing – การออกแบบสำหรับผู้ที่สูญเสียการได้ยิน

ควรทำ

1. ใช้ภาษาที่เข้าใจง่าย
2. มีซับไตเติลหรือคำบรรยายเนื้อหาประกอบวิดีโอ
3. วางโครงสร้างเนื้อหาหน้าตามลำดับการอ่าน
4. แบ่งเนื้อหา หัวข้อรอง รูปและวิดีโอเป็นกลุ่มๆ
5. ควรมีตัวเลือกอื่นนอกจากการโทรศัพท์ ถ้าผู้ใช้ต้องการให้ติดต่อกลับ

ไม่ควรทำ

1. ใช้ศัพท์ยากหรือคำเปรียบเปรย
2. มีเนื้อหาอยู่แค่ในไฟล์เสียงหรือวิดีโอ
3. วางโครงสร้างหน้าหรือวางเมนูซับซ้อน
4. ปล่อยผู้ใช้งานอ่านเนื้อหาที่เรียงต่อเนื่องกันยาวๆ
5. ให้บริการช่วยเหลือผ่านช่องทางการโทรศัพท์เพียงอย่างเดียว

ดาวน์โหลดโปสเตอร์ภาษาอังกฤษ

อ้างอิงและแปลจาก
https://accessibility.blog.gov.uk

อ่านจบแล้ว เราแนะนำบทความนี้

• เครื่องมือ เช็ค Accessibility สำหรับ Designer
• ออกแบบยังไงให้รองรับคนตาบอดสี ?
• Web Accessibility คืออะไร ทำไมจึงสำคัญ