สลับเมนู

วิธีการออกแบบสำหรับการเข้าถึงเว็บ (5 เคล็ดลับสำคัญ)

เผยแพร่แล้ว: 2022-07-23

บันทึกเทมเพลตตัวสร้างเพจและการออกแบบสินทรัพย์ไปยังคลาวด์! เริ่มต้นที่ Assistant.Pro

bb-logo-2x
รับไปเดี๋ยวนี้เลย
how to design for web accessibility
  • ตัวสร้างบีเวอร์

วิธีการออกแบบสำหรับการเข้าถึงเว็บ (5 เคล็ดลับสำคัญ)

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

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

สารบัญ

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

การเข้าถึงเว็บคืออะไร?

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

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

ตัวอย่างบางส่วนของปัญหาการเข้าถึงเว็บ

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

ปัญหาเพิ่มเติมบางประการที่ผู้ใช้อาจเผชิญ ได้แก่:

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

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

หน้าเว็บหลักของ WAVE Web Accessibility Evaluation Tool

WAVE สามารถระบุข้อผิดพลาดในการเข้าถึงได้มากมาย และ “อำนวยความสะดวกในการประเมินเนื้อหาเว็บโดยมนุษย์” คุณสามารถตรวจสอบเว็บไซต์ใดก็ได้โดยเพียงแค่ป้อน URL ในช่องที่ให้ไว้ ส่วนขยายที่มีให้สำหรับ Chrome, Firefox และ Edge จะช่วยให้คุณสามารถทดสอบหน้าที่มีการป้องกันด้วยรหัสผ่าน เก็บไว้ในเครื่อง หรือไดนามิกสูง

ทำไมการเข้าถึงเว็บจึงสำคัญ?

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

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

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

ผลกระทบทางกฎหมายของการเข้าถึงเว็บ

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

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

เนื่องจาก ADA ไม่ได้เสนอแนวทางที่กำหนดไว้ หลายบริษัทจึงใช้หลักเกณฑ์การเข้าถึงเนื้อหาเว็บ (WCAG) เป็นจุดอ้างอิง WCAG ไม่ใช่ข้อกำหนดทางกฎหมาย แต่มีสี่ด้านที่คุณสามารถตรวจสอบว่าเว็บไซต์ของคุณเป็นไปตามมาตรฐานสำหรับการเข้าถึงหรือไม่:

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

หากคุณปฏิบัติตามมาตรฐานของ WCAG คุณจะต้องปฏิบัติตามข้อกำหนดของ ADA ด้วยเช่นกัน

วิธีที่ Beaver Builder รองรับการเข้าถึงเว็บ

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

การเข้าถึงเว็บมีสองด้านที่แตกต่างกัน: ด้านการเขียน (ที่ผู้ใช้สร้างเว็บไซต์) และด้านการแสดงผล HTML (ซึ่งปรากฏต่อสาธารณะ) โมดูล Beaver Builder สามารถเข้าถึงได้ในระดับพื้นฐานสำหรับทั้งคู่

หน้าเว็บหลักของ Beaver Builder

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

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

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

วิธีการออกแบบสำหรับการเข้าถึงเว็บ (5 เคล็ดลับสำคัญ)

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

1. ใช้ข้อความแสดงแทนสำหรับรูปภาพของคุณ

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

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

เมื่อเขียนข้อความแสดงแทน คุณควรมีความชัดเจนและสื่อความหมาย อย่างไรก็ตาม อย่าลืมกระชับ ต่อไปนี้คือตัวอย่างลักษณะของข้อความแสดงแทนใน HTML:

<img src="beaverbuildingdam.png" alt="A beaver building a dam">

วิธีหนึ่งในการใช้ข้อความแสดงแทนคือการอัปโหลดภาพของคุณผ่าน WordPress Media Library จากนั้นคลิกที่ Edit :

ตัวอย่างการเปลี่ยนข้อความแสดงแทนสำหรับการเข้าถึงเว็บ

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

หรือคุณสามารถแทรกรูปภาพในเพจของคุณหรือโพสต์โดยใช้โมดูลภาพถ่าย Beaver Builder ที่คุณต้องการ จากนั้นคลิกที่ Select Photo เพื่อเพิ่มภาพที่คุณต้องการ:

การเพิ่มข้อความแสดงแทนให้กับรูปภาพด้วย Beaver Builder

