ARIA attributes in Bootstrap components - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add an ARIA attribute that labels the button for screen readers.

Bootsrap

<button type="button" class="btn btn-primary" [1]="Close">Close</button>

Drag options to blanks, or click blank then click option'

Aaria-label

Baria-hidden

Caria-checked

Daria-live

Attempts:

3 left

💡 Hint

Common Mistakes

Using aria-hidden hides the element from screen readers, which is not what we want here.

aria-checked is for checkboxes or toggle buttons, not regular buttons.

aria-live is for dynamic content updates, not labeling.

The aria-label attribute provides an accessible name for the button, helping screen readers understand its purpose.

2fill in blank

medium

Complete the code to link the button to the modal it controls using ARIA attributes.

Bootsrap

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" [1]="exampleModal">Launch modal</button>

Drag options to blanks, or click blank then click option'

Aaria-expanded

Baria-controls

Caria-hidden

Daria-pressed

Attempts:

3 left

💡 Hint

Common Mistakes

aria-expanded indicates if a collapsible element is open, not which element is controlled.

aria-hidden hides content from screen readers, not linking elements.

aria-pressed is for toggle buttons, not modal triggers.

The aria-controls attribute tells assistive technologies which element the button controls, linking it to the modal with id 'exampleModal'.

3fill in blank

hard

Fix the error in the modal dialog by adding the correct ARIA role attribute.

Bootsrap

<div class="modal" tabindex="-1" [1]="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- Modal content here -->
    </div>
  </div>
</div>

Drag options to blanks, or click blank then click option'

Aaria-modal

Baria-label

Caria-hidden

Drole

Attempts:

3 left

💡 Hint

Common Mistakes

aria-label provides a label but does not define the element's role.

aria-hidden hides the modal from screen readers, which is incorrect.

aria-modal indicates modal behavior but does not replace the role attribute.

The role="dialog" attribute defines the modal as a dialog window, which helps assistive technologies announce it properly.

4fill in blank

hard

Fill both blanks to make the navbar toggle button accessible with ARIA attributes.

Bootsrap

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" [1]="navbarSupportedContent" [2]="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>

Drag options to blanks, or click blank then click option'

Aaria-controls

Baria-expanded

Caria-hidden

Daria-pressed

Attempts:

3 left

💡 Hint

Common Mistakes

Using aria-hidden hides the content from screen readers.

aria-pressed is for toggle buttons but not appropriate here.

Swapping the attributes causes incorrect accessibility behavior.

The aria-controls attribute links the button to the collapsible navbar content. The aria-expanded attribute indicates whether the content is currently expanded or collapsed.

5fill in blank

hard

Fill all three blanks to create an accessible accordion button with proper ARIA attributes.

Bootsrap

<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" [1]="collapseOne" [2]="false" [3]="section1">Section 1</button>

Drag options to blanks, or click blank then click option'

Aaria-controls

Baria-expanded

Caria-labelledby

Daria-hidden

Attempts:

3 left

💡 Hint

Common Mistakes

Using aria-hidden hides the content from screen readers.

Confusing aria-labelledby with aria-label.

Missing aria-expanded causes screen readers to not announce state changes.

The aria-controls attribute links the button to the collapsible content. aria-expanded shows if the content is open or closed. aria-labelledby connects the button to a label element for screen readers.

Practice

1. What is the main purpose of ARIA attributes in Bootstrap components?

easy

A. To increase the loading speed of Bootstrap pages

B. To change the visual style of components

C. To add animations to Bootstrap elements

D. To improve accessibility by describing roles and states to assistive technologies

Solution

1. Step 1: Understand ARIA attributes

   ARIA attributes provide extra information about UI elements to assistive technologies like screen readers.

2. Step 2: Identify their role in Bootstrap

   Bootstrap uses ARIA attributes to make components accessible, not for styling or performance.

3. Final Answer:

   To improve accessibility by describing roles and states to assistive technologies -> Option D

4. Quick Check:

   ARIA = Accessibility info [OK]

Hint: ARIA attributes describe roles and states for accessibility [OK]

Common Mistakes:

• Thinking ARIA changes visual styles
• Assuming ARIA improves page speed
• Confusing ARIA with animations

