[Owncloud] please care about screenreader accessibility

[Henning Oschwald]

Hi,

The owncloud web interface has some accessibility issues which makes it
difficult or partially impossible to use for screenreader users. A
screenreader is a software that allows blind people to work with a
computer as it basicly gathers the required information and presents it through
text-to-speech or a braille display.

The biggest issue are custom UI elements such as div or span elements
with an onclick event listener attached to it. Neither are such elements
focussable with the keyboard, nor can they triggered by pressing the
enter key or space bar. To test this, just leave your mouse where it is
and try to focus the settings icon with the tab key of your keyboard -
you won't be able to manage that. :-(

The keyboard focus problem can be solved by adding the tabindex="0" and
role="button" attributes to the settings div. This allows to focus the
settings icon with the tab key but still you can not activate the
"button" by pressing enter, as you would need to add a keydown event
listener as well. For that reason it is recommended to use native dialog
elements whenever possible, where you get focus management and keyboard
navigation for free.

I will file bugs for these issues as well, but I also wanted to raise
this topic here on the list.

I've found the following less accessible or inaccessible UI elements so
far:
- The settings div in the navigation bar, as mentioned above
- all navigation elements in settings/apps (I had to enable applications
  directly in the Sqlite database.)
- The share dialog. Here I can't tell the exact problem yet, but I'll
  investigate that further. All I can tell for now is that the elements are
  not labeled correctly and behave weirdly. :-)
- Well, and the search edit box should get a label, as currently it is
  announced as "log out". :-( However, this is just a matter of:
  <label for="searchbox"><?php echo $l->t('Search');?></label>
  added to core/templates/layout.user.php.

Here are some links that may helpful to get an idea about common
accessibility problems and what to care about.

<http://kinlan-presentations.appspot.com/a11y/index.html>
<http://yaccessibilityblog.com/library/easy-fixes-to-common-accessibility-problems.html>
<http://www.marcozehe.de/2010/02/10/easy-aria-tip-5-aria-expanded-and-aria-controls/>

The Android app also seems to have unlabeled buttons (missing
content-describtions). I will also file bugreports.

There's a helpful article about how to make android apps accessible at
the android developers site:
<http://developer.android.com/guide/topics/ui/accessibility/apps.html>

If you have questions regarding accessibily of owncloud or you need a
tester, just let me know. :-)

cheers

  Henning