Accessibility and semantic improvements (#2488)

preview/pages/form-layout.html

@@ -21,20 +21,24 @@ page-libs: [litepicker]
 						<form class="space-y">
 							<div class="row">
 								<div class="col-6">
-									<input type="text" placeholder="Name" class="form-control" />
+									<label class="form-label visually-hidden" for="basic-name">Name</label>
+									<input type="text" placeholder="Name" class="form-control" id="basic-name" name="name" />
 								</div>
 								
 								<div class="col-6">
-									<input type="email" placeholder="Email address" class="form-control" />
+									<label class="form-label visually-hidden" for="basic-email">Email address</label>
+									<input type="email" placeholder="Email address" class="form-control" id="basic-email" name="email" />
 								</div>
 							</div>
 
 							<div>
-								<input type="password" placeholder="Password" class="form-control" />
+								<label class="form-label visually-hidden" for="basic-password">Password</label>
+								<input type="password" placeholder="Password" class="form-control" id="basic-password" name="password" />
 							</div>
 
 							<div>
-								<input type="password" placeholder="Confirm Password" class="form-control" />
+								<label class="form-label visually-hidden" for="basic-password-confirm">Confirm Password</label>
+								<input type="password" placeholder="Confirm Password" class="form-control" id="basic-password-confirm" name="password_confirm" />
 							</div>
 
 							<div>
@@ -55,31 +59,31 @@ page-libs: [litepicker]
 						<form>
 							<div class="space-y">
 								<div>
-									<label class="form-label">
+									<label class="form-label" for="example-first-name">
 										First Name
 									</label>
-									<input type="text" placeholder="Enter first name" class="form-control">
+									<input type="text" placeholder="Enter first name" class="form-control" id="example-first-name" name="first_name">
 								</div>
 
 								<div>
-									<label class="form-label">
+									<label class="form-label" for="example-last-name">
 										Last Name
 									</label>
-									<input type="text" placeholder="Enter last name" class="form-control">
+									<input type="text" placeholder="Enter last name" class="form-control" id="example-last-name" name="last_name">
 								</div>
 
 								<div>
-									<label class="form-label">
+									<label class="form-label" for="example-email">
 										Email
 									</label>
-									<input type="email" placeholder="Enter email address" class="form-control">
+									<input type="email" placeholder="Enter email address" class="form-control" id="example-email" name="email">
 								</div>
 
 								<div>
-									<label class="form-label">
+									<label class="form-label" for="example-subject">
 										Select Subject
 									</label>
-									<select class="form-select">
+									<select class="form-select" id="example-subject" name="subject">
 										<option>
 											Option 1
 										</option>
@@ -96,10 +100,10 @@ page-libs: [litepicker]
 								</div>
 
 								<div>
-									<label class="form-label">
+									<label class="form-label" for="example-message">
 										Message
 									</label>
-									<textarea placeholder="Enter your message" rows="6" class="form-control"></textarea>
+									<textarea placeholder="Enter your message" rows="6" class="form-control" id="example-message" name="message"></textarea>
 								</div>
 
 								<div>

preview/pages/job-listing.html

@@ -46,9 +46,9 @@ permalink: job-listing.html
 				<div class="small text-secondary">Only show companies that can sponsor a visa</div>
 			</div>
 
-			<div class="form-label">Location</div>
+			<label class="form-label" for="job-location">Location</label>
 			<div class="mb-4">
-				<select class="form-select">
+				<select class="form-select" id="job-location" name="location">
 					<option>Anywhere</option>
 					<option>London</option>
 					<option>San Francisco</option>

preview/pages/marketing/real-estate.html

@@ -12,7 +12,7 @@ permalink: marketing/real-estate.html
 				<div class="col-xl-6 col-lg-8 text-center">
 					<form novalidate="" class="row row-cols-1 row-cols-md-auto g-3 align-items-center">
 						<div class="col flex-grow-1">
-							<input id="inputEmail" type="text" placeholder="Search properties near you..." class="form-control form-control-solid" />
+							<input id="inputEmail" type="text" placeholder="Search properties near you..." class="form-control form-control-solid" aria-label="Search properties near you" />
 						</div>
 						<div class="col"><button type="submit" class="btn btn-teal fw-500">Search</button></div>
 					</form>

preview/pages/settings.html

@@ -19,16 +19,16 @@ permalink: settings.html
 
 	<div class="row g-3">
 		<div class="col-md">
-			<div class="form-label">Business Name</div>
-			<input type="text" class="form-control" value="{{ people[0].company }}">
+			<label class="form-label" for="business-name">Business Name</label>
+			<input type="text" class="form-control" id="business-name" name="business-name" value="{{ people[0].company }}">
 		</div>
 		<div class="col-md">
-			<div class="form-label">Business ID</div>
-			<input type="text" class="form-control" value="560afc32">
+			<label class="form-label" for="business-id">Business ID</label>
+			<input type="text" class="form-control" id="business-id" name="business-id" value="560afc32">
 		</div>
 		<div class="col-md">
-			<div class="form-label">Location</div>
-			<input type="text" class="form-control"
+			<label class="form-label" for="location">Location</label>
+			<input type="text" class="form-control" id="location" name="location"
 			       value="{{ people[0].city }}, {{ people[0].country }}">
 		</div>
 	</div>
@@ -39,7 +39,8 @@ permalink: settings.html
 	<div>
 		<div class="row g-2">
 			<div class="col-auto">
-				<input type="text" class="form-control w-auto" value="{{ people[0].email }}">
+				<label for="email" class="form-label visually-hidden">Email</label>
+				<input type="text" class="form-control w-auto" id="email" name="email" value="{{ people[0].email }}">
 			</div>
 			<div class="col-auto">{% include "ui/button.html" text="Change" %}</div>
 		</div>

preview/pages/signatures.html

@@ -66,12 +66,12 @@ document.querySelector("#signature-advanced-png").addEventListener("click", func
         <p class="card-subtitle">Please confirm the transfer of funds by signing below.</p>
         <form action="">
           <div class="mb-3">
-            <label class="form-label required">First name</label>
-            <input type="text" class="form-control" />
+            <label class="form-label required" for="signature-first-name">First name</label>
+            <input type="text" class="form-control" id="signature-first-name" name="first_name" />
           </div>
           <div class="mb-3">
-            <label class="form-label required">Last name</label>
-            <input type="text" class="form-control" />
+            <label class="form-label required" for="signature-last-name">Last name</label>
+            <input type="text" class="form-control" id="signature-last-name" name="last_name" />
           </div>
           <div class="mb-3">
             <label class="form-label required">Signature</label>
@@ -105,6 +105,7 @@ document.querySelector("#signature-advanced-png").addEventListener("click", func
 					<div class="mt-4">
 						<div class="row">
 							<div class="col">
+                <label for="signature-advanced-color" class="form-label visually-hidden">Pen color</label>
                 <input href="" type="color" id="signature-advanced-color" class="w-100 form-control form-control-color" />
 							</div>
 							<div class="col">

shared/includes/layout/footer.html

@@ -3,17 +3,19 @@
 	<div class="container-xl">
 		<div class="row text-center align-items-center flex-row-reverse">
 			<div class="col-lg-auto ms-lg-auto">
-				<ul class="list-inline list-inline-dots mb-0">
-					<li class="list-inline-item"><a href="{{ site.docsUrl }}" target="_blank" class="link-secondary" rel="noopener">Documentation</a></li>
-					<li class="list-inline-item"><a href="{{ page | relative }}/license.html" class="link-secondary">License</a></li>
-					<li class="list-inline-item"><a href="{{ site.githubUrl }}" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
-					<li class="list-inline-item">
-						<a href="{{ site.githubSponsorsUrl }}" target="_blank" class="link-secondary" rel="noopener">
-							{% include "ui/icon.html" icon="heart" inline=true filled=true color="pink" %}
-							Sponsor
-						</a>
-					</li>
-				</ul>
+				<nav aria-label="Footer">
+					<ul class="list-inline list-inline-dots mb-0">
+						<li class="list-inline-item"><a href="{{ site.docsUrl }}" target="_blank" class="link-secondary" rel="noopener">Documentation</a></li>
+						<li class="list-inline-item"><a href="{{ page | relative }}/license.html" class="link-secondary">License</a></li>
+						<li class="list-inline-item"><a href="{{ site.githubUrl }}" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
+						<li class="list-inline-item">
+							<a href="{{ site.githubSponsorsUrl }}" target="_blank" class="link-secondary" rel="noopener">
+								{% include "ui/icon.html" icon="heart" inline=true filled=true color="pink" %}
+								Sponsor
+							</a>
+						</li>
+					</ul>
+				</nav>
 			</div>
 			<div class="col-12 col-lg-auto mt-3 mt-lg-0">
 				<ul class="list-inline list-inline-dots mb-0">

shared/includes/layout/navbar-menu.html

@@ -11,7 +11,7 @@
 	{% for level-1 in menu %}
 		{% assign icon = level-1[1].icon %}
 		<li class="nav-item{% if level-1[0] == current-page[0] or level-1[1].active %} active{% endif %}{% if level-1[1].children %} dropdown{% endif %}">
-			<a class="nav-link{% if level-1[1].children %} dropdown-toggle{% endif %}{% if level-1[1].disabled %} disabled{% endif %}" {% if level-1[1].children %}href="#navbar-{{ level-1[0] }}" data-bs-toggle="dropdown" data-bs-auto-close="{% if include.keep-open %}false{% else %}outside{% endif %}" role="button" aria-expanded="{% if include.auto-open and level-1[0] == current-page[0] %}true{% else %}false{% endif %}" {% else %}href="{{ page | relative }}/{{ level-1[1].url }}" {% endif %}>
+			<a class="nav-link{% if level-1[1].children %} dropdown-toggle{% endif %}{% if level-1[1].disabled %} disabled{% endif %}" {% if level-1[1].children %}href="#navbar-{{ level-1[0] }}" data-bs-toggle="dropdown" data-bs-auto-close="{% if include.keep-open %}false{% else %}outside{% endif %}" role="button" aria-haspopup="true" aria-expanded="{% if include.auto-open and level-1[0] == current-page[0] %}true{% else %}false{% endif %}" {% else %}href="{{ page | relative }}/{{ level-1[1].url }}" {% endif %}{% if level-1[0] == current-page[0] or level-1[1].active %} aria-current="page"{% endif %}>
 				{% unless hide-icons %}
 				<span class="nav-link-icon d-md-none d-lg-inline-block">{% include "ui/icon.html" icon=icon %}</span>
 				{% endunless %}
@@ -47,7 +47,7 @@
 
 					{% if level-2[1].children %}<div class="dropend">{% endif %}
 
-					<a class="dropdown-item{% if level-2[1].children %} dropdown-toggle{% endif %}{% if level-1[0] == current-page[0] and level-2[0] == current-page[1] and current-page.size == 2 %} active{% endif %}{% if level-2[1].color %} text-{{ level-2[1].color }}{% endif %}" {% if level-2[1].children %}href="#sidebar-{{ level-2[0] }}" data-bs-toggle="dropdown" data-bs-auto-close="{% if include.keep-open %}false{% else %}outside{% endif %}" role="button" aria-expanded="false" {% else %}href="{% if level-2[1].url contains 'http://' or level-2[1].url contains 'https://'%}{{ level-2[1].url }}{% else %}{{ page | relative }}/{{ level-2[1].url }}{% endif %}"{% endif %}{% if level-2[1].url contains 'http://' or level-2[1].url contains 'https://'%} target="_blank" rel="noopener"{% endif %}>
+					<a class="dropdown-item{% if level-2[1].children %} dropdown-toggle{% endif %}{% if level-1[0] == current-page[0] and level-2[0] == current-page[1] and current-page.size == 2 %} active{% endif %}{% if level-2[1].color %} text-{{ level-2[1].color }}{% endif %}" {% if level-2[1].children %}href="#sidebar-{{ level-2[0] }}" data-bs-toggle="dropdown" data-bs-auto-close="{% if include.keep-open %}false{% else %}outside{% endif %}" role="button" aria-haspopup="true" aria-expanded="false" {% else %}href="{% if level-2[1].url contains 'http://' or level-2[1].url contains 'https://'%}{{ level-2[1].url }}{% else %}{{ page | relative }}/{{ level-2[1].url }}{% endif %}"{% endif %}{% if level-2[1].url contains 'http://' or level-2[1].url contains 'https://'%} target="_blank" rel="noopener"{% endif %}{% if level-1[0] == current-page[0] and level-2[0] == current-page[1] and current-page.size == 2 %} aria-current="page"{% endif %}>
 						{% if level-2[1].icon %}
 							{% assign icon = level-2[1].icon %}
 							{% include "ui/icon.html" icon=icon class="icon-inline me-1" %}

shared/includes/layout/navbar-search.html

@@ -1,7 +1,7 @@
 {% assign breakpoint = include.breakpoint | default: 'lg' %}
 
 <div{% if include.class %} class="{{ include.class }}"{% endif %}>
-	<form action="{{ page | relative }}/" method="get" autocomplete="off" novalidate>
+	<form action="{{ page | relative }}/" method="get" autocomplete="off" novalidate role="search">
 		{% include "ui/form/input-icon.html" prepend=true rounded=include.rounded aria-label="Search in website" %}
 	</form>
 </div>

shared/includes/layout/navbar-side.html

@@ -30,18 +30,22 @@
 				{% include "ui/icon.html" icon="bell" %}
 				<span class="badge bg-red"></span>
 			</a>
+			<!-- BEGIN NAVBAR NOTIFICATIONS -->
 			<div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
 				{% include "cards/navbar-notifications.html" %}
 			</div>
+			<!-- END NAVBAR NOTIFICATIONS -->
 		</div>
 
 		<div class="nav-item dropdown d-none d-md-flex me-3">
 			<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show app menu" data-bs-auto-close="outside" aria-expanded="false">
 				{% include "ui/icon.html" icon="apps" %}
 			</a>
+			<!-- BEGIN NAVBAR APPS -->
 			<div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
 				{% include "cards/navbar-apps.html" %}
 			</div>
+			<!-- END NAVBAR APPS -->
 		</div>
 	</div>
 
@@ -56,6 +60,7 @@
 			</div>
 			{% endunless %}
 		</a>
+		<!-- BEGIN USER MENU -->
 		<div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow"{% if include.dark %} data-bs-theme="light"{% endif %}>
 			<a href="#" class="dropdown-item">Status</a>
 			<a href="{{ page | relative }}/profile.html" class="dropdown-item">Profile</a>
@@ -64,5 +69,6 @@
 			<a href="{{ page | relative }}/settings.html" class="dropdown-item">Settings</a>
 			<a href="{{ page | relative }}/sign-in.html" class="dropdown-item">Logout</a>
 		</div>
+		<!-- END USER MENU -->
 	</div>
 </div>

shared/includes/layout/navbar-toggler.html

@@ -1,5 +1,5 @@
 <!-- BEGIN NAVBAR TOGGLER -->
-<button class="navbar-toggler" type="button" data-bs-toggle="collapse"{% if include.target %} data-bs-target="#{{ include.target }}" aria-controls="{{ include.target }}"{% endif %} aria-expanded="false" aria-label="Toggle navigation">
+<button class="navbar-toggler" type="button" data-bs-toggle="collapse"{% if include.target %} data-bs-target="#{{ include.target }}" aria-controls="{{ include.target }}"{% endif %} aria-expanded="false" aria-label="{% if include.target == 'sidebar-menu' %}Toggle sidebar navigation{% else %}Toggle primary navigation{% endif %}">
 	<span class="navbar-toggler-icon"></span>
 </button>
 <!-- END NAVBAR TOGGLER -->

shared/includes/layout/navbar.html

@@ -18,20 +18,30 @@
 			{% if condensed %}
 			<div class="collapse navbar-collapse" id="navbar-menu">
 				{% if include.hide-search %}
-					{% include "layout/navbar-menu.html" sample=include.sample hide-icons=include.hide-icons %}
+					<!-- BEGIN NAVBAR MENU -->
+					<nav aria-label="Primary">
+						{% include "layout/navbar-menu.html" sample=include.sample hide-icons=include.hide-icons %}
+					</nav>
+					<!-- END NAVBAR MENU -->
 				{% elsif include.hide-menu %}
 					{% include "layout/navbar-search.html" rounded=include.transparent %}
 				{% else %}
 					<div class="d-flex flex-column flex-md-row flex-fill align-items-stretch align-items-md-center">
-						{% include "layout/navbar-menu.html" sample=include.sample hide-icons=include.hide-icons %}
-
+						<!-- BEGIN NAVBAR MENU -->
+						<nav aria-label="Primary">
+							{% include "layout/navbar-menu.html" sample=include.sample hide-icons=include.hide-icons %}
+						</nav>
+						<!-- END NAVBAR MENU -->
+						
 						{% unless condensed %}
 							{% assign search-class = "ms-md-auto ps-md-4 py-2 py-md-0 me-md-4 order-first order-md-last flex-grow-1" %}
 							{% unless include.fluid-search %}
 								{% assign search-class = search-class | append: " flex-md-grow-0" %}
 							{% endunless %}
 
+							<!-- BEGIN NAVBAR SEARCH -->
 							{% include "layout/navbar-search.html" breakpoint=breakpoint rounded=include.transparent class=search-class %}
+							<!-- END NAVBAR SEARCH -->
 						{% endunless %}
 					</div>
 				{% endif %}
@@ -41,14 +51,20 @@
 	</header>
 
 	{% unless condensed %}
-	<header class="navbar-expand-{{ breakpoint }}">
+	<div class="navbar-expand-{{ breakpoint }}">
 		<div class="collapse navbar-collapse" id="navbar-menu">
 			<div class="navbar"{% if include.dark-secondary %} data-bs-theme="dark"{% endif %}>
 				<div class="container-xl">
 					<div class="row flex-column flex-md-row flex-fill align-items-center">
 						<div class="col">
-							{% include "layout/navbar-menu.html" sample=include.sample hide-icons=include.hide-icons long-titles=true %}
+							<!-- BEGIN NAVBAR MENU -->
+							<nav aria-label="Primary">
+								{% include "layout/navbar-menu.html" sample=include.sample hide-icons=include.hide-icons long-titles=true %}
+							</nav>
+							<!-- END NAVBAR MENU -->
 						</div>
+						
+						
 						{% unless include.hide-search %}
 						<div class="col-2 d-none d-xxl-block">
 							{% include "layout/navbar-search.html" breakpoint=breakpoint class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last" %}
@@ -56,6 +72,7 @@
 						{% endunless %}
 
 						<div class="col col-md-auto">
+							<!-- BEGIN NAVBAR NAV -->
 							<ul class="navbar-nav">
 								<li class="nav-item">
 									<a class="nav-link" href="#" data-bs-toggle="offcanvas" data-bs-target="#offcanvasSettings">
@@ -69,12 +86,13 @@
 									</a>
 								</li>
 							</ul>
+							<!-- END NAVBAR NAV -->
 						</div>
 					</div>
 				</div>
 			</div>
 		</div>
-	</header>
+	</div>
 	{% endunless %}
 
 {% if include.sticky %}

shared/includes/layout/page-header.html

@@ -9,7 +9,7 @@
 {% if page-header-file %}
 	{% include "layout/headers/{{ page-header-file }}.html" %}
 {% elsif page-header %}
-<div class="page-header{% if class %} {{ class }}{% endif %} d-print-none{% if layout-navbar-overlap and layout-navbar-dark %} text-white{% endif %}" aria-label="Page header">
+<div class="page-header{% if class %} {{ class }}{% endif %} d-print-none{% if layout-navbar-overlap and layout-navbar-dark %} text-white{% endif %}">
 	<div class="container-xl">
 		<div class="row g-2 align-items-center">
 			<div class="col">
@@ -19,12 +19,12 @@
 					{{ pretitle }}
 				</div>
 				{% endif %}
-				<h2 class="page-title">
+				<h1 class="page-title">
 					{% if page-icon %}
 						{% include "ui/icon.html" icon=page-icon %}
 					{% endif %}
 					{{ page-header }}
-				</h2>
+				</h1>
 
 				{% if description %}
 					<div class="text-secondary mt-1">{{ description }}</div>

shared/includes/layout/skip-link.html

@@ -0,0 +1,2 @@
+<a href="#content" class="visually-hidden-focusable skip-link">Skip to main content</a>
+

shared/includes/marketing/navbar.html

@@ -8,36 +8,38 @@
 			data-bs-target="#navbarTogglerDemo01"
 			aria-controls="navbarTogglerDemo01"
 			aria-expanded="false"
-			aria-label="Toggle navigation"
+			aria-label="Toggle primary navigation"
 		>
 			<span class="navbar-toggler-icon"></span>
 		</button>
 		<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
-			<nav class="navbar-nav ms-auto">
-				<div class="nav-item">
-					<a class="nav-link active" href="{{ page | relative }}/marketing"><span class="nav-link-title">Home</span></a>
-				</div>
-				<div class="nav-item">
-					<a class="nav-link" href="{{ page | relative }}/marketing/testimonials.html"><span class="nav-link-title">Testimonials</span></a>
-				</div>
-				<div class="nav-item">
-					<a class="nav-link" href="{{ page | relative }}/marketing/pricing.html"><span class="nav-link-title">Pricing</span></a>
-				</div>
-				<div class="nav-item">
-					<a class="nav-link" href="{{ page | relative }}/marketing/about.html"><span class="nav-link-title">About</span></a>
-				</div>
-				<div class="nav-item">
-					<a class="nav-link" href="{{ page | relative }}/marketing/text.html"><span class="nav-link-title">Text</span></a>
-				</div>
-				<div class="nav-item">
-					<a class="nav-link" href="{{ page | relative }}/marketing/hero.html"><span class="nav-link-title">App</span></a>
-				</div>
-				<div class="nav-item">
-					<a class="nav-link" href="{{ page | relative }}/marketing/real-estate.html"><span class="nav-link-title">Real estate</span></a>
-				</div>
-				<div class="nav-item ms-4">
-					<a href="#" class="btn btn-primary">Buy now</a>
-				</div>
+			<nav aria-label="Primary">
+				<ul class="navbar-nav ms-auto">
+					<li class="nav-item">
+						<a class="nav-link active" href="{{ page | relative }}/marketing"><span class="nav-link-title">Home</span></a>
+					</li>
+					<li class="nav-item">
+						<a class="nav-link" href="{{ page | relative }}/marketing/testimonials.html"><span class="nav-link-title">Testimonials</span></a>
+					</li>
+					<li class="nav-item">
+						<a class="nav-link" href="{{ page | relative }}/marketing/pricing.html"><span class="nav-link-title">Pricing</span></a>
+					</li>
+					<li class="nav-item">
+						<a class="nav-link" href="{{ page | relative }}/marketing/about.html"><span class="nav-link-title">About</span></a>
+					</li>
+					<li class="nav-item">
+						<a class="nav-link" href="{{ page | relative }}/marketing/text.html"><span class="nav-link-title">Text</span></a>
+					</li>
+					<li class="nav-item">
+						<a class="nav-link" href="{{ page | relative }}/marketing/hero.html"><span class="nav-link-title">App</span></a>
+					</li>
+					<li class="nav-item">
+						<a class="nav-link" href="{{ page | relative }}/marketing/real-estate.html"><span class="nav-link-title">Real estate</span></a>
+					</li>
+					<li class="nav-item ms-4">
+						<a href="#" class="btn btn-primary">Buy now</a>
+					</li>
+				</ul>
 			</nav>
 		</div>
 	</div>

shared/includes/parts/nav/nav-aside.html

@@ -2,14 +2,14 @@
 
 	<div class="subheader mb-2">Category</div>
 	{% assign items = "Games,Clothing,Jewelery,Toys" | split:  "," %}
-	<div class="list-group list-group-transparent mb-3">
+	<nav class="list-group list-group-transparent mb-3">
 		{% for item in items %}
 		<a class="list-group-item list-group-item-action d-flex align-items-center{% if forloop.first %} active{% endif %}" href="#">
 			{{ item }}
 			<small class="text-secondary ms-auto">{{ forloop.index | random_number: 11, 200 }}</small>
 		</a>
 		{% endfor %}
-	</div>
+	</nav>
 
 	<div class="subheader mb-2">Rating</div>
 	{% assign items = "5 stars,4 stars,3 stars,2 and less stars" | split:  "," %}

shared/includes/settings.html

@@ -3,9 +3,9 @@
 		{% include "ui/icon.html" icon="brush" %}
 	</a>
 
-	<form class="offcanvas offcanvas-start offcanvas-narrow" tabindex="-1" id="offcanvasSettings">
+	<form class="offcanvas offcanvas-start offcanvas-narrow" tabindex="-1" id="offcanvasSettings" role="dialog" aria-modal="true" aria-labelledby="offcanvasSettingsTitle">
 		<div class="offcanvas-header">
-			<h2 class="offcanvas-title">Theme Settings</h2>
+			<h2 class="offcanvas-title" id="offcanvasSettingsTitle">Theme Settings</h2>
 			<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
 		</div>
 		<div class="offcanvas-body d-flex flex-column">

shared/includes/ui/breadcrumb.html

@@ -1,20 +1,24 @@
 {% assign breadcrumb-pages = include.pages | default: "Home,Library,Data" | split: "," -%}
-<ol class="breadcrumb{% if include.class %} {{ include.class }}{% endif %}{% if include.separator %} breadcrumb-{{ include.separator }}{% endif %}" aria-label="breadcrumbs">
-   {%- for page in breadcrumb-pages -%}
-   {%- if forloop.last -%}
-   <li class="breadcrumb-item active" aria-current="page">
-		<a href="#">{{ page }}</a>
-   </li>
-   {%- else -%}
-   <li class="breadcrumb-item">
-		{% if forloop.first and include.home-icon-%}
-		<a href="{{ site.baseurl }}/">
-			{% include "ui/icon.html" icon="home" %}
-		</a>
+<!-- BEGIN BREADCRUMB -->
+<nav aria-label="Breadcrumb">
+	<ol class="breadcrumb{% if include.class %} {{ include.class }}{% endif %}{% if include.separator %} breadcrumb-{{ include.separator }}{% endif %}">
+		{%- for page in breadcrumb-pages -%}
+		{%- if forloop.last -%}
+		<li class="breadcrumb-item active" aria-current="page">
+			{{ page }}
+		</li>
 		{%- else -%}
-		<a href="#">{{ page }}</a>
+		<li class="breadcrumb-item">
+			{% if forloop.first and include.home-icon-%}
+			<a href="{{ site.baseurl }}/">
+				{% include "ui/icon.html" icon="home" %}
+			</a>
+			{%- else -%}
+			<a href="#">{{ page }}</a>
+			{%- endif -%}
+		</li>
 		{%- endif -%}
-	</li>
-   {%- endif -%}
-   {%- endfor -%}
-</ol>
+		{%- endfor -%}
+	</ol>
+</nav>
+<!-- END BREADCRUMB -->

shared/includes/ui/icon.html

@@ -27,5 +27,5 @@
 	<!-- Download SVG icon from http://tabler.io/icons/icon/{{ icon-name }} -->
 	{% assign svg-icon = icons[icon-name].svg[icon-type] | default: '' -%}
 	{%- assign svg-icon = svg-icon | replace: '<path stroke="none" d="M0 0h24v24H0z" fill="none"/>', '' -%}
-	{{ svg-icon | replace_regex: 'class=\"[^"]+\"', replace-to }}
+	{{ svg-icon | replace_regex: 'class=\"[^"]+\"', replace-to | replace: 'class="', 'aria-hidden="true" focusable="false" class="' }}
 {%- endif -%}

shared/includes/ui/pagination.html

@@ -2,6 +2,7 @@
 {% assign offset = include.offset | default: count -%}
 {% assign count-offset = count | minus: offset | plus: 1 -%}
 {% assign active-item = include.active-item | default: 3 -%}
+<!-- BEGIN PAGINATION -->
 <ul class="pagination{% if include.class %} {{ include.class }}{% endif %}">
 	{% if include.first-last -%}
 	<li class="page-item disabled">
@@ -53,3 +54,4 @@
 	</li>
 	{% endif -%}
 </ul>
+<!-- END PAGINATION -->

shared/layouts/base.html

@@ -45,6 +45,7 @@
 
 {% assign layout-dark = layout-dark | default: site.layoutDark %}
 <body{% if layout.body-class or body-class %} class="{% if layout.body-class %} {{ layout.body-class }}{% endif %}{% if body-class %} {{ body-class }}{% endif %}"{% endif %}>
+	{% include "layout/skip-link.html" %}
 	<!-- BEGIN GLOBAL THEME SCRIPT -->
 	<script src="{{ page | relative }}/dist/js/tabler-theme{% if environment != 'development' %}.min{% endif %}.js{% if environment != 'development' %}?{{ 'now' | date: '%s' }}{% endif %}"{% if environment == 'preview' %} integrity="{{ sri.js-theme }}"{% endif %}></script>
 	<!-- END GLOBAL THEME SCRIPT -->

shared/layouts/default.html

@@ -18,10 +18,12 @@ layout: base
 	{% endunless %}
 
 	<div class="page-wrapper{% if layout-wrapper-full %} page-wrapper-full{% endif %}">
+		<!-- BEGIN PAGE HEADER -->
 		{% include "layout/page-header.html" %}
+		<!-- END PAGE HEADER -->
 
 		<!-- BEGIN PAGE BODY -->
-		<div class="page-body">
+		<main id="content" class="page-body">
 			{% if layout-wrapper-full %}
 			{{ content }}
 			{% else %}
@@ -34,9 +36,11 @@ layout: base
 			{% endunless %}
 
 			{% endif %}
-		</div>
+		</main>
 		<!-- END PAGE BODY -->
 
+		<!-- BEGIN FOOTER -->
 		{% include "layout/footer.html" %}
+		<!-- END FOOTER -->
 	</div>
 </div>

shared/layouts/docs/default.html

@@ -81,8 +81,13 @@
 
 <body class="d-flex flex-column" style="background: var(--tblr-bg-surface)">
 	<script src="/dist/js/tabler-theme{% if environment != 'development' %}.min{% endif %}.js"></script>
+	<!-- BEGIN NAVBAR  -->
+	<header role="banner">
 	{% include "docs/navbar.html" %}
-	<div class="flex-fill">
+	</header>
+	<!-- END NAVBAR  -->
+	<!-- BEGIN PAGE BODY -->
+	<main id="content" class="flex-fill">
 		<div class="container">
 			<div class="row g-0">
 				<div class="col-docs d-none d-lg-block border-end">
@@ -154,7 +159,8 @@
 				</div>
 			</div>
 		</div>
-	</div>
+	</main>
+	<!-- END PAGE BODY -->
 
 	{% for lib in libs -%}
 	{% if docs-libs contains lib[0] or libs.global-libs contains lib[0] or lib[0] == "clipboard" -%}

shared/layouts/marketing.html

@@ -3,11 +3,19 @@ layout: base
 body-class: body-marketing body-gradient
 plugins: marketing
 ---
-
+<!-- BEGIN NAVBAR  -->
+<header role="banner">
 {% include "marketing/navbar.html" %}
+</header>
+<!-- END NAVBAR  -->
 
+<!-- BEGIN PAGE BODY -->
+<main id="content">
 {{ content }}
+</main>
+<!-- END PAGE BODY -->
 
+<!-- BEGIN FOOTER -->
 <footer class="footer">
 	<div class="container">
 		<div class="py-3">
@@ -162,3 +170,4 @@ plugins: marketing
 		</div>
 	</div>
 </footer>
+<!-- END FOOTER -->

shared/layouts/settings.html

@@ -4,29 +4,31 @@ title: Settings
 page-header: Account Settings
 ---
 
+<!-- BEGIN PAGE BODY -->
 <div class="card">
 	<div class="row g-0">
 		<div class="col-12 col-md-3 border-end">
 			<div class="card-body">
 				<h4 class="subheader">Business settings</h4>
 
-				<div class="list-group list-group-transparent">
+				<nav class="list-group list-group-transparent">
 					<a href="{{ page | relative }}/settings.html" class="list-group-item list-group-item-action d-flex align-items-center{% if page.fileSlug == 'settings' %} active{% endif %}">My Account</a>
 					<a href="#" class="list-group-item list-group-item-action d-flex align-items-center">My Notifications</a>
 					<a href="#" class="list-group-item list-group-item-action d-flex align-items-center">Connected Apps</a>
 					<a href="{{ page | relative }}/settings-plan.html" class="list-group-item list-group-item-action d-flex align-items-center{% if page.fileSlug == 'settings-plan' %} active{% endif %}">Plans</a>
 					<a href="#" class="list-group-item list-group-item-action d-flex align-items-center">Billing & Invoices</a>
-				</div>
+				</nav>
 
 				<h4 class="subheader mt-4">Experience</h4>
 
-				<div class="list-group list-group-transparent">
+				<nav class="list-group list-group-transparent">
 					<a href="#" class="list-group-item list-group-item-action">Give Feedback</a>
-				</div>
+				</nav>
 			</div>
 		</div>
 		<div class="col-12 col-md-9 d-flex flex-column">
 			{{ content }}
 		</div>
 	</div>
-</div>
+</div>
+<!-- END PAGE BODY -->