Include gray bars/icons for all examples

[James-Green]

Not a showstopper for first version publication. >> Phase 2

Not all examples have the gray bar with check/x icon. It seems on those examples that the bar is "missing" (8 out of 22 are missing) and looks inconsistent.

In order to create proper parallel structure, let's discuss adding the bar to all examples and using the Example: text for a high level (H3 level) description with the icon text being specific, as it's currently more or less used when bars are present.

For example:

Example: Using color to convey meaning
(x) Color only (checkmark) Color and Symbol

Example: Unique styles for different link states
(i) Style links to stand out from text
(i) Mouse hover style
(i) Keyboard focus style
(i) Touch or click style

Example: Labels and input fields associated by proximity

could be modified to have a bar like this:

Example: Labels and input fields associated by proximity
(checkmark) Labels right aligned and adjacent to inputs

More reason to do this: There are code snippets on Developing that have no bar. If we really intend the code snippet icon for code, we should use it consistently on the page.

Here are some screencaps with the bars on the left and the missing bars on the right...

[yatil]

I support this for Phase 2 :-)

[James-Green]

While it's still not a showstopper, I have been reading this on a mobile phone (visually and with Voiceover) and the need for "this is a good example" or "bad example" is even more evident to me on the smaller screen and very important when using a screenreader. I find myself worrying "is this example good or bad?" as arrive at each example...

[sharronrush]

We expect this to be resolved by the redesign, please close if no objection from @James-Green

[yatil]

I think this is now addressed.