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

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

Tableau รองรับการควบคุมหลายอย่างเพื่อให้คุณสร้างมุมมองที่สามารถเข้าถึงได้และช่วยให้คุณเป็นไปตามข้อกำหนดของมาตรา 508 ของสหรัฐอเมริกาและแนวทางด้านการช่วยเหลือพิเศษเกี่ยวกับเนื้อหาเว็บ (WCAG 2.1 AA) ตรวจสอบให้แน่ใจว่าเนื้อหาที่แชร์จาก Tableau Cloud หรือ Tableau Server จะเป็นไปตามขั้นตอนในมุมมองของผู้เขียนสำหรับการช่วยเหลือพิเศษ และเป็นไปตามหลักการ WCAG 2.1 AA ต่อไปนี้:

  • รับรู้ได้ - ส่วนประกอบข้อมูลและอินเตอร์เฟซผู้ใช้จะต้องนำเสนอให้กับผู้ใช้ในลักษณะที่พวกเขาสามารถรับรู้ได้ พิจารณารวมทางเลือกข้อความและวิธีทางเลือกที่สามารถนำเสนอเนื้อหาได้

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

ปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดที่อธิบายไว้ในบทความนี้และผนวกขั้นตอนที่อธิบายไว้ในมุมมองของผู้เขียนสำหรับการช่วยเหลือพิเศษเพื่อสร้างมุมมองที่เข้าถึงได้สำหรับผู้ใช้ทั้งหมดของคุณเมื่อเผยแพร่บน Tableau Server หรือ Tableau Cloud

ทำทุกอย่างให้ง่ายเข้าไว้

หลักการ WCAG 2.1 AA: เข้าใจได้

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

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

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

    ตัวอย่าง: ตัวอย่างนี้แสดงมุมมองแผนภูมิแท่งสองแบบเพื่อแสดงความแตกต่างระหว่างมุมมองแบบละเอียดและมุมมองแบบรวม

    ไม่สามารถเข้าถึงได้ง่าย - เครื่องหมายมากเกินไปเข้าถึงได้ง่ายขึ้น - มุมมองแบบรวม
    แผนภูมิคอลัมน์ที่มี 5,000 เครื่องหมายแผนภูมิคอลัมน์ที่มีป้ายกำกับข้อความและเครื่องหมายน้อยลง
    • มุมมองประเภทนี้มีรายละเอียดมากทำให้เข้าใจได้ยากขึ้น

    • มุมมองแสดงเครื่องหมายมากกว่า 5,000 รายการและไม่รวมข้อความที่เพียงพอที่จะบ่งชี้การแสดงแทนด้วยเครื่องหมายที่แตกต่างกัน

    • ทำให้ผู้ใช้ที่ต้องใช้โปรแกรมอ่านหน้าจอใช้งานได้ยากเกินไป

    • ตัวอย่างนี้แสดงมุมมองเดียวกันที่มีข้อมูลแบบรวมที่ระดับสูง

    • จุดข้อมูลสำคัญยังคงรวมไว้อยู่ แต่ตอนนี้ผู้ใช้จะอ่านและเข้าใจได้ง่ายขึ้น

    • จำนวนของเครื่องหมายลดลงจากมากกว่า 5000 รายการลงเหลือ 20 รายการ

    • ผู้ใช้ยังคงสามารถอ่านรายละเอียดที่สำคัญสำหรับเครื่องหมายโดยการวางโฟกัสบนมุมมอง จากนั้นกดปุ่ม Enter เพื่อเปิดหน้า ดูข้อมูล

     

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

  • จำกัดจำนวนเครื่องหมายไว้เฉพาะที่เน้นจุดข้อมูลที่สำคัญที่สุดเท่านั้น

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

 

ชื่อและคำอธิบายภาพ

หลักการ WCAG 2.1 AA: รับรู้ได้ เข้าใจได้

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

  • คิดเกี่ยวกับมุมมองของคุณเป็นส่วนเสริมของข้อความที่คุณใช้เพื่ออธิบาย

  • ใช้ข้อความในชื่อเรื่องและคำอธิบายภาพเพื่ออธิบายการแสดงภาพของคุณและสิ่งที่คุณนำเสอ

  • ใช้ภาษาที่ง่ายและเข้าใจได้ง่าย หลีกเลี่ยงภาษีคลุมเคลือ คำย่อ หรือตัวย่อ

  • อย่ารวมคำอย่างเช่น "รูปของ" หรือ "ภาพของ" ในคำอธิบายข้อความของคุณ เนื่องจากโปรแกรมอ่านหน้าจออาจรวมข้อมูลดังกล่าวไว้แล้วในบางครั้ง

  • หลีกเลี่ยงการใช้ตัวอักษรพิมพ์ใหญ่ทั้งหมด (เช่น ส่วนหัวหรือชื่อเรื่อง) เนื่องจากอาจทำให้อ่านได้ยาก

    ตัวอย่าง: ตัวอย่างนี้แสดงแผนภูมิแท่งสองแบบ แบบหนึ่งใช้ข้อความน้อยมากขณะที่อีกแบบใช้ชื่อเรื่องและคำอธิบายภาพเพื่อเพิ่มบริบท

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

    • เครื่องหมายถูกแยกความแตกต่างด้วยสีและขนาด แต่หากไม่มีข้อความเพิ่มเติม บริบทของเครื่องหมายเหล่านี้อาจเข้าใจได้ยาก

    • ไม่มีคำอธิบายภาพหรือข้อความอธิบายอื่นๆ ที่จะช่วยอธิบายมุมมองนี้

    • ตัวอย่างนี้แสดงมุมมองเดียวกัน แต่มีข้อความอธิบายเพิ่มเติมทั้งแบบชื่อและคำอธิบายภาพ

    • มีสเกลสีคอนทราสต์และตัวแยกความแตกต่างของขนาดแบบเดียวกัน แต่มีป้ายกำกับเพิ่มเข้ามาในเครื่องหมายแท่งเพื่อให้บริบทเพิ่มเติม

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

 

