Project

General

Profile

Bug #7506

Add header to the beginning of pages content

Added by pzajda over 5 years ago. Updated over 2 years ago.

Status:
Confirmed
Priority:
Normal
Assignee:
Category:
Accessibility
Target version:
-
Start date:
07/06/2014
Due date:
% Done:

0%

Feature Branch:
Type of work:
Website
Blueprint:
Starter:
No
Affected tool:

Description

Actually, there are headers in the content itself.
It could make the navigation easier if there was a level 1 header (h1 in HTML) at the beginning of the content of each pages, and why not, at the top of the menu and before the footer.


Related issues

Related to Tails - Feature #7508: Add WAI-ARIA landmarks to make the website more accessible Resolved 07/06/2014

History

#1 Updated by geb over 5 years ago

  • Status changed from New to Confirmed

#2 Updated by sajolida over 5 years ago

I need to understand better what we should do here.

Until now we have the title of the page in a <span class="title"> and then the main subtitles of the page as <h1>.

If I understand correctly, you are proposing to have the title of the page as <h1> and then the main subtitles as h2. So, for example on the Documentation page we would have:

<h1>Documentation</h1>
<h2>General information</h2>
<h2>Get Tails</h2>
<h2>First steps with Tails</h2>

Unfortunately, that would require modifying all the subtitles of our website to become h2 instead of h1. So before doing that work, can you tell us if it would work for you to have instead:

<h1 class="pagetitle">Documentation</h1>
<h1>General information</h1>
<h1>Get Tails</h1>
<h1>First steps with Tails</h1>

Even if this is a bit less correct semantically speaking, this would be much easier to fix. But I need you to tell me if that fix the problem you describe.

#3 Updated by pzajda over 5 years ago

Yes. For me, it seems to be a good compromise to find the main content of the page.
If h1 would be used to locate menu and footer too, finding the footer will stay a little bit long to find because we'll have to pass all others level 1 titles before.
But if quick navigation links and/or landmarks could be implemented too as suggested respectively in #7507 and #7508 this little problem won't be one anymore.

#4 Updated by pzajda about 5 years ago

  • Assignee set to pzajda

#5 Updated by sajolida about 5 years ago

  • Related to Feature #7508: Add WAI-ARIA landmarks to make the website more accessible added

#6 Updated by sajolida about 5 years ago

Same as #7508 here, make sure to modify the ikiwiki template in a
minimal way. And then see if those improvements would be relevant for
ikiwiki in general.

#7 Updated by pzajda about 5 years ago

Things seem to be more complicated than I though, because using a screen reader, we have the title before the search box.
I didn't noticed that before, I remembered the title was conveniently located just above the content.

It is because the span tag is before the search box HTML code.
For a screen reader, if a piece of code is before another, it is because it has to be presented before it, even if the style sheet specifies another location.
I can replace span by H1, and moved the code to be better for screen readers, but it could change the layout, which I can't check myself.

Another point is if I have to create/modify a style class, the same problem is here.

I think about it... But if someone has an idea, I'm interested.

#8 Updated by sajolida about 5 years ago

  • Starter changed from Yes to No

At the moment we have:

  • div.banner
  • div.page
    - div.pageheader
    - div.sidebar
    - div.pagebody
    - div.footer

As you said, we could as well move the sidebar to another place. Then I don't mind making sure that the layout still works.

But then that wouldn't be a minor change to our template anymore. And I think that at that point it would be good if you could provide external references to how should a webpage be structured in terms of code for screen readers. Maybe the W3C have recommendations for accessibility regarding this. If we have such document at hand we might be able to argument in favor of this to ikiwiki upstream.

#9 Updated by pzajda about 5 years ago

sajolida wrote:

At the moment we have:

  • div.banner
  • div.page
  • div.pageheader
  • div.sidebar
  • div.pagebody
  • div.footer

I tried to move the title to the beginning of div.pagebody but it seemed to break the layout.

