Template two - no semantic marking of the navigation in the header

[WM-Loose]

In template two, there is actually no semantic marking of the navigation in the header. It is correct that the menu in the header must be marked as <NAV in order to give screen reader users an indication of the type of content.

Instead, there are two <nav in the footer, but they have no ID and no labels. And other errors regarding accessibility.

[Chacapamac]

Semantic is an important part of web building.

[sonvnn]

@WM-Loose Thank you Dirk. It's not just on Two. It happens on all Astroid's templates because it's core Astroid since Astroid 2. I forgot about it. Thank you for remind me about this issue. I will take a look and improve it in 3.1.2

[sonvnn]

@WM-Loose @Chacapamac I fixed this issue at https://github.com/templaza/astroid-framework/commit/f00933754c20801c8dd07bfd4b78e72b94c63756 Please help me download v3-branch and retest again.

Thanks & Best regards, Sonny

[Vanbrugg]

@sonvnn I tested it today and found two problems:

1. relates to the header and footer: All nav elements are missing an ID. This is important because sometimes you have more than one.

2. refers specifically to the footer: There are two ways to configure these navigation areas - NAVIGATION and LIST. If I choose NAVIGATION, I would assume that an UL element with LI elements as navigation points is created in the footer (as in the header navigation), but instead it is a simple series of A elements. The LIST option also creates A elements, but displays them as a "list". It would be more obvious if the NAVIGATION option generated the same HTML code in the footer as is generated in the header navigation (i.e. UL -> LI). Therefore, you could rename the other option to something like "link series" or something similar to make clear that it is not a navigation list.

Cheers Vanbrugg (This is my first post at Github ;) )

[sonvnn]

1. @Vanbrugg You can use Custom ID to for first issue
2. Navigation Widget is a separate nav. It does not related to Header. So you should restyle for it. I am sorry I can not help you in this case.

Best Regards, Sonny

[Vanbrugg]

Hi @sonvnn

1. You can use Custom ID to for first issue

erm, no, not quite. If I use this option, it will define an ID for the enclosing DIV element but not the NAV element. Furthermore we need the attribut "aria-label" for every NAV element. More details below.

2. Navigation Widget is a separate nav. It does not related to Header.

Yeah, I know. But the technical problems are the same as in the header nav.

Let me summarize the need for every (!) NAV element:

• id [value]
• class [value]
• aria-label [value]
• role [value]

[value] means an editable field to configure.

So you should restyle for it.

I can restyle it via CSS, yes. But the HTML code is semantically wrong. It has to be a list (e.g. UL) as "navigation" list. This I can not change as an Astroid user.

Let me give you an example. The simplified HTML code of a navigation (list) should look like this:

<nav id="xyz1" class="abc" aria-label="navigation" role="navigation">
<ul id="xyz2" role="list">
<li role="listitem">
<a href="linktomysite.html" id="item-12345" aria-label="linkname" class="nav-link">Linkname</a>
</li>
</ul>
</nav>

That applies for every (!) navigation on the site. No matter if in the header or the footer section. The attribute values for "aria-label", "role" should also be editable.

[sonvnn]

@Vanbrugg Thank you for your suggestion for Navigation Widget, I built this widget follow Bootstrap structure https://getbootstrap.com/docs/5.3/components/navs-tabs/. Your suggestion is very interesting but I am busy with a new company project at the moment. I will look back and consider about it in the near future. At the moment you can try to override Navigation Widget please follow this tutorial https://docs.astroidframe.work/developers/build-or-override-a-widget

Best Regards, Sonny

[WM-Loose]

@sonvnn Hi Sonny, I have no idea what the project planning looks like at the moment, but the topic is really important and is no longer a wish but a must. Perhaps you can tell us approximately when this can be realized? That would be great.

[sonvnn]

@WM-Loose I improved this issue at 3.1.2. You can download 3.1.2-rc1 for testing it. Please follow our discussion to get latest information. You can find it in discussions.

[WM-Loose]

That's great news. Thank you Sonny.

[sonvnn]

Hi @sonvnn > 1. You can use Custom ID to for first issue erm, no, not quite. If I use this option, it will define an ID for the enclosing DIV element but not the NAV element. Furthermore we need the attribut "aria-label" for every NAV element. More details below. > 2. Navigation Widget is a separate nav. It does not related to Header. Yeah, I know. But the technical problems are the same as in the header nav. Let me summarize the need for every (!) NAV element: * id [value] * class [value] * aria-label [value] * role [value] [value] means an editable field to configure. > So you should restyle for it. I can restyle it via CSS, yes. But the HTML code is semantically wrong. It has to be a list (e.g. UL) as "navigation" list. This I can not change as an Astroid user. Let me give you an example. The simplified HTML code of a navigation (list) should look like this: ```
• Linkname
``` That applies for every (!) navigation on the site. No matter if in the header or the footer section. The attribute values for "aria-label", "role" should also be editable.

I rechecked the document.

If you use <ul> so you don't need role="list". Let's check it here https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/list_role

If you use <nav> so you don't need role="navigation". Let's check it here https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/navigation_role

Role is useful for non-identify tag like <div> only

[Vanbrugg]

@sonvnn

Okay, I rechecked this too. :) And ... you're right - partially. In fact, it is unnecessary to use "role=list" if I use an UL element as navigation list. But there's the problem: All navigations in the footer doesn't use an UL as navigation. This could/should be changed, right? Currently Astroid only uses A elements inside of the NAV elements in the footer (but without role attributes!). I think this is wrong.

The other thing: not a single NAV element owns an ID (that could ideally be defined in the layout manager).

That's why I think the issue is not really completed. Could you reconsider, please? ;)

[sonvnn]

@sonvnn

Okay, I rechecked this too. :) And ... you're right - partially. In fact, it is unnecessary to use "role=list" if I use an UL element as navigation list. But there's the problem: All navigations in the footer doesn't use an UL as navigation. This could/should be changed, right? Currently Astroid only uses A elements inside of the NAV elements in the footer (but without role attributes!). I think this is wrong.

The other thing: not a single NAV element owns an ID (that could ideally be defined in the layout manager).

That's why I think the issue is not really completed. Could you reconsider, please? ;)

I will add this enhancement in the next version. Please wait for update.

[Vanbrugg]

@sonvnn I will add this enhancement in the next version. Please wait for update.

Maybe it's possible in 3.1.4?

[sonvnn]

@Vanbrugg Yes, it's here https://github.com/templaza/astroid-framework/commit/9ff2e7c5e39eacdab65ce34b8430fd3b51e7552e

You can download v3-branch for testing.

[Vanbrugg]

@sonvnn

You can download v3-branch for testing.

Great news! I tested it and it works. Thanks! So, there are only three more things to mention:

1. In the NAV element (footer) there's an empty CLASS element. I think this is not necessary.
2. Currently the change of the "navigation list style" seems to have no effect. Maybe it would be a possibility to give the user two types of frontend formatting (per css): One as simple row, one of a column list. I do not speak about the html code. I only speak about the visual display of the navigation items.
3. Could you give the header navigation an ID, please? I speak about the NAV element. You could use the ID from Joomlas core system. (menu tag id, I guess).