Screen reader utilities in Bootsrap - Browser Rendering Trace

Render Flow - Screen reader utilities

Load HTML content

↓

Apply Bootstrap CSS

↓

Identify elements with screen reader utility classes

↓

Apply CSS rules for visibility and accessibility

↓

Screen reader interprets hidden or visible text accordingly

The browser loads the HTML and applies Bootstrap's CSS. Elements with screen reader utility classes get special CSS that hides or shows them visually but keeps them accessible or hidden from screen readers as intended.

Render Steps - 3 Steps

Code Added:<p>This is visible text.</p>

Before

→

After

[This is visible text.]

Adding a normal paragraph shows visible text on the page.

🔧 Browser Action:Creates DOM node and paints visible text.

Code Sample

This code shows normal visible text, text hidden visually but read by screen readers, and text hidden visually but shown when focused (like by keyboard).

Bootsrap

<p>This is visible text.</p>
<p class="visually-hidden">This text is only for screen readers.</p>
<p class="visually-hidden-focusable">This text is hidden but appears when focused.</p>

Bootsrap

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.visually-hidden-focusable:focus, .visually-hidden-focusable:active {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
  border: 0 !important;
}

Render Quiz - 3 Questions

After applying step 2, what do you see on the page?

A Only the first paragraph visible; second paragraph hidden visually but read by screen readers

B Both paragraphs visible on screen

C Second paragraph visible only when focused

D No paragraphs visible

Common Confusions - 3 Topics

Why can't I see the text with class 'visually-hidden' on the page?

The 'visually-hidden' class uses CSS to clip and hide the element visually, so it doesn't appear on screen but remains accessible to screen readers. This is intentional to provide content only for assistive technologies.

💡 If text is invisible but still read aloud, check for 'visually-hidden' class.

Why does the 'visually-hidden-focusable' text appear only when I tab to it?

This class hides the text visually but uses CSS to show it when the element receives keyboard focus, helping keyboard users find hidden content.

💡 Focus on hidden elements to reveal them if they use 'visually-hidden-focusable'.

Why doesn't 'd-none' text get read by screen readers?

'd-none' applies display:none, which removes the element from the layout and accessibility tree, so screen readers ignore it.

💡 Use 'visually-hidden' to hide visually but keep for screen readers; use 'd-none' to hide completely.

Property Reference

Class	Visual Effect	Screen Reader Effect	Common Use
visually-hidden	Hidden visually (no space taken)	Visible to screen readers	Hide decorative or extra info from sighted users but keep for screen readers
visually-hidden-focusable	Hidden visually but visible on keyboard focus	Visible to screen readers	Hide content but show when focused for keyboard accessibility
d-none	Hidden visually and removed from layout	Hidden from screen readers	Completely hide content from all users

Concept Snapshot

Screen reader utilities hide or show content visually while controlling accessibility. .visually-hidden hides visually but keeps content readable by screen readers. .visually-hidden-focusable hides visually but shows on keyboard focus. .d-none hides content completely from all users. Use these classes to improve accessibility without changing visual layout.

Practice

1. What is the main purpose of Bootstrap's .visually-hidden class?

easy

A. To disable all user interactions on an element

B. To make text bold and larger for better visibility

C. To hide content visually but keep it accessible to screen readers

D. To change the background color of an element

Solution

1. Step 1: Understand the role of .visually-hidden

   This class hides content from the screen but keeps it readable by screen readers.

2. Step 2: Compare with other options

   Options A, B, and C describe visual or interaction changes, not accessibility hiding.

3. Final Answer:

   To hide content visually but keep it accessible to screen readers -> Option C

4. Quick Check:

   Screen reader utility = hide visually, read by screen readers [OK]

Hint: Think: hidden visually but still read aloud [OK]

Common Mistakes:

• Confusing visual hiding with disabling interaction
• Thinking it changes text style instead of visibility
• Assuming it hides content from screen readers

