ภาพหน้าจอ App Store ที่เข้าถึงได้: contrast ขนาดตัวอักษร alt text
ภาพหน้าจอ App Store ไม่สามารถเรียกดูด้วย screen reader ได้เหมือนกับเว็บเพจ — Apple ไม่ได้แสดง alt text ของภาพหน้าจอต่อผู้ใช้โดยตรงแต่กฎการเข้าถึงด้านภาพ (contrast ขนาดตัวอักษรความเป็นอิสระของสี) ใช้ได้อย่างแน่นอนและกฎเหล่านั้นเป็นกฎเดียวกับที่ควบคุมความสามารถอ่านได้ที่ขนาด thumbnail คุ้มค่าที่จะทำทั้งสองอย่างเพราะเป็นงานเดียวกัน
Contrast: WCAG AA เป็นพื้นฐาน
อัตราส่วน contrast ตามมาตรฐาน WCAG AA:
- ตัวอักษรปกติ: ขั้นต่ำ 4.5:1 เทียบกับพื้นหลัง
- ตัวอักษรขนาดใหญ่ (24pt+ ปกติหรือ 18pt+ ตัวหนา): ขั้นต่ำ 3:1
- องค์ประกอบกราฟิก / UI controls: 3:1
ใช้เครื่องตรวจ contrast — มีให้ใช้ฟรีหลายตัว — กับทุกคำบรรยายเทียบกับพื้นหลัง panel ที่มันวางอยู่ถ้าพื้นหลังเป็น gradient ให้ตรวจที่จุดมืดที่สุดและสว่างที่สุดของ gradient ที่คำบรรยายวางอยู่
ความล้มเหลวที่พบบ่อย: ตัวอักษรสีขาวบน gradient จากสีส้มอ่อนไปสีส้มเข้มที่จุดที่คำบรรยายวางบนสีส้มอ่อน contrast จะลดลงต่ำกว่า 4.5:1 และตัวอักษรจะหายไปที่ขนาด thumbnail
ขนาดตัวอักษรที่ thumbnail
ภาพหน้าจอ App Store แสดงผลในหลายขนาด:
- ขนาดเต็มบน product page (กว้างประมาณ 1290 px)
- preview ในผลการค้นหา (กว้างประมาณ 600 px)
- thumbnail ในผลการค้นหา (กว้างประมาณ 300 px)
ถ้าคำบรรยายของคุณมีขนาด 60px ในไฟล์ออกแบบที่ 1290 × 2796 มันจะแสดงผลที่ประมาณ 14px ใน thumbnail ค้นหา 300px ขนาด 14px ต่ำกว่าขนาดขั้นต่ำที่แนะนำสำหรับความสามารถอ่านได้วิธีแก้: ออกแบบคำบรรยายที่ 80-100px เพื่อให้แสดงผลที่ 18-22px ใน thumbnail โดยเฉพาะสำหรับ panel 1-3 ที่แสดงในการค้นหา
ความเป็นอิสระของสี
อย่าพึ่งพาสีเพียงอย่างเดียวในการสื่อสารข้อมูลการละเมิดที่พบบ่อยที่สุด: ตัวอักษรในสีที่แตกต่างจากพื้นหลังด้วยเฉดสีเท่านั้น (ตัวอักษรสีแดงบนพื้นหลังสีเขียวเป็นต้น) ผู้ที่มีอาการตาบอดสีแดง-เขียวจะเห็นเป็นสีโคลน
ทดสอบ: ถ้าคุณแปลงภาพหน้าจอเป็นโทนสีเทาคุณยังอ่านทุกคำบรรยายได้หรือไม่? ถ้าใช่คุณมีความเป็นอิสระของสีถ้าไม่ให้เพิ่มความแตกต่างของความสว่างไม่ใช่แค่ความแตกต่างของเฉดสี
Alt text ใน App Store Connect
App Store Connect ไม่แสดง alt text ของภาพหน้าจอในแบบเดียวกับที่เว็บเพจแสดงแอตทริบิวต์ alt แต่ App Store Connect มีฟิลด์ "accessibility tags" ต่อภาพหน้าจอที่ใช้โดยผู้ใช้ VoiceOver ที่เรียกดู App Store กรอกข้อมูลนั้นคำอธิบายสั้นๆว่าภาพหน้าจอแสดงอะไร: "หน้าหลักพร้อมภาพรวมค่าใช้จ่ายรายเดือน" แทนที่จะเป็น "Screenshot 1"
นี่คือการชนะด้านการเข้าถึงที่ใหญ่ที่สุดเพราะนักพัฒนาแทบไม่ทำผู้ใช้ VoiceOver ที่เรียกดู App Store ในปัจจุบันได้ยิน "screenshot 1, screenshot 2" สำหรับแอปส่วนใหญ่การเพิ่มคำอธิบายสองสามประโยคต่อ panel ทำให้รายการของคุณใช้งานได้ดีขึ้นอย่างมากสำหรับผู้ชมกลุ่มนั้น
รูปแบบที่ควรหลีกเลี่ยง: ตัวอักษรเล็กฟอนต์ประดับ
ฟอนต์ประดับ (สคริปต์ลายมือฟอนต์บางมาก) มักล้มเหลวทั้งด้านการเข้าถึงและการทดสอบ thumbnail พร้อมกันเส้นบางที่ดูสวยงามที่ขนาดเต็มจะกลายเป็นอ่านไม่ออกที่ 300px และอ่านไม่ได้สำหรับผู้ใช้ที่มีสายตาเลือนราง
ใช้สไตล์ประดับเหล่านี้สำหรับคำเน้นหนึ่งคำต่อคารูเซลเป็นอย่างมากคำบรรยายและข้อความสำคัญใดๆต้องการฟอนต์ที่มีน้ำหนักเส้นสม่ำเสมอที่ขนาดที่คุณสนใจ — grotesque sans-serif สมัยใหม่ส่วนใหญ่ (Inter, SF Pro, Roboto) ใช้ได้
ตำแหน่งคำบรรยายและพื้นที่ปลอดภัย
Apple บางครั้งวาง UI ทับบนคารูเซล App Store (ปุ่ม "Get" ชิป age rating ปุ่ม "Open" หลังติดตั้ง) ถ้าคำบรรยายของคุณอยู่ในพื้นที่เหล่านั้นมันจะถูกบดบังเก็บคำบรรยายในโซนปลอดภัย: 60px จากแต่ละด้าน 80px จากด้านบนและ 200px ว่างที่ด้านล่างสำหรับ UI ของ App Store
สิ่งที่ควรทดสอบก่อน ship
- รันทุกคำบรรยายผ่านเครื่องตรวจ contrast เทียบกับพื้นหลัง panel
- ดูภาพหน้าจอที่ความกว้าง 300px ใน thumbnail simulator (หรือปรับขนาดใน Figma) ทุกคำบรรยายควรยังอ่านได้
- ทดสอบโทนสีเทาเพื่อความเป็นอิสระของสี
- เขียน accessibility tags สำหรับแต่ละ panel ใน App Store Connect
- ถ้าคุณมีผู้ใช้ VoiceOver ในกลุ่มทดสอบให้ขอให้เรียกดูรายการของคุณและรายงาน
ทำไมสิ่งนี้สำคัญเกินกว่าด้านการเข้าถึง
กฎ contrast และขนาดที่ WCAG กำหนดไว้มาจากการวิจัยการมองเห็นของมนุษย์ไม่ใช่ตามอำเภอใจแต่เป็นเกณฑ์ที่ผู้ใช้จำนวนมากไม่สามารถอ่านข้อความได้อย่างสบายการออกแบบสำหรับ AA หมายถึงการออกแบบสำหรับประชากรที่รวมถึงผู้ใช้สูงอายุผู้ใช้บนหน้าจอกลางแดดสว่างผู้ใช้ที่มีปัญหาสายตาเล็กน้อยที่ไม่ได้แก้ไขรวมถึงทุกคนที่เลื่อนดูการค้นหาอย่างรวดเร็ว
กฎเดียวกันที่ช่วยให้ผู้ใช้ที่มีสายตาเลือนรางอ่านภาพหน้าจอได้ยังช่วยผู้ใช้ที่เลื่อนดู App Store บนรถไฟกลางแดดปัญหาเดียวกันวิธีแก้เดียวกัน