Accessibility Features

Build inclusive web applications with Oorian's built-in WCAG compliance features.

WCAG Compliance Made Easy

Oorian provides type-safe APIs for ARIA attributes, semantic HTML, and accessibility patterns.

ARIA Attributes

25+ type-safe methods for aria-label, aria-expanded, aria-live, roles, and more.

Keyboard Navigation

Skip links, focus trapping for modals, and proper tab order management.

Screen Reader Support

Live regions for announcements and visually hidden text for context.

Language Support

Document language declaration and text direction for internationalization.

Form Validation

Accessible error messages, required field indicators, and label associations.

Semantic HTML

Proper heading hierarchy, landmarks, and meaningful element structure.

ARIA Attributes API

Every Element in Oorian includes methods for setting ARIA attributes. These methods provide type-safe, self-documenting accessibility support.

java

// Set accessible labels
button.setAriaLabel("Close dialog");
input.setAriaLabelledBy("form-title");
field.setAriaDescribedBy("help-text");

// Use type-safe roles
nav.setRole(AriaRole.NAVIGATION);
dialog.setRole(AriaRole.DIALOG);
alert.setRole(AriaRole.ALERT);

// State management
accordion.setAriaExpanded(true);
menuButton.setAriaHasPopup(AriaPopupType.MENU);
tab.setAriaCurrent(AriaCurrent.PAGE);

// Live regions for dynamic content
status.setAriaLive(AriaLive.POLITE);
alert.setAriaLive(AriaLive.ASSERTIVE);

// Form validation
input.setAriaInvalid(true);
input.setAriaErrorMessage("email-error");
input.setAriaRequired(true);

Type-Safe Enumerations

AriaRole

60+ roles: BUTTON, DIALOG, NAVIGATION, ALERT, TAB, MENU, etc.

AriaLive

OFF, POLITE, ASSERTIVE for live region announcements

AriaCurrent

PAGE, STEP, LOCATION, DATE, TIME for current item

AriaPopupType

MENU, LISTBOX, TREE, GRID, DIALOG for popup types

Accessibility Components

Oorian provides ready-to-use components for common accessibility patterns.

SkipLink

Allows keyboard users to bypass navigation and jump directly to main content.

java

// Add as first element in body
body.addElement(new SkipLink("main-content", "Skip to main content"));

// Or with default text
body.addElement(new SkipLink("main-content"));

// The target element needs a matching ID
mainContent.setId("main-content");
mainContent.setTabIndex(-1); // Allow focus

VisuallyHidden

Text that is invisible to sighted users but readable by screen readers.

java

// Add context to icon buttons
Button deleteBtn = new Button();
deleteBtn.addElement(new FaIcon(FaIconName.TRASH));
deleteBtn.addElement(new VisuallyHidden("Delete item"));

// Clarify ambiguous links
Anchor link = new Anchor("/article/123");
link.setText("Read more");
link.addElement(new VisuallyHidden(" about Web Accessibility"));

LiveRegion

Announces dynamic content changes to screen readers without moving focus.

java

// Create a polite live region for status messages
LiveRegion status = new LiveRegion();
body.addElement(status);

// Announce messages (polite - waits for user idle)
status.announce("File saved successfully");

// For urgent alerts, use assertive mode
LiveRegion alerts = new LiveRegion(AriaLive.ASSERTIVE);
alerts.announce("Session expires in 1 minute");

FocusTrap

Constrains keyboard focus within a container for modals and dialogs.

java

// Create a modal dialog
Div modal = new Div();
modal.setRole(AriaRole.DIALOG);
modal.setAriaModal(true);

// Create focus trap
FocusTrap trap = new FocusTrap(modal);

// Activate when showing modal
trap.activate();

// Deactivate when closing, return focus to trigger
trap.deactivate(openButton);

Accessible Forms

InputElement provides convenience methods for creating accessible form fields.

java

// Associate label with input
TextInput email = new TextInput();
Label emailLabel = new Label("Email Address");
email.associateLabel(emailLabel);

// Set up error display
Span errorSpan = new Span();
errorSpan.setId("email-error");
email.setErrorDisplay(errorSpan);

// Add description/help text
Span helpText = new Span("We'll never share your email");
helpText.setId("email-help");
email.setDescription(helpText);

// Mark as required (sets both HTML5 and ARIA attributes)
email.setRequiredAccessible(true);

// Show validation error
email.setHasError(true);
errorSpan.setText("Please enter a valid email address");

Best Practices

Set Document Language

Always call getHtml().setLang("en") in your base page class. This is required by WCAG and helps screen readers use correct pronunciation.

Use Semantic HTML

Prefer semantic elements (Nav, Header, Main, Footer, Section, Article) over generic Divs. They provide built-in accessibility.

Provide Text Alternatives

All images need alt text. Icon-only buttons need aria-label or VisuallyHidden text.

Maintain Heading Hierarchy

Use H1-H6 in order without skipping levels. Each page should have exactly one H1.

Make Interactive Elements Focusable

Use Button for clickable actions, not Div with onclick. Use A (Anchor) for navigation.

Announce Dynamic Changes

Use LiveRegion to announce status messages, errors, and other dynamic content changes.

Trap Focus in Modals

Use FocusTrap for dialogs and modals. Return focus to the trigger element when closed.

Support Keyboard Navigation

Ensure all functionality is accessible via keyboard. Add skip links to bypass repetitive content.