Interactive elements—such as calendars, maps, forms, videos, chat widgets, social feeds, carousels, and iframes—can enhance the user experience but may introduce technical or accessibility issues. Because some components require configuration and accessibility verification, certain interactive elements require approval prior to implementation.
Core Requirements
All interactive or embedded content must ensure:
- Keyboard accessibility: Full functionality without a mouse
- No trapped focus: Users can navigate in and out of components
- Avoid auto-advancing sliders: User-controlled navigation only
- Lightweight, performance-friendly embeds: Optimize for page speed
- Transcripts for videos: Provide when required for accessibility
Iframe Policy: Iframes are strictly prohibited except in rare, pre-approved cases. Iframes create accessibility barriers, security risks, and responsive design challenges. Contact Web Services for exceptional circumstances requiring iframe use.
Embed Standards
Style Consistency Requirement
External content that cannot adopt UNA's visual styles must not be embedded. Instead, link to external content with clear descriptions of what users will find.
- Approved embeds: Content that fully adopts UNA branding and styles
- Link instead of embed: External content that maintains its own styling
- Never embed: Third-party content with conflicting visual design
Interactive Component Guidelines
Videos
- Use approved platforms (YouTube, Vimeo)
- Include captions and transcripts
- Provide video title and duration
- Disable autoplay
- Ensure player controls are keyboard accessible
Maps
- Provide text-based directions as alternative
- Include address and landmark information
- Ensure zoom controls are keyboard accessible
- Offer static map image with alt text as fallback
Calendars
- List view required alongside calendar grid
- Keyboard navigation between dates
- Screen reader announcements for selected dates
- Export options for personal calendars
Social Media Feeds
- Limit to 3-5 most recent posts
- Provide "View more on [platform]" link
- Include fallback content if feed fails
- Refresh content server-side, not client-side
Chat Widgets
- Must be fully keyboard accessible
- Announce availability to screen readers
- Provide alternative contact methods
- Allow users to minimize or close
Image Carousels/Sliders
- Manual advance only (no auto-rotation)
- Clear previous/next controls
- Slide indicators showing position
- Pause/play controls if animated
- Alt text for all images
Performance Standards
- Lazy loading: Load embedded content only when needed
- Facade pattern: Show placeholder until user interacts
- Size limits: Embedded content should not exceed 500KB initially
- Script management: Minimize third-party JavaScript
- Mobile optimization: Test all embeds on mobile devices
Accessibility Testing Requirements
- Test with keyboard only (no mouse)
- Verify with screen readers (NVDA, JAWS, VoiceOver)
- Check color contrast of embedded elements
- Ensure focus indicators are visible
- Validate WCAG 2.1 Level AA compliance
Approval Process
Before implementing interactive or embedded content:
- Review these standards for compliance
- Test accessibility thoroughly
- Submit to Web Services for review if:
- Content requires an iframe (rare exceptions only)
- Third-party service is not pre-approved
- Custom interactive component is needed
- External styling cannot be avoided
- Implement only after receiving approval
Remember: When in doubt, link to external content rather than embedding it. This maintains site performance, consistency, and accessibility while still providing users with needed resources.