ถัดไป ค้นหา ข้อความแสดงแทน (ข้อความแสดงแทน) ใต้ รายละเอียดสิ่งที่แนบมา ในป๊อปอัป:

การเพิ่มข้อความแสดงแทนให้กับรูปภาพด้วย Beaver Builder

ง่ายมาก!

2. ปรับปรุงความสามารถในการอ่าน

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

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

หากต้องการเปลี่ยนแบบอักษรใน Beaver Builder ให้เลือก Text Editor แล้วค้นหาแท็บ Style เปิดการเลือก แบบอักษร เพื่อทำการปรับเปลี่ยน ด้านล่างนี้ เราได้รวมแบบอักษรที่ดีและไม่ดีโดยใช้วิธีนี้:

แบบอักษรที่ดีและไม่ดีสำหรับการเข้าถึงเว็บ

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

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

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

เพื่อให้ได้รูปลักษณ์นี้ คุณสามารถเปิด Text Editor และทำให้ลิงก์เป็น ตัวหนา ในแท็บ General จากนั้นไปที่ สไตล์ > สไตล์และระยะห่าง ที่นี่ คุณสามารถเลือก ขีดเส้นใต้ ในรายการดรอปดาวน์ของ ตกแต่ง :

การสาธิตวิธีเปลี่ยนลิงก์ใน Beaver Builder

โปรแกรมอ่านหน้าจอยังใช้โครงสร้างหัวเรื่องเพื่อนำทางเนื้อหา ดังนั้น คุณควรตรวจสอบให้แน่ใจว่าข้อความของคุณถูกทำลายโดยใช้แท็กหัวเรื่อง Beaver Builder มีโมดูลส่วนหัว Beaver Builder มีโมดูลส่วนหัวที่ให้คุณกำหนด แท็ก HTML ใต้แท็บ ทั่วไป ได้อย่างง่ายดาย:

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

3. ใช้สีที่ตัดกัน

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

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

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

ใน Beaver Builder คุณสามารถเปลี่ยนสีข้อความได้โดยไปที่ Text Editor และค้นหาแท็บ Style ที่นี่ เราสร้างปุ่มและใช้การตั้งค่าในแท็บ ทั่วไป เพื่อเพิ่มไอคอนและทำให้อ่านง่ายขึ้น:

การเปลี่ยนแปลงปุ่มเพื่อให้เข้าถึงเว็บได้ดีขึ้น

จากนั้นในแท็บ สไตล์ เราเปลี่ยน สีข้อความ เป็น #FFFFFF และ พื้นหลัง เป็น #000000:

การปรับเปลี่ยนปุ่มเพื่อสร้างคอนทราสต์

สิ่งนี้จะสร้างคอนทราสต์ที่เหมาะสม โปรดจำไว้ว่า หากคุณไม่สามารถเปลี่ยนแปลงบางสิ่งภายในไม่กี่คลิกในการตั้งค่า Beaver Builder คุณยังสามารถแก้ไขด้วย CSS ได้อย่างง่ายดาย

4. ใช้การนำทางด้วยแป้นพิมพ์

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

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

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

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

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

เว็บไซต์ BBC พร้อมการนำทางด้วยแป้นพิมพ์ที่ชัดเจนและตัวบ่งชี้การโฟกัส

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

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

5. ตรวจสอบให้แน่ใจว่าเว็บไซต์ของคุณสามารถเข้าถึงได้จากมือถือ

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

iPhone มีตัวเลือกการเข้าถึงที่หลากหลาย

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

เมื่อออกแบบสำหรับผู้ใช้มือถือ คุณควรคำนึงถึงสิ่งต่อไปนี้:

  • ขนาดหน้าจอที่ปรับได้
  • เป้าหมายการสัมผัสขนาดใหญ่และท่าทางสัมผัสที่เรียบง่าย
  • การนำทางแบบง่าย

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

บทสรุป

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

โดยสรุป ต่อไปนี้คือห้าวิธีที่คุณสามารถใช้การออกแบบเว็บที่เข้าถึงได้โดยใช้ Beaver Builder:

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

คุณพร้อมที่จะสร้างเว็บไซต์ที่สามารถเข้าถึงได้หรือไม่? ดาวน์โหลดปลั๊กอิน Beaver Builder ของเราและเริ่มต้นวันนี้!