Important note: This Wiki page is edited by participants of the EOWG. It does not necessarily represent consensus and it may have incorrect information or information that is not supported by other Working Group participants, WAI, or W3C. It may also have some very useful information.


Easy Checks - Illustrations

From Education & Outreach
Jump to: navigation, search

Nav: EOWG wiki main page > Easy Checks wiki page


Example illustrations

Note:

  • To see all illustrations, make sure to "expand all sections" because some of the illustrations are in collapsed sections. (however, keep in mind that most of the images will be collapsed by default)
  • Make sure to evaluate the images in context, that is, read the text around it and imagine you are a user.

Questions: How is the current use of images for illustrations throughout the draft? Too much? Not enough? Mostly helpful? Too cluttering? Feel free to comment in general, and on specific images.

  • comment {name}
  • From 24 May teleconference:
    • Generally the conceptual images are useful for contrast and zoom; simply the page title images {done 24 May}.
    • Mixed perspectives on the images showing menu items and such. For some people they are just clutter, the word instructions are clear enough. For other people, the images really help.
    • For now:
      • Include images showing menu items and such judiciously — if in doubt, do not include an image.
      • Crop or gray out all unnecessary clutter in images. (for example, page-title-image has the content of the web page grayed out.)

Strategy:

Strategy

Adopted 5 August 2013; updated 24 January 2014; 29 January 2014

Phase I

  1. Visually separate illustrations from the text flow by using a border and 10 pixel padding around them.
  2. Do not float illustrations that are intrinsic to the text.
  3. Use captions as a general rule.
  4. Gray out irrelevant information in the images, and avoid using arrows if possible.
  5. The maximum figure width is 676 pixels. Use CSS of max-width 100% and height auto so images shrink in narrower windows.
  6. Illustrations and their captions will be left-aligned -- not centered or right/left justified.
  7. Use PNG for the format.
  8. Specifically state the goal for each illustration in the wiki. This will help select the best illustration.
  9. The main text, not the captions, is used to convey the important information.
  10. Alt text should be null, since the illustrations are explained in the text preceding them and their captions.
  11. In preparation for HTML5, embed illustrations in a div element with a class of "figure" and captions in a div with a class of "figcaption".
  12. Do not add extra borders to the images. Borders are added using CSS.

Phase II

  1. Convert to HTML5 so we can use <figure> and <figcaption> elements for illustrations.
  2. Add a widget to toggle illustrations on and off.

Draft Illustration Schedule

Goal: Illustrations complete two weeks before CSUN, i.e. by March 1, 2014

  • Jan. 17 to Jan. 23: code review by Denis, Eric, Ian, Paul, Wayne
  • Jan. 17 to Jan. 23: browser testing by as many members as possible
  • Jan. 17 to Jan. 23: AB compile list of illustrations and goals in wiki
  • Jan. 24 teleconference: Wrap up code review and browser testing
  • Jan. 24 teleconference: Review list of illustrations and assign volunteers to work on individual illustrations
    (Would be good to have clear parameters for size, captions, alt -- maybe separate these out in the strategies section? {Shawn})
  • Jan. 25 to Feb. 18 Volunteers create images and captions for illustrations
  • Jan. 31 to Feb. 26 Volunteers edit images and captions as needed
  • Jan. 31 teleconference: Review illustrations
  • Feb. 7 teleconference: Review illustrations
  • Feb. 14 teleconference: Review illustrations
  • Feb 19: All illustrations due in [to Anna Belle? Shawn?]
  • Feb. 21 teleconference: Review illustrations
  • Feb. 28 teleconference: Finalize illustrations in time for usability tests
  • March 6: Shawn goes live with all illustrations
  • March 7 teleconference: Review illustrations in context on live site

