Skip to main content
Mapagam

Implementing Accessibility Features

1. Using ARIA Labels

Property Description Usage
aria-label Provides a string label for an element that is not visible on screen. <button aria-label="Close">X</button>
aria-labelledby References the ID of another element that contains the label text. <div id="label">Submit</div><button aria-labelledby="label"></button>
aria-describedby Provides a description for an element, often used with error messages. <input aria-describedby="error"><div id="error">Invalid input</div>

Example: Using aria-label for a navigation icon

<ion-icon name="menu" aria-label="Open menu"></ion-icon>

Example: Using aria-labelledby for a form field

<label id="username-label">Username:</label><input aria-labelledby="username-label" type="text">

2. Implementing Keyboard Navigation

Feature Description Implementation
Tab Order Controls the sequence in which focus moves through elements 
<button tabindex="0">Focusable Button</button>
<input type="text" tabindex="1">
Focus Management Ensures focus is managed properly in dynamic content 
const focusableElements = document.querySelectorAll('button, input, a');
focusableElements[0].focus();
Keyboard Events Handles keyboard interactions for accessibility 
element.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') handleAction();
});

Example: Keyboard Navigation in Ionic Components

import { IonButton, IonInput } from '@ionic/react';

const AccessibleForm = () => {
  const handleKeyDown = (e) => {
    if (e.key === 'Enter') {
      e.preventDefault();
      // Submit form logic
    }
  };

  return (
    <IonInput
      onKeyPress={handleKeyDown}
      placeholder="Press Enter to submit"
    />
  );
};
Note: Ensure all interactive elements are reachable via keyboard.
Warning: Avoid setting tabindex to negative values unless necessary.

3. Using Focus Management

Property Description Usage
tabindex Controls the order in which elements receive focus <button tabindex="0">Focusable Button</button>
focus() Programmatically sets focus to an element document.getElementById('myInput').focus();
aria-label Provides an accessible name for elements without visible text <button aria-label="Close"></button>

Example: Managing Focus in a Modal

const modal = document.getElementById('myModal');
const firstFocusable = modal.querySelector('button');
const lastFocusable = modal.querySelectorAll('button')[modal.querySelectorAll('button').length - 1];

function trapFocus(event) {
  if (event.key === 'Tab') {
    if (event.shiftKey && document.activeElement === firstFocusable) {
      lastFocusable.focus();
      event.preventDefault();
    } else if (!event.shiftKey && document.activeElement === lastFocusable) {
      firstFocusable.focus();
      event.preventDefault();
    }
  }
}

modal.addEventListener('keydown', trapFocus);
Note: Focus management is critical for keyboard navigation and screen reader users.

Best Practices for Focus Management

  • Use tabindex to control focus order in custom components
  • Ensure focus is managed within modals to prevent tab trapping
  • Provide aria-label for elements that lack visible text

4. Adding Screen Reader Support

Screen reader support is crucial for making Ionic applications accessible to users with visual impairments. Ionic provides several built-in features and best practices to ensure your app is compatible with screen readers.

Feature Description Implementation
aria-label Provides a text alternative for elements that do not have visible text. <ion-button aria-label="Close dialog">X</ion-button>
aria-labelledby Associates an element with a label using the ID of another element. <ion-input aria-labelledby="input-label"></ion-input>
aria-describedby Provides a description for an element, often used with error messages. <ion-input aria-describedby="error-message"></ion-input>
role Defines the role of an element for screen readers (e.g., button, navigation). <div role="navigation">...</div>
tabindex Controls the order in which elements receive focus. <ion-card tabindex="0">...</ion-card>

Example: Using aria-label for a button

<ion-button aria-label="Close dialog">
  <ion-icon name="close"></ion-icon>
</ion-button>

Example: Using aria-labelledby for a form field

<label>Username:</label>
<ion-input aria-labelledby="username-label"></ion-input>
Note: Always ensure that aria-label or aria-labelledby is used for elements that do not have visible text to provide context for screen reader users.
Warning: Avoid using aria-label on elements that already have visible text, as it can cause confusion for screen reader users.

5. Implementing Color Contrast

Property Value Description
color #000000 Text color for high contrast
background-color #FFFFFF Background color for high contrast
contrast-ratio 4.5:1 Minimum contrast ratio for normal text
contrast-ratio (large text) 3:1 Minimum contrast ratio for large text (>18pt)

Example: Setting High Contrast Colors

.high-contrast-text {
  color: #000000;
  background-color: #FFFFFF;
  font-size: 16px;
  line-height: 1.4;
}
Note: Ensure all interactive elements maintain a contrast ratio of at least 4.5:1 against their background.
Warning: Avoid using color alone to convey information; provide text alternatives or additional visual cues.

6. Using Semantic HTML

Element Description Accessibility Benefits
<header> Represents the introductory content or a set of navigational links. Helps screen readers identify the top section of the page.
<nav> Defines a section with navigation links. Allows users to jump directly to navigation areas.
<main> Represents the dominant content of the document. Assists screen readers in identifying the main content area.
<article> Represents a self-contained composition in a document. Improves readability for users with screen readers by grouping related content.
<section> Represents a thematic grouping of content. Helps structure content for better navigation and understanding.
<aside> Represents content that is tangentially related to the surrounding content. Allows users to skip aside content if desired.
<footer> Represents the footer of a document or section. Helps users identify the end of content sections.

Example: Semantic HTML in Ionic

