Semantic html changes for better screen-reader experience
MODIFY
website/src/_includes/layouts/base.njk
website/src/_includes/layouts/base.njk
<div class="header-mobile">
<a class="logo" href="{{ '/' | url }}">
- <svg id="Layer_1" data-name="logo"
+ <svg data-name="logo"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 360">
<defs>
<style>.cls-1{fill:#27272a;}.cls-2{fill:#ffc905;}</style>
<div class="sidebar">
<div class="header-desktop">
<a class="logo" href="{{ '/' | url }}">
- <svg id="Layer_1" data-name="logo"
+ <svg data-name="logo"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 360">
<defs>
<style>.cls-1{fill:#27272a;}.cls-2{fill:#ffc905;}</style>
<path class="cls-2" d="M214.26,2.32a9.45,9.45,0,0,1,7.26,13.42l-2.59,5.42-20.06,42a9.48,9.48,0,0,1-9.11,5.35c-3.23-.18-6.49-.27-9.76-.27s-6.53.09-9.76.27a9.48,9.48,0,0,1-9.11-5.35l-20.06-42-2.59-5.42a9.46,9.46,0,0,1,7.26-13.42,254.39,254.39,0,0,1,68.52,0Z"/>
<path class="cls-2" d="M288,188.57V360H234V188.57c0-28.41-24.18-51.43-54-51.43s-54,23-54,51.43V360H72V188.57c0-56.81,48.36-102.86,108-102.86S288,131.76,288,188.57Z"/>
</svg>
- <span class="logo-text">Rome</span>
+ <h1 class="logo-text">Rome</h1>
</a>
</div>
- <nav aria-label="site" class="menu">
+ <nav aria-labelledby="site-navigation" class="menu">
+ <h2 id="site-navigation" class="sr-only">Site Navigation</h2>
<ul>
<li>
<a href="#">Item 1</a>
<li>
<a href="#">Item 4</a>
</li>
- <ul>
+ </ul>
</nav>
- <nav aria-label="page" class="table-of-contents">
+ <nav aria-labelledby="page-navigation" class="table-of-contents">
+ <h2 id="page-navigation" class="sr-only">Page Navigation</h2>
<div class="toc-container">
- {{ content | toc(tags=['h1', 'h2'], wrapperClass='fixed toc') | safe }}
+ {{ content | toc(tags=['h1', 'h2'], wrapper='div ', wrapperClass='fixed toc') | safe }}
</div>
</nav>
<div class="mode-switch-container">
<h1>Your next-gen JavaScript toolchain.</h1>
<h2>Focus on code, let Rome take care of the rest!</h2>
</div>
- <div id="main-content" class="content">
+ <main id="main-content" class="content">
{{ content | safe }}
- </div>
+ </main>
</div>
</div>
- <div class="footer">
+ <footer aria-labelledby="footer" class="footer">
+ <h1 id="footer" class="sr-only">Footer</h1>
+
<div class="container">
<div class="row">
<div>
- <h4>Community</h4>
+ <nav aria-labelledby="community-navigation">
+ <h2 id="community-navigation">Community</h2>
<ul>
<li>
<a href="https://github.com/romejs/rome/blob/master/.github/CODE_OF_CONDUCT.md">Code of Conduct</a>
<a href="https://discord.gg/9WxHa5d">Discord</a>
</li>
</ul>
+ </nav>
</div>
<div>
- <h4>Resources</h4>
+ <nav aria-labelledby="resources-navigation">
+ <h2 id="resources-navigation">Resources</h2>
<ul>
<li>
<a href="https://github.com/romejs/rome">GitHub</a>
</li>
</ul>
+ </nav>
</div>
</div>
<div class="logo">
- <svg id="Layer_1" data-name="logo"
+ <svg data-name="logo"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 360">
<defs>
<style>.cls-1{fill:#27272a;}.cls-2{fill:#ffc905;}</style>
</div>
<span class="copyright">Copyright &copy; 2020 Rome.</span>
</div>
- </div>
+ </footer>
<script src="{{ '/static/js/index.js' | url }}"></script>
</body>
</html>
\ No newline at end of file

MODIFY
website/src/index.md
website/src/index.md
---
-title: A JavaScript toolchain | Rome
+title: Rome - A JavaScript toolchain
layout: layouts/base.njk
---

MODIFY
website/src/styles/_footer.scss
website/src/styles/_footer.scss
}
}
- h4 {
+ h2 {
margin: $unit 0;
+ font-size: 1em;
}
.row > div{

MODIFY
website/src/styles/_header.scss
website/src/styles/_header.scss
font-weight: bold;
position: relative;
top: 5.5px;
+ margin: 0;
@include mobile-only() {
top: 3.5px;
}

Semantic html changes for better screen-reader experience