Re: Presentation of examples in Quick Start Tips

On 19 Aug 2015, at 9:57, Shadi Abou-Zahra wrote:

> Hi Kevin,
>
> My responses inline below, to add to Shawn's. I am using this part of 
> the thread because it is complete (in the subsequent mails you seem to 
> have deleted parts, making it difficult to refer to in a response).
>
>
> On 18.8.2015 22:55, Shawn Henry wrote:
>> Hi all,
>>
>> Please also see my comments and suggestions in GitHub:
>> <https://github.com/w3c/wai-quick-start/issues/89>, and note 
>> especially:
>> "One thing I think we can do to help is to put all of the example --
>> including the heading and captions -- on a background -- like in the
>> Tutorials,
>> e.g.:<http://www.w3.org/WAI/tutorials/images/informative/#images-used-to-label-other-information>
>>
>> I'll say I'm [high-medium] on that."
>
> I agree with this point. Note that this does not mean *copying* the 
> tutorials 1:1 but reusing the conceptual design as much as possible.

The white space in the tutorials make having blocks of examples much 
more tolerable, also they are an integral part of the content (you most 
likely need to take a look at them to make sense of the tutorial). Here 
it is more additional information.

That said, they can use a little more grouping to make sure they are 
easy to understand.

>> Some points on below:
>>
>> * I [strongly] do not think we should have in all caps text other 
>> than
>> "EXAMPLE" (so not Alt 1)
>
> I agree with not having *text* in all-caps but like Alt 1 very much 
> because it highlights the actual examples very clearly. Instead of 
> "INACCESSIBLE INSTRUCTION" maybe you could try "INCORRECT: Uses color 
> only". That is, only emphasizing the type of the caption.
>
> Note that I am really not stuck on caps at all - my comment was to 
> visually highlight the caption (and as subtly as possible).
>
>
>> * I support having as little headings and captions as feasible, 
>> avoiding
>> duplication, and also providing sufficient explanation. Alt 2 seems 
>> way
>> too unnecessarily wordy.
>> * For Alt 3, can't you just add a few words and cover all the bases?
>> ** Inaccessible instruction -> Inaccessible instruction uses color 
>> only
>> ** Accessible instruction uses color and symbol
>> ** Inaccessible question -> Inaccessible question uses color only
>> ** Accessible question uses numbers to refer to objects -> Accessible
>> question uses color and numbers
>
> Some additional points to consider:
>
> * I don't like the overuse of "Example" in Alt 3 - seems superfluous;
> * Avoid "Accessible" and "Inaccessible" valuation as this sounds too 
> absolute, and we all know there is no absolute accessibility;
>
> Here a suggestion for the headings (to be used with Alt 1):
>
> [[
> Example: Highlighting instructions
>
> Incorrect: Relies on color only -- Correct: Uses both color and 
> symbols [to highlight text]
>
> Example: Referring to content [or "Identifying content"?]
>
> Incorrect: Relies on color only -- Correct: Uses both color numbers to 
> refer to objects
> ]]
>

I think grouping here is very important. Those are not four 
(independent) examples but two examples with a before-and-after-like 
comparison.

While correct/incorrect is probably the correct(!sic) way to do it, the 
wording feels a little bit bureaucratic and not very welcoming. I tried 
using “Do” and “Don’t” instead in this mockup and it works 
well (at least for the color example):

![](cid:05B2F34F-6A58-4020-A86F-045A985F346B@w3.org 
"Tips_on_Designing_for_Web_Accessibility_•_Quick_Start_Tips_•_WAI.png")

>> * I started to say for Alt 3, just remove the "EXAMPLE" on each, but
>> then I see that it wouldn't differentiate the caption from the 
>> example.
>> I envision:
>> ** All of the Example on a single background block, probably 
>> including
>> the main Examples heading.
>> ** A separator line under the caption. I think with good spacing &
>> formatting & color, you could make it not look like a link.
>
> As above, I'm not fussed with the actual styling but just that the 
> caption stands out. Also as above, I think Alt 1 is a good start!

I also agree that the caption should be more separated from the actual 
example (that’s why I have added the #ddd hairline in the mockup above 
;-).

>
>
>> Would you be up for trying a mockup of that?
>>
>> RE> "• Might additionally benefit from index for the examples, so
>> ‘Example 1:…’, ‘Example 2:…’, etc. Although if there is 
>> only one
>> example, this may look a little silly"
>> um - in the case where there's only 1 examples, then you'd just use
>> "Example:" right?
>
> Hmmm. I think most tips have one example? I don't think we need the 
> numbering. It also kind of implies some sequence or ordering.

I also don’t think we _need_ numbering.

Eric.

>
> Best,
> Shadi
>
>
>> ~Shawn
>>
>>
>>
>>
>> On 8/18/2015 8:25 AM, Kevin White wrote:
>>> Hi All,
>>>
>>> Shadi raised a concern (correct me if I don’t represent all your
>>> thoughts) that the captions for the examples should stand out more,
>>> and should be associated more with the example itself. He also
>>> proposed the idea of incorporating more information into the header 
>>> to
>>> better introduce the examples.
>>>
>>> I am sending this email prior to Thursday’s meeting so that 
>>> everyone
>>> has an opportunity to consider it.
>>>
>>> The images below are ideas for presenting the captions in the 
>>> examples
>>> in slightly different ways.
>>>
>>> I have not mocked these up in Github yet, as it will start to get
>>> messy in there if I did.
>>>
>>> Current:
>>>
>>>
>>>
>>> Alternative 1:
>>>
>>> This approach incorporates some of the design ideas from the
>>> tutorials. It uses the bar, same color for the caption, and changes 
>>> to
>>> all caps (actually small-caps but only one capital so not worth
>>> quibbling).
>>>
>>> Comments:
>>> • Caption may be lost in the example
>>> • Caption may be considered part of the example
>>> • Heading may be too long and involved
>>> • Heading may end up repeating some information that needs to be 
>>> in
>>> the caption
>>> • Border may grab too much attention
>>>
>>>
>>> Alternative 2:
>>>
>>> This approach simply changes the example heading.
>>>
>>> Comments:
>>> • May not address Shadi’s original concern as caption is still 
>>> simple
>>> and above the example box
>>> • Heading may be too long and involved
>>> • Heading may end up repeating some information that needs to be 
>>> in
>>> the caption
>>>
>>>
>>> Alternative 3:
>>>
>>> Incorporates the caption into the example box with a leading
>>> ‘Example:’ to help distinguish it from the actual example 
>>> content.
>>> Styles the label to help differentiate it from surrounding content.
>>> Avoids styling the caption itself to maintain readability and avoid 
>>> it
>>> looking like a link. Removes border to reduce visual noise.
>>>
>>> Comments:
>>>
>>> • Caption stands out well from example without being separated
>>> • Little in the way of attention grabbing
>>> • Heading does not introduce specific example content.
>>> • Says ‘Example’ quite a bit
>>> • Might additionally benefit from index for the examples, so 
>>> ‘Example
>>> 1:…’, ‘Example 2:…’, etc. Although if there is only one 
>>> example, this
>>> may look a little silly
>>>
>>>
>>> Overall comments:
>>>
>>> • It is worth noting that what works in the tutorial is unlikely 
>>> to
>>> work within the core WAI design template. The tutorial has different
>>> constrains, a slightly different palette, different typeface, etc.
>>> • These are piece meal changes that really should be done as part 
>>> of a
>>> broad set of design guidelines that consider all possible cases for
>>> use. Even when considering just the examples, there are a variety of
>>> types of examples and this approach may not work for all of them, 
>>> for
>>> example,
>>> •
>>> http://w3c.github.io/wai-quick-start/designing.html#ensure-that-interactive-elements-are-easy-to-identify
>>>
>>> •
>>> http://w3c.github.io/wai-quick-start/designing.html#create-designs-for-different-viewport-sizes
>>>
>>> •
>>> http://w3c.github.io/wai-quick-start/developing.html#associate-all-form-elements-with-labels
>>>
>>>
>>> Thanks
>>>
>>> Kevin
>>>
>>
>>
>
> -- 
> Shadi Abou-Zahra - http://www.w3.org/People/shadi/
> Activity Lead, WAI International Program Office
> W3C Web Accessibility Initiative (WAI)




--

Eric Eggert
Web Accessibility Specialist
Web Accessibility Initiative (WAI) at World Wide Web Consortium (W3C)