For Jan. 24 teleconference

  • Finalize draft schedule
  • Discuss OS/browser testing results
    • Anything still broken?
    • Any major OS/browsers left to test?
  • Code review
  • Question: OK to update Strategies? In particular, for #5, reduce max width?
  • Question: are images OK without embedded border?
    • If they are intended to look like they are a screen grab of a browser window, then might want a border to look like a browser window border. {Shawn}
  • Review list of illustrations and assign volunteers to work on individual illustrations

Illustration Testing

To test: Example illustrations

What to look for in version 11 testing:

  1. Is "padding" about 10px total right, top, left between figure border and image(s), plus between images?
  2. Are captions left aligned with leftmost image?
  3. Is there enough (not too much space above and below captions?
  4. When you zoom in does anything break?
  5. On desktop browsers, shrink the width of of the browser to below standard "breakpoints" (of around 960px, 768px, 480px). Look for the following:
    • Do multiple images stack well?
    • Does the "padding" between border and images continue to be about 10px?
    • Do captions continue to work well?
  6. Keep your eye open for anything that looks "off" to you

Test Results for Version 11

EOWG: Please indicate when you've tested specific configurations and highlight potential issues, for example:
* Windows IE 6
** tested on Windows Vista - all tests look good {name}
* Mac Chrome
** tested on OS X - problem: the image overlaps the border {name}

Target browsers for illustrations:

  • Windows IE 7, 8, 9, 10, 11
    • IE 11, laptop responsive layouts also tested - fine but see "Observation" below {Vicki, Jan. 23}
  • Windows Chrome
    • Version 24.0.1312.56, desktop, responsive layouts also tested - fine but see "Observation" below for association of caption with row of images{Vicki, Jan. 23}
  • Windows Firefox
    • version 20.01.1, responsive layouts also tested - fine but see "Observation" below {Vicki, Jan. 23}
    • Version 26 - laptop, responsive layouts also tested - fine but see "Observation" below {Vicki, Jan. 23}
  • Windows Opera
    • Version 18 - Tested at various window sizes and transformed wonderfully - no problems observed. My guess is that this would still look fine even on a mobile device. {Howard, Jan. 23}
  • Windows Amaya
  • Mac Chrome
    • tested on OS X - all tests look good {Anna Belle 17-Jan}
  • Mac Firefox
    • all looking good in FF {Eric, Jan. 24}
    • all looking good in FF.next {Eric, Jan. 24}
  • Mac Safari
    • all looking good in Safari 7 {Eric, Jan. 24}
  • Mac Opera
    • all looking good in Opera 18 {Eric, Jan. 24}
  • iOS Safari
    • iPhone: everything’s OK {Eric, Jan. 24}
    • iPad: everything’s OK {Eric, Jan. 24}
    • Note: we might want to add the viewport metatag (<meta name="viewport" content="width=500, initial-scale=1">) to improve font sizes especially on smaller devices. {Eric, Jan. 24}
  • Android, e.g. Samsung Galaxy
    • Version 4.1.2 All fine {Emmanuelle, Jan. 24}
  • Google Nexus

Tested on Chrome ver. 32 - no problems observed.{Howard, Jan. 23}

Observation:

Example of 3 images: The caption needs to be associated with the images clearly, e.g. "Example 1", "Example 2", "Example 3" which will indicate which is the “first”, “second” and “third” image, since in re-sizing to 768x1024, 800x600, the three-image layout realigns to two images in the browser width, the third image flowing to the next line. Thus, it is momentarily confusing as to which is the "second" or "third" image referred to in the caption. In brief, the caption does not reflect the visual order once re-sized. {Vicki, Jan. 23}.

Recommendations for Illustration Code

Version 11

Differences from Version 9:

  • Added 2% right margin to #main to prevent horizontal scroll bar when shrink page width.
  • Reduced width of .figure from 712 to 676px so works on iPhone in portrait mode.
    Question: any objections to this? If everyone is okay with this we need to update #5 in the Strategies. (Note: shrunk images in first and third figures, so they are getting ever fuzzier. Will clean images up when agree on code.)
  • Changed .figure img margin from 5px to 0 and.figure padding from 5px to 10px, so when shrink figure width, right padding for .figure is not lost.
  • Changed .figcaption left margin from 6px to 1px (to accommodate padding increase of of .figure img).
  • Reintroducing .multimg class to accommodate spacing between multiple images horizontally and, when shrunk, vertically.
  • Changed images in "Multiple different size images" -- (a) removed embedded border so uses just CSS border; (b) reduced width from 302px to 217/216px so fit in 676px box.
    Question: are images OK without embedded border?
  • Note: I’m not a fan of inline-styles (like the widths) as they are hard to maintain but I don’t have another idea how to make it work like expected – unfortunately display:table and float widen the .figure to text length. {Eric, Jan. 24}

Version 11 markup

CSS

#main {
	margin: 0 2% 0 27%;
}
.figure {
	max-width: 100%; /* so image scales across various widths */
	margin: 10px 0; 
	padding: 10px; 
	border: 1px solid #aaa;
	background: #FFFDFA; /* color that shows in padding around image -- half way between #fff and #fffaf5 */
	line-height: 115%;
}
.figure img {
	max-width: 100%; /* this may be duplicative of above max-width; however this is where height: auto is needed */
	height:auto; /* to prevent height distortion when scaling browser width down */
	margin: 0 0 10px 0;
	border: 1px solid #888;
	vertical-align: top;
}
.figure.multimg img {
	margin: 0 10px 10px 0;
}
.figure.multimg img:last-of-type {
	margin-right: 0px;
}
.figure.multimg img.last-of-type {
	margin-right: 0px;
} /* to accomodate IE7 & IE8. Cannot combine with , or breaks in IE8 (though not IE7) */
.figcaption {
	margin: 0 0 5px 1px; /* 1px left margin is to offset "img {margin: 5px;}" + 1px for border used for image*/
	font-size: 85%;
	color: #444;
}