As you said, we could as well move the sidebar to another place. Then I don't mind making sure that the layout still works.

Yes, it might break the layout as it did with my h1 tag.

But then that wouldn't be a minor change to our template anymore. And I think that at that point it would be good if you could provide external references to how should a webpage be structured in terms of code for screen readers. Maybe the W3C have recommendations for accessibility regarding this. If we have such document at hand we might be able to argument in favor of this to ikiwiki upstream.

Here is the link to W3C WAI (web accessibility initiative): http://www.w3.org/WAI/

They specify how to code and how to design accessible web pages, it is the main resources for web accessibility.

#10 Updated by intrigeri about 5 years ago

If we have such document at hand we might be able to argument in favor of this to ikiwiki upstream.

I can talk in person with the ikiwiki upstream developer until the end of the week.
I think I would need more than pointers to documentation, though: patches against the default ikiwiki templates would work better ;)

#11 Updated by sajolida about 5 years ago

I think that you didn't really get my question here. I'll rephrase it.

We currently have the following HTML structure:

├── div.banner
└── div.page
    ├── div.pageheader ← the title is here somewhere
    ├── div.sidebar
    ├── div.pagebody
    └── div.footer

Do you think that this structure should be change somehow, for example to put the sidebar after the pagebody? And if so, could you provide precise reference to best practices regarding that. I mean, at first, I find it quite relevant to have the sidebar quite at the beginning of the document and not at the end. But maybe accessibility recommendations say something different.

And also, this ticket was originally about having a <h1> element for the title at the beginning of the page. The title is currently below the banner and before the sidebar. So if this is early enough in the document I'd close that ticket without touching the global structure and create a different one if we want to move the sidebar around. But maybe I missed something...

#12 Updated by far over 4 years ago

sajolida wrote:

I need to understand better what we should do here.

Until now we have the title of the page in a <span class="title"> and then the main subtitles of the page as <h1>.

If I understand correctly, you are proposing to have the title of the page as <h1> and then the main subtitles as h2. So, for example on the Documentation page we would have:

<h1>Documentation</h1>
<h2>General information</h2>
<h2>Get Tails</h2>
<h2>First steps with Tails</h2>

Unfortunately, that would require modifying all the subtitles of our website to become h2 instead of h1. So before doing that work, can you tell us if it would work for you to have instead:

<h1 class="pagetitle">Documentation</h1>
<h1>General information</h1>
<h1>Get Tails</h1>
<h1>First steps with Tails</h1>

Even if this is a bit less correct semantically speaking, this would be much easier to fix. But I need you to tell me if that fix the problem you describe.

I am sorry, but having subtitles same as main title of the page is not right.

And if it is about fixing, it wouldn't take that much time.
Since you can replace it mostly automatically.

It just would be way better and correct this way:

H1
- H2
- H2
- H2
- H2

NOT

H1
H1
H1
H1
H1

#13 Updated by u over 4 years ago

W3C guidelines allow using multiple h1 elements as far as i can tell: http://www.w3.org/TR/html5/sections.html#headings-and-sections

#14 Updated by pzajda over 2 years ago

@far technically, I agree with you.
But I also think accessibility sometimes means to make compromize,
especially when there are so much code to review after modification.
That's why I was in favor of having more h1 title than we should have,
even if it is not perfectly right we can easier find the main content if
using a screen reader. In this way, accessibility should discourage less
developers and designers while helping us to navigate easier, in my opinion.

@Sajolida: I think the page title should be moved after the side bar,
just before the page body.
In this way we could directly go to the page content.
Sidebar at the beginning is also OK for accessibility.
From the link I posted before, we have this more precise page which is
more about web design: https://www.w3.org/WAI/intro/wcag.
A good checklist for web accessibility:
https://www.wuhcag.com/wcag-checklist/
I think it is more than a good beginning, in fact this checklist is
really complete and covers a lot of content types.

So the sidebar could keep its place, the issue is really only with the
h1 title.

Also available in: Atom PDF