1. You removed `wagtailuserbar` from your base template. You'll add the `wagtailuserbar` to your `header` template later in the tutorial. This change improves the user experience for keyboard and screen reader users.
2. You Added `<meta name="color-scheme" content="light dark">` to inform the browser about the supported color schemes for your site. This makes your site adapt to both dark and light themes.
3. You used the `<link>` tag to add a favicon to your portfolio site using inline SVG.
4. You wrapped the `{% block content %}` and `{% endblock %}` tags with a `<main>` HTML5 tag. The `<main>` tag is a semantic HTML5 tag used to indicate the main content of a webpage.
Also, you should dynamically get your HomePage's title to use in your site menu instead of hardcoding it in your template. You should include the child pages of the Home page in your site menu if they have their 'Show in menus' option checked. Finally, you want to ensure that you add the `wagtailuserbar` that you removed from your `base` template to your `header` template. This will improve users' experience for keyboard and screen reader users.
{% for menuitem in site_root.get_children.live.in_menu %}
{# Add the child pages of your HomePage that have their `Show in menu` checked #}
<ahref="{% pageurl menuitem %}">{{ menuitem.title }}</a>{% if not forloop.last %} | {% endif %}
{% endfor %}
</p>
</nav>
{# Add wagtailuserbar: #}
{% wagtailuserbar "top-right" %}
</header>
```
Another way you can improve user experience is by adding a skip link for keyboard users. A skip link is a web accessibility feature that enhances the browsing experience for keyboard navigators and screen readers. The skip link will let your users jump directly to the main content.
To add a skip-link, add the following styles to your `mysite/static/css/mysite.css` file:
```css
.skip-link {
position: absolute;
top: -30px;
}
.skip-link:focus-visible {
top: 5px;
}
```
After adding the styles, go to your `mysite/templates/base.html` file and add a unique identifier:
{% for menuitem in site_root.get_children.live.in_menu %}
<ahref="{% pageurl menuitem %}">{{ menuitem.title }}</a>{% if not forloop.last %} | {% endif %}
{% endfor %}
</p>
</nav>
{% wagtailuserbar "top-right" %}
</header>
```
In the preceding template, you added an `<a> (anchor)` element to create a _Skip to content_ link. You set the `href` attribute to `#main`. The internal anchor links to your base template's `main` element.
