The <script> Element
As defined in the HTML Living Standard, the <script> element is used to embed or reference an executable script (typically JavaScript).
<!-- External script with defer for performance and A11y -->
<script src="app.js" defer></script>
<!-- Inline script -->
<script>
console.log("Hello, Accessible Web!");
</script>Scripts can dramatically enhance a page, but if implemented poorly, they can create insurmountable barriers for users of assistive technology.
View HTML Living Standard: The script elementAccessibility Impact: Focus & State Management
The biggest accessibility risk with scripts is the "silent update"—changing the page content without notifying the user.
WCAG Requirement: Status Messages
Success Criterion 4.1.3 (Level AA): Status Messages.
When a script updates a part of the page (e.g., a "Saved" notification or a search result count), screen reader users must be notified without the focus being moved. This is achieved using or .
Scripting Best Practices for A11y
- Avoid Keyboard Traps: Ensure that any script-driven components (like modals) allow the user to exit using the
Esckey. - Manage Focus: When a script opens a dialog or moves a user to a new section, programmatically move the focus (
element.focus()) to the new content. - Progressive Enhancement: Ensure the core content is accessible even if JavaScript fails to load or is disabled.
A11y Tip: The 'defer' Attribute
Using defer ensures the script executes after the HTML is parsed. This prevents the browser from blocking the rendering of the page, which is critical for users on slow connections or those using high-latency assistive devices.