hjanuschka · December 26, 2025 20:23
diff --git a/orca_test_page.html b/orca_test_page.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>Orca Accessibility Test - Named Forms as Landmarks</title>
    <style>
        body { font-family: sans-serif; max-width: 800px; margin: 40px auto; padding: 20px; }
        section, form, nav, aside { border: 1px solid #ccc; padding: 15px; margin: 15px 0; }
        h1, h2, h3 { color: #333; }
        label { display: block; margin: 10px 0 5px; }
        input, button, select, textarea { margin-bottom: 10px; padding: 5px; }
        .landmark-info { background: #f0f0f0; padding: 10px; margin: 10px 0; }
    </style>
 </head>
 <body>

 <h1>Orca Landmark Navigation Test</h1>

 <p>This page tests landmark navigation with named forms. Use <strong>M</strong> and <strong>Shift+M</strong> to navigate between landmarks.</p>

 <div class="landmark-info">
    <strong>Expected Landmarks on this page:</strong>
    <ol>
        <li>Navigation (nav element)</li>
        <li>Main content (main element)</li>
        <li>Search Form (named form - aria-label="Search")</li>
        <li>Contact Form (named form - aria-labelledby)</li>
        <li>Login Form (named form - name attribute)</li>
        <li>Sidebar (aside element)</li>
        <li>Footer (footer element)</li>
    </ol>
 </div>

 <!-- Landmark: Navigation -->
 <nav aria-label="Main Navigation">
    <h2>Navigation</h2>
    <ul>
        <li><a href="#main">Skip to main content</a></li>
        <li><a href="#search">Skip to search</a></li>
        <li><a href="#contact">Skip to contact form</a></li>
    </ul>
 </nav>

 <!-- Landmark: Main -->
 <main id="main">
    <h2>Main Content</h2>
    <p>This is the main content area. Below are various forms that should appear as landmarks.</p>

    <!-- NAMED FORM 1: Using aria-label (should be landmark) -->
    <form id="search" aria-label="Search">
        <h3>Search Form (aria-label="Search")</h3>
        <p>This form has an aria-label, making it a named form that should appear as a landmark.</p>
        <label for="search-input">Search query:</label>
        <input type="search" id="search-input" name="q" placeholder="Enter search term">
        <button type="submit">Search</button>
    </form>

    <!-- NAMED FORM 2: Using aria-labelledby (should be landmark) -->
    <form id="contact" aria-labelledby="contact-heading">
        <h3 id="contact-heading">Contact Form</h3>
        <p>This form uses aria-labelledby pointing to its heading, making it a named form.</p>

        <label for="name">Your Name:</label>
        <input type="text" id="name" name="name" required>

        <label for="email">Email Address:</label>
        <input type="email" id="email" name="email" required>

        <label for="message">Message:</label>
        <textarea id="message" name="message" rows="4"></textarea>

        <button type="submit">Send Message</button>
    </form>

    <!-- NAMED FORM 3: Using name attribute (should be landmark per Core AAM) -->
    <form id="login" name="loginForm" aria-label="User Login">
        <h3>Login Form (name="loginForm")</h3>
        <p>This form has a name attribute AND aria-label.</p>

        <label for="username">Username:</label>
        <input type="text" id="username" name="username" autocomplete="username">

        <label for="password">Password:</label>
        <input type="password" id="password" name="password" autocomplete="current-password">

        <label>
            <input type="checkbox" name="remember"> Remember me
        </label>

        <button type="submit">Log In</button>
    </form>

    <!-- UNNAMED FORM (should NOT be a landmark, just ATK_ROLE_FORM) -->
    <form id="newsletter">
        <h3>Newsletter (Unnamed Form)</h3>
        <p>This form has NO accessible name - it should NOT appear as a landmark.</p>

        <label for="newsletter-email">Email for newsletter:</label>
        <input type="email" id="newsletter-email" name="newsletter_email">
        <button type="submit">Subscribe</button>
    </form>

    <!-- NAMED FORM 4: Using title attribute (should be landmark) -->
    <form id="title-form" title="Preferences Form">
        <h3>Preferences (title attribute)</h3>
        <p>This form uses title attribute for accessible name.</p>
        <label for="theme">Theme:</label>
        <select id="theme" name="theme">
            <option value="light">Light</option>
            <option value="dark">Dark</option>
        </select>
        <button type="submit">Save</button>
    </form>

    <!-- EXPLICIT role="form" WITH name (should be landmark) -->
    <div role="form" aria-label="ARIA Form Role">
        <h3>ARIA role="form" (with name)</h3>
        <p>This div has explicit role="form" with aria-label.</p>
        <label for="aria-input">Input:</label>
        <input type="text" id="aria-input" name="aria_input">
        <button type="submit">Submit</button>
    </div>

    <!-- EXPLICIT role="form" WITHOUT name (should be ATK_ROLE_FORM, not landmark) -->
    <div role="form" id="unnamed-aria-form">
        <h3>ARIA role="form" (no name)</h3>
        <p>This div has role="form" but NO accessible name - should NOT be landmark.</p>
        <label for="aria-unnamed">Input:</label>
        <input type="text" id="aria-unnamed" name="aria_unnamed">
        <button type="submit">Submit</button>
    </div>

 </main>

 <!-- Landmark: Aside/Complementary -->
 <aside aria-label="Sidebar">
    <h2>Sidebar</h2>
    <p>This is complementary content in an aside element.</p>

    <!-- Another named form in sidebar -->
    <form aria-label="Quick Feedback">
        <h3>Quick Feedback</h3>
        <label for="rating">Rate this page:</label>
        <select id="rating" name="rating">
            <option value="5">Excellent</option>
            <option value="4">Good</option>
            <option value="3">Average</option>
            <option value="2">Poor</option>
            <option value="1">Very Poor</option>
        </select>
        <button type="submit">Submit Rating</button>
    </form>
 </aside>

 <!-- Landmark: Footer -->
 <footer>
    <h2>Footer</h2>
    <p>Page footer content. &copy; 2025 Test Page</p>
 </footer>

 <hr>
 <h2>Testing Instructions</h2>
 <ol>
    <li>Start Orca: <code>orca &amp;</code></li>
    <li>Make sure structural navigation is enabled: <code>Insert+Z</code> or <code>Caps Lock+Z</code></li>
    <li>Press <strong>Alt+Shift+M</strong> to list all landmarks</li>
    <li>Press <strong>M</strong> to navigate to next landmark, <strong>Shift+M</strong> for previous</li>
    <li>Named forms (Search, Contact, Login, Quick Feedback) should appear in landmarks list</li>
    <li>The Newsletter form (unnamed) should NOT appear as a landmark</li>
 </ol>

 <h2>Also Test Form Field Navigation</h2>
 <ol>
    <li>Press <strong>F</strong> to move to next form field</li>
    <li>Press <strong>E</strong> to move to next text entry</li>
    <li>Press <strong>B</strong> to move to next button</li>
    <li>Press <strong>C</strong> to move to next combo box</li>
 </ol>

 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Orca Accessibility Test - Named Forms as Landmarks</title>
	<style>
	body { font-family: sans-serif; max-width: 800px; margin: 40px auto; padding: 20px; }
	section, form, nav, aside { border: 1px solid #ccc; padding: 15px; margin: 15px 0; }
	h1, h2, h3 { color: #333; }
	label { display: block; margin: 10px 0 5px; }
	input, button, select, textarea { margin-bottom: 10px; padding: 5px; }
	.landmark-info { background: #f0f0f0; padding: 10px; margin: 10px 0; }
	</style>
	</head>
	<body>

	<h1>Orca Landmark Navigation Test</h1>

	<p>This page tests landmark navigation with named forms. Use <strong>M</strong> and <strong>Shift+M</strong> to navigate between landmarks.</p>

	<div class="landmark-info">
	<strong>Expected Landmarks on this page:</strong>
	<ol>
	<li>Navigation (nav element)</li>
	<li>Main content (main element)</li>
	<li>Search Form (named form - aria-label="Search")</li>
	<li>Contact Form (named form - aria-labelledby)</li>
	<li>Login Form (named form - name attribute)</li>
	<li>Sidebar (aside element)</li>
	<li>Footer (footer element)</li>
	</ol>
	</div>

	<!-- Landmark: Navigation -->
	<nav aria-label="Main Navigation">
	<h2>Navigation</h2>
	<ul>
	<li><a href="#main">Skip to main content</a></li>
	<li><a href="#search">Skip to search</a></li>
	<li><a href="#contact">Skip to contact form</a></li>
	</ul>
	</nav>

	<!-- Landmark: Main -->
	<main id="main">
	<h2>Main Content</h2>
	<p>This is the main content area. Below are various forms that should appear as landmarks.</p>

	<!-- NAMED FORM 1: Using aria-label (should be landmark) -->
	<form id="search" aria-label="Search">
	<h3>Search Form (aria-label="Search")</h3>
	<p>This form has an aria-label, making it a named form that should appear as a landmark.</p>
	<label for="search-input">Search query:</label>
	<input type="search" id="search-input" name="q" placeholder="Enter search term">
	<button type="submit">Search</button>
	</form>

	<!-- NAMED FORM 2: Using aria-labelledby (should be landmark) -->
	<form id="contact" aria-labelledby="contact-heading">
	<h3 id="contact-heading">Contact Form</h3>
	<p>This form uses aria-labelledby pointing to its heading, making it a named form.</p>

	<label for="name">Your Name:</label>
	<input type="text" id="name" name="name" required>

	<label for="email">Email Address:</label>
	<input type="email" id="email" name="email" required>

	<label for="message">Message:</label>
	<textarea id="message" name="message" rows="4"></textarea>

	<button type="submit">Send Message</button>
	</form>

	<!-- NAMED FORM 3: Using name attribute (should be landmark per Core AAM) -->
	<form id="login" name="loginForm" aria-label="User Login">
	<h3>Login Form (name="loginForm")</h3>
	<p>This form has a name attribute AND aria-label.</p>

	<label for="username">Username:</label>
	<input type="text" id="username" name="username" autocomplete="username">

	<label for="password">Password:</label>
	<input type="password" id="password" name="password" autocomplete="current-password">

	<label>
	<input type="checkbox" name="remember"> Remember me
	</label>

	<button type="submit">Log In</button>
	</form>

	<!-- UNNAMED FORM (should NOT be a landmark, just ATK_ROLE_FORM) -->
	<form id="newsletter">
	<h3>Newsletter (Unnamed Form)</h3>
	<p>This form has NO accessible name - it should NOT appear as a landmark.</p>

	<label for="newsletter-email">Email for newsletter:</label>
	<input type="email" id="newsletter-email" name="newsletter_email">
	<button type="submit">Subscribe</button>
	</form>

	<!-- NAMED FORM 4: Using title attribute (should be landmark) -->
	<form id="title-form" title="Preferences Form">
	<h3>Preferences (title attribute)</h3>
	<p>This form uses title attribute for accessible name.</p>
	<label for="theme">Theme:</label>
	<select id="theme" name="theme">
	<option value="light">Light</option>
	<option value="dark">Dark</option>
	</select>
	<button type="submit">Save</button>
	</form>

	<!-- EXPLICIT role="form" WITH name (should be landmark) -->
	<div role="form" aria-label="ARIA Form Role">
	<h3>ARIA role="form" (with name)</h3>
	<p>This div has explicit role="form" with aria-label.</p>
	<label for="aria-input">Input:</label>
	<input type="text" id="aria-input" name="aria_input">
	<button type="submit">Submit</button>
	</div>

	<!-- EXPLICIT role="form" WITHOUT name (should be ATK_ROLE_FORM, not landmark) -->
	<div role="form" id="unnamed-aria-form">
	<h3>ARIA role="form" (no name)</h3>
	<p>This div has role="form" but NO accessible name - should NOT be landmark.</p>
	<label for="aria-unnamed">Input:</label>
	<input type="text" id="aria-unnamed" name="aria_unnamed">
	<button type="submit">Submit</button>
	</div>

	</main>

	<!-- Landmark: Aside/Complementary -->
	<aside aria-label="Sidebar">
	<h2>Sidebar</h2>
	<p>This is complementary content in an aside element.</p>

	<!-- Another named form in sidebar -->
	<form aria-label="Quick Feedback">
	<h3>Quick Feedback</h3>
	<label for="rating">Rate this page:</label>
	<select id="rating" name="rating">
	<option value="5">Excellent</option>
	<option value="4">Good</option>
	<option value="3">Average</option>
	<option value="2">Poor</option>
	<option value="1">Very Poor</option>
	</select>
	<button type="submit">Submit Rating</button>
	</form>
	</aside>

	<!-- Landmark: Footer -->
	<footer>
	<h2>Footer</h2>
	<p>Page footer content. © 2025 Test Page</p>
	</footer>

	<hr>
	<h2>Testing Instructions</h2>
	<ol>
	<li>Start Orca: <code>orca &</code></li>
	<li>Make sure structural navigation is enabled: <code>Insert+Z</code> or <code>Caps Lock+Z</code></li>
	<li>Press <strong>Alt+Shift+M</strong> to list all landmarks</li>
	<li>Press <strong>M</strong> to navigate to next landmark, <strong>Shift+M</strong> for previous</li>
	<li>Named forms (Search, Contact, Login, Quick Feedback) should appear in landmarks list</li>
	<li>The Newsletter form (unnamed) should NOT appear as a landmark</li>
	</ol>

	<h2>Also Test Form Field Navigation</h2>
	<ol>
	<li>Press <strong>F</strong> to move to next form field</li>
	<li>Press <strong>E</strong> to move to next text entry</li>
	<li>Press <strong>B</strong> to move to next button</li>
	<li>Press <strong>C</strong> to move to next combo box</li>
	</ol>

	</body>
	</html>
No results found