HTML

<div class="figure" style="width:676px;">
<img src="page-title.png" alt="Screen shot showing title bar and tabs in FireFox browser. Tabs have: 'Easy Checks - A First...', Web Accessibility Init...', 'Getting Started with...', 'Involving Users in W...'. (FireFox 21.0, Windows)" width="674" height="100" />
<div class="figcaption">Figure: Browser with "Easy Checks - A First Review of Web Accessibility" in the title bar, and the partial titles of 4 pages in the tabs. [@@ image quality going downhill -- probably need to redo at some point]</div>
</div><!--.figure-->      

<!--To determine inline width for figure, add width of each image, plus 2px for each image border, plus 10px for each image except the last-->
<div class="figure multimg" style="width:616px;">
<img src="contrast-b-on-w.png" width="301" height="127" alt="black text on white background" /><img class="last-of-type" src="contrast-yellow.png" width="301" height="127" alt="yellow text on black background" />
<div class="figcaption">Figure: High contrast examples.</div>
</div><!--.figure-->

<div class="figure multimg" style="width:676px;">
<img src="resize-normal.png" alt=" " width="217" height="116"><img src="resize-wrap.png" width="216" height="222" alt=" "><img class="last-of-type" src="resize-scroll.png" width="216" height="118" alt=" ">
<div class="figcaption">Figure: The first image shows normal-size text. In the second image, the larger text "wraps" to fit the width. In the third image, some of the larger text is not visible without scrolling horizontally. [@@ make better images]</div>
</div><!--.figure-->

Version 10

Version 10 was never posted. It used meta viewport in an attempt to improve rendering on smart phones, but did not work well enough. On 10 January 2013 we decided to postpone adding responsive until we do redesign and convert to HTML5.

Version 9

Differences from previous version

  • Fixed width so has padding on right side of single image
  • Added examples of different size images
  • Added vertical-align: top to accommodate different size images

Version 9 markup

CSS

