How does accessibility relate to text formatting in HTML?
Accessibility and Text Formatting in HTML & CSS
Accessibility ensures that all users, including those using screen readers or other assistive technologies, can understand and navigate content. Text formatting plays a role in conveying meaning and emphasis in a way that is both visually and semantically correct.
- 1
Use semantic HTML tags like
<strong>,<em>,<h1>-<h6>,<p>instead of purely visual tags like<b>or<i>. - 2
Combine CSS properties like
font-weightorfont-stylewith semantic tags to style text without losing meaning. - 3
Avoid using color alone to convey information; ensure sufficient contrast for readability.
- 4
Use relative units (
em,rem) for font sizes to respect user preferences and browser zoom settings. - 5
Maintain proper line-height and spacing to improve readability for all users.
In this example, <strong> conveys meaning to assistive technologies while CSS font-weight and color enhance visual emphasis. Users relying on screen readers receive the semantic information without relying on visual styling alone.
- 1
Semantic HTML ensures accessibility while CSS enhances visual presentation.
- 2
Avoid using
<b>or<i>solely for styling; they lack semantic meaning. - 3
Proper contrast, spacing, and scalable font sizes improve readability for all users.
- 4
Combining CSS with semantic HTML strikes a balance between design and accessibility.
Scenario Questions
0-2 years experience
- 1You need to style a paragraph so its font size respects the user's browser default and can be resized with browser zoom. How would you write the CSS?
- 2If you set a heading's color to #777 on a white background, what accessibility issue might arise and how would you fix it using CSS?
- 3How do you ensure that bold text used for emphasis remains readable by screen readers?
2-5 years experience
- 1We have a component where the text color is defined in a CSS variable that changes with a dark‑mode toggle. Users report insufficient contrast for low‑vision users. Walk me through how you'd investigate and resolve this.
- 2A client’s legacy HTML uses <b> tags for emphasis and inline style attributes for colors. They want WCAG AA compliance without rewriting all markup. What CSS strategy would you propose?
- 3During QA a screen reader reads a button as "button button" after you added a ::before pseudo‑element for an icon. Why does this happen and how can you adjust your CSS to avoid it?
5-8 years experience
- 1Design a reusable design‑system token for typography that enforces accessible line‑height, font‑size scaling, and color contrast across multiple products. What CSS techniques and tooling would you include?
- 2Our web app dynamically injects user‑generated markdown that can contain arbitrary HTML. How would you safeguard text formatting to stay accessible while preventing style leakage?
- 3Explain the trade‑offs between using relative units (rem, em) versus clamp() for responsive, accessible typography on a high‑traffic site.
8+ years experience
- 1We are planning a company‑wide migration from a legacy CSS framework that hard‑codes colors to a new accessible design system. How would you orchestrate the rollout to ensure text contrast and semantic markup stay compliant across dozens of teams?
- 2At scale, how do you measure and enforce accessibility compliance for text formatting across thousands of pages, and what role does CSS play in that pipeline?
- 3Discuss how you’d balance performance (critical CSS size) with the need to provide multiple high‑contrast themes for users with different accessibility needs.
Follow-up Questions
- Can you show a CSS snippet that guarantees minimum contrast?
- What automated tools would you run to verify your solution?
- How do you handle edge cases like high‑contrast OS settings?