Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix navigation menu going over the headings when navigating to them #188

Open
wants to merge 2 commits into
base: gh-pages
Choose a base branch
from
Open

Fix navigation menu going over the headings when navigating to them #188

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
06a9717
Fix the navigation menu going over the headings when navigating to them
luontola Jan 16, 2020
d56fc91
Fix layout bugs and improve accessibility
luontola Jan 16, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion _layouts/2018.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,9 @@
<body>
<header id=main-header>
<section>
<img src="{{ site.baseurl }}/logos/snowflake-with-codefreeze.svg" alt="Snowflake" class="snowflake" />
<h1 aria-label="{{page.title}}">
<img src="{{ site.baseurl }}/logos/snowflake-with-codefreeze.svg" alt="Codefreeze logo" class="snowflake" />
</h1>
<p>
<time>{{page.when}}</time>
<span class="location">{{page.where}}</span>
Expand Down
18 changes: 8 additions & 10 deletions index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,6 @@ where_link: https://www.kiilopaa.fi/en/
description: Codefreeze is an unconference with very little structure. Actually, it’s not a conference at all. Codefreeze is a time and place for software craftspeople to meet.
---

# {{page.title}}

## {{page.tagline}}

Codefreeze is an unconference with very little structure. Actually, it’s not a conference at all. Codefreeze is a *time* and *place* for software craftspeople to meet. We would like to have likeminded people to gather in one place and have long conversations about our craft over a drink. And to practice our coding skills.
Expand Down Expand Up @@ -237,7 +235,7 @@ For more information about the safaris, including prices, see the brochure here
<img src="{{ site.baseurl }}/images/user-add.jpg" alt="{{ participant.name }}" />
</div>
</a>
<h3>You?</h3>
<div class="participant-name">You?</div>
</li>

<!-- {% assign image_host = site.url | append:site.baseurl %} -->
Expand All @@ -250,23 +248,23 @@ For more information about the safaris, including prices, see the brochure here
<li>
{% if participant.link != null %}<a href="{{ participant.link }}" rel="noopener noreferrer">{% endif %}
<div class="photo">
<img src="{{ image_url }}" alt="{{ participant.name }}" />
<img src="{{ image_url }}" alt="Picture of {{ participant.name }}" />
</div>
{% if participant.link != null %}</a>{% endif %}
<h3>{{ participant.name }}</h3>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please don't change the semantics, the h3 and nav serve a purpose here.

Copy link
Contributor Author

@luontola luontola Jan 17, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I changed them because they use semantic elements in a non-standard way, which would confuse visually impaired people.

