summaryrefslogtreecommitdiff
path: root/skins/larry/templates/message.html
diff options
context:
space:
mode:
authorThomas Bruederli <thomas@roundcube.net>2014-05-07 17:34:28 +0200
committerThomas Bruederli <thomas@roundcube.net>2014-05-07 17:34:28 +0200
commitb2992dd2283c3d0ac95f3293497dfaed0493f607 (patch)
tree038053fb7e932450abb4151ceb053be2a8311b8a /skins/larry/templates/message.html
parent184ed2efe2258579c886de337446fcbb05f5faf4 (diff)
Further accessibility improvements regarding keyboard navigation and document structure
Diffstat (limited to 'skins/larry/templates/message.html')
-rw-r--r--skins/larry/templates/message.html33
1 files changed, 20 insertions, 13 deletions
diff --git a/skins/larry/templates/message.html b/skins/larry/templates/message.html
index 37ee71fe8..c7df4d8b3 100644
--- a/skins/larry/templates/message.html
+++ b/skins/larry/templates/message.html
@@ -10,8 +10,11 @@
<div id="mainscreen">
+<h1 class="voice"><roundcube:object name="messageHeaders" valueOf="subject" /></h1>
+
<!-- toolbar -->
-<div id="messagetoolbar" class="toolbar fullwidth">
+<h2 id="aria-label-toolbar" class="voice">Application toolbar</h2>
+<div id="messagetoolbar" class="toolbar fullwidth" role="toolbar" aria-labelledby="aria-label-toolbar">
<roundcube:if condition="!env:extwin" />
<roundcube:button command="list" type="link" class="button back disabled" classAct="button back" classSel="button back pressed" label="back" />
<roundcube:endif />
@@ -25,7 +28,8 @@
<div id="mailview-left">
<!-- folders list -->
-<div id="mailboxcontainer" class="uibox listbox">
+<div id="mailboxcontainer" class="uibox listbox" role="navigation" aria-labelledby="aria-label-folderlist">
+<h2 id="aria-label-folderlist" class="voice">Email folder selection</h2>
<div class="scroller">
<roundcube:object name="mailboxlist" id="mailboxlist" class="treelist listing" folder_filter="mail" unreadwrap="%s" />
</div>
@@ -33,18 +37,19 @@
</div>
-<div id="mailview-right" class="uibox">
+<div id="mailview-right" class="uibox" role="main">
<roundcube:else />
<roundcube:object name="mailboxlist" folder_filter="mail" type="js" />
-<div id="mailview-right" class="offset fullwidth uibox">
+<div id="mailview-right" class="offset fullwidth uibox" role="main">
<roundcube:endif />
<div id="messageheader">
<span class="moreheaderstoggle"></span>
<!-- record navigation -->
-<div id="countcontrols" class="pagenav">
+<div id="countcontrols" class="pagenav" role="navigation" aria-labelledby="aria-label-countcontrols">
+ <h2 id="aria-label-countcontrols" class="voice">Message navigation</h2>
<roundcube:object name="messageCountDisplay" class="countdisplay" />
<roundcube:button command="previousmessage" type="link" class="button prevpage disabled" classAct="button prevpage" classSel="button prevpage pressed" innerClass="inner" title="previousmessage" content="&amp;lt;" />
<roundcube:button command="nextmessage" type="link" class="button nextpage disabled" classAct="button nextpage" classSel="button nextpage pressed" innerClass="inner" title="nextmessage" content="&amp;gt;" />
@@ -64,7 +69,7 @@
</div>
<roundcube:endif />
-<h2 class="subject"><roundcube:object name="messageHeaders" valueOf="subject" /></h2>
+<h2 class="subject"><span class="voice"><roundcube:label name="subject" />: </span><roundcube:object name="messageHeaders" valueOf="subject" /></h2>
<div class="message-headers">
<roundcube:object name="messageHeaders" class="headers-table" addicon="/images/addcontact.png" exclude="subject" max="20" />
</div>
@@ -73,11 +78,13 @@
<div id="contactphoto"><roundcube:object name="contactphoto" /></div>
</div>
-<div id="messagecontent" role="main">
-<div class="rightcol">
+<div id="messagecontent">
+<div class="rightcol" role="region" aria-labelledby="aria-label-messageattachments">
+<h2 id="aria-label-messageattachments" class="voice"><roundcube:label name="attachments" /></h2>
<roundcube:object name="messageAttachments" id="attachment-list" class="attachmentslist" />
</div>
-<div class="leftcol">
+<div class="leftcol" role="region" aria-labelledby="aria-label-messagebody">
+<h2 id="aria-label-messagebody" class="voice">Message Body</h2>
<roundcube:object name="messageObjects" id="message-objects" />
<roundcube:object name="messageBody" id="messagebody" headertableclass="message-partheaders headers-table" />
</div>
@@ -91,10 +98,10 @@
</div><!-- end mainscreen -->
-<div id="attachmentmenu" class="popupmenu">
- <ul class="toolbarmenu">
- <li><roundcube:button command="open-attachment" id="attachmenuopen" type="link" label="open" class="icon" classAct="icon active" innerclass="icon extwin" /></li>
- <li><roundcube:button command="download-attachment" id="attachmenudownload" type="link" label="download" class="icon" classAct="icon active" innerclass="icon download" /></li>
+<div id="attachmentmenu" class="popupmenu" aria-hidden="true">
+ <ul class="toolbarmenu" role="menu">
+ <li role="menuitem"><roundcube:button command="open-attachment" id="attachmenuopen" type="link" label="open" class="icon" classAct="icon active" innerclass="icon extwin" /></li>
+ <li role="menuitem"><roundcube:button command="download-attachment" id="attachmenudownload" type="link" label="download" class="icon" classAct="icon active" innerclass="icon download" /></li>
<roundcube:container name="attachmentmenu" id="attachmentmenu" />
</ul>
</div>