บทความบทนำของ wulin.com (www.vevb.com): 10 เคล็ดลับการใช้งานง่ายสำหรับเว็บไซต์ที่ทุกคนสามารถใช้ได้
1. เพิ่มข้อความทางเลือกในโลโก้ของคุณ
สิ่งนี้มีประโยชน์สองประการ: ตัวอ่านหน้าจอสามารถรับรู้ถึงความหมายของภาพโลโก้และเมื่อภาพไม่ได้โหลดมันยังสามารถบอกผู้ใช้ที่ไม่ได้รับความบกพร่องซึ่งโลโก้ของคุณอยู่
หลายวิธี:
<img src = logo.png alt = เว็บไซต์การสอนเว็บ>
หรือหากคุณใช้อิมเมจพื้นหลังเพื่อใช้โลโก้คุณยังสามารถเพิ่มแอตทริบิวต์ชื่อเรื่องเพื่อใช้งานได้:
<span title = เว็บไซต์การสอนหน้าเว็บ> </span>
แน่นอนภาพลิงค์ + พื้นหลังเป็นวิธีที่ดีที่สุด แต่เป็นการดีที่สุดที่จะเพิ่มแอตทริบิวต์ชื่อเรื่องด้วย:
<a title = เครือข่ายการสอนเว็บ> เครือข่ายการสอนเว็บ </a>
2. เพิ่มสถานที่สำคัญขั้นพื้นฐาน
Aria Landmark เป็นชุดของกฎการใช้งานเว็บไซต์ที่กำหนดโดย W3C การเพิ่มสถานที่สำคัญเชิงพรรณนาไปยังโมดูลที่แตกต่างกันของเว็บไซต์ - หรือที่เรียกว่าบทบาทโดยตรงนั้นเอื้อต่อการคัดกรองซอฟต์แวร์การอ่านเพื่อทำความเข้าใจหน้าเว็บของคุณให้ดีขึ้นเพื่อให้ผู้ใช้ที่มีความบกพร่องทางสายตาสามารถใช้เว็บไซต์ของคุณได้ดีขึ้น
<nav role = การนำทาง>
<div id = maincontent role = main>
<form action = search.php role = search>
3. เพิ่มนิยามโฟกัส
ในความเป็นจริงเว็บไซต์หลายแห่งจะพยายามทุกวิถีทางเพื่อลบสไตล์โฟกัสของเบราว์เซอร์โดยเฉพาะอย่างยิ่งสำหรับเบราว์เซอร์ IE ในความเป็นจริงมันสมเหตุสมผลที่จะมีเบราว์เซอร์ที่มีโฟกัสเริ่มต้น สามารถระบุได้ว่าการโฟกัสของเมาส์ปัจจุบันของผู้ใช้อยู่ที่ไหน นี่เป็นสิ่งสำคัญอย่างยิ่งสำหรับการสตรีมคีย์บอร์ด
ดังนั้นโปรดอย่าลบ: สไตล์โฟกัส แม้ว่าคุณจะคิดว่าสไตล์เริ่มต้นนั้นดูไม่ดีหรือไม่ได้รับการควบคุม
ตอบ: โฟกัส {
โครงร่าง: 1px Solid Red;
ความเป็นมา: สีเหลือง;
-
หากผู้จัดการผลิตภัณฑ์หรือนักออกแบบภาพของคุณยืนยันในการลบสถานะโฟกัสเพียงแค่นำเมาส์ออกไปหนึ่งวันและบอกเขาว่าคุณสามารถใช้แท็บเพื่อสลับลิงค์เท่านั้น - -
4. กำหนดรายการแบบฟอร์มที่ต้องการ
ใช้แอตทริบิวต์ที่ต้องการ ARIA เพื่อกำหนดรายการที่จำเป็นในแบบฟอร์ม - ดีเป็นหลักที่จะบอกซอฟต์แวร์การอ่านหน้าจอ:
<ประเภทอินพุต = ชื่อข้อความ = ชื่อผู้ใช้ aria required = true>
5. เพิ่ม H1 ในหน้าของคุณ
เหตุผลนั้นง่ายไม่เพียง แต่สำหรับ SEO แต่ยังรวมถึงการใช้งานโดยรวมและการอ่านของเว็บไซต์ด้วย นอกจากนี้คุณไม่มีรหัสความหลงใหลหรือไม่?
6. กำหนดส่วนหัวของตาราง
โดยปกติแล้วหลายคนจะคุ้นเคยกับการใช้แท็ก TD สำหรับทุกรูปแบบ ในความเป็นจริงตารางไม่เพียง แต่แท็ก HD เท่านั้น แต่ยังรวมถึง TH, COL, ขอบเขต ฯลฯ
เพียงแค่ใส่เปลี่ยนส่วนหัวเป็นแท็ก th:
<th scope = col> วันที่ </th>
7. กำหนดคำอธิบายตาราง
อย่าเพียงแค่เพิ่ม P ด้านหน้า/หลังโต๊ะ ตารางมีแท็กคำบรรยายภาพเฉพาะเช่นเดียวกับรูปภาพ
<table>
<Caption> กำหนดการคลาส </section>
<tr>
-
8. หลีกเลี่ยงการคลิกที่นี่
แม้ว่าคำอธิบายลิงก์ดังกล่าวไม่สำคัญกับคนทั่วไป แต่ก็ค่อนข้างแย่สำหรับซอฟต์แวร์การอ่านหน้าจอ จริงๆแล้วมันเป็นการรบกวนผู้ใช้ที่มีความบกพร่องทางสายตา
ดังนั้นเพียงแค่ใช้ลิงก์ในสถานที่ที่เหมาะสม
9. ลบ tabindex
กาลครั้งหนึ่งนานหลายคนใช้ TabIndex เพื่อปรับปรุงประสบการณ์ผู้ใช้ แต่แอตทริบิวต์นี้จะขัดขวางลำดับการอ่านปกติของหน้าซึ่งเป็นหายนะต่อผู้ใช้ที่มีความบกพร่องทางสายตาและอาจไม่เป็นมิตรกับผู้ใช้ทั่วไป
ดังนั้นอย่าใช้แอตทริบิวต์ TabIndex ในทางที่ผิด
10. ตรวจสอบออนไลน์
เมื่อฉันเห็นสิ่งนี้ฉันพบว่าจริง ๆ แล้วมันเป็นโฆษณา แต่ถ้าสามารถตรวจพบปัญหาการใช้งานเว็บไซต์ได้มันก็เป็นสิ่งที่ดีเช่นกัน เครื่องมือบนเว็บที่พัฒนาโดย Webaim จะตรวจจับได้โดยอัตโนมัติโดยป้อน URL ทดสอบว่ามันค่อนข้างดี