ความสามารถในการเข้าถึงสำหรับธีม
เมื่อคุณปรับแต่งธีม โปรดเลือกการออกแบบและเนื้อหาที่ช่วยให้ร้านค้าออนไลน์ของคุณสามารถเข้าถึงได้ เว็บไซต์ที่สามารถเข้าถึงได้คือเว็บไซต์ที่ออกแบบมาเพื่อให้ทุกคน ซึ่งรวมถึงผู้พิการสามารถใช้งานได้ การตัดสินใจเลือกสิ่งต่างๆ สำหรับร้านค้าออนไลน์ของคุณโดยคำนึงถึงความสามารถในการเข้าถึงจะช่วยให้คุณมอบประสบการณ์ที่ครอบคลุมสำหรับลูกค้าของคุณทุกคน
แนวทางด้านล่างนี้สร้างขึ้นโดยคำนึงถึงแนวทางการเข้าถึงเนื้อหาบนเว็บ (WCAG) เนื่องจากการสร้างเว็บไซต์ที่สามารถเข้าถึงได้นั้นมีปัจจัยมากมายที่ต้องพิจารณา การปฏิบัติตามแนวทางด้านล่างเพียงอย่างเดียวจึงไม่รับประกันว่าร้านค้าออนไลน์ของคุณจะสามารถเข้าถึงได้อย่างสมบูรณ์ คุณสามารถดูข้อมูลเพิ่มเติมเกี่ยวกับความสามารถในการเข้าถึงเว็บได้โดยไปที่เว็บไซต์ WCAG หรือดูแหล่งข้อมูลที่ระบุไว้ด้านล่าง
ในหน้านี้
ความสามารถในการเข้าถึงข้อความ
สิ่งสำคัญคือข้อความบนร้านค้าออนไลน์ของคุณต้องอ่านได้ง่ายสำหรับลูกค้าที่มีความบกพร่องทางสายตาหรือผู้ที่มีปัญหาในการอ่านข้อความจำนวนมาก
ความเปรียบต่างของสี
เมื่อคุณแก้ไขสีสำหรับร้านค้าออนไลน์ของคุณ โปรดตรวจสอบให้แน่ใจว่าข้อความทั้งหมดของคุณสามารถเข้าถึงได้โดยลูกค้าที่ตาบอดสีหรือมีความบกพร่องทางสายตาในลักษณะอื่นๆ ลูกค้าเหล่านี้ต้องอาศัยความเปรียบต่างของสีที่เพียงพอในการแยกแยะสิ่งต่างๆ ด้วยสายตา คุณสามารถใช้เครื่องมือวัดอัตราส่วนความเปรียบต่างออนไลน์เพื่อตรวจสอบความเปรียบต่างของส่วนต่างๆ ในร้านค้าของคุณได้
ในตัวอย่างด้านล่าง ข้อความมีอัตราส่วนความเปรียบต่าง 2.4:1 เมื่อเทียบกับพื้นหลัง และอ่านได้ยากสำหรับลูกค้าบางราย
ในตัวอย่างถัดไป ข้อความมีอัตราส่วนความเปรียบต่าง 4.8:1 และอ่านได้ง่ายกว่าสำหรับลูกค้าจำนวนมาก
ทดสอบความเปรียบต่างของข้อความทั้งหมด ซึ่งรวมถึงข้อความเนื้อหา หัวเรื่อง ลิงก์ และช่องแบบฟอร์ม โปรดใช้แนวทางต่อไปนี้
- สีของข้อความเนื้อหาและข้อความบนปุ่มต้องมีอัตราส่วนความเปรียบต่างอย่างน้อย 4.5:1 เมื่อเทียบกับพื้นหลัง
- สีของหัวเรื่องและข้อความขนาดใหญ่อื่นๆ (ขนาดแบบอักษร 24 px ขึ้นไป) ต้องมีอัตราส่วนความเปรียบต่างอย่างน้อย 3:1 เมื่อเทียบกับพื้นหลัง
- สีของข้อความทั้งหมดที่อยู่บนรูปภาพ ซึ่งรวมถึงสไลด์โชว์ แบนเนอร์ และวิดีโอ ต้องมีอัตราส่วนความเปรียบต่างที่เพียงพอเมื่อเทียบกับพื้นหลัง สำหรับข้อความขนาดใหญ่ (ขนาดแบบอักษร 24 px ขึ้นไป) ความเปรียบต่างต้องมีอย่างน้อย 3:1 สำหรับข้อความขนาดเล็ก ความเปรียบต่างต้องมีอย่างน้อย 4.5:1
- สีขององค์ประกอบที่ไม่ใช่ข้อความ ซึ่งรวมถึงเส้นขอบของช่องป้อนข้อมูลและไอคอน ต้องมีอัตราส่วนความเปรียบต่างอย่างน้อย 3:1 เมื่อเทียบกับพื้นหลัง
หัวเรื่องข้อความ
เมื่อคุณเพิ่มหัวเรื่องไปยังหน้าของคุณด้วยเครื่องมือแก้ไข Rich Text สิ่งสำคัญคือต้องเรียงตามลำดับ (1 - 6) เทคโนโลยีสิ่งอํานวยความสะดวกจะใช้หัวเรื่องเพื่อสื่อสารวิธีการจัดระเบียบเนื้อหาของหน้า การข้ามระดับ เช่น การใช้หัวเรื่องระดับ 4 ต่อจากหัวเรื่องระดับ 2 อาจทำให้ผู้ใช้สับสนได้ โปรดใช้แนวทางต่อไปนี้
- ใช้หัวเรื่องตามลำดับและไม่ข้ามระดับ
ขนาดและการจัดวางข้อความ
เมื่อคุณแก้ไขการตั้งค่ารูปแบบตัวอักษรของธีม ให้ตรวจสอบว่าข้อความมีขนาดใหญ่พอที่ลูกค้าจะอ่านได้สบายตา
ข้อความควรมีระยะห่างระหว่างคำและตัวอักษรที่สม่ำเสมอเพื่อให้อ่านง่าย ในตัวอย่างด้านล่าง การจัดแนวข้อความเป็นแบบจัดชิดขอบ ซึ่งสร้างระยะห่างระหว่างคำที่ไม่สม่ำเสมอ
ในตัวอย่างถัดไป การจัดแนวข้อความเป็นแบบจัดชิดซ้าย ซึ่งสร้างระยะห่างระหว่างคำที่สม่ำเสมอ
เมื่อปรับแต่งขนาดและการจัดแนวของข้อความ ให้ใช้แนวทางต่อไปนี้
- ขนาดแบบอักษรขั้นต่ำสำหรับเนื้อหาข้อความคือขนาดเทียบเท่า 16 px
- การจัดแนวข้อความจะไม่เป็นการจัดชิดขอบ ข้อความที่จัดชิดขอบจะสร้างระยะห่างระหว่างคำที่ไม่สม่ำเสมอ
ลิงก์ข้อความ
ลิงก์ข้อความควรมีการขีดเส้นใต้หรือมีรูปแบบที่โดดเด่นกว่าข้อความปกติ เนื่องจากลูกค้าบางรายมีปัญหาในการมองเห็นสี คุณจึงไม่สามารถอาศัยการเปลี่ยนสีเพียงอย่างเดียวเพื่อแยกลิงก์ออกจากข้อความปกติได้
ลิงก์ข้อความควรเปิดในแท็บเดียวกัน ลิงก์ที่เปิดในแท็บหรือหน้าต่างใหม่อาจทำให้เกิดความสับสน โดยเฉพาะบนมือถือซึ่งมองไม่เห็นหน้าต่างเก่า และไม่ครอบคลุมลูกค้าทุกกลุ่ม โดยเฉพาะลูกค้าที่ใช้การขยายหน้าจอหรือมีความรู้ทางเทคนิคน้อย
หากคุณแก้ไขสไตล์ชีตของธีม โปรดตรวจสอบให้แน่ใจว่าคุณไม่ได้ลบสไตล์ของลิงก์ข้อความออกไป ให้ใช้แนวทางต่อไปนี้
- ลิงก์ข้อความต้องมีขีดเส้นใต้หรือมีลักษณะเด่นอื่นๆ ที่มองเห็นได้ซึ่งไม่ใช่แค่สี เพื่อให้ลูกค้าสามารถแยกลิงก์ออกจากข้อความปกติได้
- เมื่อคลิกแล้ว ลิงก์ข้อความจะเปิดในแท็บเดียวกัน
ข้อความแสดงแทนสำหรับรูปภาพ
เมื่อคุณเพิ่มรูปภาพไปยังร้านค้าออนไลน์ของคุณ สิ่งสำคัญคือการทำให้ลูกค้าที่ตาบอดหรือมีสายตาเลือนรางสามารถเข้าถึงรูปภาพเหล่านั้นได้ คุณสามารถทำได้โดยการเพิ่มข้อความแสดงแทนที่อธิบายรูปภาพแต่ละรูปอย่างถูกต้อง ลูกค้าที่ใช้โปรแกรมอ่านหน้าจอจะอาศัยข้อความแสดงแทนเพื่อสื่อสารเนื้อหาของรูปภาพในร้านค้าออนไลน์ของคุณ
คุณสามารถเพิ่มข้อความแสดงแทนไปยังรูปภาพสินค้าของคุณได้จากส่วนผู้ดูแล Shopify และเพิ่มข้อความแสดงแทนไปยังรูปภาพอื่นๆ ในธีมของคุณจากตัวแก้ไขธีม
เมื่อคุณเพิ่มข้อความแสดงแทนไปยังรูปภาพ แนวทางปฏิบัติที่ดีคือให้ลองจินตนาการว่าคุณกำลังอธิบายรูปภาพให้คนที่หลับตาอยู่ฟัง ช่วยให้พวกเขาสร้างภาพในใจ วิธีการอธิบายรูปภาพจะขึ้นอยู่กับบริบทของเว็บเพจของคุณด้วย ตัวอย่างเช่น คุณอาจอธิบายรูปภาพแตกต่างกันไปหากธุรกิจของคุณเป็นบริษัททัวร์เมื่อเทียบกับร้านขายอุปกรณ์กิจกรรมกลางแจ้ง โปรดพิจารณารูปภาพต่อไปนี้
สำหรับบริษัททัวร์ คุณอาจอ้างถึงประเทศและภูมิภาคที่เพื่อนสองคนกำลังเดินทาง และชื่อของมหาสมุทรหรือทะเลที่พวกเขากำลังมองอยู่ ในทางกลับกัน สำหรับร้านขายอุปกรณ์กิจกรรมกลางแจ้ง คุณอาจมุ่งเน้นไปที่แบรนด์และฟีเจอร์ของเป้ของเพื่อนทั้งสองคน
หากธุรกิจของคุณคือบริษัททัวร์ ตัวอย่างของข้อความแสดงแทนที่ไม่ดีอาจเป็น “คนสองคนอยู่หน้ามหาสมุทร” สำหรับบริษัททัวร์แห่งเดียวกัน ตัวอย่างของข้อความแสดงแทนที่ดีอาจเป็น “เพื่อนสองคนกำลังเดินทางในเมืองลากอส ประเทศโปรตุเกส พลางมองออกไปยังอ่าวทรายของ Praia do Camilo ในวันที่แดดจ้า”
ความสามารถในการเข้าถึงสไลด์โชว์และวิดีโอ
เมื่อคุณเพิ่มวิดีโอไปยังร้านค้าออนไลน์ของคุณ โปรดตรวจสอบให้แน่ใจว่าคุณได้คำนึงถึงความต้องการของลูกค้าที่มีสายตาเลือนราง ลูกค้าที่หูหนวกหรือมีปัญหาในการได้ยิน หรือลูกค้าที่อาจอ่อนไหวต่อโรคที่เกี่ยวกับระบบการทรงตัว
ลูกค้าเหล่านี้บางรายต้องอาศัยความสามารถในการอ่านออกเสียงข้อความของโปรแกรมอ่านหน้าจอ ซึ่งจะอ่านเนื้อหาของเว็บเพจออกมาดังๆ เสียงเพิ่มเติมจากวิดีโอและเพลง โดยเฉพาะอย่างยิ่งเมื่อเล่นขึ้นมาโดยไม่คาดคิด อาจทำให้ประสบการณ์การใช้งานนี้ทำได้ยาก สำหรับลูกค้าที่หูหนวกหรือมีปัญหาในการได้ยิน เป็นความคิดที่ดีที่จะเพิ่มคำบรรยายแทนเสียงลงในวิดีโอของคุณเพื่อให้ลูกค้าเหล่านั้นสามารถเข้าถึงเนื้อหาได้
ลูกค้าที่มีโรคเกี่ยวกับระบบการทรงตัวอาจมีอาการเวียนศีรษะจากเนื้อหาที่เคลื่อนไหว ด้วยเหตุนี้จึงเป็นเรื่องสำคัญที่สไลด์โชว์และวิดีโอจะไม่เล่นโดยอัตโนมัติ และลูกค้าสามารถควบคุมสไลด์โชว์ด้วยปุ่มควบคุมได้
สไลด์โชว์
เมื่อคุณเพิ่มสไลด์โชว์ไปยังร้านค้าออนไลน์ของคุณ ให้ใช้แนวทางต่อไปนี้
- สไลด์โชว์ไม่เล่นโดยอัตโนมัติ
- หากสไลด์โชว์เล่นโดยอัตโนมัติ ก็จะต้องมีส่วนควบคุมสไลด์โชว์เพื่อให้ลูกค้าสามารถหยุดชั่วคราว เลื่อน หรือหยุดสไลด์โชว์ได้
วิดีโอ
เมื่อคุณเพิ่มวิดีโอไปยังร้านค้าออนไลน์ของคุณ ให้ใช้แนวทางต่อไปนี้
- วิดีโอไม่เล่นโดยอัตโนมัติ
- หากวิดีโอเล่นโดยอัตโนมัติ เสียงของวิดีโอก็จะถูกปิดไว้
- สำหรับวิดีโอที่มีเสียง วิดีโอจะต้องมองเห็นได้เต็มที่และไม่ถูกบดบังโดยองค์ประกอบอื่นๆ ของหน้า ซึ่งจะช่วยให้คำบรรยายแทนเสียงยังคงมองเห็นได้
- สำหรับวิดีโอที่มีบทสนทนา จะต้องมีข้อความถอดเสียงให้ใช้งาน โดยจะรวมอยู่ในหน้าเว็บหรือในลิงก์ที่ไปยังหน้าแยกต่างหาก
แนวทางเหล่านี้ใช้กับวิดีโอที่อยู่ในสไลด์โชว์ด้วยเช่นกัน
การรองรับการใช้งานผ่านแป้นพิมพ์
ลูกค้าที่มีความบกพร่องทางการมองเห็นหรือการเคลื่อนไหวอาจใช้แป้นพิมพ์เพื่อนำทางและทำงานต่างๆ ให้เสร็จสิ้นทางออนไลน์ ลูกค้าเหล่านี้อาศัยตัวบ่งชี้ที่มองเห็นได้เพื่อแสดงตำแหน่งโฟกัสของแป้นพิมพ์บนเว็บเพจ ในตัวอย่างด้านล่าง ช่องอีเมลจะมีตัวบ่งชี้โฟกัสที่มองเห็นได้
หากคุณแก้ไขสไตล์ชีตของธีม โปรดตรวจสอบให้แน่ใจว่าคุณไม่ได้ลบสไตล์โฟกัสของแป้นพิมพ์ออกจากองค์ประกอบใดๆ ของหน้า ให้ใช้แนวทางต่อไปนี้
- องค์ประกอบของหน้าที่โต้ตอบได้ทั้งหมดจะมีตัวบ่งชี้ที่มองเห็นได้ชัดเจนเมื่อมีโฟกัสของแป้นพิมพ์ องค์ประกอบเหล่านี้ได้แก่ ลิงก์ ปุ่ม และช่องแบบฟอร์ม
แหล่งข้อมูล
หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับความสามารถในการเข้าถึงเว็บสำหรับหัวข้อที่กล่าวถึงในบทความนี้ โปรดดูแหล่งข้อมูลต่อไปนี้
แหล่งข้อมูลเกี่ยวกับคอนทราสต์ของสี
- สีที่มีคอนทราสต์ที่ดี ซึ่งเป็นบทความจาก Web Accessibility Initiative
- Contrast Ratio ซึ่งเป็นเครื่องมือออนไลน์ที่คุณสามารถใช้เพื่อหาอัตราส่วนคอนทราสต์ระหว่างสองสี
- Color Contrast Analyzer ซึ่งเป็นแอปพลิเคชันอัตราส่วนคอนทราสต์สำหรับดาวน์โหลดที่พัฒนาโดย the Paciello Group
แหล่งข้อมูลเกี่ยวกับข้อความ
- ขนาดแบบอักษร 16 พิกเซล: สำหรับเนื้อหาข้อความ ขนาดที่เล็กกว่านี้คือความผิดพลาดราคาแพง ซึ่งเป็นบทความจาก Smashing Magazine
- การจัดแนวข้อความ ซึ่งเป็นบทความจาก Web AIM
- ลักษณะของลิงก์ ซึ่งเป็นบทความจาก Web AIM
- บทความเรื่อง Using Headings for Content Structure จาก Web AIM
แหล่งข้อมูลเกี่ยวกับข้อความแสดงแทน
- บทความเรื่อง Text to Speech จาก Web Accessibility Initiative
- บทความเรื่อง Alternative Text จาก Web AIM
- บทความเรื่อง Considerations when writing alt text บน Medium
แหล่งข้อมูลเกี่ยวกับสไลด์โชว์และวิดีโอ
- บทความเรื่อง A Primer to Vestibular Disorders จาก The A11Y Project
- บทความเรื่อง Text to Speech จาก Web Accessibility Initiative
- บทความเรื่อง Video Captions จาก Web Accessibility Initiative
- บทความเรื่อง Use automatic captioning จากความช่วยเหลือของ YouTube
- บทความเรื่อง Captions and subtitles จากศูนย์ช่วยเหลือของ Vimeo
- บทความเรื่อง Carousel usability จาก Nielsen Norman Group
แหล่งข้อมูลเกี่ยวกับการรองรับคีย์บอร์ด
- บทความเรื่อง Keyboard Compatibility จาก Web Accessibility Initiative
- บทความเรื่อง Introduction to Focus จาก Google Developers