Existing bugs, UX and A11y issues

[isaacdurazo]

This checklist includes UX and accessibility issues, as well as bugs documented before and during the first usability study for the APG redesign project.

UX issues

• In the main Nav, change the word “Examples” to “Index”
• Create a “Landmark Regions” Pattern that links to the Landmark Regions self-contained page.
• Improve Design of single Pattern and single Example pages
  • In the single pattern page, make the link to Examples more prominent
  • There are visual treatments we can add to elements and sections here to improve the look and feel.
• The "ARIA Authoring Practices" logo/title on the top left should be a link to the root of the document.
• Missing favicon!
• Reprioritize Navigation items by moving Fundamentals to be next to Home.
• Add side navigation to
  • single pattern page
  • single example page
  • and Index Page (previously Examples page)
• Redesign Home page
  • Move "No ARIA is better than Bad ARIA" from Home to Fundamentals.
  • Add "browser and mobile support" on the Home page to a separate note. Deprioritize this visually.
• Add “Read more about x” link to cards under Patterns and Fundamentals pages
• Fix styling for Landmark Regions self-contained page.
• Audit content
  • to fix inconsistencies
    • E.g. Sometimes we refer to Patterns as ARIA design patterns, widgets, or simply design patterns.
  • There are also cases where the copy assumes a slightly different structure and presentation style (e.g. saying "This section is informative" no longer makes sense when the content is presented as a website instead of a specification).
  • to remove repetition
    • When looking at a pattern page, we have a “Keyboard Interaction” section with a bulleted list of the specs, the same for “WAI-ARIA Roles, States, and Properties”. When we go to the example plage of the same pattern, we present again the same information but call it “Keyboard Support” and “Role, Property, State, and Tabindex Attributes”, and present the specs in a table instead.
• Implement breadcrumbs were appropriate
• Implement Search Functionality
• Implement Tab panel for JS/CSS and HTML in ex

Accessibility issues

• There are missing regions on the home page
• There is no banner or header region, which might be causing that
• Nav shouldn’t have aria-label="Context for this document" it feels weird
• H1 shouldn’t be wrapped in a banner (). Make sure headings are not wrapped in banners
• While tabbing headings are not announcing the name
  • The Screen reader output is: link heading 2, link heading 3, etc
  • Using arrow keys did announce the headings
  • Note: This might be because headings have an empty anchor tag next to them for some reason.
• Not clear the footer is a footer. The landmark wasn’t announced by the screen reader.
• Implement “Jump to”. Right now is only “skip to main”
• Side nav is behaving weirdly. Screen reader user hears section symbols all over the place
• Heading level 3 is announcing 2 items because we have an anchor tag with a section symbol as well.
• “HTML-ARIA” link has “ARIA in HTML” as its title, which is redundant
• Steps under “General Principles of Landmark Design” should be H4s instead of bold paragraphs
• Avoid orphan characters at the beginning and end of paragraphs when using inline links.
• Screen reader is not announcing when the user selects code in source code.
• Use tabs instead of spaces in code examples.

Bugs

• Navigation Menubar and Tree view example pages have “Mythical University” as the heading.
• Code highlighting is not working.
• Current items in the main nav don’t have the yellow bar underneath them
• “Breadcrumbs” heading wasn’t a link when the user landed on the patterns page. He navigated somewhere else and then back and it worked. This is a bug maybe in the SR, which could be navigated by having a “read more” link

[richnoah]

Several of the tasks listed above were symptoms of underlying issues. The latest updates have been deployed to http://wai-aria-practices.s3-website-us-east-1.amazonaws.com/

In this last round the site was made responsive in addition to the following items being addressed:

• Create "Landmark Regions" Pattern
• Update Single Pattern page
• Update Single Example page
• Update Indexes
• Implement Jump To
• Update Headling Level 3
• Correct issue with code highlighting