ฉันได้เห็นคุณสมบัติของอาเรียแล้วในขณะที่ทำงานกับวัสดุเชิงมุม ใครสามารถอธิบายให้ฉันฟังได้บ้างคำนำหน้าอารียาหมายถึงอะไร แต่ที่สำคัญที่สุดสิ่งที่ฉันพยายามเข้าใจคือความแตกต่างระหว่างaria-hiddenและhiddenคุณลักษณะ

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

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

https://www.w3.org/WAI/PF/aria/states_and_properties#aria-hidden

การใช้มาตรฐานเหล่านี้สามารถทำให้คนพิการใช้งานเว็บได้ง่ายขึ้น

แอตทริบิวต์ที่ซ่อนอยู่คือแอตทริบิวต์บูลีน (จริง / เท็จ) เมื่อใช้คุณลักษณะนี้กับองค์ประกอบมันจะลบความเกี่ยวข้องทั้งหมดไปยังองค์ประกอบนั้น เมื่อผู้ใช้ดูหน้า html องค์ประกอบที่มีแอตทริบิวต์ที่ซ่อนไม่ควรมองเห็นได้

ตัวอย่าง:

    <p hidden>You can't see this</p>

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

ตัวอย่าง:

    <p aria-hidden="true">You can't see this</p>

ลองดูที่นี้ ควรตอบทุกคำถามของคุณ

หมายเหตุ: ARIA ย่อมาจากแอปพลิเคชันอินเทอร์เน็ตที่เข้าถึงได้ง่าย

แหล่งที่มา: กลุ่ม Paciello

ความแตกต่างทางความหมาย

ตามHTML 5.2 :

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

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

ในทางตรงกันข้ามARIA 1.1พูดว่า:

[ aria-hiddenสถานะ] ระบุว่าองค์ประกอบสัมผัสกับการเข้าถึง API หรือไม่

ในคำอื่น ๆ ที่มีองค์ประกอบที่aria-hidden="true"จะถูกลบออกจากต้นไม้การเข้าถึงซึ่งส่วนใหญ่ได้รับเกียรตินิยมเทคโนโลยีอำนวยความสะดวกและองค์ประกอบที่มีaria-hidden="false"แน่นอนจะได้สัมผัสกับต้นไม้ องค์ประกอบที่ไม่มีaria-hiddenแอตทริบิวต์อยู่ในสถานะ "ไม่ได้กำหนด (ค่าเริ่มต้น)" ซึ่งหมายความว่าตัวแทนผู้ใช้ควรเปิดเผยไปยังทรีตามการแสดงผล เช่นตัวแทนผู้ใช้อาจตัดสินใจที่จะลบมันถ้าสีข้อความที่ตรงกับสีพื้นหลังของมัน

ลองเปรียบเทียบซีแมนทิกส์ เหมาะสมที่จะใช้hiddenแต่ไม่ใช่ aria-hiddenสำหรับองค์ประกอบที่ยังไม่“ มีความเกี่ยวข้องทางโลก” แต่อาจมีความเกี่ยวข้องในอนาคต (ในกรณีนี้คุณจะใช้สคริปต์แบบไดนามิกเพื่อลบhiddenแอตทริบิวต์) ในทางกลับกันมันเหมาะสมที่จะใช้aria-hiddenแต่ไม่hiddenเกี่ยวกับองค์ประกอบที่เกี่ยวข้องเสมอ แต่คุณไม่ต้องการให้การเข้าถึง API ยุ่งเหยิง; องค์ประกอบดังกล่าวอาจรวมถึง "ไหวพริบของภาพ" เช่นไอคอนและ / หรือภาพที่ไม่จำเป็นสำหรับผู้ใช้ในการบริโภค

ความแตกต่างที่มีประสิทธิภาพ

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

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

องค์ประกอบaria-hidden="true"ที่ไม่ปรากฏในแผนผังการช่วยการเข้าถึงตัวอย่างเช่นโปรแกรมอ่านหน้าจอจะไม่ประกาศ ควรใช้เทคนิคนี้อย่างระมัดระวังเนื่องจากจะให้ประสบการณ์ที่แตกต่างกับผู้ใช้ที่แตกต่างกัน: ตัวแทนผู้ใช้ที่สามารถเข้าถึงได้จะไม่ประกาศ / แสดงผล แต่จะยังคงแสดงในเอเจนต์ที่มองเห็น สิ่งนี้อาจเป็นสิ่งที่ดีเมื่อทำอย่างถูกต้อง แต่อาจมีโอกาสถูกทำร้าย

ความแตกต่างของวากยสัมพันธ์

สุดท้ายมีความแตกต่างในไวยากรณ์ระหว่างสองคุณลักษณะ

hiddenเป็นแอตทริบิวต์บูลีนหมายถึงว่าแอตทริบิวต์นั้นมีอยู่จริงหรือไม่โดยไม่คำนึงถึงมูลค่าใดก็ตามที่อาจมี - และหากแอตทริบิวต์นั้นขาดอยู่นั้นเป็นเท็จ สำหรับกรณีจริงวิธีปฏิบัติที่ดีที่สุดคือไม่ใช้ค่าเลย ( <div hidden>...</div>) หรือค่าสตริงว่าง ( <div hidden="">...</div>) ฉันจะไม่แนะนำhidden="true"เพราะมีคนอ่าน / อัปเดตรหัสของคุณอาจอนุมานว่าhidden="false"จะมีผลตรงกันข้ามซึ่งไม่ถูกต้อง

aria-hiddenตรงกันข้ามเป็นแอตทริบิวต์ที่แจกแจงซึ่งอนุญาตให้มีรายการค่าอย่างใดอย่างหนึ่ง ถ้าaria-hiddenแอตทริบิวต์ที่มีอยู่ค่าของมันจะต้องเป็นอย่างใดอย่างหนึ่งหรือ"true" "false"หากคุณต้องการสถานะ "ไม่ได้กำหนด (ค่าเริ่มต้น)" ให้ลบแอตทริบิวต์ทั้งหมด

อ่านเพิ่มเติม: https://github.com/chharvey/chharvey.github.io/wiki/Hidden-Content

การตั้งค่าอาเรีย - ซ่อนเป็นเท็จและสลับบน element.show () ได้ผลสำหรับฉัน

เช่น

<span aria-hidden="true">aria text</span>

$(span).attr('aria-hidden', 'false');
$(span).show();

และเมื่อซ่อนกลับ

$(span).attr('aria-hidden', 'true');
$(span).hide();