Review of Viewing Interface (preview)

General

There seems to be reasonable use of html5 structural element (section, article, header, etc).
Within the <article>
- OER title is <h1>,
- "headings" are <h2>,
- "subheadings" are <h3>.

The Universal Subtitles widget is inserting a <style> element into the widget markup.

Image and video labels are nicely associated using <figure> and <figcaption> elements.
Image have no alt text.

<figcaption> uses <strong> for file name in caption - it probably shouldn't (meant for importance); the <strong> element has custom styles in the CSS.

Inside the Table of Contents, subheading lists are not defined inside the <li> of the related header.
i.e. current:

  <li>Heading</li>
  <ul>
    <li>sub heading</li>
  </ul>
  <li>Heading</li>

recommended:

  <li>Heading
    <ul>
      <li>sub heading</li>
    </ul>
  </li>
  <li>Heading</li>

All of the authoring steps (write, describe, submit) are present in the DOM at the same time, visually positioned in a horizontal arrangement: "future" steps are positioned to the right of the current step, "previous" steps to the left. This causes issues with keyboard navigation: all controls are on the page, so tabbing moves through all of them.

A few styles hard-coded into mark-up, in style attributes, to accomplish the sliding from step to step. The pixel values are updated automatically depending on zoom factor, window size, etc.

Buttons are links (<a>) with background images, with no associated text in some cases.

The "next step" button at bottom of first page is positioned below bottom of window, with no scroll bars. If you tab to it, page moves up, toolbar no longer visible.

On the 'describe' page, if page made more narrow, the controls rearrange more vertically: some controls drop below the fold, but no scrollbars appear.

On the 'publish' page, if page made too narrow, controls slide over top of 'current license' box (buttons also drop too low, with no scrollbar).

buttons keyboard-accessible, but no visual feedback of focus
buttons not activatable using "space bar"
text style drop-down not usable with keyboard (no way to choose a style - nothing happens)
on the 'describe' page, the keyword "buttons" are not keyboard accessible, so you can't read them or delete them
can't edit OER title using keyboard
can't tab to table of contents at all
in FF, can't tab to table of contents or edit area
in Chrome, can tab to content, and to some content within the content (table controls)
in IE9, can tab to content, and to some content within the content (table controls, video controls)
'escape' key does not dismiss popups (e.g. link dialog, footnote dialog)

Buttons that are links (<a>) with background images do not announce themselves as buttons, but rather as "same page link."