แจกฟรีโปสเตอร์ Web Accessibility

Web 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 – ผู้ที่สูญเสียการได้ยิน
designil accessibility image
How to design for accessibility image – English version

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

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

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

ควรทำ

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

ไม่ควรทำ

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

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

ควรทำ

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

ไม่ควรทำ

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

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

ควรทำ

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

ไม่ควรทำ

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

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

ควรทำ

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

ไม่ควรทำ

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

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

ควรทำ

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

ไม่ควรทำ

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

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

ควรทำ

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

ไม่ควรทำ

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

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

ควรทำ

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

ไม่ควรทำ

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

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


อ้างอิงและแปลจาก
https://accessibility.blog.gov.uk/2016/09/02/dos-and-donts-on-designing-for-accessibility/


สำหรับท่านที่สนใจเรียน UX กันตั้งแต่พื้นฐาน และไม่เคยมีความรู้มาก่อน ทาง Designil ได้เปิดคอร์สสอนสัมภาษณ์ User แบบเริ่มต้นแล้วนะครับ คอร์สแรกที่จะนำผู้สอนจากทั้งไทยและผู้ช่วยสอนแอดนัทที่จะบินจากออสเตรเลียมาแชร์ความรู้กัน

คอร์ส UX 101: User interview from scratch
สอน Interview กับ User จริง ใช้งานได้จริง วิธีสัมภาษณ์หา Insight พร้อมวิธีวิเคราะห์ข้อมูล ผู้สอนทำงานด้าน UX มามากกว่า 5 ปี ไม่เคยสอนที่ไหนมาก่อน!

Course outline
1. Pre-interview — ตีความโจทย์จากลูกค้า from requirements to hypothesis (goal & objectives)
2. Interviewing protocol — วิธีทำให้การสัมภาษณ์
3. Team interviewing technique
4. Analysis & Synthesis — การ debrief และรวบรวมข้อมูลจากการสัมภาษณ์หลายๆ วัน
5. Deliverables สอนการใช้เครื่องมือ
6. Wrapup & sharing

ดู Course outline ทั้งหมด อ่านข้อมูลเพิ่มเติมแบบเอกสารได้ที่นี่
http://bit.ly/ux101th-2

เหมาะสำหรับ
– ผู้ที่ไม่มีความรู้มาก่อนและสนใจในเรื่อง UX
– ผู้ที่สนใจในเรื่องของการทำ Interview สัมภาษณ์ผู้ใช้งาน
– ท่านอยากเรียนรู้การทำ UX แบบเริ่มต้นทำยังไง อะไรคือ UX ไปสัมภาษณ์ยังไง
หา User อย่างไร, การตั้งคำถาม Hypothesis อย่างไร, ทำ Interview เสร็จแล้ววิเคราะห์ข้อมูลยังไงได้บ้าง

ค่าเรียนราคาพิเศษ Early Bird – 6,900 บาท (สามารถแบ่งจ่ายได้สองงวด)
เรียนวันที่: วันอังคาร 25 กุมภาพันธ์ 2020
เวลา: 09.30 – 17.00 น.
สถานที่: The Knowledge Exchange center : KX
BTS วงเวียนใหญ่

✅ ลงทะเบียนเรียน
https://bitly.com/ux101th

About Author

0 Comment

Leave a comment