2. Which of the following is the correct way to apply Bootstrap's screen reader utility to a paragraph?

easy

A. Hidden text

B. Hidden text

C. Hidden text

D. Hidden text

Solution

1. Step 1: Identify Bootstrap's current screen reader class

   Bootstrap 5 uses .visually-hidden to hide content visually but keep it accessible.

2. Step 2: Check other options

   .hidden hides content completely including from screen readers; .sr-only was used in older versions; hidden attribute hides from all users including screen readers.

3. Final Answer:

   <p class="visually-hidden">Hidden text</p> -> Option D

4. Quick Check:

   Bootstrap 5 uses .visually-hidden [OK]

Hint: Use .visually-hidden for Bootstrap 5 screen reader text [OK]

Common Mistakes:

• Using outdated .sr-only class
• Using HTML hidden attribute which hides from screen readers
• Using non-Bootstrap classes like .hidden

3. What will a screen reader announce for the following HTML snippet?

<button>Submit<span class="visually-hidden"> form</span></button>

medium

A. Submit form

B. Submit

C. form

D. Nothing, the text is hidden

Solution

1. Step 1: Understand the role of .visually-hidden

   The .visually-hidden text is invisible but still read by screen readers.

2. Step 2: Combine visible and hidden text for screen reader output

   The button text is "Submit" plus hidden " form", so screen readers read "Submit form".

3. Final Answer:

   Submit form -> Option A

4. Quick Check:

   Hidden text is read aloud with visible text [OK]

Hint: Hidden text adds to screen reader output [OK]

Common Mistakes:

• Thinking hidden text is not read aloud
• Ignoring visually hidden span inside button
• Assuming only visible text is announced

4. Identify the error in this code snippet intended to hide text visually but keep it accessible:

<span class="sr-only">Hidden info</span>

medium

A. The span tag cannot have classes

B. The class sr-only is deprecated in Bootstrap 5

C. The text will be visible to all users

D. The class should be screen-reader-only

Solution

1. Step 1: Check Bootstrap version and class usage

   Bootstrap 5 replaced .sr-only with .visually-hidden.

2. Step 2: Understand impact of using deprecated class

   Using .sr-only may not apply correct styles, so text might not be hidden visually.

3. Final Answer:

   The class sr-only is deprecated in Bootstrap 5 -> Option B

4. Quick Check:

   Use .visually-hidden, not .sr-only [OK]

Hint: Use .visually-hidden, not .sr-only in Bootstrap 5 [OK]

Common Mistakes:

• Using outdated .sr-only class
• Assuming span can't have classes
• Confusing class names for screen reader utilities

5. You want to add extra descriptive text for screen readers only, inside a button, without affecting layout or visible design. Which is the best approach?

hard

A. Add a <span class="visually-hidden"> with the extra text inside the button

B. Add a <div hidden> with the text inside the button

C. Add a <span style="display:none"> with the text inside the button

D. Add a <span> with the text and set font-size to 0

Solution

1. Step 1: Understand screen reader utility requirements

   The text must be hidden visually but still accessible to screen readers without affecting layout.

2. Step 2: Evaluate each option's effect

   Add a <span class="visually-hidden"> with the extra text inside the button uses .visually-hidden, which hides visually but keeps text accessible. Add a <div hidden> with the text inside the button uses hidden attribute which hides from screen readers. Add a <span style="display:none"> with the text inside the button uses CSS display:none which also hides from screen readers. Add a <span> with the text and set font-size to 0 hides text visually but may cause layout issues or be unreliable.

3. Final Answer:

   Add a <span class="visually-hidden"> with the extra text inside the button -> Option A

4. Quick Check:

   Use .visually-hidden for accessible hidden text [OK]

Hint: Use .visually-hidden to hide but keep accessible [OK]

Common Mistakes:

• Using hidden attribute which hides from screen readers
• Using display:none which removes from accessibility tree
• Hiding text by font-size 0 causing layout issues