bryanjonker-illinois
commented
3 years ago Bryan,
Yes it would. In that case, the top-level item would be an h3, and the offscreen h2 should remain. That may be simplest approach since we are so close to go-live for the templates. Unless it is very simple to do, the best approach would be to make the “In this section” heading always visible (as a button on mobile) and remove the top-level item (e.g. Programs of Study), as that will be reflected in breadcrumbs and it should be clear that the left-nav pertains to the section clicked on in the main site navigation.
Keith
From: "Jonker, Bryan J" jonker@illinois.edu Date: Monday, May 24, 2021 at 10:17 AM
Does this change if the intended behavior is to have an In This Section… button show up on mobile view?
From: Hays, Keith A khays@illinois.edu Sent: Monday, May 24, 2021 10:15 AM
Bryan,
Great question! I hadn’t realized when we were discussing this at the WIGG meetings that there would be no other items at that level. Programs of Study should be an H2 and not part of the list structure, as it is functioning as a heading. That means that the offscreen h2 of “In this section” should be removed. The navigation region bust be labeled, and it could either be labelled as “In this section” via aria-label or as the visible heading, pointed to by aria-labelledby. There is a very minor issue introduced here in that the name of the navigation will change, but with the visible heading for the navigation changing with each page, this restores parity between what sighted users and users who are blind will encounter.
Keith
From: "Jonker, Bryan J" jonker@illinois.edu Date: Monday, May 24, 2021 at 10:02 AM
I have a coding question for a sidebar navigation like https://cdn.brand.illinois.edu/toolkit/2.0/examples/components/section-nav/index.html
The title is “In this section”, marked with an <h2>.
Then we start with “Programs of Study”, which is in an anchor tag inside a <ul> / <li>.
The we have a sublist under that (Undergraduate Degrees, Graduate Degrees, Certificates), which is an embedded <ul> / <li>.
However, there should never be a parallel item to “Programs of Study”, so the first <ul> is only going to have one <li>. The intent is the “Programs of Study” is suppose to be the main anchor of the entire list (like this is the parent page of the group). If you do have multiple <li> in the first <ul>, then it looks horrible and is difficult to navigate.
So, my question is should the first list be there? Or should “Programs of Study” be an <h3> or <div> tag?
The top item in the section-nav is listed as
<ul><li><a href=.....>Programs</a><ul>.....</ul></li></ul>However, this is semantically the title, not the beginnings of a list. Recommend changing it to:
<div><a href=.....>Programs</a></div><ul>.....</ul>