การเข้าถึงสำหรับธีม

หน้านี้พิมพ์ขึ้นเมื่อ09年5月,2023年หากต้องการเวอร์ชันปัจจุบันโปรดไปที่https://help.shopify.com/th/manual/online-store/themes/customizing-themes/accessibility

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

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

ในหน้านี้

การเข้าถึงข้อความ

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

ความคมชัดของสี

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

ในตัวอย่างด้านล่างข้อความมีอัตราความคมชัด2.4:1เมื่อเทียบกับพื้นหลังซึ่งลูกค้าบางรายอาจพบว่าอ่านยาก

กลุ่มข้อความสีเทาอ่อนและพื้นหลังสีขาว

ในตัวอย่างถัดไปข้อความมีอัตราความคมชัด4.8:1ซึ่งลูกค้าจำนวนมากอ่านง่ายขึ้น

กลุ่มข้อความสีเทาเข้มบนพื้นหลังสีขาว

ทดสอบความคมชัดของข้อความทั้งหมดรวมถึงเนื้อหาส่วนหัวลิงก์และช่องฟอร์มโดยใช้แนวทางดังต่อไปนี้:

  • สีของข้อความเนื้อหาและข้อความปุ่มมีอัตราความคมชัดอย่างน้อย4.5:1เมื่อเทียบกับกับภาพพื้นหลัง
  • สีของส่วนหัวและข้อความขนาดใหญ่(ขนาดแบบอักษรตั้งแต่24พิกเซลขึ้นไป)มีอัตราความคมชัดอย่างน้อย3:1เมื่อเทียบกับกับพื้นหลัง
  • สีของข้อความทั้งหมดบนรูปภาพรวมถึงสไลด์โชว์แบนเนอร์และวิดีโอมีอัตราความคมชัดที่เพียงพอเมื่อเทียบกับพื้นหลังสำหรับตัวอักษรขนาดใหญ่(ขนาดแบบอักษรตั้งแต่24พิกเซลขึ้นไป)อัตราความคมชัดควรเป็นอย่างน้อย3:1สำหรับตัวอักษรที่เล็กกว่าอัตราความคมชัดควรเป็นอย่างน้อย4.5:1
  • สีขององค์ประกอบที่ไม่ใช่ตัวอักษรรวมถึงกรอบข้อความและไอคอนต้องมีอัตราความคมชัดอย่างน้อย3:1เมื่อเทียบกับพื้นหลัง

ข้อความส่วนหัว

เมื่อคุณเพิ่มส่วนหัวไปยังหน้าของคุณด้วย富文本การเรียงลำดับของส่วนหัว(1 - 6)เป็นสิ่งที่สำคัญเทคโนโลยีสิ่งอํานวยความสะดวกใช้ส่วนหัวเพื่อสื่อสารวิธีการจัดระเบียบเนื้อหาของหน้าการข้ามระดับเช่นส่วนหัวระดับ2ตามด้วยส่วนหัวระดับ4อาจทำให้ผู้ใช้รู้สึกสับสนให้ใช้แนวทางต่อไปนี้:

  • ส่วนหัวถูกใช้ตามลำดับและห้ามข้ามระดับ

ขนาดตัวอักษรและการจัดวาง

เมื่อคุณแก้ไขการตั้งค่าตัวพิมพ์ของธีมคุณตรวจสอบให้แน่ใจว่าข้อความของคุณมีขนาดใหญ่เพียงพอให้ลูกค้าอ่านได้อย่างสะดวก

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

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

ในตัวอย่างถัดไปเป็นการจัดวางข้อความชิดด้านซ้ายซึ่งทำให้มีระยะห่างที่สม่ำเสมอระหว่างคำ

ข้อความที่จัดวางแบบชิดซ้ายระยะห่างระหว่างคำสม่ำเสมอกัน