ข้อความเพิ่มเติม

หลักการ WCAG 2.1 AA: รับรู้ได้ เข้าใจได้

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

ใช้แนวทางปฏิบัติต่อไปนี้เมื่อเพิ่มข้อความเพิ่มเติม:

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

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

  • ถ้าคุณรวมข้อความลิงก์ในมุมมองของคุณ ให้ใช้ข้อความที่อธิบายปลายทางที่ลิงก์จะนำผู้ใช้ไปยัง ตัวอย่างเช่น ใช้ข้อความลิงก์อย่างเช่น “สถิติภาวะโลกร้อนสำหรับปี 1990-2000” หลีกเลี่ยงการใช้คำอย่างเช่น "คลิกที่นี่", "เพิ่มเติม" หรือ "ข้อมูลเพิ่มเติม" ตัวอย่างข้อความลิงก์เหล่านี้เป็นแบบทั่วไปมาก และอาจทำให้ผู้ใช้สับสนได้

  • ตัวอย่าง: ตัวอย่างต่อไปนี้แสดงแผนภูมิฟองอากาศสองแบบ มุมมองหนึ่งรายการใช้เฉพาะข้อความที่แสดงตามค่าเริ่มต้นเมื่อสร้างมุมมอง และมุมมองหนึ่งรายการมีข้อความเพิ่มเติมที่เพิ่มบริบททั่วทั้งมุมมองเพื่อช่วยสื่อความหมาย

    ไม่สามารถเข้าถึงได้ง่าย - ข้อความน้อยเกินไปเข้าถึงได้ดีขึ้น - ข้อความเชิงอธิบายมากขึ้น
    แผนภูมิฟองอากาศที่มีข้อความน้อยมากแผนภูมิฟองอากาศที่มีชื่อ คำอธิบายภาพ และข้อความเพิ่มเติม
    • มุมมองนี้ใช้ข้อความค่าเริ่มต้นเท่านั้นสำหรับชื่อเรื่องของชีตและป้ายกำกับเริ่มต้นสำหรับตัวกรองและคำอธิบาย

    • เครื่องหมายถูกแยกความแตกต่างด้วยสีและขนาดอย่างเดียว

    • ไม่มีคำอธิบายภาพหรือข้อความเชิงอธิบายอื่นๆ รวมไว้ในมุมมองเพื่อช่วยในการให้บริบท

    • ตัวอย่างนี้แสดงมุมมองเดียวกัน แต่มีข้อความเชิงอธิบายเพิ่มเติมด้วย

    • มีการเพิ่มข้อความไปยังชื่อและคำอธิบายภาพเพื่ออธิบายความสัมพันธ์ของเครื่องหมายและให้บริบทเพิ่มเติมเกี่ยวกับการนำเสนอของมุมมอง

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

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

 

สีและคอนทราสต์

หลักการ WCAG 2.1 AA: รับรู้ได้ เข้าใจได้

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

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

  • สำหรับเครื่องหมายเส้น ให้ใช้ตัวเลือกเพิ่มเติม เช่น รูปร่าง ขนาด และป้ายกำกับเพื่อช่วยแยกความแตกต่าง

  • ใช้เครื่องมือตัววิเคราะห์คอนทราสต์(ลิงก์จะเปิดในหน้าต่างใหม่)เพื่อช่วยเลือกสีและพื้นหลังที่ดีที่สุดที่มีอัตราส่วนคอนทราสต์เพียงพอ ให้แน่ใจว่าคอนทราสต์ของสีมีเพียงพอและสอดคล้องกับมาตรฐานอัตราส่วนสีที่ 4.5:1 (3:1 สำหรับข้อความขนาดใหญ่)

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

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

    • เครื่องหมายในมุมมองไม่ได้ใช้ชุดสีที่เข้าถึงได้อย่างสมบูรณ์สำหรับผู้ใช้ที่มีความบกพร่องในการมองเห็น

    • ตัวอย่างนี้แสดงมุมมองเดียวกัน แต่ใช้ทั้งสีและรูปร่างเพื่อระบุเครื่องหมาย

    • คำอธิบายสีและคำอธิบายรูปร่างพร้อมชื่อเรื่องที่ชัดเจนจะระบุการแทนด้วยสีและรูปร่างในมุมมองได้

หากต้องกราข้อมูลและตัวอย่างเกี่ยวกับวิธีสร้างมุมมองที่ใช้สีเพื่อช่วยแยกความแตกต่างของเครื่องหมาย โปรดดูมุมมองของผู้เขียนสำหรับการช่วยเหลือพิเศษในมุมมองของผู้เขียนสำหรับการช่วยเหลือพิเศษ

 

การเผยแพร่มุมมองของคุณ

หลักการ WCAG 2.1 AA: รับรู้ได้ ใช้งานได้ เข้าใจได้

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

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

ขอบคุณสำหรับข้อเสนอแนะของคุณส่งข้อเสนอแนะของคุณเรียบร้อยแล้ว ขอขอบคุณ