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.

Tutorials visual design polishing

From Education & Outreach
Jump to: navigation, search

Nav: EOWG wiki main page

Tutorials draft

(Possible expansion to UI re-design: UI Design for Navigation)

Project parameters:

  • Scope: Primary focus is visual design of the navigation; suggestions for overall visual design welcome. Includes HTML & CSS ready for production.
  • Accessibility & Usability: Must meet WCAG 2.0 Level AA, ideally Level AAA. Must be highly accessible and usable by people with disabilities.
  • WAI branding: Look like an independent child of the main WAI website (WAI home, a WAI subpage with in-suite nav across the top and expand-collapse within the page) — that is, it should be clearly related to WAI, but can have it's own style in many aspects.
    • Fonts, colors, etc. are in the WAI style sheet.
    • Probably include the masthead — minor tweaks OK.
    • Probably have footer match the WAI footer exactly.
    • fyi, here's a visual design that had similar parameters RD Symposium design (Do not need to match that visual design at all.)
    • (apologies for the poor visual design of the WAI website overall — we want to update it but haven't had the resources.)
  • Navigation:
    • Communicate and faciliate a suggested sequence through each tutorial's sub-pages, yet allow users to go out of order. (Current drafts have the sub-pages numbered in the navigation and have previous and next links in the bottom (which some think are not clear enough).)
    • Focus navigation on within the specific tutorial, yet also make it clear that there are other tutorials. (Note the draft has at the top of the nav: links to within the specific tutorial, then at the bottom of the nav: links to other tutorials.)
  • Pages:
    • Tutorials home page (fyi, the text here is just an early draft and we will be editing it significantly)
      • Create the understanding that this is a self contained destination, the home page of a sub-site.
      • Focus navigation on individual tutorials, yet also provide navigation to WAI home page.
    • Tutorial Concepts pages (example: Images Tutorial) serve as the main page for each tutorial
    • Tutorial sub-pages (example: Functional images)
  • Page elements: The following could use some visual design love:
    • Code snippets, which are throughout many page, e.g., Functional images
    • At the bottom of most pages the section on "Related WCAG 2.0 Techniques" or "Relationsship to WCAG 2.0" or such


  • comment {name}