sr-only ใน Bootstrap 3 คืออะไร

คลาสนี้sr-onlyใช้ทำอะไร? มีความสำคัญหรือฉันสามารถลบออกได้หรือไม่ ทำงานได้ดีโดยไม่ต้อง

นี่คือตัวอย่างของฉัน:

<div class="btn-group">
    <button type="button" class="btn btn-info btn-md">Departments</button>
    <button type="button" class="btn btn-info dropdown-toggle btn-md" data-toggle="dropdown">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">Sales</a></li>
        <li><a href="#">Technical</a></li>
        <li class="divider"></li>
        <li><a href="#">Show all</a></li>
    </ul>
</div>

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

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

นี่คือตัวอย่างสไตล์ที่ใช้:

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

มีความสำคัญหรือฉันสามารถลบออกได้หรือไม่ ทำงานได้ดีโดยไม่ต้อง

เป็นสิ่งสำคัญอย่าลบออก

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

หากคุณสนใจที่จะอ่านเกี่ยวกับการช่วยการเข้าถึง:

• Web Accessibility Initiative (WAI)

• เอกสารประกอบการเข้าถึง MDN

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

หากคุณต้องการให้เว็บไซต์ของคุณมีปฏิสัมพันธ์กับโปรแกรมอ่านหน้าจอมากขึ้นให้ใช้คุณลักษณะ ARIA ที่เป็นมาตรฐาน W3C และฉันขอแนะนำให้เยี่ยมชมหลักสูตรออนไลน์ของ Googleซึ่งจะใช้เวลา 1-2 ชั่วโมงหรืออย่างน้อยดูวิดีโอ 40 นาทีของ Google

องค์การอนามัยโลกระบุว่า 285 ล้านคนมีภาวะบกพร่องทางสายตา ดังนั้นการเข้าถึงเว็บไซต์จึงเป็นสิ่งสำคัญ

อัพเดท 2019:

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

ฉันพบสิ่งนี้ในตัวอย่าง navbarและทำให้มันง่ายขึ้น

<ul class="nav">
  <li><a>Default</a></li>
  <li><a>Static top</a></li>
  <li><b><a>Fixed top <span class="sr-only">(current)</span></a></b></li>
</ul>

คุณเห็นว่าจะเลือกอันใด ( sr-onlyส่วนหนึ่งถูกซ่อนอยู่):

• ค่าเริ่มต้น
• ด้านบนคงที่
• คงที่ด้านบน

คุณได้ยินที่เลือกอย่างใดอย่างหนึ่งถ้าคุณใช้โปรแกรมอ่านหน้าจอ:

• ค่าเริ่มต้น
• ด้านบนคงที่
• คงที่ด้านบน (ปัจจุบัน)

เป็นผลมาจากเทคนิคนี้คนตาบอดควรจะนำทางได้ง่ายขึ้นในเว็บไซต์ของคุณ

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

ดูเหมือนว่ามีข้อมูลบางอย่างที่ขาดหายไปเกี่ยวกับการใช้.sr-onlyเพื่ออธิบายวัตถุประสงค์และสำหรับผู้อ่านหน้าจอ ก่อนอื่นสิ่งสำคัญคือต้องคำนึงถึงผู้ใช้ที่มีความบกพร่องเสมอ การด้อยค่าเป็นวัตถุประสงค์ของการปฏิบัติตาม 508: https://www.section508.gov/และเป็นเรื่องดีที่ bootstrap คำนึงถึงเรื่องนี้ อย่างไรก็ตามการใช้งาน.sr-onlyไม่ใช่สิ่งที่จำเป็นต้องนำมาพิจารณาสำหรับการปฏิบัติตาม 508 คุณมีการใช้สีขนาดของแบบอักษรการเข้าถึงผ่านการนำทางตัวอธิบายการใช้เพลงและอีกมากมาย

แต่สำหรับ.sr-only- CSS จริงทำอะไร? มีหลายสายพันธุ์ที่แตกต่างกันเล็กน้อยของ CSS .sr-onlyที่ใช้สำหรับเป็น หนึ่งในไม่กี่คนที่ฉันใช้อยู่ด้านล่าง:

.sr-only {
    position: absolute;
    margin: -1px 0 0 -1px;
    padding: 0;
    display: block;
    width: 1px;
    height: 1px;
    font-size: 1px;
    line-height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
    outline: 0;
    }

เนื้อหา CSS หนังดังกล่าวข้างต้นในเบราว์เซอร์สก์ท็อปและโทรศัพท์มือถือห่อด้วยชั้นนี้ได้ แต่มองเห็นได้ด้วยโปรแกรมอ่านหน้าจอเช่น JAWS: http://www.freedomscientific.com/Products/Blindness/JAWS ตัวอย่างมาร์กอัพมีดังนี้:

<a href="#" target="_blank">
    Click to Open Site
    <span class="sr-only">This is an external link</span>
</a>

นอกจากนี้หากองค์ประกอบ DOM มีความกว้างและความสูงเป็น 0 องค์ประกอบจะไม่ถูกมองเห็นโดย DOM width: 1px; height: 1px;นี่คือเหตุผลที่การใช้ CSS ดังกล่าวข้างต้น โดยการใช้display: noneและการตั้งค่า CSS ของคุณไปที่height: 0และwidth: 0องค์ประกอบจะไม่เห็นโดย DOM และจึงเป็นปัญหา การใช้ CSS ด้านบนwidth: 1px; height: 1px;นั้นไม่ใช่สิ่งที่คุณทำเพื่อทำให้เนื้อหามองไม่เห็นบนเดสก์ท็อปและมือถือ (โดยที่overflow: hiddenเนื้อหาของคุณจะยังคงปรากฏบนหน้าจอ) และผู้อ่านหน้าจอสามารถมองเห็นได้ การซ่อนเนื้อหาจากเดสก์ท็อปและเบราว์เซอร์มือถือทำได้โดยการเพิ่มออฟเซ็ตจากwidth: 1pxและheight: 1pxกล่าวถึงก่อนหน้านี้โดยใช้:

position: absolute;
margin: -1px 0 0 -1px; 
overflow: hidden;

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

View > Page Style > No Style

ฉันหวังว่าข้อมูลที่ฉันให้ไว้ที่นี่จะเป็นประโยชน์ต่อผู้อื่นนอกเหนือจากการตอบกลับอื่น ๆ

ตรวจสอบให้แน่ใจว่าวัตถุปรากฏขึ้น (หรือควร) กับผู้อ่านและอุปกรณ์ที่คล้ายกันเท่านั้น มันให้ความรู้สึกมากขึ้นในบริบทที่มีองค์ประกอบอื่น ๆ ที่มีแอตทริบิวต์เพลงซ่อน = "true"

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>

Glyphicon จะปรากฏบนอุปกรณ์อื่น ๆ ทั้งหมด, คำผิดพลาด:ที่ตัวอ่านข้อความ

.sr-onlyระดับซ่อนองค์ประกอบไปยังอุปกรณ์ทั้งหมดยกเว้นscreen readers:

ข้ามไปที่เนื้อหาหลักรวม. sr-only กับ. sr-only-focusable เพื่อแสดงองค์ประกอบอีกครั้งเมื่อถูกโฟกัส