Bootstrap Regulatory Frameworks & Compliance 4 — Questions and Answers
Question 1: A Bootstrap-powered healthcare site must comply with HIPAA. Which Bootstrap UI pattern poses the highest risk of unintentional PHI (Protected Health Information) exposure?
- Accordion panels for FAQ content
- Toast notifications displaying patient status messages (Correct answer)
- Breadcrumb navigation showing department names
- Progress bars for form completion
Correct answer: Toast notifications displaying patient status messages
Toast notifications can display sensitive status messages in the DOM and may be cached or captured by browser extensions, making them a HIPAA risk if they contain PHI without proper controls.
Question 2: Which Bootstrap JavaScript plugin requires explicit aria-expanded attribute management to comply with WCAG 2.1 SC 4.1.2 (Name, Role, Value)?
- Tooltip
- Collapse (Correct answer)
- Carousel
- Scrollspy
Correct answer: Collapse
Bootstrap's Collapse plugin must toggle aria-expanded on the triggering element to communicate the expanded/collapsed state to assistive technologies, per WCAG 4.1.2.
Question 3: Under the EU Web Accessibility Directive (WAD), public sector websites using Bootstrap must meet which standard?
- WCAG 2.0 Level A only
- WCAG 2.1 Level AA
- Section 508 Revised
- EN 301 549 (which references WCAG 2.1 AA) (Correct answer)
Correct answer: EN 301 549 (which references WCAG 2.1 AA)
The EU Web Accessibility Directive mandates conformance with EN 301 549, which incorporates WCAG 2.1 Level AA as its core accessibility requirements for public sector sites.
Question 4: What is the primary compliance concern with using Bootstrap's data-bs-toggle='tooltip' on an icon-only button with no visible label?
- It violates CSP by injecting inline styles
- The icon lacks an accessible name, violating WCAG 1.3.1
- Tooltips are not keyboard-focusable by default, violating WCAG 2.1.1 (Correct answer)
- The tooltip content is not indexed by search engines
Correct answer: Tooltips are not keyboard-focusable by default, violating WCAG 2.1.1
WCAG 2.1.1 requires all functionality to be operable by keyboard; Bootstrap tooltips on icon buttons are visible on hover but may not be reliably triggered by keyboard focus alone without additional implementation.
Question 5: Which Bootstrap feature directly supports compliance with WCAG 2.1 SC 1.4.4 (Resize Text), requiring text to be resizable up to 200% without loss of content?
- Bootstrap's fixed pixel font-size base of 16px
- Bootstrap's use of rem units for typography and spacing (Correct answer)
- Bootstrap's text-nowrap utility
- Bootstrap's font-size-* utility classes with px values
Correct answer: Bootstrap's use of rem units for typography and spacing
Bootstrap uses rem-based font sizes and spacing, which scale proportionally when users resize text in browser settings, unlike px-based values that remain fixed regardless of user preferences.
Question 6: A Bootstrap carousel without auto-pause on focus would violate which WCAG 2.1 success criterion?
- 1.2.2 Captions (Prerecorded)
- 2.2.2 Pause, Stop, Hide (Correct answer)
- 2.4.4 Link Purpose
- 3.2.1 On Focus
Correct answer: 2.2.2 Pause, Stop, Hide
WCAG 2.2.2 requires that moving or auto-updating content can be paused, stopped, or hidden; a carousel that continues cycling when focused fails this criterion.
Question 7: When Bootstrap's modal is open, which aria attribute must be applied to the main page content behind the modal for WCAG compliance?
- aria-hidden='true' (Correct answer)
- aria-disabled='true'
- aria-readonly='true'
- aria-busy='true'
Correct answer: aria-hidden='true'
Setting aria-hidden='true' on the content behind an open modal hides it from the accessibility tree, preventing screen readers from reading background content while the dialog is active.
Bootstrap Regulatory Frameworks & Compliance 4
A Bootstrap-powered healthcare site must comply with HIPAA.
Which Bootstrap UI pattern poses the highest risk of unintentional PHI (Protected Health Information) exposure?