บทช่วยสอนโดยละเอียดเกี่ยวกับวิธีการและข้อดีและข้อเสียของการซ่อนองค์ประกอบในเว็บ

รหัสแหล่งที่มาของกรณี:

https://codepen.io/shadeed/pen/03caf6b36727accb692eecbc38f95d39?editors=1100

5. ผลกระทบของการเข้าถึงต่อการมองเห็น: ซ่อนเร้น

องค์ประกอบถูกซ่อน องค์ประกอบสืบทอดจะถูกลบออกจากแผนผังการเข้าถึง และโปรแกรมอ่านหน้าจอไม่แสดงองค์ประกอบ

(1) การวางตำแหน่ง

หากต้องการซ่อนองค์ประกอบที่มีแอตทริบิวต์ตำแหน่ง เราควรย้ายองค์ประกอบนั้นออกจากหน้าจอและตั้งค่าขนาดเป็น 0 (ความกว้างและความสูง) ตัวอย่างคือลิงก์การนำทางแบบข้าม พิจารณาแผนภาพต่อไปนี้:

หากต้องการวางลิงก์นอกหน้าจอ เราควรเพิ่มสิ่งต่อไปนี้

「ซีเอส」

 .skip-link {
ตำแหน่ง: แน่นอน;
ด้านบน: -100%;
-

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

 .skip-link:โฟกัส {
ตำแหน่ง: แน่นอน;
ด้านบน: 0;
-

รหัสแหล่งที่มาของกรณี:

https://codepen.io/shadeed/pen/707992e7c98ea633fc6606e576ef8a04?editors=0100

6. ผลกระทบของการเข้าถึงตำแหน่ง: แก้ไขแล้ว

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

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

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

เพื่อแสดงให้เห็นภาพข้างต้นให้ชัดเจนยิ่งขึ้น ฉันจะใช้เครื่องมือ Clippy ใน GIF ด้านล่าง ฉันมีเส้นทางคลิปต่อไปนี้:

ตั้งค่ารูปหลายเหลี่ยมในแต่ละทิศทางเป็น 0 0 และพื้นที่ครอบตัดจะถูกปรับขนาดเป็น 0 ส่งผลให้ภาพไม่ปรากฏ ในทำนองเดียวกัน สามารถทำได้โดยแทนที่รูปหลายเหลี่ยมด้วยวงกลม:

 img {
เส้นทางคลิป: วงกลม (0 ที่ 50% 50%);
- 

7. ผลกระทบของการเข้าถึงบนคลิปพาธ

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

รหัสแหล่งที่มาของกรณี:

https://codepen.io/shadeed/pen/9fdbd7be9fd9dac17a614c96ba7f64b1?editors=0100

3. ควบคุมสีและขนาดตัวอักษร

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

1. สีโปร่งใส

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

2. ขนาดตัวอักษร

นอกจากนี้ การตั้งค่าขนาดตัวอักษรเป็น 0 ยังเป็นประโยชน์ เนื่องจากเป็นการซ่อนข้อความที่มองเห็นได้ ลองพิจารณาตัวอย่างต่อไปนี้ โดยมีปุ่มที่มีโครงสร้างดังต่อไปนี้:

 <ปุ่ม>
<svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="false" focusable="false">
<!-- ข้อมูลเส้นทาง -->
</svg>
<span>ชอบ</span>
</ปุ่ม>

เป้าหมายของเราคือการซ่อนข้อความในลักษณะที่สามารถเข้าถึงได้ สำหรับสิ่งนี้ ฉันเพิ่ม CSS ต่อไปนี้

 . ปุ่มขยาย {
สี: โปร่งใส;
ขนาดตัวอักษร: 0;
-

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

รหัสแหล่งที่มาของกรณี:

https://codepen.io/shadeed/pen/4eacdf50c3339fced7f787156c569372?editors=1100

3. อาเรียซ่อนเร้น

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

 <ปุ่ม>
เมนู
<svg aria-hidden="true"><!-- --></svg>
</ปุ่ม>

ในตัวอย่างข้างต้น เรามีปุ่มเมนูพร้อมป้ายกำกับและไอคอน หากต้องการซ่อนไอคอนจากโปรแกรมอ่านหน้าจอ จึงมีการเพิ่ม aria-hidden

ตาม Mozilla Developer Network (MDN) ด้านล่างนี้คือกรณีการใช้งานสำหรับคุณสมบัติ

ซ่อนเนื้อหาการตกแต่ง เช่น ไอคอนและรูปภาพ ซ่อนข้อความที่คัดลอก ซ่อนเนื้อหานอกหน้าจอหรือเนื้อหาที่ถูกยุบ

4. ผลกระทบของการเข้าถึงบน aria-hidden="true"

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

(1) แอนิเมชันและการโต้ตอบ

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

ภาพเคลื่อนไหวของเมนู - ตัวอย่างที่ไม่ดี

เรามีเมนูที่ต้องมีภาพเคลื่อนไหวแบบเลื่อนเมื่อขยาย วิธีที่ง่ายที่สุดคือการเพิ่มสิ่งต่อไปนี้ลงในเมนูของคุณ:

 อูล {
ความทึบ: 0;
แปลงร่าง: แปล X (100%);
การเปลี่ยนแปลง: การผ่อนผัน 0.3 วินาที;
-

ul.ใช้งานอยู่ {
ความทึบ: 1;
แปลงร่าง: แปล X (0);
-

จากที่กล่าวมาข้างต้น เมนูจะขยายและยุบตามคลาส .active ซึ่งจะถูกเพิ่มผ่าน JavaScript ดังนี้

 menuToggle.addEventListener('คลิก', ฟังก์ชั่น(e){
e.preventDefault();
navMenu.classList.toggle('ใช้งานอยู่');
- 

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

นี่คือภาพหน้าจอของแผนผังการเข้าถึงจาก Chrome Dev Tools:

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

หลีกเลี่ยงการใช้โฟกัสของแป้นพิมพ์เมื่อซ่อนเมนู หลีกเลี่ยงการบอกการนำทางผ่านโปรแกรมอ่านหน้าจอเมื่อซ่อนการนำทาง

ภาพหน้าจอด้านล่างแสดงให้เห็นว่าโรเตอร์ VoiceOver บน Mac OS เห็นหน้าอย่างไร รายการการนำทางจะอยู่ที่นั่นในขณะที่ซ่อนอยู่

รหัสแหล่งที่มาของกรณี:

https://codepen.io/shadeed/pen/e94f377dae6104fe45a71c80d59bb58d?editors=0100

แอนิเมชั่นเมนู - ตัวอย่างที่ดี

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

「ซีเอส」

 อูล {
การมองเห็น: ซ่อนเร้น;
ความทึบ: 0;
แปลงร่าง: แปล X (100%);
การเปลี่ยนแปลง: การผ่อนผัน 0.3 วินาที;
-

ul.ใช้งานอยู่ {
การมองเห็น: มองเห็นได้;
ความทึบ: 1;
แปลงร่าง: แปล X (0);
-

เมื่อเพิ่มแล้ว เมนูจะถูกซ่อนจากโปรแกรมอ่านหน้าจอ มาทดสอบอีกครั้งและดูว่า VoiceOver จะแสดงอะไรบ้าง:

รหัสแหล่งที่มาของกรณี:

https://codepen.io/shadeed/pen/e94f377dae6104fe45a71c80d59bb58d?editors=0110

5. ช่องทำเครื่องหมายแบบกำหนดเอง

การออกแบบช่องทำเครื่องหมายเริ่มต้นนั้นปรับแต่งได้ยาก ดังนั้นเราจึงจำเป็นต้องสร้างการออกแบบที่กำหนดเองสำหรับช่องทำเครื่องหมาย ลองดูที่ HTML พื้นฐาน:

 <p class="c-ช่องทำเครื่องหมาย">
<input class="sr-only" type="checkbox" name="" id="c1">
<label class="c-checkbox__label" for="c1">ช่องทำเครื่องหมายที่กำหนดเอง</label>
</p>

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

 .sr-เท่านั้น {
เส้นขอบ: 0;
คลิป: ตรง (0 0 0 0);
-webkit-คลิป-เส้นทาง: รูปหลายเหลี่ยม (0px 0px, 0px 0px, 0px 0px);
คลิปพาธ: รูปหลายเหลี่ยม (0px 0px, 0px 0px, 0px 0px);
ความสูง: 1px;
ระยะขอบ: -1px;
ล้น: ซ่อนเร้น;
ช่องว่างภายใน: 0;
ตำแหน่ง: แน่นอน;
ความกว้าง: 1px;
พื้นที่สีขาว: nowrap;
-

ซอร์สโค้ดเคส: https://codepen.io/shadeed/pen/b722aa72dbe3574617f6506d14e5ac03?editors=1100

ปุ่มซ่อน

บน Twitter มีปุ่มที่เรียกว่า "ดูทวีตใหม่" ซึ่งซ่อนไว้สำหรับโปรแกรมอ่านหน้าจอที่มีเนื้อหาที่ซ่อนอยู่ และจะปรากฏเฉพาะเมื่อมีทวีตใหม่ออกมาเท่านั้น

สรุป

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