Angular template accessibility validation rules that ensure compliance with WCAG guidelines and ARIA standards, making applications accessible to users with disabilities.
Enforces alt text attributes on images for screen reader accessibility.
/**
* Enforces alt attribute on img elements or role='img'
* Ensures images are accessible to screen readers
*/
export class TemplateAccessibilityAltTextRule extends Lint.Rules.AbstractRule {
static readonly metadata: Lint.IRuleMetadata;
static readonly FAILURE_STRING: string;
apply(sourceFile: ts.SourceFile): Lint.RuleFailure[];
}Usage Examples:
Good with alt text:
<img src="logo.png" alt="Company logo">
<img src="chart.png" alt="Sales data showing 20% increase">
<div role="img" aria-label="Weather icon showing sunny conditions"></div>Bad without alt text:
<img src="logo.png"> <!-- Missing alt attribute -->
<img src="chart.png" alt=""> <!-- Empty alt for informative image -->Validates that certain elements have accessible content.
/**
* Ensures elements like headings and buttons have accessible text content
* Validates that interactive elements provide meaningful content for assistive technologies
*/
export class TemplateAccessibilityElementsContentRule extends Lint.Rules.AbstractRule {
static readonly metadata: Lint.IRuleMetadata;
static readonly FAILURE_STRING: string;
apply(sourceFile: ts.SourceFile): Lint.RuleFailure[];
}Usage Examples:
Good with content:
<button>Save Changes</button>
<h1>Page Title</h1>
<a href="/help">Get Help</a>Bad without content:
<button></button> <!-- Empty button -->
<h1></h1> <!-- Empty heading -->
<a href="/link"></a> <!-- Empty link -->Validates proper label-input relationships for form accessibility.
/**
* Ensures form labels are properly associated with input elements
* Validates label 'for' attributes match input 'id' attributes
*/
export class TemplateAccessibilityLabelForVisitor extends Lint.Rules.AbstractRule {
static readonly metadata: Lint.IRuleMetadata;
static readonly FAILURE_STRING: string;
apply(sourceFile: ts.SourceFile): Lint.RuleFailure[];
}Usage Examples:
Good label associations:
<label for="username">Username:</label>
<input id="username" type="text" name="username">
<label>
Email:
<input type="email" name="email">
</label>Bad label associations:
<label for="nonexistent">Username:</label>
<input id="username" type="text"> <!-- ID mismatch -->
<label>Username:</label>
<input type="text" name="username"> <!-- No association -->Prevents positive tabindex values that disrupt natural tab order.
/**
* Prevents positive tabindex values in templates
* Maintains natural document tab order for keyboard navigation
*/
export class TemplateAccessibilityTabindexNoPositiveRule extends Lint.Rules.AbstractRule {
static readonly metadata: Lint.IRuleMetadata;
static readonly FAILURE_STRING: string;
apply(sourceFile: ts.SourceFile): Lint.RuleFailure[];
}Usage Examples:
Good tabindex usage:
<div tabindex="0">Focusable div</div>
<div tabindex="-1">Programmatically focusable</div>Bad positive tabindex:
<div tabindex="1">First element</div> <!-- Disrupts natural order -->
<div tabindex="2">Second element</div> <!-- Creates confusion -->Validates proper scope attributes on table headers.
/**
* Ensures table headers have appropriate scope attributes
* Improves table accessibility for screen readers
*/
export class TemplateAccessibilityTableScopeRule extends Lint.Rules.AbstractRule {
static readonly metadata: Lint.IRuleMetadata;
static readonly FAILURE_STRING: string;
apply(sourceFile: ts.SourceFile): Lint.RuleFailure[];
}Usage Examples:
Good table scopes:
<table>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Age</th>
<th scope="col">Department</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">John Doe</th>
<td>30</td>
<td>Engineering</td>
</tr>
</tbody>
</table>Validates that ARIA attributes are used correctly and have valid values.
/**
* Validates ARIA attributes and their values
* Ensures ARIA attributes follow specification and provide meaningful accessibility information
*/
export class TemplateAccessibilityValidAriaRule extends Lint.Rules.AbstractRule {
static readonly metadata: Lint.IRuleMetadata;
static readonly FAILURE_STRING: string;
apply(sourceFile: ts.SourceFile): Lint.RuleFailure[];
}Usage Examples:
Good ARIA usage:
<button aria-label="Close dialog">×</button>
<div role="alert" aria-live="polite">Status message</div>
<input aria-describedby="password-help" type="password">
<div id="password-help">Password must be at least 8 characters</div>Bad ARIA usage:
<div aria-label="123">Content</div> <!-- Invalid aria-label value -->
<button aria-invalid="yes">Submit</button> <!-- Should be "true" or "false" -->
<div role="invalid-role">Content</div> <!-- Invalid role --><div aria-live="polite" id="status">
<!-- Status updates announced to screen readers -->
</div>
<div aria-live="assertive" id="errors">
<!-- Error messages announced immediately -->
</div><header role="banner">
<nav role="navigation">
<!-- Navigation content -->
</nav>
</header>
<main role="main">
<!-- Main content -->
</main>
<aside role="complementary">
<!-- Sidebar content -->
</aside>
<footer role="contentinfo">
<!-- Footer content -->
</footer><fieldset>
<legend>Personal Information</legend>
<label for="first-name">First Name (required)</label>
<input
id="first-name"
type="text"
required
aria-describedby="first-name-error"
aria-invalid="false">
<div id="first-name-error" role="alert" aria-live="polite">
<!-- Error message appears here -->
</div>
</fieldset>{
"rules": {
"template-accessibility-alt-text": true,
"template-accessibility-elements-content": true,
"template-accessibility-label-for": true,
"template-accessibility-tabindex-no-positive": true,
"template-accessibility-table-scope": true,
"template-accessibility-valid-aria": true
}
}