2. Which ARIA attribute is correctly used in this Bootstrap button to indicate it controls a collapsible section?
<button class='btn btn-primary' aria-controls='collapseExample' aria-expanded='false'>Toggle</button>

easy

A. aria-controls and aria-expanded

B. aria-hidden and aria-pressed

C. aria-label and aria-live

D. aria-checked and aria-disabled

Solution

1. Step 1: Identify ARIA attributes for collapsible controls

   Buttons controlling collapsible areas use aria-controls to reference the collapsible element and aria-expanded to indicate open/closed state.

2. Step 2: Match attributes in the code snippet

   The button uses aria-controls='collapseExample' and aria-expanded='false', which is correct for collapsible control.

3. Final Answer:

   aria-controls and aria-expanded -> Option A

4. Quick Check:

   Collapsible button uses aria-controls + aria-expanded [OK]

Hint: Collapsible buttons use aria-controls and aria-expanded [OK]

Common Mistakes:

• Using aria-hidden which hides elements
• Confusing aria-pressed with aria-expanded
• Using aria-checked which is for checkboxes

3. What will be the effect of this Bootstrap alert component on screen readers?

<div class='alert alert-warning' role='alert' aria-live='assertive'>Warning message!</div>

medium

A. Screen readers will announce the warning message immediately and with high priority

B. Screen readers will ignore the alert message

C. The alert will only be visible visually but not read aloud

D. The alert will be read only when the user focuses on it

Solution

1. Step 1: Understand role='alert'

   The role='alert' tells assistive technologies this is an important message that should be announced immediately.

2. Step 2: Understand aria-live='assertive'

   This attribute makes screen readers announce the content as soon as it appears, interrupting other speech if needed.

3. Final Answer:

   Screen readers will announce the warning message immediately and with high priority -> Option A

4. Quick Check:

   role alert + aria-live assertive = immediate announcement [OK]

Hint: role alert with aria-live assertive triggers immediate screen reader alert [OK]

Common Mistakes:

• Thinking alerts are ignored by screen readers
• Assuming aria-live polite delays announcement
• Believing alerts require focus to be read

4. Identify the error in this Bootstrap modal trigger button:

<button type='button' class='btn btn-primary' data-bs-toggle='modal' data-bs-target='#myModal' aria-expanded='true'>Open Modal</button>

medium

A. data-bs-target should be a class selector, not an ID

B. data-bs-toggle should be 'dropdown' instead of 'modal'

C. aria-expanded should not be set on the modal trigger button

D. Missing aria-label attribute for accessibility

Solution

1. Step 1: Check ARIA usage on modal trigger buttons

   Modal trigger buttons should not use aria-expanded because modals are overlays, not expandable sections.

2. Step 2: Verify other attributes

   data-bs-toggle='modal' and data-bs-target='#myModal' are correct. aria-label is optional if button text is descriptive. data-bs-target uses ID selector correctly.

3. Final Answer:

   aria-expanded should not be set on the modal trigger button -> Option C

4. Quick Check:

   Modal triggers do not use aria-expanded [OK]

Hint: Modal triggers do not use aria-expanded attribute [OK]

Common Mistakes:

• Adding aria-expanded to modal buttons
• Confusing modal toggle with dropdown toggle
• Using class selector instead of ID for data-bs-target

5. You want to make a Bootstrap tab component fully accessible. Which ARIA attributes should you add to the tab buttons to indicate their roles and states correctly?

hard

A. aria-checked, aria-expanded, and aria-hidden

B. role='tab', aria-selected, and aria-controls

C. role='button', aria-pressed, and aria-live

D. aria-label, aria-disabled, and aria-haspopup

Solution

1. Step 1: Identify ARIA roles for tabs

   Tab buttons should have role='tab' to define their role in the tablist.

2. Step 2: Use state attributes for tabs

   aria-selected indicates which tab is active, and aria-controls links the tab to its tab panel.

3. Final Answer:

   role='tab', aria-selected, and aria-controls -> Option B

4. Quick Check:

   Tabs need role tab + aria-selected + aria-controls [OK]

Hint: Tabs use role tab plus aria-selected and aria-controls [OK]

Common Mistakes:

• Using aria-checked which is for checkboxes
• Confusing aria-pressed with aria-selected
• Adding aria-live which is for live regions