When somebody with a screen reader goes to the site, they will hear the Participants section and it containing an unordered list. Going through the list items, first they will hear there is a picture of the participant, but then suddenly inside the list item there starts a new section (whose heading is the participant's name), but the section contains no text, but is followed by navigation menu, which doesn't contain links to navigate the website, but links to the participant's social media.

Headings and lists can both be used to organize the page content. A heading starts a new section and the section can contains a list, but it is unheard of that a list would contain headings/sections.

https://webaim.org/techniques/semanticstructure/ says about headings:

When encountering a lengthy web page, sighted users often scroll the page quickly and look for big, bold text (headings) to get an idea of the structure and content of the page. Screen reader and other assistive technology users also have the ability to navigate web pages by heading structure, assuming true headings are used (as opposed to text that is styled to be big and/or bold).

Likewise, do not use headers to achieve visual results only.

When skimming through the headings with a screen reader, it would have 20-30 participant names in the outline, which slows down the skimming and is confusing because the sections don't have any other content than the heading, so the headings are the content.

Some tools for seeing the outline are https://gsnedders.html5.org/outliner/ and https://wave.webaim.org/ or disabling all CSS and images in the browser. Seems that I didn't remove all elements with inappropriate semantics. There is a weird <h2 id="in-brief">In brief:</h2> in the HTML, as can be seen from the outline, but it's not visible on the page.

Then about the nav element/navigation landmark role.

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Navigation_Role says:

Like the HTML <nav> element, navigation landmarks provide a way to identify groups (e.g. lists) of links that are intended to be used for website or page content navigation. If a page includes more than one navigation landmark, each should have a unique label. If two or more navigational landmark on a page have the same set of links, use the same label for each.

Landmark roles are intended to be used sparingly, to identify larger overall sections of the document. Using too many landmark roles can create "noise" in screen readers, making it difficult to understand the overall layout of the page.

and https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines explictly says:

Use the <nav> element only for site navigation menus. Collections of links such as social media profiles or a blogroll should not be wrapped in the <nav> element.

As final words, at https://internetingishard.com/html-and-css/semantic-html/ was said appropriately:

The point is, don’t use semantic elements just for the sake of using them. Implementing them incorrectly is worse than not using them at all, so if you’re ever in doubt, use a <div> instead.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, right, that makes a lot of sense.

<nav>
{% if participant.link != null %}<a href="{{ participant.link }}" rel="noopener noreferrer">
<div class="participant-name">{{ participant.name }}</div>
<div class="participant-links">
{% if participant.link != null %}<a href="{{ participant.link }}" rel="noopener noreferrer" aria-label="Homepage of {{ participant.name }}">
<i class="fas fa-home"></i>
</a>{% endif %}
{% if participant.twitter != null %}
<a href="https://twitter.com/{{ participant.twitter }}" rel="noopener noreferrer">
<a href="https://twitter.com/{{ participant.twitter }}" rel="noopener noreferrer" aria-label="Twitter profile of {{ participant.name }}">
<i class="fab fa-twitter"></i></a>
{% endif %}
{% if participant.linkedin != null %}
<a href="{{ participant.linkedin }}" rel="noopener noreferrer">
<a href="{{ participant.linkedin }}" rel="noopener noreferrer" aria-label="LinkedIn profile of {{ participant.name }}">
<i class="fab fa-linkedin"></i></a>
{% endif %}
</nav>
</div>
{% if participant.content != null %}<div class="description">{{ participant.content }}</div>{% endif %}
</li>
{% endfor %}
Expand Down
35 changes: 24 additions & 11 deletions styles/2018.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ $aurora-green: #6accad;
$moonlit-snow: #d4f1fc;
$headlamp-white: #effafe;
$fireplace-yellow: #f3f7b8;
$nav-height: 70px;


a {
Expand All @@ -35,10 +36,17 @@ h1, h2, strong {
}

h2 {
margin-top: 2em;
@media (min-width: $desktop-width) {
padding-top: 70px;
}
margin-top: 1.25em;
@media (min-width: $desktop-width) {
padding-top: $nav-height;
margin-top: calc(1.25em - #{$nav-height});
}
}
h1, h3, h4, h5, h6 {
@media (min-width: $desktop-width) {
padding-top: $nav-height;
margin-top: -$nav-height;
}
}

body > header {
Expand Down Expand Up @@ -76,12 +84,16 @@ body > header {
}
}

body > main {
#main-header {
h1 {
padding: 0;
margin: 0;
}
}

main {
padding: 0;
margin: 0;
> h1 {
display: none;
}
hr {
border: 0;
border-bottom: 5px solid $blue;
Expand Down Expand Up @@ -183,7 +195,8 @@ section.tweets {
margin: 2rem 0;
padding: 2rem;
@media (min-width: $desktop-width) {
padding: 4rem;
padding-left: 4rem;
padding-right: 4rem;
}

a {
Expand Down Expand Up @@ -240,7 +253,7 @@ section.tweets {
}
}

h3 {
.participant-name {
font-size: 18px;
font-weight: $thin-weight;
margin: 0 0 0 0.5rem;
Expand All @@ -253,7 +266,7 @@ section.tweets {
display: none;
}

nav a {
.participant-links a {
text-decoration: none;
font-size: 150%;
&+a {
Expand Down