Course - Image Gallery and Images

[flaviolima]

:warning: Wire-frames and live-demos are just for example purpose. They don't meet entirely this requirement.

:pencil2: Pencil icon marks specs that are waiting for definition

---

---

Table Of Content

1. Image's Text Alternative
2. Images provided by teachers
   1. General considerations
   2. Rendering single image
   3. Image Gallery

---

Image's Text Alternative

In order to images be accessible it's necessary to be provided:

Check this tutorial

• [x] short description in alt= attribute

• [ ] long description as <figcaption> or as longdesc="URL"

• [ ] Decorative images do not need text alternative and should receive an empty alt="" attribute.

• [ ] In case of missing short description in a non-decorative image, do not insert an empty alt="" attribute, instead remove the alt attribute

• [x] :warning: Browser and Screen Readers compatibility We are following WCAG and HTLM5 specs, but adjustments to compatibility should be necessary.

Images provided by teachers

Images from course creation should follow Image's Text Alternative specification (above) additional to bellow requirements

General Considerations

1. • [ ] Separating information and structure from presentation to enable different presentations (meet #76)
2. • [ ] meet #135
3. • [x] meet #97
4. • [ ] contrast ratio for boundaries ≥ 3:1 (meets #98 )
5. • [x] font color with at least minimum contrast (#92)
6. • [ ] Text can be resized to 200% ( meets #93)
7. Text Spacing (meet #99)
   1. • [x] Line height (line spacing) to at least 1.5 times the font size;
   2. • [x] Spacing following paragraphs to at least 2 times the font size;
   3. • [x] Letter spacing (tracking) to at least 0.12 times the font size;
   4. • [x] Word spacing to at least 0.16 times the font size.
8. on focus and hoover
   1. • [ ] provide a visible indicator (meet #116 minimum)
        1. • [ ] meet #90 (multiple visual cues) Suggestion: combine colors (e.g. font-color, border-color) and shapes (e.g font-weight , border-line)
        2. • [ ] meet enhanced scenario of #116 by setting focus indicator minimum area, contrast and thickness

Rendering single image

1. • [ ] <figcaption> should be inserted after or before <img> given longDescriptionPosition value
2. • [x] alt="shortDescription or alt="title" (if short description is not provided)

3. Image should be rendered accordingly to it purpose:

   1. • [ ] if imagePurpose=Informative <img src="INFORATIVE_purpose.png" alt=[shortDescription]>
   2. • [ ] if imagePurpose=ImageOfText <img src="TEXT_purpose.png" alt=[shortDescription]>
   3. • [ ] if imagePurpose=Decorative <img src="DECORATIVE_purpose.png" alt="">
   4. • [ ] if imagePurpose=ComplexImage

        <figure role="group">
        <img src="COMPLEX_purpose.png" alt=[shortDescription]>
        <figcaption>[longDescription]</figcaption>
        </figure>

        Image Gallery

        Gallery widget is composed by

      • image's thumbnails
      • fullwidth preview
4. • [ ] #136 Design Pattern: must follows WAI-ARIA Practices for grid
     1. • [x] aria-label and visibel label "Image gallery" ( meet #136 #16 )
     2. • [x] role=grid

5. 101 keyboard navigation

   1. • [x] tab and Shift + tab: Navigate to/away gallery
   2. • [x] left and right arrow: Navigate through gallery's images
   3. • [x] Enter and Space: Open fullwidth preview
6. • [x] Responsive design
     1. large viewport presents 8 thumbnails in one row
     2. medium viewport presents 3-7 thumbnails by row
     3. small viewport presents 2 thumbnails by row
     4. smallest viewport 1 thumbnail by row

Thumbnails

1. • [x] Focus indication
2. • [x] Hover indication
3. • [x] Each thumbnail is a <figure> tag
     1. • [x] alt attribute of will be the "short description" configured by teacher
     2. • [x] alt attribute of will be the "title" if no short description was set by teacher.
     3. • [x] figcaption will be the "title".

          <figure role="group">
          <img src= alt={shortDescription} />
          <figcaption>{title}</figcaption>
          </figure>

Full width Preview

1. • [x] Fullwidth dialog (layout design consistency #51)
2. • [ ] Design Pattern: must follows WAI-ARIA Practices for modal (meet #136)
     1. • [x] role="dialog"
     2. • [x] keyboard navigation (meet #101 )
     3. • [x] aria-modal=true
     4. • [ ] aria-describedby=
     5. • [x] First focus
     6. • [x] Focus after dialog is closed
3. Button Controls
   1. • [ ] provide a label that identifies the purpose of the buttons (meet #16 #76 #136)
   2. • [x] #119 Accessible name should be the function the button serves

Wire-Frames

State indicators (focus and hoover)

Fullwidth preview

[github-actions[bot]]

This Feature is ready to be implemented.

[ecureuill]

It's not complying with specs

[ecureuill]

• [ ] :bomb: check dialog problems that will impact in this specs

[github-actions[bot]]

Functional Test failed! Please, review your solution.

---

Please, move to CODED only when this feature is fully implemented: bugs reported in comments and requirements in OP If you want that we test some partial solution, add a comment here with our @

---

• [ ] due to not code it as a functional image

[github-actions[bot]]

This feature have been implemented and is ready for Funcional Test. Please, test the feature.

[caroltaus]

• [ ] There are still tasks in the requirement to be done

• [x] Page is inaccessible for screen reader + keyboard nav (for example, image gallery instructions are not being read)

• [x] Color contrast is not accessible

[caroltaus]

• [x] gallery instructions are still not being with screen reader + keyboard nav

• [x] when hoovering there should a visible indicator

[juantenesaca]

Hello @caroltaus ,

Image gallery instructions id is for example "gallery-instructions". So in main gallery we use aria-describedby="gallery-instructions". So it means that gallery instructions are read when you focus the gallery no the instruction section itself. Please review again that part, I also showed that on a meeting. About "when hoovering there should a visible indicator", please provide more information.

[caroltaus]

Instructions are okay, thank you!

The focus indicator is explained in issue https://github.com/solex2006/SELIProject/issues/116 The gallery is not doing this:

[juantenesaca]

OK, thank you so much. It was already working I do not know what happened. I am fixing it right now.

[caroltaus]

@juantenesaca okay thank you :)