CSS สำหรับคนที่มีความบกพร่องทางสายตาหรือไม่


17

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

  1. มีโปรแกรมเมอร์ตาบอดที่นี่เขียน CSS หรือไม่ คุณทำได้อย่างไร?
  2. ฉันควรเพิกเฉย CSS ทั้งหมดแล้วปล่อยให้เป็นโปรแกรมเมอร์ที่มองเห็นหรือไม่ หรือมีบางสิ่งใน CSS ที่ฉันสามารถทำได้โดยไม่ต้องขอให้คนดูที่หน้าของฉันรู้ว่ามันมีการออกแบบที่ดีหรือไม่?

3
คุณอาจจะสนใจในส่วนที่เกี่ยวกับหูของ CSS

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

ขึ้นอยู่กับว่าคุณกำลังสร้างเว็บเพจสำหรับผู้ใช้ที่มีความบกพร่องทางสายตาหรือไม่ ถ้าเป็นสำหรับทั้งคู่คุณควรร่วมมือกัน
Ronni Skansing

คำตอบ:


12

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

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

  • สัดส่วนจะง่ายต่อการจัดการเมื่อเราคิดว่าหน้าเป็นกริด แผนกทั่วไปคือการใช้แถวบนสุดสำหรับการนำทางและหัวเรื่องและคอลัมน์ด้านขวาสำหรับเนื้อหาที่เกี่ยวข้อง คอลัมน์ด้านซ้ายใช้สำหรับเนื้อหาหลักและกว้างประมาณสองถึงสามเท่าของคอลัมน์ด้านขวา นี่เป็นวิธีแสดงไซต์ Exchange Stack โดยคร่าวๆ ใน CSS สิ่งนี้สามารถนำไปใช้กับdisplay: tableและรูปแบบการแสดงที่เกี่ยวข้องtable-rowและtable-cellหรือกับ flexbox model ที่ใหม่กว่า อัตราส่วนที่แน่นอนนั้นไม่สำคัญอย่างน่าประหลาดใจ

  • หน้าจะดูดีขึ้นเมื่ออยู่กึ่งกลางแนวนอน

  • เราไม่จำเป็นต้องใช้สีมาก: มีสีพื้นหลัง (โดยปกติจะเป็นสีสดใสและไม่อิ่มตัว) และสีข้อความ (โดยปกติจะเป็นสีเข้มและสีอิ่มตัว) เราสามารถลดความคมชัดของความสว่างเพื่อลดความสำคัญของข้อความเช่นเชิงอรรถทางสายย่อยหรือรายละเอียดอื่น ๆ การใช้โมเดลสี HSV นั้นง่ายกว่า RGB มากสำหรับเรื่องนี้ มีจานสีจำนวนมากที่สามารถใช้งานได้หากสีเทาธรรมดาน่าเบื่อเกินไป ควรใช้สี แต่เท่าที่จำเป็น

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

  • CSS ข้อเสนอไม่เพียง แต่หน่วยที่แน่นอนของการวัดที่เหมือนpxหรือcmแต่ยังหน่วยญาติเหมือนemและคำหลักที่เหมือนหรือthin mediumการใช้การวัดแบบสัมพันธ์และคำหลักเหล่านี้มักจะง่ายกว่า

  • ข้อความไม่ควรกว้างเกินกว่า40emนี้

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

ด้วยสิ่งนี้มันควรจะเป็นไปได้ที่จะสไตล์บล็อกง่าย ๆ หรือเช่น อย่างไรก็ตาม:

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

  • บางสิ่งจำเป็นต้องมีการจัดวางองค์ประกอบที่แม่นยำเช่นในเมนูป๊อปอัป

  • รูปภาพและไอคอนสามารถเพิ่มความลึกให้กับการออกแบบได้ แต่คุณจะเลือกได้ยาก

  • รูปแบบกล่อง CSS นั้นแย่มากและยากที่จะจำลองในหัวของคุณ

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


3
ฉันเห็นด้วยกับข้อเสนอแนะการเขียนโปรแกรมคู่ สายตาเป็นเพียงทักษะในการยืมเช่นเดียวกับการแก้ไขข้อบกพร่องหรือสถาปัตยกรรม
Jon Purdy

5

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

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.