Add to Calendar buttons should meet the same accessibility standards as any interactive UI element - proper semantic markup, keyboard navigability, screen reader support, and sufficient color contrast.

Key accessibility requirements

ARIA labels If your button only shows an icon (calendar icon) without visible text, add an aria-label attribute so screen readers can describe it: <button aria-label="Add to Calendar">. If the button has visible text ("Add to Calendar"), no additional ARIA label is needed.

Keyboard navigation The button and any dropdown menu that appears (listing Google, Apple, Outlook, etc.) must be navigable by keyboard - Tab to reach the button, Enter or Space to activate it, arrow keys to navigate the calendar options, and Escape to close the dropdown.

Focus management When the dropdown opens, focus should move to the first option. When the dropdown closes, focus should return to the trigger button.

Color contrast The button text and background must meet WCAG 2.1 AA contrast ratio (4.5:1 for normal text). Do not rely on color alone to convey meaning.

Descriptive link text If using a text link rather than a button, avoid generic phrases like "click here". Use "Add this event to your calendar" or "Add to Calendar" so link text is meaningful out of context.

AddEvent's built-in accessibility

AddEvent's generated buttons include semantic HTML and appropriate ARIA attributes. The calendar picker dropdown is keyboard-navigable. On Professional and Enterprise plans, custom CSS can be applied without compromising the accessibility of the underlying functionality.

Testing

Test your Add to Calendar button with a screen reader (NVDA on Windows, VoiceOver on Mac/iOS) and verify full keyboard-only navigation before launch.