Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Re: Adding CSS style to nav list
@Jacob
a massive thanks … other than having to add the styling to my form it performs as adverized.
(I’ll get it to work via accessing my proper screen.css file after I recover from my 3 day marathon on trying to arm-wrestle automatic dynmaic nav )
I can see that I am a css luddite… I have never heard of this Aria css stuff.
ok. Now I move on to populating the pages with content using TxP tags
I’ll be back
…. texted postive
Offline
Re: Adding CSS style to nav list
jakob wrote #341465:
And if you want it not just to look good but also to inform people using assistive devices which section is current, you could do:
Fwiw, I am not sure that aria-current=page is really appropriate when the link points to a section rather than an individual (article) page.
e.g. Bici “portfolio” link to a section containing multiple articles : portfolio/web-design, portfolio/print-design etc. In that case it is not really appropriate. The relevant MDN article suggest aria-selected as an option.
–^–
Bici, I am sorry if I copy pasted something at the wrong place in my code sample.
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
phiw13 on Codeberg
Offline
Re: Adding CSS style to nav list
phiw13 wrote #341469:
Fwiw, I am not sure that
aria-current=pageis really appropriate when the link points to a section rather than an individual (article) page.e.g. Bici “portfolio” link to a section containing multiple articles :
portfolio/web-design,portfolio/print-designetc. In that case it is not really appropriate. The relevant MDN article suggestaria-selectedas an option.–^–
Bici, I am sorry if I copy pasted something at the wrong place in my code sample.
massive thanks to both of you. i have two working samples… big leap forward for me.
now to solve the other output issues. individual article outputs
…. texted postive
Offline
Re: Adding CSS style to nav list
phiw13 wrote #341469:
Fwiw, I am not sure that
aria-current=pageis really appropriate when the link points to a section rather than an individual (article) page.e.g. Bici “portfolio” link to a section containing multiple articles :
portfolio/web-design,portfolio/print-designetc. In that case it is not really appropriate. The relevant MDN article suggestaria-selectedas an option.
Interesting. This risks becoming a slight deviation from the thread, but you got me thinking:
As a general principle, I understand aria-current="page" as denoting which page within a set of options is currently showing on the screen, so that a user knows where they are in a group of options. That you can use it in a breadcrumb or in pagination suggests, to me at least, that it’s irrelevant whether the page in question is a landing page, (part of) an article list or individual page.
I guess it also depends on whether the rest of the nav menu has sub-items, and what page is showing on the screen. As I see it:
- A nav with just menu sections
- Showing: One section from that menu (irrespective of whether that’s a landing page or a section with no sub-articles). My view:
aria-current="page"is appropriate. - Showing: an individual article is currently showing that belongs to one of the sections in the menu. There is no submenu.
Do you tell the user that section is current, even though the url doesn’t exactly match the landing match? Do you leave it? Do you say it’s selected?
- Showing: One section from that menu (irrespective of whether that’s a landing page or a section with no sub-articles). My view:
- A nav with menu sections and drop-downs showing the articles within a section*
- Showing: A section landing page. My view:
aria-current="page"belongs on the chosen section. - Showing: An individual article that matches a submenu item. My view:
aria-current="page"belongs on the submenu item (usingif_article_id) and not on the section.
But do you additionally mark up the main menu item (section) it belongs to with selected, or with some other means?
- Showing: A section landing page. My view:
I know that for 1.2 and 2.2 I would normally show a “visual indicator” (like class="active") to help a sighted viewer… so what’s the best way of providing the same information for assistive devices? Do you strictly adhere to the wording of aria-current="page" or to the principle of providing locational information/hints to the user (sighted or otherwise). Or do you go with section=selected and article=current?
I’d love to hear your opinion if you think otherwise, as I’ve not researched this in any detail.
*ignoring for the moment main+sub menu constructions, like in txp’s admin area, where the landing page is not choosable but just a button to show the submenu. That button-popup element has its own aria control items.
TXP Builders – finely-crafted code, design and txp
Offline
Re: Adding CSS style to nav list
As a general principle, I understand
aria-current="page"as denoting which page within a set of options is currently showing on the screen, so that a user knows where they are in a group of options. That you can use it in a breadcrumb or in pagination suggests, to me at least, that it’s irrelevant whether the page in question is a landing page, (part of) an article list or individual page.
I actually share that understanding. But note the importance of context, both breadcrumb and pagiantion point to a “page” that either display and “article” or a list of links (that can also be interpretted, conceptually, as an “article”).
I guess it also depends on whether the rest of the nav menu has sub-items, and what page is showing on the screen. As I see it: […]
Here we diverge a little. I agree with your use of aria-current in point 1.1 and 2.1. Both cases deal with single page locations. Where I tend to agree a little less is point 1.2 (an individual article within a section/landings page, the section menu item is highlighted too). I think it adds more confusion than clarity. Similarly, as a sighted user, I find distracting a highlighted menu-item that represents a group (section) while I view an article within that group. Here I see the breadcrumb indicator pattern much more relevant.
*ignoring for the moment main+sub menu constructions, like in txp’s admin area, where the landing page is not choosable but just a button to show the submenu. That button-popup element has its own aria control items.
The main menu in TXP’s admin is more akin to an application menu than a strictly navigation (web page) menu. Note here: the sub menu-items are marked aria-current=page when you are on the relevant panel. For example, you are on the Forms panel, the relevant submenu item “Presentation > Forms” is marked as aria-current=page.
PS – If you look at the left hand navigation on the MDN page I linked above, the relevant item (aria-current) is marked as such. But then you click on the parent menu item (that brings to a list page), the item is now marked with aria-current. That seems OK (it matches your points 2.1 and 2.2).
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
phiw13 on Codeberg
Offline