Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add a headings hierarchy checker notice in the heading block sidebar #10581

Open
afercia opened this issue Oct 13, 2018 · 10 comments

Comments

Projects
None yet
8 participants
@afercia
Copy link
Contributor

commented Oct 13, 2018

Previously, the headings hierarchy was placed also in the Document sidebar, in the "Table of Contents" panel:

screen shot 2018-10-13 at 17 49 50

This panel has been removed so the only way to be aware of the incorrect headings level is to intentionally check the document outline tool in the top bar.

I'd like to propose to add a notice, even a small one, directly in the Heading block sidebar so users will be immediately informed the hierarchy is not correct while they set the heading level. An option might be placing the notice under the buttons in the sidebar:

screenshot 103

@mtias

This comment has been minimized.

Copy link
Contributor

commented Oct 23, 2018

This is a great idea.

@melchoyce

This comment has been minimized.

Copy link
Contributor

commented Nov 16, 2018

Maybe something like this?

image

@afercia

This comment has been minimized.

Copy link
Contributor Author

commented Nov 18, 2018

👍 A simple notice would be great and also consistent with the core patterns. Re: the wording, not sure if the message should actually suggest a fix telling "Please use..." but I have no strong opinions. For reference, see below the wording used in the "Content structure" popover:

screenshot 2018-11-18 at 15 26 44

@getdave

This comment has been minimized.

Copy link
Contributor

commented Feb 25, 2019

Thinking about this, one thing I've found quite common is to have the ability to visually style one heading as though it were another heading level.

For example, say for some reason we need the 2nd level heading on the page to look like the h1. Currently, the only way to do this is by using the h1 heading level/tag. However, I should be able to select h2 and say "style this like a h1" and it should apply the h1 style but leave the tag as a h2.

I know this sounds a bit odd, but in my experience, it's common that designs have headings that don't always visually follow the ideal hierarchical structure. This might help us avoid incorrect heading hierarchies.

The issue I raised about this has been superseded.

@gziolo

This comment has been minimized.

Copy link
Member

commented Mar 20, 2019

👍 A simple notice would be great and also consistent with the core patterns. Re: the wording, not sure if the message should actually suggest a fix telling "Please use..." but I have no strong opinions. For reference, see below the wording used in the "Content structure" popover:

We should align with the Color Settings panel and the notice that is shown when contrast verification fails:

Screen Shot 2019-03-20 at 10 51 11

When testing Color Settings I noticed that it is never announced for folks using VoiceOver so they might not be aware that there is an issue:
Screen Shot 2019-03-20 at 10 55 08

Should we change it as well?

@afercia

This comment has been minimized.

Copy link
Contributor Author

commented Mar 20, 2019

Yes! Ideally should work like all the other notices: when they appear, they should also be announced with speak().

@afercia afercia changed the title Consider to add a headings hierarchy checker notice in the heading block sidebar Add a headings hierarchy checker notice in the heading block sidebar Mar 22, 2019

@mapk

This comment has been minimized.

Copy link
Contributor

commented Mar 22, 2019

I really like @melchoyce's suggestion above. Let's get this developed @youknowriad.

@mapk mapk added Needs Dev and removed Needs Design labels Mar 22, 2019

@joedolson

This comment has been minimized.

Copy link

commented Mar 22, 2019

I like the suggestion from @melchoyce. The wording should probably be adjusted - in the example context, either an h2 or an h3 would be valid. I think that there are two paths we can take with the error message: either make it more generic, or more specific.

With any given heading, it can always be followed by a heading that's of the same or any higher level (excepting h1, as that should only be used once on any page) or by the heading immediate lower.

"higher" and "lower" levels of headings is ambiguous, however, which makes referencing these generically somewhat difficult.

Making it specific will on rare occasion mean listing a large number of heading levels - but only in relatively rare cases, where somebody is actually using h4. (There are no invalid heading levels that can follow an h5 or an h6)

@gziolo

This comment has been minimized.

Copy link
Member

commented Mar 27, 2019

@AmartyaU started working on it, the first PR opened for the missing voice announcement: #14649.

@gziolo gziolo removed the Needs Dev label Mar 27, 2019

@Jackie6 Jackie6 referenced a pull request that will close this issue Apr 9, 2019

Open

Add heading hierarchy checker notice #14889

7 of 7 tasks complete

@gziolo gziolo removed the Priority High label Apr 23, 2019

@karmatosed

This comment has been minimized.

Copy link
Member

commented May 7, 2019

I am removing the 'User Experience (UX)' label as part of a label cleanup. It's not being used anymore consistently so let's try and keep to 'needs design' and 'needs design feedback'. If we find a need for another label we can consider it but having those 2 should cover this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.