A A A A A

(Inactive) Web Best Practices: Teleconference Details

Teleconference details

Agenda

1.0 Review design patterns for tree menus

Example Tree menu links

Design Patterns
  1. Expand/collapsing sub menus and focus
    1. Do NOT move focus when expand/collapse state changes
    2. Enter should expand/collapse
    3. How do we provide state information (visually and to a screen reader)
    • HR: JAWS only announces the state change the first
    • JG: The alt text the image is being updated
    • MS: How is it changing the image?
    • JG: Modifies the src and alt attributes
    • MS: Try a jaws refresh, does it say the right thing?
      1. What other key strokes should be available
      2. Should there be landing pages
    • Unordered lists and navigation landmark
      1. Use unordered list and unordered nested lists to organize the links in the tree menu
      2. Put role=navigation on a container DIV or other container element for the entire tree menu, not on the top level UL element
      3. Do NOT use role=navigation on sub menu lists
      4. If there is only than one navigation landmark on the page, it should have a label
      5. If there is more than one navigation landmark on the page, each navigation landmark must have a uniquely descriptive label
    • Use of headings
      1. Use headings and aria-labelledby for labeling navigation landmarks
      2. Do not use headings in the sub-lists of links
      3. The heading used for a label should be the first element inside the navigation landmark container element
      4. Headings can be position off screen if you do not want headings rendered visually
    • Hiding sub-list of links from screen readers requires
      1. Use off screen positioning to visually hide sub links

2.0 Proposed WCAG 2.0 Rules

Minutes

1.0 Review design patterns for tree menus

Design Patterns
  1. Expand/collapsing sub menus and controlling focus
    1. Do NOT move focus when expand/collapse state changes
    2. Enter should expand/collapse (do not use space since it was used for scrolling)
    3. How do we provide state information (visually and to a screen reader)
      1. HR: the best practices page the state change information was only spoken once
      2. JG: The img src and alt is being changed
      3. MS: Static HTML versus web application
      4. MS: In the pull down menu we stayed on the webside
      5. MS: The tree view more the other side
      6. MS: The other more advanced examples seem more like widgets
      7. MS: In drop down menus we made things visible through off screen positioning
      8. MS: We need to change the state in a way notified
      9. MS: How do we tell the assistive technology it changed
      10. MS: What we do to manage focus is the important
      11. JG: The other option would be to use live regions
      12. MS: We would need to testing with live regions
      13. JG: Hadi does setting change anything?
      14. HR: With highest verbosity it still does not report
      15. JG: Let me modify the script and see if that changes
      16. MS: I am looking at our sortable tables
      17. JG: Is the image technique the best way for state information?
      18. MS: In the context of dynamic menu the image would be visible when
      19. JG: we may need to do an actual deletion of the image important??
      20. The image technique is probably
    4. Landing pages
      1. It seems that there is consensus is no landing pages for tree menus
      2. JG: Anytime you use a widget it will be announced as the type of widget
      3. HR: It will be challenging for web developers to learn the accessibility
      4. JG: We need solutions that work for developers skill level
      5. MS: Most developers will probably use some library, very few people roll their own
      6. JG: We need to review the library
      7. JG: I am not interested in creating library that we maintain
      8. MS: We can still deploy examples
      9. JG: we are getting kind of off task here
      10. NH: The third example has a mixture of leafs with and without landing pages
      11. MS: I think the best practices page should move focus to the overview page
      12. NH: I agree
      13. JG: Maybe we need to look at this from a toolkit perspective
      14. NH: We kind of get off our mission if we are trying to come up the optimal solution
      15. MS: We could look at the libraries available
      16. JG: Where do we go from here?
      17. HR: JQuery used most
      18. JG: There is not any dominate library
      19. HR: UI AITS department is doing a redesign, I have a question about image map

Image map
  • HR: AITS image map page
  • JG: We have best practices, we need redundant links that are visible on the page
  • JG: we also need to look at the importance of this group of links relative to the rest of the accessibility issues.

Participants