"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { code: "code", h1: "h1", h2: "h2", h3: "h3", li: "li", ol: "ol", p: "p", pre: "pre", span: "span", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsx(_components.h1, { children: "Practice Instructions: Accessible Link Menu" }), "\n", _jsx(_components.h2, { children: "What You'll Build" }), "\n", _jsx(_components.p, { children: "You'll create a professional navigation menu for a community center website that demonstrates accessible link practices and logical organization. The menu will include clear, descriptive link text organized into meaningful sections that work well for all users, including those using screen readers or keyboard navigation." }), "\n", _jsx(_components.h2, { children: "Why This Project" }), "\n", _jsx(_components.p, { children: "This project simulates creating navigation for a real community organization website. You'll practice writing link text that clearly communicates purpose, organizing links into logical groups, and applying accessibility principles that make your navigation usable for everyone. These skills are essential for creating professional, inclusive websites." }), "\n", _jsx(_components.h2, { children: "Project Overview" }), "\n", _jsx(_components.p, { children: "Your accessible link menu will include:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "A main navigation section with primary site links" }), "\n", _jsx(_components.li, { children: "Grouped navigation sections for different types of content" }), "\n", _jsx(_components.li, { children: "Descriptive link text that makes sense out of context" }), "\n", _jsx(_components.li, { children: "Proper semantic structure using headings and lists" }), "\n", _jsx(_components.li, { children: "Professional organization that guides users effectively" }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Estimated completion time:" }), " 10-15 minutes"] }), "\n", _jsx(_components.h2, { children: "Step-by-Step Instructions" }), "\n", _jsx(_components.h3, { children: "Step 1: Create the Basic HTML Structure" }), "\n", _jsx(_components.p, { children: "Set up your HTML document with the standard structure:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Document type declaration" }), "\n", _jsx(_components.li, { children: "HTML element with head and body sections" }), "\n", _jsx(_components.li, { children: "Page title that describes the content" }), "\n", _jsx(_components.li, { children: "Main heading for the community center" }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to see your basic page structure."] }), "\n", _jsx(_components.h3, { children: "Step 2: Create the Main Navigation Section" }), "\n", _jsx(_components.p, { children: "Build the primary navigation area using semantic HTML:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Use the appropriate semantic element for navigation sections" }), "\n", _jsx(_components.li, { children: "Add a heading that describes this navigation section" }), "\n", _jsx(_components.li, { children: "Create an unordered list to group the main site links" }), "\n", _jsx(_components.li, { children: "Include links for: Home, About the Center, Programs, Events, and Contact" }), "\n"] }), "\n", _jsx(_components.p, { children: "Think about which HTML element is specifically designed for navigation areas." }), "\n", _jsx(_components.p, { children: "Example structure pattern:" }), "\n", _jsx(_components.pre, { className: "language-html", children: _jsxs(_components.code, { className: "language-html code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "semantic-navigation-element"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "2", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "heading"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "Navigation title", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "3", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "list"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "4", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "list-item"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "link"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "Descriptive text", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "5", children: [" ", _jsx(_components.span, { className: "token comment", children: "" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "6", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "7", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to see your main navigation structure."] }), "\n", _jsx(_components.h3, { children: "Step 3: Add Programs Navigation Section" }), "\n", _jsx(_components.p, { children: "Create a specialized navigation section for different programs:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Add a heading that identifies this as program navigation" }), "\n", _jsx(_components.li, { children: "Create a list with links for: Youth Programs, Adult Classes, Senior Activities, and Family Events" }), "\n", _jsx(_components.li, { children: "Ensure each link clearly describes what users will find" }), "\n"] }), "\n", _jsx(_components.p, { children: "Focus on making the link text descriptive enough that someone hearing just the links would understand where each one leads." }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to see how your navigation sections are organized."] }), "\n", _jsx(_components.h3, { children: "Step 4: Create Resources and Information Section" }), "\n", _jsx(_components.p, { children: "Build another navigation group for helpful resources:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Add a heading for this section (something like \"Resources and Information\")" }), "\n", _jsx(_components.li, { children: "Include links for: Facility Hours, Membership Information, Newsletter Signup, and Volunteer Opportunities" }), "\n", _jsx(_components.li, { children: "Make sure each link text clearly indicates the type of information or action" }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to check that your grouped navigation is taking shape."] }), "\n", _jsx(_components.h3, { children: "Step 5: Add Contact and Support Navigation" }), "\n", _jsx(_components.p, { children: "Create a final navigation section for getting help and staying connected:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Use a heading that describes this section's purpose" }), "\n", _jsx(_components.li, { children: "Include links for: Contact Information, Directions and Parking, FAQ, and Support Center" }), "\n", _jsx(_components.li, { children: "Ensure all link text is specific and action-oriented" }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to see your complete navigation structure."] }), "\n", _jsx(_components.h3, { children: "Step 6: Review and Test Your Navigation" }), "\n", _jsx(_components.p, { children: "Check your navigation for accessibility and usability:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Read each link text out loud - does it make sense without context?" }), "\n", _jsx(_components.li, { children: "Verify that related links are grouped together logically" }), "\n", _jsx(_components.li, { children: "Ensure each navigation section has a clear heading" }), "\n", _jsx(_components.li, { children: "Check that your HTML uses proper semantic elements" }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " for a final review of your accessible navigation menu."] }), "\n", _jsx(_components.h2, { children: "Requirements & Validation" }), "\n", _jsx(_components.p, { children: "Your accessible link menu should include:" }), "\n", _jsx(_components.h3, { children: "Structural Requirements" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Proper semantic navigation element wrapping all navigation content" }), "\n", _jsx(_components.li, { children: "Clear headings for each navigation section" }), "\n", _jsx(_components.li, { children: "Unordered lists to group related links" }), "\n", _jsx(_components.li, { children: "At least 4 different navigation sections with logical groupings" }), "\n"] }), "\n", _jsx(_components.h3, { children: "Link Text Requirements" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "All links use descriptive text that indicates destination or purpose" }), "\n", _jsx(_components.li, { children: "No generic phrases like \"click here\" or \"more info\"" }), "\n", _jsx(_components.li, { children: "Link text makes sense when read out of context" }), "\n", _jsx(_components.li, { children: "Consistent terminology throughout the navigation" }), "\n"] }), "\n", _jsx(_components.h3, { children: "Content Requirements" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Main navigation with 5 primary site links" }), "\n", _jsx(_components.li, { children: "Programs section with 4 program-related links" }), "\n", _jsx(_components.li, { children: "Resources section with 4 information links" }), "\n", _jsx(_components.li, { children: "Contact section with 4 support-related links" }), "\n"] }), "\n", _jsx(_components.h2, { children: "Testing Your Solution" }), "\n", _jsx(_components.p, { children: "Test your navigation by:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Reading link text aloud" }), ": Each link should clearly indicate where it leads"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Checking organization" }), ": Related links should be grouped together with clear headings"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Verifying structure" }), ": Navigation should use proper semantic HTML elements"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Scanning quickly" }), ": Users should be able to quickly find the type of information they need"] }), "\n"] }), "\n", _jsx(_components.h3, { children: "Expected Results" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Navigation sections are clearly separated with descriptive headings" }), "\n", _jsx(_components.li, { children: "All links have meaningful, descriptive text" }), "\n", _jsx(_components.li, { children: "Related links are logically grouped together" }), "\n", _jsx(_components.li, { children: "The overall structure guides users to information efficiently" }), "\n"] }), "\n", _jsx(_components.h2, { children: "Success Criteria" }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Semantic Structure" }), ": Uses proper navigation element and list structure\n✅ ", _jsx(_components.strong, { children: "Clear Headings" }), ": Each navigation section has a descriptive heading\n✅ ", _jsx(_components.strong, { children: "Descriptive Links" }), ": All link text clearly indicates destination or purpose\n✅ ", _jsx(_components.strong, { children: "Logical Organization" }), ": Related links are grouped together meaningfully\n✅ ", _jsx(_components.strong, { children: "Professional Appearance" }), ": Navigation looks organized and easy to scan\n✅ ", _jsx(_components.strong, { children: "Accessibility Ready" }), ": Structure works well for screen readers and keyboard navigation"] }), "\n", _jsx(_components.h2, { children: "Common Challenges" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Challenge" }), ": Writing descriptive link text that isn't too long\n", _jsx(_components.strong, { children: "Solution" }), ": Aim for 2-6 words that clearly indicate the destination"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Challenge" }), ": Deciding how to group links logically\n", _jsx(_components.strong, { children: "Solution" }), ": Think about what users are trying to accomplish and group by purpose"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Challenge" }), ": Making sure navigation sections are clearly separated\n", _jsx(_components.strong, { children: "Solution" }), ": Use headings to introduce each section and lists to group related links"] }), "\n", _jsx(_components.p, { children: "Remember: Good navigation helps users find what they need quickly and confidently. Focus on clarity and organization rather than trying to be clever with your link text." })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };