[WG: Accessibility] [Sakai Jira] Created: (SAK-21502) Accessibility: Skip Navigation links aren't visible to allow access to sighted keyboard only users
Richwine, Brian L
brichwin at indiana.edu
Tue Nov 29 19:07:14 PST 2011
OK, so I got some help from the dev list and figured out how to get changes into the portal.
I made some changes to the CSS and to the neoskin vm files.
The changes I made are an effort to address these three JIRAs:
https://jira.sakaiproject.org/browse/SAK-21507 - The three skip navigation links do not work in Safari or Chrome
https://jira.sakaiproject.org/browse/SAK-21502 - Skip Navigation links aren't visible to allow access to sighted keyboard only users
https://jira.sakaiproject.org/browse/SAK-19559 - "Jump to Worksite List" Skip Navigation Link Present on Login Page
The diffs attached are the changes I made. A short video demoing the results can be found here (please don't judge my sense of humor from this video! The delivery is pretty flat!):
http://screencast.com/t/8CpicX8LPdF1
Some concerns:
1) I only made changes to the default neo portal presentation. If this looks OK, should other skins be changed as well?
2) Obviously, the changes to .skip in the css affect all of Sakai. Should this be kept as is, and extensively tested - or - if we want these features should a new "skip" class be created an used on the appropriate elements?
Thanks,
Brian
-----Original Message-----
From: gsilver [mailto:gsilver at umich.edu]
Sent: Tuesday, November 29, 2011 3:10 PM
To: gsilver
Cc: Richwine, Brian L; scott williams
Subject: Re: [Sakai Jira] Created: (SAK-21502) Accessibility: Skip Navigation links aren't visible to allow access to sighted keyboard only users
Oh, I see you set it as an option (option 1) already.
I like 1, as that would fix this issue everywhere. But the testing might be very laborious.
-Gonzalo
On Nov 29, 2011, at 12:22 PM, gsilver wrote:
> Brian,
>
> Yikes. Maybe just change the skip class to use something that renders invisibly onscreen?
>
>
>
> -Gonzalo
>
> On Nov 29, 2011, at 12:10 PM, Richwine, Brian L wrote:
>
>> Argh! In testing the code to make the skip navigation links visible when they receive focus, I found out that the Skip Nav links don't work at all in Webkit browsers (including Safari and Chrome). I filed a JIRA on this (https://jira.sakaiproject.org/browse/SAK-21507).
>>
>> I'd like to fix this, which convolutes the issue a bit. Webkit browsers won't give focus to elements that are offscreen (Sakai's "skip" class puts elements offscreen with top:-999px and left:-999px). Also, same page links only scroll the page to the target and don't move the focus to it. Webkit also will not give focus to a named anchor.
>>
>> The fix for this looks to be:
>> 1. Change the skip class CSS ruleset to clip the contained elements instead of running them off screen - this could be done globally, or just for the skip nav links and target headings (see #2):
>> .skip{
>> display: inline;
>> position: absolute;
>> height: 1px;
>> width: 1px;
>> overflow: hidden;
>> }
>>
>> 2. Add ids and a tabindex="-1" on the hidden "x begins here" headings. Add an onclick handler to the skip nav links to move focus to the appropriate hidden heading since the named anchors wont work, if the onclick handler fails let the default link action work. For example:
>> <a href="#tocontent" class="skip" title="jump to content" accesskey="c"
>>
>> onclick="try{document.getElementById('tocontentheading').focus();return false;}catch(ex){}"> ...
>> <h1 class="skip" id="'tocontentheading'" tabindex="-1">Content
>> begins here</h1>
>>
>> The above fixes would require changes to the portal.html and tool_base.css (both have .skip selectors), and to CharonPortal.java (I'm testing the changes now).
>>
>> -Brian
>>
>>
>> -----Original Message-----
>> From: gsilver [mailto:gsilver at umich.edu]
>> Sent: Tuesday, November 29, 2011 8:55 AM
>> To: Richwine, Brian L
>> Subject: Re: [Sakai Jira] Created: (SAK-21502) Accessibility: Skip
>> Navigation links aren't visible to allow access to sighted keyboard
>> only users
>>
>> Ok, I will request access for you.
>>
>> In the interests of expediency, if you could send me a patch based on /neo-default, I can check that in.
>>
>> - Gonzalo
>>
>> On Nov 29, 2011, at 8:53 AM, Richwine, Brian L wrote:
>>
>>> Yes, simply adding pseudo class definitions to the links is all that is required. I do not have commit to /reference.
>>>
>>> -Brian
>>>
>>> -----Original Message-----
>>> From: gsilver [mailto:gsilver at umich.edu]
>>> Sent: Tuesday, November 29, 2011 8:29 AM
>>> To: gsilver
>>> Cc: Richwine, Brian L
>>> Subject: Re: [Sakai Jira] Created: (SAK-21502) Accessibility: Skip
>>> Navigation links aren't visible to allow access to sighted keyboard
>>> only users
>>>
>>> And - do you have commit to /reference?
>>>
>>> -Gonzalo
>>>
>>> On Nov 29, 2011, at 8:10 AM, gsilver wrote:
>>>
>>>> Sure, this sounds great.
>>>>
>>>> For 2.9, the portal skin is in /neo-default/portal.css
>>>>
>>>> For 2.8 and below it is in /default/portal.css
>>>>
>>>> As I understand it all you really need is to add some pseudo classes definitions for those links?
>>>>
>>>> -Gonzalo
>>>>
>>>>
>>>>
>>>> On Nov 28, 2011, at 6:37 PM, Richwine, Brian L wrote:
>>>>
>>>>> Hello Gonzalo!
>>>>>
>>>>> I hope you had an excellent holiday and that there were left overs to keep you satisfied for days.
>>>>>
>>>>> I put in a Jira to have the skip navigation links (jump to content, jump to tools list, jump to worksites list) become visible when they have keyboard focus and provided a basic working example CSS as a change to the #skipNav ruleset in portal.css. I'm not generally considered an artful designer and I didn't know if I should put any energy into trying to fancy up the appearance of the link text so I didn't take the work any further.
>>>>>
>>>>> Also, if I were to put this into the code base, I didn't know how to proceed (I tested it by directly modifying a local server instance copy of /library/skin/neo-default/portal.css). I'm baffled by all of the different portal.css files in the code and don't know how to proceed towards submitting a patch, etc.
>>>>>
>>>>> As usually I come begging for a bit of your time and wisdom. If you have a moment, would you please tell me how I should proceed with this one?
>>>>>
>>>>> Thanks,
>>>>> Brian
>>>>>
>>>>> p.s. This is what the top of the portal looks like when one of the skipNav links gets focus:
>>>>>
>>>>> <ATT54109 1.jpg>
>>>>>
>>>>>
>>>>> -----Original Message-----
>>>>> From: Brian Richwine (JIRA) [mailto:bugs-admin at sakaiproject.org]
>>>>> Sent: Monday, November 28, 2011 6:13 PM
>>>>> To: Richwine, Brian L
>>>>> Subject: [Sakai Jira] Created: (SAK-21502) Accessibility: Skip
>>>>> Navigation links aren't visible to allow access to sighted
>>>>> keyboard only users
>>>>>
>>>>> Accessibility: Skip Navigation links aren't visible to allow
>>>>> access to sighted keyboard only users
>>>>> ------------------------------------------------------------------
>>>>> --
>>>>> -
>>>>> -----------------------------
>>>>>
>>>>> Key: SAK-21502
>>>>> URL: https://jira.sakaiproject.org/browse/SAK-21502
>>>>> Project: Sakai CLE
>>>>> Issue Type: Bug
>>>>> Components: Accessibility, Portal Affects Versions:
>>>>> 2.9.0-a01, 2.8.1, 2.7.2
>>>>> Environment: Sighted Keyboard only users
>>>>> Reporter: Brian Richwine
>>>>> Assignee: Brian Richwine
>>>>> Fix For: 2.9.0-a02
>>>>>
>>>>>
>>>>> The three skipNav links (Jump to content, Jump to tools list, and Jump to worksite list (located at the top of the portal body)) do not become visible when they receive keyboard focus.
>>>>>
>>>>> The skipNav links work great for screen-reader users. However they aren't very usable to another important class of keyboard only users -- those who can see and don't use screen-readers. This means that they can't tell what the links are for and are left to wonder why tabbing into the window doesn't seem to do anything.
>>>>>
>>>>> As a compromise between keeping the visual design free of the skip navigation links, and making them accessible to keyboard only users, CSS can be configured to hide the skip navigation links until they receive focus. An example of this technique can be found on the ATAC's Web site: http://iuadapts.indiana.edu/ (visit the page and then press the tab key until the "Skip Main Navigation" link text appears). Once a keyboard only user starts tabbing through the page, the skip navigation link will receive focus and CSS can make it become visible. An example of how to code CSS to do this in Sakai CLE would be to replace the empty #skipNav rule in portal.css with:
>>>>>
>>>>> #skipNav a.skip:focus, #skipNav a.skip:active { height:auto;
>>>>> width: auto;
>>>>> outline: black dotted thin;
>>>>> position: static !important;
>>>>> margin-left: 10px;
>>>>> font-size: 1.5em;
>>>>> }
>>>>>
>>>>>
>>>>> --
>>>>> This message is automatically generated by JIRA.
>>>>> -
>>>>> For more information on JIRA, see:
>>>>> http://www.atlassian.com/software/jira
>>>>>
>>>>>
>>>>>
>>>>
>>>
>>>
>>>
>>
>>
>>
>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: cssChanges.diff
Type: application/octet-stream
Size: 1609 bytes
Desc: cssChanges.diff
Url : http://collab.sakaiproject.org/pipermail/accessibility/attachments/20111130/cf91a873/attachment.obj
-------------- next part --------------
A non-text attachment was scrubbed...
Name: neoPortalChanges.diff
Type: application/octet-stream
Size: 7115 bytes
Desc: neoPortalChanges.diff
Url : http://collab.sakaiproject.org/pipermail/accessibility/attachments/20111130/cf91a873/attachment-0001.obj
More information about the accessibility
mailing list