วิธีสร้างการออกแบบหน้าเว็บที่สามารถเข้าถึงได้

หน้าจอแล็ปท็อป

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

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

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

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

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

เนื้อหาและแหล่งที่มา

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

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

แบบอักษรที่คุณใช้ ควรจะเป็น ใหญ่และชัดเจน ประเภท Sans serif และตัวหนา ทำให้การอ่านง่ายขึ้นมากสำหรับผู้ที่อาจเป็นโรคดิสเล็กเซีย แบบอักษรอื่น ๆ ที่แนะนำ ได้แก่ Arial, Times New Roman, Helvetica, Tahoma, Calibri และ Verdana

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

Sans Serif แบบอักษรตัวหนา

การใช้ฟอนต์ Sans Serif Bold ช่วยให้มองเห็นข้อความได้ดีขึ้น

ข้อความทางเลือก

El Alternative Text หรือ Alt Tag คือคำอธิบายที่วางอยู่บนรูปภาพ บนหน้าเว็บ แม้ว่าข้อความนี้จะไม่มีให้ผู้ใช้อ่าน แต่ก คำอธิบายที่เป็นลายลักษณ์อักษร เป็นเครื่องมือที่ช่วยให้เราบรรลุตำแหน่ง SEO ที่ดีขึ้น

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

Succulents ในหม้อสีชมพู

ต้นไม้อวบน้ำสามใบในกระถางสีชมพู ตัวอย่างข้อความแสดงแทน

การปรับตัว

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

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

หน้าจอมือถือ

ปรับการออกแบบอินเทอร์เฟซเพื่อให้อ่านได้ทั้งบนโทรศัพท์มือถือและคอมพิวเตอร์

ความสม่ำเสมอในการออกแบบ

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

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

เว็บไซต์ Starbucks

แถบเมนูในหน้า Starbucks จะเหมือนกันในทุกส่วน

การนำทางแป้นพิมพ์

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


แสดงความคิดเห็นของคุณ

อีเมล์ของคุณจะไม่ถูกเผยแพร่ ช่องที่ต้องการถูกทำเครื่องหมายด้วย *

*

*

  1. ผู้รับผิดชอบข้อมูล: Miguel ÁngelGatón
  2. วัตถุประสงค์ของข้อมูล: ควบคุมสแปมการจัดการความคิดเห็น
  3. ถูกต้องตามกฎหมาย: ความยินยอมของคุณ
  4. การสื่อสารข้อมูล: ข้อมูลจะไม่ถูกสื่อสารไปยังบุคคลที่สามยกเว้นตามข้อผูกพันทางกฎหมาย
  5. การจัดเก็บข้อมูล: ฐานข้อมูลที่โฮสต์โดย Occentus Networks (EU)
  6. สิทธิ์: คุณสามารถ จำกัด กู้คืนและลบข้อมูลของคุณได้ตลอดเวลา