Intermediate LevelHTML & Semantic Web
What are the usability and accessibility tradeoffs of the HTML autofocus attribute?
❓ Interview Prompt: Explain autofocus attribute on inputs, automatic page scrolling, screen reader context disruption, and mobile keyboard popups.
The 'autofocus' attribute automatically shifts focus to a designated form control upon page load.
Accessibility & Usability Tradeoffs:
1
Screen Readers: Automatically shifting focus causes screen readers to skip introductory page content and headings, disorienting visually impaired users.
2
Mobile Touch: Spontaneously pops up soft keyboards on smartphones, obscuring page content.
3
Page Jumps: Can cause unexpected viewport scroll jumps on slow connections.
Best Practice:
Limit 'autofocus' to dedicated single-purpose pages (like search engine homepages or login screens).
Code Implementation Example
html
<!-- Single-purpose login input where autofocus is acceptable -->
<form>
<label for="login-username">Username:</label>
<input type="text" id="login-username" name="username" autofocus>
</form>💡Single-purpose login input utilizing autofocus attribute.
🎯 Interview Key Takeaway
Avoid autofocus on content-heavy pages to prevent disorienting screen readers and triggering soft keyboards.
#autofocus#Accessibility#Usability#Intermediate
Back to all HTML & Semantic Web Questions→