FAQ
1. Can you walk me through how you decide which HTML tags to use when building a new page?
My approach is systematic and content-driven:
- Content Analysis First: I examine the content's purpose and meaning before choosing tags
- Hierarchical Structure: Use <h1> to <h6> based on content importance, not visual styling
- Semantic Purpose: <nav> for navigation, <main> for primary content, <aside> for complementary info
- Landmark Elements: <header>, <footer>, <section>, <article> for page structure
- Meaning Over Appearance: <strong> for importance, <em> for emphasis, <cite> for citations
I always ask: "What is this content's role?" rather than "How should it look?"
2. What are the benefits of using semantic HTML for accessibility and SEO?
Accessibility Benefits:
- Screen Reader Navigation: Proper landmarks (<nav>, <main>, <header>) create logical page structure
- Keyboard Navigation: Semantic elements improve focus management and tab order
- ARIA Integration: Semantic HTML reduces the need for ARIA attributes
- Form Accessibility: <label>, <fieldset>, <legend> create better form experiences
SEO Benefits:
- Content Understanding: Search engines better comprehend page structure and content hierarchy
- Rich Snippets: Semantic markup enables enhanced search results
- Mobile-First Indexing: Semantic structure improves mobile search rankings
- Core Web Vitals: Proper HTML structure contributes to performance metrics
3. Can you give a specific example where it made a measurable impact?
Image Gallery Site Refactor:
- Before: All content wrapped in generic <div> elements with class-based styling
- After: Implemented semantic structure with <article> for images, <section> for reviews, <aside> for related images
- Results: 40% improvement in screen reader navigation time, 15% increase in organic search traffic, and 25% better mobile conversion rates
- Technical Impact: Reduced ARIA attributes by 60%, improved Lighthouse accessibility score from 65 to 95
4. How do you ensure your markup is semantically correct during code reviews or audits?
I use a multi-layered validation approach:
- Automated Tools: ESLint with accessibility plugins, axe-core for automated testing
- Manual Testing: Screen reader testing (NVDA, JAWS, VoiceOver), keyboard-only navigation
- Code Review Checklist: Verify heading hierarchy, landmark usage, form labeling, and ARIA implementation
- Validation Services: W3C HTML validator, accessibility checkers, and browser developer tools
- Peer Reviews: Cross-team accessibility reviews with UX specialists
5. Have you ever had to refactor a non-semantic layout? What challenges did you face and how did you resolve them?
Image Gallery Site Migration:
- Challenge: Table-based layouts with nested <div> structures, no heading hierarchy, and inline styles
- Approach: Incremental refactoring with feature flags to maintain functionality
- Process: Content audit → semantic mapping → progressive enhancement → testing
- Resolution: Implemented proper <article>, <section>, and heading structure while maintaining visual design
- Outcome: 50% reduction in maintenance time, improved SEO rankings, and better user experience
6. How do screen readers interpret semantic HTML, and how do you test for that?
Screen Reader Interpretation:
- Landmark Navigation: Screen readers use semantic elements to create navigation menus
- Content Announcement: Proper heading hierarchy creates logical reading order
- Form Context: Semantic form elements provide better input context and error handling
- Dynamic Content: ARIA live regions work better with semantic HTML structure
Testing Methods:
- Tools: NVDA (Windows), JAWS, VoiceOver (Mac), TalkBack (Android)
- Techniques: Keyboard-only navigation, focus management testing, content announcement verification
- Validation: axe-core automated testing, manual screen reader testing, accessibility audits
