Accessibility Review of Authoring Tool
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>
.
- OER title is
- Bold, underline and italic are accomplished using
<b>
,<u>
and<i>
.
- 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:recommended:<li>Heading</li> <ul> <li>sub heading</li> </ul> <li>Heading</li>
<li>Heading <ul> <li>sub heading</li> </ul> </li> <li>Heading</li>
Keyboard access
- When tabbing around, there is no visual indication of focus.
- The ToC is tabbable.
- In Firefox, tab focus gets stuck inside first video player (ok in IE9, Chrome).
Review of Authoring Interface
General
- 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.
- Styles seem to use pixels instead of ems.
- 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).
Keyboard access
- 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)
Screen Reader notes
- learning goals delete link only speaks "delete link", not what would be deleted
- Buttons that are links (<a>) with background images do not announce themselves as buttons, but rather as "same page link."