Yulio Knowledge Base > Sharing and Presenting a VR Project > Technical Guide: Partial ADA Compliance for Yulio Embedded Projects
Related Articles
Technical Guide: Partial ADA Compliance for Yulio Embedded Projects
Yulio embedded projects are not fully ADA/WCAG compliant due to inherent limitations of 360° panoramic content. However, users can implement partial compliance by following the recommended practices in this guide.
Known Limitations
- The Yulio viewer does not provide internal descriptions for individual panoramic scenes
- 360° content is inherently visual and may not be fully accessible to screen reader users
- Navigation hotspots within the viewer may have limited accessibility
What You Can Implement
1. Basic Semantic HTML
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Virtual Tour – [Location Name]</title>
</head>
<body>
<main id=”main-content”>
<!– Your content here –>
</main>
</body>
</html>
2. Embed Structure with Accessibility
<!– Main tour section –>
<section id=”tour-section” class=”tour-section” aria-label=”Interactive Virtual Tour and Detailed Descriptions”>
<h2>Interactive 360° Virtual Tour</h2>
<!– Iframe container –>
<div class=”iframe-wrapper”>
<iframe src=”[EMBED_URL]”
title=”[Description of the tour and main areas]”
style=”width:100%;height:600px;”
scrolling=”no”
frameborder=”0″
allowfullscreen>
</iframe>
</div>
<!– Navigation instructions –>
<p>
<strong>Navigation Tips:</strong> Click and drag to look around • Use arrow keys to rotate view • Click hotspots on the floor to move between rooms • Scroll to zoom in/out
</p>
</section>
3. Skip to Description Link
<!– In the hero/introduction section –>
<a href=”#tour-description” class=”skip-to-description”>
Skip to Detailed Description →
</a>
4. Complete Text Description
<!– Detailed tour description –>
<div id=”tour-description” class=”tour-description” role=”region” aria-label=”Detailed Tour Description”>
<h3>Comprehensive Tour Description</h3>
<p>
Welcome to [Location Name], a [general description] space. This virtual tour will guide you through [number] distinct areas: [list all areas with brief description of each one].
</p>
<!– For each tour area –>
<h4>1. [Area Name]</h4>
<p>
<strong>[Area Type]</strong> – [Detailed description of the area’s purpose and characteristics].
</p>
<ul>
<li><strong>Feature 1:</strong> Detailed description</li>
<li><strong>Feature 2:</strong> Detailed description</li>
<li><strong>Feature 3:</strong> Detailed description</li>
</ul>
<!– Repeat for each area –>
</div>
5. Accessibility Notice
<!– Accessibility limitations notice –>
<div class=”accessibility-notice” role=”note” aria-label=”Accessibility Information”>
<h3>⚠️ Accessibility Notice</h3>
<p>
<strong>Partial ADA/WCAG Compliance:</strong> This virtual tour embed implements accessible markup at the container level, including:
</p>
<ul>
<li>✓ Comprehensive text descriptions of all areas</li>
<li>✓ Proper semantic HTML structure and ARIA labels</li>
<li>✓ Keyboard navigation support for the page</li>
</ul>
<p><strong>Known Limitations:</strong></p>
<ul>
<li>✗ The Yulio viewer does not provide internal descriptions for individual panoramic scenes</li>
<li>✗ 360° panoramic content is inherently visual</li>
<li>✗ Navigation hotspots may have limited accessibility</li>
</ul>
</div>
Complete Minimal Template
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>[Location Name] – Virtual Tour</title>
</head>
<body>
<main id=”main-content”>
<!– Introduction –>
<section aria-label=”Introduction and Overview”>
<h1>[Location Name] – Virtual Tour</h1>
<p>Explore [brief space description] through an interactive 360° virtual tour.</p>
<a href=”#tour-description”>Skip to Detailed Description →</a>
</section>
<!– Virtual Tour –>
<section id=”tour-section” aria-label=”Virtual Tour and Descriptions”>
<h2>Interactive 360° Virtual Tour</h2>
<div>
<iframe src=”[EMBED_URL]”
title=”[Description of the tour and main areas]”
style=”width:100%;height:600px;”
scrolling=”no”
frameborder=”0″
allowfullscreen>
</iframe>
</div>
<p><strong>Navigation:</strong> Click and drag to look around • Use arrow keys to rotate • Click hotspots to move</p>
<!– Detailed Description –>
<div id=”tour-description” role=”region” aria-label=”Detailed Description”>
<h3>Comprehensive Tour Description</h3>
<p>[General description of the tour and areas]</p>
<h4>Area 1: [Name]</h4>
<p>[Detailed description with features, furniture, purpose, etc.]</p>
<!– Repeat for each area –>
</div>
<!– Accessibility Notice –>
<div role=”note” aria-label=”Accessibility Information”>
<h3>⚠️ Accessibility Notice</h3>
<p><strong>Partial Compliance:</strong> This tour implements text descriptions and accessible structure, but 360° content has inherent accessibility limitations.</p>
</div>
</section>
</main>
</body>
</html>
Sample Code – Partially ADA Compliant:
View a sample of an embedded experience that is partially ADA compliant.
For the best experience, please download the file and open it on your computer: Sample Project
Implementation Checklist
- Add lang attribute to HTML
- Include descriptive title in iframe
- Provide complete text descriptions of all areas
- Use semantic HTML structure (main, section, h1-h6)
- Add appropriate ARIA labels
- Include “skip to description” link
- Add navigation instructions
- Include accessibility limitations notice
- Test keyboard navigation on the page
- Validate with accessibility tools
Additional Tips
- Be Specific: Describe colors, textures, layout, and atmosphere of each area
- Use Clear Language: Avoid unnecessary technical jargon
- Structure Logically: Organize descriptions in an order that makes sense for the tour
- Test Regularly: Use screen readers to test the user experience
This guide provides partial compliance. For more robust accessibility solutions, consider complementary alternatives such as narrated audio tours.
References