<ion-header>
  <ion-toolbar>
    <ion-title>My App</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <header>
    <h1>Welcome to My App</h1>
  </header>

  <main>
    <section>
      <h2>Features</h2>
      <p>This app includes various features.</p>
    </section>

    <aside>
      <p>Related content here.</p>
    </aside>
  </main>

  <footer>
    <p>&copy; 2026 My App</p>
  </footer>
</ion-content>

7. Creating Accessible Forms

Property Description Usage
formControlName Associates a form control with a specific form field in Angular Reactive Forms. formControlName="username"
ion-label Provides accessible labels for form inputs. <ion-label>Username</ion-label>
aria-labelledby Associates an element with a label using an ID reference for screen readers. aria-labelledby="label-id"
aria-describedby Provides additional descriptive information for screen readers. aria-describedby="help-text-id"

Example: Accessible Form with Ionic

import { ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-accessible-form',
  template: `
    <form [formGroup]="myForm">
      <ion-item>
        <ion-label position="stacked">Username</ion-label>
        <ion-input formControlName="username"></ion-input>
      </ion-item>

      <ion-item>
        <ion-label position="stacked">Email</ion-label>
        <ion-input formControlName="email"></ion-input>
      </ion-item>

      <ion-button type="submit" (click)="onSubmit()">Submit</ion-button>
    </form>
  `
})
export class AccessibleFormComponent {
  myForm = new FormGroup({
    username: new FormControl(''),
    email: new FormControl('')
  });

  onSubmit() {
    console.log(this.myForm.value);
  }
}
Note: Ensure that all form controls have associated labels using ion-label or aria-labelledby for screen reader accessibility.
Warning: Avoid using ion-item without labels or descriptions as they can be confusing for users relying on assistive technologies.

Skip links allow keyboard users to bypass repetitive navigation and jump directly to the main content of a page. This improves accessibility for users who rely on keyboard navigation or screen readers.

Property Description Usage
href Specifies the URL or fragment identifier to navigate to. href="#main-content"
class Assigns CSS classes for styling or JavaScript targeting. class="skip-link" 
<!-- Skip link -->
<a href="#main-content" class="skip-link">Skip to main content</a>

<!-- Main content -->
<main id="main-content">
  <h1>Welcome to Ionic App</h1>
  <p>This is the main content area.</p>
</main>
Note: The skip link should be visually hidden until it receives focus to avoid cluttering the UI for sighted users. 
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 10px;
  text-decoration: none;
  z-index: 1000;
}

.skip-link:focus {
  top: 10px;
}

9. Using Touch Target Sizes

Element Minimum Size (px) Notes
Button 44x44 Ensures sufficient touch target size for accessibility
Link 44x44 Recommended for touch targets to improve usability
Icon 44x44 Icons should be part of a larger touch target

Example: Button Touch Target Size

<ion-button style="width: 44px; height: 44px;">
  <ion-icon name="heart"></ion-icon>
</ion-button>
Note: Ensure all interactive elements meet the minimum 44x44 px touch target size to comply with accessibility standards.

10. Testing with Screen Readers

Example: Basic Accessibility Test Setup

// Configure Ionic app for accessibility testing
import { TestBed } from &#x27;@angular/core/testing&#x27;;
import { IonContent, IonHeader, IonTitle } from &#x27;@ionic/angular&#x27;;

TestBed.configureTestingModule({
  declarations: [IonContent, IonHeader, IonTitle],
  imports: [IonicModule.forRoot()]
});

const fixture = TestBed.createComponent(IonContent);
const component = fixture.componentInstance;
Screen Reader Supported Platforms Testing Tools
NVDA (Windows) Windows 10+ nvda.exe, JAWS, Narrator
VoiceOver (macOS) macOS 10.15+ System Preferences > Accessibility > VoiceOver
TalkBack (Android) Android 5.0+ Settings > Accessibility > TalkBack
JAWS (Windows) Windows 10+ jaws.exe, NVDA, Narrator
Note: Ensure all interactive elements have proper ARIA labels and roles for screen reader compatibility.

Testing Workflow

  1. Launch screen reader application
  2. Navigate through app using keyboard shortcuts (e.g., Ctrl+Alt+Right for next element)
  3. Verify that all content is announced correctly
  4. Test focus order and skip links
  5. Confirm that interactive elements provide appropriate feedback

Comparison: Screen Reader Support

  • NVDA: Free, open-source, excellent for Windows
  • VoiceOver: Built-in macOS feature, high quality
  • TalkBack: Default Android screen reader, good for mobile
  • JAWS: Commercial, most comprehensive support

11. Using Accessible Icons

Icon Description Accessibility Attributes Usage
ion-icon Ionicons are scalable vector icons that can be customized with CSS. aria-label, role="img" Use for visual indicators that convey meaning.
ion-contrast Icon indicating contrast settings for accessibility. aria-label="High Contrast Mode" Used in settings or theme customization UIs.
ion-moon Represents dark mode or night theme. aria-label="Dark Mode" Used in theme toggle controls.

Example: Using ion-icon with ARIA Label

<ion-icon name="heart" aria-label="Like this post"></ion-icon>

Example: Using ion-icon with role and title

<ion-icon name="settings" role="img" title="Settings Menu"></ion-icon>
Note: Always provide an aria-label or title attribute for icons that do not have text alternatives.
Warning: Avoid using icons alone as interactive elements without additional text or ARIA attributes.

Was this article helpful?

Related Cheat Sheets