Wrap content in <main> for a screen-reader landmark

Author: khaledhosny

_layouts/app.html

@@ -66,10 +66,10 @@ <h1 id="foundry"><a href="/{{ messages.suffix }}">{{ messages.foundry }}</a></h1
           <input type="number" id="font-size-number" min="10" max="500" value="{{ fontSize }}" title="{{ messages.app.font-size }}">
         </div>
     </div>
-    <section dir="rtl">
+    <main dir="rtl">
       <canvas tabindex="0" id="canvas"></canvas>
       <input type="text" id="hiddeninput">
-    </section>
+    </main>
     <p class="alternates-header" style="display: none;">{{ messages.app.alternates }}</p>
     <div id="alternates"></div>
     <footer>

_layouts/default.html

@@ -26,9 +26,9 @@ <h1 id="foundry"><a href="/{{ messages.suffix }}">{{ messages.foundry }}</a></h1
     <p class="lang-switcher-top">
     {% include language-switcher.html %}
     </p>
-    <section>
+    <main>
       {{ content }}
-    </section>
+    </main>
     <footer>
       {% include contact.html %}
     </footer>

_layouts/font.html

@@ -32,12 +32,12 @@ <h1 id="foundry"><a href="/{{ messages.suffix }}">{{ messages.foundry }}</a></h1
     {% include language-switcher.html %}
     </p>
     <h1 dir="rtl" id="title">{{ config.title }}{{ config.title-separator }}{{ config.subtitle }}</h1>
-    <section>
+    <main>
       {% if page.subtitle %}
       <h1>{{ page.title | default: config.title }} — {{ page.subtitle }}</h1>
       {% endif %}
       {{ content }}
-    </section>
+    </main>
 
     <footer>
       {% if project == "amiri" %}

_sass/font.scss

@@ -20,7 +20,7 @@ body {
   grid-template-areas:
     ". nav nav"
     "header title title"
-    "header section footer";
+    "header main footer";
   gap: var(--main-gap);
 }
 
@@ -36,8 +36,8 @@ header {
   grid-area: title;
 }
 
-section {
-  grid-area: section;
+main {
+  grid-area: main;
 }
 
 footer {
@@ -189,7 +189,7 @@ footer p {
       "nav"
       "lang-switcher"
       "title"
-      "section"
+      "main"
       "footer"
       "header"
     ;
@@ -246,7 +246,7 @@ footer p {
 }
 
 @media (max-width: 700px) {
-  section>p:lang(en-US) {
+  main>p:lang(en-US) {
     text-align: start;
     hyphens: revert;
   }

assets/css/app.scss

@@ -40,7 +40,7 @@ body {
   grid-template-areas:
     ". nav nav"
     "header toolbar toolbar"
-    "header section alternates";
+    "header main alternates";
   gap: var(--main-gap);
 }
 
@@ -52,8 +52,8 @@ header {
   grid-area: header;
 }
 
-section {
-  grid-area: section;
+main {
+  grid-area: main;
 }
 
 footer {
@@ -152,7 +152,7 @@ footer {
   font-family: var(--latin-font);
 }
 
-section {
+main {
   overflow: scroll;
 }
 
@@ -309,7 +309,7 @@ input[type=range]::-moz-range-thumb {
       "nav"
       "lang-switcher"
       "toolbar"
-      "section"
+      "main"
       "alternates"
       "footer"
     ;

assets/css/default.scss

@@ -21,8 +21,8 @@ body {
   justify-content: space-between;
   grid-template-areas:
     ". nav nav"
-    "header section ."
-    "header section .";
+    "header main ."
+    "header main .";
   gap: var(--main-gap);
 }
 
@@ -34,8 +34,8 @@ header {
   grid-area: header;
 }
 
-section {
-  grid-area: section;
+main {
+  grid-area: main;
 }
 
 footer {
@@ -162,7 +162,7 @@ footer {
       "nav"
       "lang-switcher"
       "header"
-      "section"
+      "main"
       "footer"
     ;
   }
@@ -201,7 +201,7 @@ footer {
 }
 
 @media (max-width: 700px) {
-  section>p:lang(en-US) {
+  main>p:lang(en-US) {
     text-align: start;
     hyphens: revert;
   }