Sc3004 #135
Sc3004 #135
Conversation
Coverage Report (Application)
|
Coverage Report (Frontend)
|
|
There's a whole bunch of linting warnings about |
| @@ -48,7 +48,7 @@ onMounted(async () => { | |||
| <template> | |||
| <div> | |||
| <div> | |||
| <h1>Select a bucket</h1> | |||
| <h2>Select a bucket</h2> | |||
There was a problem hiding this comment.
As this is the main page header this should still be an h1 according to the requirements.
Requirement: An H1 title provides information to blind-users using screen-readers of what the main topic of the page is and each page should have exactly one H1 title.
There was a problem hiding this comment.
'BCBox' is already set to H1 in the Header, I am not sure what the intention was but looks like it serve the purpose and verify the statement. I didn't change the structure considering it has been verified and accepted during initial application acceptance or accessibility testing. suggestion?
There was a problem hiding this comment.
i personally dont think the BCBox in the blue header should be h1.
I would probably change the header.vue be like this:
<div id="title-branding" class="justify-content-left" role="banner" > <span>BCBox</span> </div>
and do something in the main.scss like:
.title-branding > span { @extend h1 }
There was a problem hiding this comment.
this would mean changing the main header in each view to h1.
There was a problem hiding this comment.
Hi all. I see the conundrum because the Design System describes it as H1:
https://developer.gov.bc.ca/Design-System/Header-Basic
But if you go to any given gov.bc.ca page, they use an actual proper H1-level heading for unique page topics and the header is blank:
https://www2.gov.bc.ca/gov/content/health/health-drug-coverage/pharmacare-for-bc-residents/pharmacare-information-sheets
gov.bc.ca uses a single H1 as a unique page title (could be interpreted as a single main topic) then H2, H3, H4 as heading levels for topics. I think I should follow up with the Design System folks (even though it's being revamped) because it's inconsistent with standards set by gov.bc.ca and the intention of H1 as described by W3 and in accessibility standards.
With all of the above information, I would suggest that we style the first black-on-white unique heading on each page as H1, such as My Buckets. BCBox header should not be H1 because it's universal, it's redundant to force screen reader accessibility software to describe it as an H1 on each unique page view. I like Tim's idea of changing header.vue and then setting each "unique page title" to H1.
| @@ -48,7 +48,7 @@ onMounted(async () => { | |||
| <template> | |||
| <div> | |||
| <div> | |||
| <h1>Select a bucket</h1> | |||
| <h2>Select a bucket</h2> | |||
There was a problem hiding this comment.
i personally dont think the BCBox in the blue header should be h1.
I would probably change the header.vue be like this:
<div id="title-branding" class="justify-content-left" role="banner" > <span>BCBox</span> </div>
and do something in the main.scss like:
.title-branding > span { @extend h1 }
| My Buckets | ||
| </router-link> | ||
| </li> | ||
| <li class="mr-2"> | ||
| <a | ||
| target="_blank" | ||
| href="https://github.com/bcgov/bcbox/wiki" | ||
| aria-label="BCBox Wiki" |
There was a problem hiding this comment.
Maybe this should be 'BCBox Help' 🤷 but either is fine by me
There was a problem hiding this comment.
I agree, we refer to it as "Help" in the interface so "BCBox Help" gets my vote
| @@ -48,7 +48,7 @@ onMounted(async () => { | |||
| <template> | |||
| <div> | |||
| <div> | |||
| <h1>Select a bucket</h1> | |||
| <h2>Select a bucket</h2> | |||
There was a problem hiding this comment.
this would mean changing the main header in each view to h1.
jatindersingh93
force-pushed
the
sc3004
branch
from
f5c8252 to
a38cc04
Compare
Description
https://apps.nrs.gov.bc.ca/int/jira/browse/SHOWCASE-3004
Types of changes
Bug fix (non-breaking change which fixes an issue)
Checklist
Further comments