เมื่อปรับแต่งขนาดและการจัดวางข้อความให้ใช้แนวทางดังนี้:

  • แบบตัวอักษรที่เล็กที่สุดสำหรับข้อความเนื้อหาคือ16พิกเซล
  • การจัดวางข้อความชิดขอบไม่ใช่การจัดวางข้อความให้ชิดขอบทั้งสองด้านข้อความที่จัดชิดขอบทั้งสองด้านจะทำให้ระยะห่างระหว่างคำไม่สม่ำเสมอ

หมายเหตุ:ตระกูลแบบอักษรที่แตกต่างกันอาจปรากฏเล็กหรือใหญ่ต่างกันได้แม้ว่าจะมีขนาดแบบอักษรเดียวกันหากแบบอักษรที่คุณใช้ปรากฏเล็กกว่าแบบอักษรอื่นที่ขนาด16พิกเซลให้ใช้ขนาดที่ใหญ่กว่า

ลิงก์ข้อความ

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

หากคุณแก้ไขสไตล์ชีตของธีมโปรดตรวจสอบให้แน่ใจว่าคุณไม่ได้ลบสไตล์ลิงก์ข้อความออกใช้แนวทางต่อไปนี้:

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

ข้อความแสดงแทนสำหรับรูปภาพ

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

คุณสามารถเพิ่มข้อความแสดงแทนไปยังรูปภาพสินค้าของคุณShopify adminเพิ่มข้อความแสดงแทนไปยังธีมของคุณได้จากตัวแก้ไขธีม

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

เพื่อนสองคนที่สะพายกระเป๋าเป้กอดคอกันและมองไปที่มหาสมุทร

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

หากธุรกิจของคุณคือบริษัทท่องเที่ยวตัวอย่างที่ไม่ดีของข้อความแสดงแทนอาจเป็น”คนสองคนอยู่หน้ามหาสมุทร”สำหรับบริษัทเดียวกันตัวอย่างของข้อความแสดงแทนที่ดีอาจเป็น”เพื่อนสองคนท่องเที่ยวอยู่ในลากอสประเทศโปรตุเกสพวกเขากำลังมองดูชายหาด普拉亚做Camiloในวันที่แดดออก”

การเข้าถึงสไลด์โชว์และวิดีโอ

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

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

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

สไลด์โชว์

เมื่อคุณเพิ่มสไลด์โชว์ไปยังร้านค้าออนไลน์ของคุณให้ใช้แนวทางต่อไปนี้:

  • สไลด์โชว์ไม่เล่นอัตโนมัติ
  • หากสไลด์โชว์เล่นอัตโนมัติต้องมีการตั้งค่าที่ลูกค้าสามารถใช้เพื่อหยุดชั่วคราวหรือหยุดสไลด์โชว์ได้

วิดีโอ

เมื่อคุณเพิ่มวิดีโอไปยังร้านค้าออนไลน์ของคุณให้ใช้แนวทางต่อไปนี้:

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

แนวทางเหล่านี้ยังใช้กับวิดีโอที่อยู่ในสไลด์โชว์ด้วย

ความช่วยเหลือด้านคีย์บอร์ด

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

หน้าจอการเข้าสู่ระบบของลูกค้าบนร้านค้าออนไลน์ที่แสดงช่องแบบฟอร์มสำหรับอีเมลและรหัสผ่านช่องมีเมลมีเส้นขอบสีน้ำเงิน

หากคุณแก้ไขสไตล์ชีตของธีมโปรดตรวจสอบให้แน่ใจว่าคุณไม่ได้ลบสไตล์โฟกัสคีย์บอร์ดออกจากองค์ประกอบใดๆของหน้าใช้แนวทางต่อไปนี้:

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

แหล่งข้อมูล

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

แหล่งข้อมูลเกี่ยวกับความคมชัดของสี

แหล่งข้อมูลเกี่ยวกับข้อความ

แหล่งข้อมูลเกี่ยวกับข้อความแสดงแทน

แหล่งข้อมูลเกี่ยวกับสไลด์โชว์และวิดีโอ

แหล่งข้อมูลเกี่ยวกับความช่วยเหลือด้านคีย์บอร์ด

พร้อมเริ่มต้นการขายด้วยShopifyแล้วหรือยัง

ทดลองใช้งานฟรี