Semantic HTML and ARIA in LibGuides System Content
Templates
<header> is used to wrap the header information in the Template. This includes the guide name, and page title.
<nav> wraps the breadcrumbs in the template. Assign "aria-label="Breadcrumbs"
<aside> is used to wrap the Print URL and Report a Broken Link content in the template.
role="navigation aria-label="Guide Page Menu" is used with the #s-lg-guide-tabs selector.
role="menu" is assigned for the LibGuides auto-generated navigation content.
<main> is used to wrap the main content in the template.
<aside> is used again to wrap the login links in the footer. NOTE: this cannot be wrapped in the footer's contentinfo of the main footer or it will break the individualized login capability for each page. This is why we used <aside> for this content.
Group Navigation
role="banner" is used to wrap the entire system-level navigation, including the universal login links, guide title, and guide search.
<nav> with role="navigation" is used to wrap the individual guide navigation.
System Footer
role="contentinfo" is used to wrap the entire system footer
Definitions of Commonly Used Semantic HTML, ARIA Roles, and ARIA Attibutes
Semantic HTML
-
<header>: Defines a header for a document or a section. Typically contains introductory content or navigation links, such as a website's logo, primary navigation menu, or search bar. -
<nav>: Represents a section of a page that links to other pages or to parts within the page. Commonly used for navigation menus, allowing users to move between different sections or pages of a website. -
<main>: Specifies the main content of a document or application. It should not contain content that is repeated across multiple pages, such as navigation links or copyright information. -
<aside>: Defines content that is tangentially related to the content around it, often presented as a sidebar or a section that complements the main content. It can contain information such as related links, advertisements, or supplementary content.
ARIA roles
-
role="navigation": Specifies that the element contains navigation links. -
role="menu": Defines a menu of choices. -
role="banner": Indicates that the element is a banner or header for a page or a region. -
role="contentinfo":Role defines a footer, containing identifying information such as copyright information, navigation links, and privacy statements
ARIA attributes
-
aria-label: Defines a string value that labels the current element, providing a user-readable description.
Examples
Example of Semantic HTML and ARIA in 1_Standard Template
<body class="s-lg-guide-body">
{{skip_link}}
{{ADMIN_CMD_BAR}}
<!-- BEGIN: Page Header -->
{{public_header}}
<!-- END: Page Header -->
<!-- BEGIN: Guide Info Header -->
<!-- Keep all div for admin access. Hide via css as needed -->
<!-- Page header wraps all page-level elements above the first box. Includes hero image, optional buttons, breadcrumbs/print links, and page title. -->
<div id="page-header">
<div id="hero-page-title">
<div id="hero"></div>
<div id="s-lg-guide-header-info-centered">
<header>
<h1 id="s-lg-guide-name">
<div id="guide-title">
{{guide_title}}:
</div>
{{page_title}}
</h1>
</header>
</div>
</div>
<div id="s-lg-guide-desc-container" class="pad-top-med">
<span id="s-lg-guide-description">{{guide_description}}</span>
</div>
<nav aria-label="Breadcrumbs">
<div id="s-lib-bc">
{{breadcrumbs}}
</div>
</nav>
<div id="s-lg-guide-print-url">
<aside>
<a href="{{guide_print_url}}"><i class="fa fa-print" title"Print Page"></i> Print Page</a>
<a href="https://waldenu.libwizard.com/id/c07c422a23fa5ba754626d1cbe2db94c"><i class="fa fa-link"></i> Report a broken link</a>
</aside>
</div>
<div id="s-lg-guide-header" class="home-page container container-narrow s-lib-header s-lib-side-borders">
<div class="pull-right">
{{ADMIN_MINI_CMD_BAR}}
</div>
</div>
</div>
<!-- END: Guide Info Header -->
<!-- Keep all div for admin access. Hide via css as needed -->
<div id="s-lg-tabs-container" class="container s-lib-side-borders pad-top-med">
<div id="s-lg-guide-tabs" class="tabs" role="navigation" aria-label="Guide Page Menu">
<ul class="nav nav-tabs split-button-nav" role="menu">
{{ guide_nav }}
</ul>
</div>
</div>
<div id="s-lg-guide-tabs-title-bar" class="container s-lib-side-borders"></div>
<!-- ENDS: Divs for admin access -->
<!-- BEGIN: Guide Content -->
<main>
<div id="s-lg-guide-main" class="container s-lib-main s-lib-side-borders">
{{page_prev_next_links}}
{{empty_page_sub_page_list}}
{{content}}
</div>
</main>
<!-- END: Guide Content -->
<!-- BEGIN: Page Footer -->
<div id="s-lib-footer-public" class="s-lib-footer footer container s-lib-side-borders">
<!-- BEGIN: Custom Footer -->
{{public_footer}}
<!-- END: Custom Footer -->
<aside>
<div id="footer-login-link" class="footer-login-link-content">
<a href="{{login_url}}">Walden Staff Login</a>
</div>
</aside>
</div>
<!-- END: Page Footer -->
<div id="s-lib-scroll-top" title="Back to Top">
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-angle-double-up fa-stack-1x" style="position:relative; bottom:2px;"></i>
</span>
</div>
<div id="s-lib-alert" title="">
<div id="s-lib-alert-content"></div>
</div>
</body>
Example of Semantic HTML and ARIA in Group Navigation (Doctoral Resources)
<div role="banner">
<div id="universal-navigation">
<img src="https://libapps.s3.amazonaws.com/customers/1460/images/walden-logo-universal-navigation.png" alt="">
<ul>
<li class="ask-oasis"> <a href="https://academicguides.waldenu.edu/academic-skills/ask">
<img alt="" src="https://libapps.s3.amazonaws.com/accounts/31417/images/OASIS-Icon-only_transparent.png" style="height: 35px;width: auto;padding-right: 5px;padding-left: 0px !important;">Ask OASIS</a>
</li>
<li><a href="https://www.waldenu.edu/">Walden University</a></li>
<li><a href="https://dvi.sharepoint.com/sites/WaldenFacultyPortalHub">Faculty Portal</a></li>
<li><a href="https://mytempo.waldenu.edu/">myTempo</a></li>
<li><a href="https://my.waldenu.edu/">myWalden</a></li>
</div>
<div id="search-bar-header">
<div id="logo-site-title">
<a href="https://academicguides.waldenu.edu/doctoral/home"> Doctoral Resources</a>
</div>
<div id="s-lg-guide-header-search">
{{guide_search}}
</div>
</div>
</div>
<!--END UNIVERSAL NAVIGATION BEGIN INDIVIDUAL GROUP NAVIGATION-->
<nav class="navbar navbar-default " role="navigation">
<ul class="nav navbar-nav">
<li>
<a href="https://academicguides.waldenu.edu/doctoral/first-year">First Year</a>
</li>
<li>
<a href="https://academicguides.waldenu.edu/doctoral/residencies">Residencies</a>
</li>
<li>
<a href="https://academicguides.waldenu.edu/doctoral/rsch-courses">RSCH Courses</a>
</li>
<li>
<a href="https://academicguides.waldenu.edu/doctoral/capstone">Capstone</a>
</li>
</ul>
</nav>
Example of Semantic HTML and ARIA in System Footer
<div id="universal-footer-contentinfo" role="contentinfo">
<div id="s-lib-footer-public-custom" class="s-lib-footer footer container s-lib-side-borders">
<div id="footer-container" class="footer-content">
<div id="footer-custom-accessibility">
<h2>Office of Student Disability Services</h2>
Any concerns about accessibility of materials on this site or compatibility with assistive technology should be addressed to <a href="mailto:disability@mail.waldenu.edu" target="_top">disability@mail.waldenu.edu</a>
</div>
<div id="footer-mobile-depts">
<a href="https://academicguides.waldenu.edu/">Walden Departments, Centers, and Resources</a>
</div>
<div id="footer-departments">
<h2 id="footer-header">Walden Resources</h2>
<div id="footer-custom-depts">
<h3 class="footer-col-header">Departments</h3>
<ul class="footer-menu">
<li><a href="https://academicguides.waldenu.edu/residencies">Academic Residencies</a></li>
<li><a href="https://academicguides.waldenu.edu/academic-skills-center">Academic Skills </a></li>
<li><a href="https://academicguides.waldenu.edu/careerservices/home">Career Planning and Development</a></li>
<li><a href="https://academicguides.waldenu.edu/sst">Customer Care Team</a></li>
<li><a href="https://academicguides.waldenu.edu/fieldexperience">Field Experience</a></li>
<li><a href="https://academicguides.waldenu.edu/library">Library</a></li>
<li><a href="https://academicguides.waldenu.edu/militaryservices">Military Services</a></li>
<li><a href="https://academicguides.waldenu.edu/academicadvising">Student Success Advising</a></li>
<li><a href="https://academicguides.waldenu.edu/writingcenter">Writing Skills</a></li>
</ul>
</div>
<div id="footer-custom-centers">
<h3 class="footer-col-header">Centers and Offices</h3>
<ul class="footer-menu">
<li><a href="https://academicguides.waldenu.edu/social-change">Center for Social Change</a></li>
<li><a href="https://academicguides.waldenu.edu/academic-skills">Office of Academic Support and Instructional Services</a></li>
<li><a href="https://academicguides.waldenu.edu/degreeacceleration">Office of Degree Acceleration</a></li>
<li><a href="https://academicguides.waldenu.edu/research-center">Office of Research and Doctoral Services</a></li>
<li><a href="https://academicguides.waldenu.edu/studentaffairs">Office of Student Affairs</a></li>
<li><a href="https://academicguides.waldenu.edu/disability-services">Office of Student Disability Services</a></li>
</ul>
</div>
<div id="footer-custom-other">
<h3 class="footer-col-header">Student Resources</h3>
<ul class="footer-menu">
<li><a href="https://academicguides.waldenu.edu/doctoral-writing-assessment">Doctoral Writing Assessment</a></li>
<li><a href="https://academicguides.waldenu.edu/formandstyle">Form & Style Review </a></li>
<li><a href="https://academicanswers.waldenu.edu/">Quick Answers</a></li>
<li><a href="https://scholarworks.waldenu.edu/">ScholarWorks</a></li>
<li><a href="https://academicguides.waldenu.edu/skills-courses">SKIL Courses and Workshops</a></li>
<li><a href="https://bncvirtual.com/waldenonline">Walden Bookstore</a></li>
<li><a href="https://academics.waldenu.edu/catalog-handbook">Walden Catalog & Student Handbook</a></li>
</ul>
</div>
<br>
<div id="footer-custom-legal" style="margin-top: 40px;">
<ul class="footer-menu" style="margin: 0px 0px 0px 15px!important">
<li><a href="https://www.waldenu.edu/legal/student-safety-title-ix">Student Safety/Title IX</a></li>
<li><a target="new" href="https://www.waldenu.edu/legal">Legal & Consumer Information</a></li>
<li><a target="new" href="https://www.waldenu.edu/legal/website-terms-and-conditions">Website Terms and Conditions</a></li>
<li><a target="new" href="https://www.waldenu.edu/legal/cookie-policy">Cookie Policy</a></li>
</ul>
<ul class="footer-menu" style="margin: 0px 0px 0px 15px !important;">
<li><a target="new" href="https://www.waldenu.edu/legal/accessibility">Accessibility</a></li>
<li><a target="new" href="https://www.waldenu.edu/about/accreditation">Accreditation</a></li>
<li><a target="new" href="https://www.waldenu.edu/about/accreditation/state-authorization-and-program-licensure">State Authorization</a></li>
<li><a target="new" href="https://www.waldenu.edu/financial-aid/price-calculator">Net Price Calculator</a></li>
<li><a target="new" href="https://www.waldenu.edu/about/data">DATA</a></li>
<li><a target="new" href="https://www.waldenu.edu/contact-us">Contact Walden</a></li>
</ul>
<br>
<p class="white" style="font-size: 1.6.rem; padding-left: 15px;">Walden University is a member of Adtalem Global Education, Inc. <a class="white" href="https://www.adtalem.com/">www.adtalem.com</a><br>
Walden University is certified to operate by SCHEV<br>
© 2024 Walden University LLC. All rights reserved.</p>
</div>
</div>
</div>
</div>
</div>