A A A A A

(Inactive) Web Best Practices: Teleconference Details

Teleconference details

Agenda

1.0 Review design patterns for drop down and fly out navigation menus
  • Only single column sub lists and only contain links
    1. Drop down menu sub lists:
      1. Mouse hover should display the sub-list of links
      2. Moving keyboard focus to the top level item the sub-list should be opened
      3. If a top level item is a link to a web page, the web page should contain the all sub menu links
      4. Sub-lists opened with the mouse should delay closing when the hover is removed, for at least 500ms
    2. Unordered lists and navigation landmark
      1. Use unordered list and unordered nested lists to organize the links in the navigation menu
      2. Put role=navigation on the container DIV or other container element for the entire 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
    3. 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
      4. Headings can be position off screen if you do not want headings rendered visually
    4. Hiding sub-list of links from screen readers requires
      1. Use off screen positioning to visually hide sub links
    5. Keyboard Support
      1. Tabbing to a top-level link opens the sub list, subsequent tabs move your through the sub-list links
      2. At the end of a sublet move the focus to the next top-level item
      3. Use the up, down, left and right cursor keys for directional navigation of links

3.0 Proposed WCAG 2.0 Rules

3.1 Proposed title rules Violations TITLE_1: The page must contain exactly one title element and it must contain content. (2.4.2)

Recommendations
TITLE_2: If there is no MAIN landmark, the page should contain one and no more than two H1 elements and the H1 elements must have content (2.4.2)
TITLE 3: If there is no MAIN landmark, The content of H1 should not only come from the ALT text of IMG elements (2.4.2)
TITLE 4: If there is no MAIN landmark, The content of the H1 elements should be a subset of the content of the TITLE elements (2.4.2)

Potential Violation
TITLE_5: The title should uniquely describe the content and purpose of the page (2.4.2)

3.2 Landmark rules

Violations
LANDMARK_1: All visible content must be contained within a landmark (4.1.2, 1.3.1 or 2.4.1)
LANDMARK_2: Every page must have at least one MAIN landmark (2.4.1)
LANDMARK_3: If there is more than one landmark of the same type, each landmark must have its own unique label (2.4.6)

Recommendations
LANDMARK_4: Lists of mostly links that are not contained in a MAIN landmark, should be contained in a NAVIGATION landmark (4.1.2)

Potential Violations
LANDMARK_5: Landmark labels should uniquely describe purpose of the section of the page (2.4.6)
LANDMARK_6: Landmarks and their labels should be used consistently between pages (3.2.4)

Potential Recommendation
LANDMARK_7: The text content of landmark label should be concise (less than 65 characters) (English) (2.4.6)

3.3 Heading Rules

Violations
HEADING_1: Headings must contain content (2.4.6)
HEADING_2: Headings within a landmark should be structured, if no MAIN landmarks all headings after the last H1 should be structured (2.4.6)

Recommendations
HEADING_3: Headings within the same level should be unique (2.4.6)
HEADING_4: The text content of an heading should not only come from the alt attribute value of img elements. (1.4.4)

Potential Violations
HEADING_5: Heading content should describe the section (2.4.6)

Potential Recommendation
HEADING_6: The text content of headings should be concise (less than 65 characters) (English) (2.4.6)

3.4 Image Rules

Violation
IMAGE_1: If an image does not have a role=presentation and is visible to a screen reader, it must have an alt attribute

Recommendation
IMAGE_2: If an image has non-empty alt content it should contain 7 to 90 characters

Potential Violation
IMAGE_3: The alt text should describe the purpose or the content of the image
IMAGE_4: If an image is larger than 100×100 it may need a long description

Minutes

1. Review design patterns for dynamic navigation bars
  • JG: What should call these types of menu
  • MS: Drop down menus or fly out menus
  • RS: or general class of “dynamic menus”
  • JG: Are there other “dynamic menu”?
  • RS: Tree menus allow you to open more than one menu at a time, flyouts only one menu at a time
  • MS: Another one that we have seen, is an accordian menu is like a tree menu
  • CD: Hadi’s book has a accordion menu
  • JG: All of these things are dynamic menus?
  • NH: There is also a mega dynamic menu, there are multiple columns and sections
  • MS: It is ribbon like, basically the sub menu is structured HTML
  • CD: It may be easier to visually scan for items
  • CD: Keeps people from having a longer scroller, makes it visually more compact
  • JG: The design menu I put out I believe is for “pull down” and “fly out” menu
  • MS: The keyboard support would be different, the arrow keys function would be different
  • MR: What is champaign’s website has a horizontal menu
  • MS: This might be a mega menu
  • MR: The springfield newspaper has one
  • RS: There is one at UIUC that uses flash

2. Design Pattern for Fly Out and Drop Down menus
  • Only single column sub lists and only contain links
    1. Drop down menu sub lists:
      1. Mouse hover should display the sub-list of links
      2. Moving keyboard focus to the top level item the sub-list should be opened
      3. If a top level item is a link to a web page, the web page should contain the all sub menu links
      4. Sub-lists opened with the mouse should delay closing when the hover is removed, for at least 500ms
    2. Unordered lists and navigation landmark
      1. Use unordered list and unordered nested lists to organize the links in the navigation menu
      2. Put role=navigation on the container DIV or other container element for the entire 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
    3. 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
      4. Headings can be position off screen if you do not want headings rendered visually
    4. Hiding sub-list of links from screen readers requires
      1. Use off screen positioning to visually hide sub links
    5. Keyboard Support
      1. Tabbing to a top-level link opens the sub list, subsequent tabs move focus through the sub-list links
      2. At the end of a sub-list the focus moves to the next top-level item
      3. Use the up, down, left and right cursor keys for directional movement of focus to links
      4. Link with focus needs to be visible
      5. Link focus needs to be highlighted so it can be differentiated from other links in the navigation bars
      6. NOTE: That this keyboard navigation is different than windows menu keyboard shortcuts
        1. Fly out and drop down menus use the cursor keys slightly differently

Participants