.figure {
	max-width: 100%; /* so image scales across various widths */
	margin: 10px 0; 
	padding: 5px; /*using 5px padding here and 5px maring in .figure image creates a 10px space both vertically and horizontally between multiple impages */
	border: 1px solid #aaa;
	background: #FFFDFA; /* color that shows in padding around image -- half way between #fff and #fffaf5 */
	line-height: 115%;
}
.figure img {
	max-width: 100%; /* this may be duplicative of above max-width; however this is where height: auto is needed */
	height:auto; /* to prevent height distortion when scaling browser width down */
	margin: 5px;
	border: 1px solid #888;
	vertical-align: top;
}
.figcaption {
	margin: 5px 0 5px 6px; /* 6px left margin is to offset "img {margin: 5px;}" + 1px for border used for image*/
	font-size: 85%;
	color: #444;
}

HTML

<div class="figure" style="width:712px;">
<img src="page-title.png" alt="Screen shot showing title bar and tabs in FireFox browser. Tabs have: 'Easy Checks - A First...', Web Accessibility Init...', 'Getting Started with...', 'Involving Users in W...'. (FireFox 21.0, Windows)" width="700" height="104" />
<div class="figcaption">Figure: Browser with "Easy Checks - A First Review of Web Accessibility" in the title bar, and the partial titles of 4 pages in the tabs.</div>
</div><!--.figure-->      

<div class="figure" style="width:626px;">
<img src="contrast-b-on-w.png" width="301" height="127" alt="black text on white background" /><img src="contrast-yellow.png" width="301" height="127" alt="yellow text on black background" />
<div class="figcaption">Figure: High contrast examples.</div>
</div><!--.figure-->

<div class="figure" style="width:735px;"> <img src="/WAI/images/easychecks/resize-normal.png" width="233" height="129" alt=" "><img src="/WAI/images/easychecks/resize-wrap.png" width="233" height="237" alt=" "><img src="/WAI/images/easychecks/resize-scroll.png" width="233" height="129" alt=" ">
<div class="figcaption">Figure: The first image shows normal-size text. In the second image, the larger text "wraps" to fit the width. In the third image, some of the larger text is not visible without scrolling horizontally. <em>[@@ make better images]</em></div>
</div><!--.figure-->

Illustration Goals

Plain text view:

  • Visually illustrate the concept of linearize
  • Simple example of how a layout can linearize in different order
  • Show what they can expect when they follow the steps
  • Show how people with low vision might change the display, to help show it's not just screen readers

Illustration inventory

Key:

  • Section
    • C = collapsed
    • E = Expanded
  • Status / EOWG sign off
    • Final
    • Draft = under review; not yet finalized
    • Holding spot = text reading "[image...] included on live site, but no image
    • Add? = consider drafting

table

  Section Goal Status Recommend
1 Page title (C) Shows a page title in a title bar and some tabs done! 1. Use new code

2. Tweak size and sharpness
3. Add caption

Figure: Firefox browser with full title shown in the title bar and partial titles in the tabs
2 Page title (E "To check page title with different browsers") First bullet includes: "[image? or not needed because earlier in the section?]"
done! Delete
3 Page title (E "To check page title with different browsers") Show hovering over a browser tab to see the full page title done! 1. Use new code
2. Tweak size and sharpness
4 Image text alternatives (C) Para 2: small image of search button done!  
5 Image text alternatives (E "To check alt text with IE WAT") Show IE WAT toolbar (1) selecting "Images" > "Show Images"; (2) alt text display. Note: does not show dialog box with number of images without alt. done! 1. Use new code

2. Tweak size and sharpness
3. Add caption

Figure: Showing IE WAT toolbar with 'Images' drop down and 'Show Images' highlighted (NB. suggest the current italicised text becomes a bullet item)
6 Image text alternatives (E "To check alt text with FF toolbar") Bullet 2: "[image] Red boxes appear around any images missing alt" OK for now

minor for ABL: this image is width="676" and I think we're making them max 674

7 Image text alternatives (E "To check alt text with FF toolbar") Show FF toolbar (1) selecting "Images" > "Display Alt Attributes"; (2) alt text display. done! 1. Use new code

2. Tweak size and sharpness
3. Add caption

Figure: Showing FF toolbar with 'Images' drop down and 'Display Alt Attributes' highlighted
8 Image text alternatives (E "To check alt text with any browser") Bullet 4: "Look for the red icon [image]" done! Draft
9 Image text alternatives (E "To check alt text with any browser") Bullet 5 (just above large WAVE image): "Look for the green alt icon [image]" done! Draft
10 Image text alternatives (E "To check alt text with any browser") Show (1) WAVE web page; (2) Green alt icon [image] and alt text display. OK for now

status 5 March: OK for now.
later: maybe redo yellow circle so it does not include the null alt - just the two at the bottom with alt text.

11 Headings (C) Under "Headings checks: "a view of the page with the heading markup shown, for example: [image]" done!


12 Headings (E "To check headings with FF toolbar") Bullet 2: "[image] A new page opens with the outline" done!

 

13 Headings (E "To check headings with IE WAT") Heading markup in the page, Bullet 2: "Headings will be surrounded with <h1>, <h2>, etc. icons in purple text on a light background. [image]" not doing

not needed since we have the two examples always shown above

14 Headings (E "To check headings in any browser") Heading markup in the page, Bullet 4: "Anything that is a functional heading should have a heading icon ([image], [image], ...) before it." done! Priority 2
15 Contrast Ratio (C) Example of insufficient contrast between the text and background (using light gray text on a light background. done! (1) Delete added border in png

(2) Use new code
(3) Add caption

Figure: Gray text on light background. screen capture illustrating low contrast
16 Contrast Ratio (C) Group of two images showing high contrast using (1) black text on white background and (2) yellow text on black background done! (1) Delete added border in png

(2) Use new code
(3) Add caption

Figure: Dark text on light background, and yellow text on black background. two screen captures illustrating examples of very high contrast
17 Contrast Ratio (C) Group of two images showing low luminance using (1) taupe text on black background and (2) black text on taupe background done! (1) Delete added border in png

(2) Use new code
(3) Add caption

Figure: Brown text on dark background, and dark text on medium brown background.two screen captures illustrating examples of high contrast but low luminence
18 Contrast Ratio (E "To check contrast with IE WAT") Show IE WAT toolbar selecting Juicy Studio Luminosity Analyser on hold for now ABL: why? Delete.
SLH: To help people easily find where the icon is on the toolbar. But I don't feel strongly about this. There are many such possibilities for images throughout -- including the #5 & #7 in this table. We could check during UT if we think there should be more or less...(/me adds to UT notes) I'd like to be consistent in whether or not we provide such images, or at least have a method to our madness. ;-)
19 Resize text (C) Group of two screen captures (one before, one after zooming) to show an example problem (in this case the heading and sidebar overlaping the main text and sidebar text being cut off). done!

1. Use new code
2. Tweak size and sharpness

20 Resize text (C) Group of three images showing (1) normal-size text, (2) larger text re-wrapping to fit the width, (3) larger text creating horizontal scrolling. [@@ make better images] OK for now

1. Delete borders in png

2. Use new code

3. Tweak size and sharpness

NOTE:
1. borders: I would like these to look like screen captures from a web browser window, thus they would have some kind of border. {slh}
2. let's rethink these -- should the middle image be wider instead of taller? /me too tired to think that through right now :( {slh}
3. These were part of the test images we used when coming up with the principles. For now, let's stick with them. We can revisit later. {abl}

Status 15 March: need to check how these and others are layed out in different browsers (stacking in some of shawn's :/)
later: consider making 3 separate figures that are side-by-side when there's room. clean up.

21 Keyboard access and visual focus Note: No images [listed below] (oops, there are actually a lot but they are marked with "[add image]" instead of "[image]" so they must have missed your search. sorry!)
22 Forms, Labels, and Errors (C) Small image of email address form field done!  
23 Forms, Labels, and Errors (C Labels sections) Small image of email address form field (same as above) done!  
24 Forms, Labels, and Errors (C Labels sections) Small image of radio buttons done!  
25 Multimedia (video, audio) alternatives (C) Captions section, para. 2: add small image of CC button? done!
26 Multimedia (video, audio) alternatives (C) Captions section, para. 2: "[image] with only auto captions listed" Holding place

Draft

status 5 March: shawn will do

27 Multimedia (video, audio) alternatives (C) Captions section, para. 3: "e.g.: [image] with one language NOT English! listed" Holding place

Draft

status 5 March: shawn will do

28 Basic Structure Check (E "Images illustrating linearized and changed display") Group of five images showing (1) a 3 column display; (2) same text linearized into 1 column; (3) same text linearized into 1 column in a different order from image #2; (4) same text linearized into 1 column with styles off; (5) same text with CSS changed by person who is good at CSS and has low vision. done for now

AB:" Love this series. Consider re-doing as five stacked figures. Wonder if helpful enough if then pull into collapsed view?

SLH:old table layout. draft stacked -- although, I'd prefer if B & C were side-by-side when there's room. :) I think they are very helpful, but I'm hesitant to have them show all the time just because they take up so much space... let's see if anyone else in EO has opinions.

AB: Thanks for doing stacked version. Really like it! Like the idea of getting other opinions.

status: done for now

later: CSS for side-by-side

29 Basic Structure Check (E "To check basic structure with FF..." Bullet 4: Add image of end result? Add later?

Add as priority 2?

status/later: consider when time

30 Keyboard access and visual focus (C) Add 2 illustrations of focus indication - one border, one highlight - maybe one on a link and one on a field label need new image

First one with dotted border: I think it would look better of the first one was smaller -- the text in it is bigger than the main body text and way bigger than the other illustration. {slh}

Second one with red field: Unfortunately that BAD example has the option button labels on the worng side. :( I'm not sure why. We should ask them. Also, I do not like that there are only those two options (think about it)!!! I started to comment to them, but didn't finish it. :(
In any case, we probably should edit those option buttons out of this image, or use another form. :-( {slh}

status 5 March: Anna Belle to re-consider point above.

First one: good idea for later iteration, not now {abl 10 March}

Second: I'm not understanding. Looks fine to me and thought we agreed on phone 4 March this was done {abl 10 March}

SLH: I think this is a high priority to fix.

later: CSS for side-by-side

31 Forms: Labels checks (E To check labels with IE WAT In the toolbar, select "Structure", then "FieldSet / Labels". A dialog box appears with the number of errors and elements. Holding space

status: Vicki started, but it needs tweaking

should we have it show no errors or errors? differnt types of errors?

32 Forms: Labels checks (E To check labels with IE WAT Add two images for the form elements are outlined, the markup is shown, and potential errors are indicated. (1) Example with no errors; (2) Example with potential errors Holding space

Suzette's comments
status: Vicki started, but it needs tweaking

this will take a lot of work to do well -- to show different types of errors

33 Forms: Labels checks (E To check labels with IE WAT Add 4 images for check that the required field indicator is in the field label, or for radio button and check boxes, it is in the "legend". (1) Correct: asterisk (*) in label box; (2) Incorrect: asterisk (*) outside label box; (3) Correct: "(required)"; (4) Incorrect: "(required)". Holding space

status: Vicki started, but it needs tweaking.
Shawn can do easily

34 Images (For example, appropriate text alternative for a search button (search-icon.png) would be "search", not "magnifying glass".) done  

Archived Info

Easy Checks Illustrations 17Jan14 is a snapshot of this page on 17 January 2014

...