[EDS-26] Investigate diferentiating screen readers Created: 15/Oct/11
Updated: 19/Jun/15 Resolved:
19/Jun/15
Status:
Project:
Component/s:
Affects
Version/s:
Fix Version/s:
Closed
Embedded Discovery Service
None
None
Type:
Reporter:
Resolution:
Labels:
Remaining
Estimate:
Time Spent:
Original
Estimate:
Task
Rod Widdowson
Fixed
None
0 minutes
1.1.0
Priority:
Assignee:
Major
Rod Widdowson
7 hours, 10 minutes
3 hours
Multiple
Operating
System:
Multiple
CPU Type:
C/C++ Compiler: Multiple
Multiple
Web Server:
Sun 1.6
Java Version:
Jetty 7
Servlet
Container:
Description
This might involve selecting the drop down list in preference to the typeahead list.
Comments
Comment by Rod Widdowson [ 03/Jan/15 ]
We probably need to put out a request from people with access to screen readers?
To Discuss
Comment by Rod Widdowson [ 15/Jan/15 ]
Feedback from Keith:
"
Smal problem #1: page has no language attribute on the HTML element. Since this page will be
used internationally, that'd probably be wise. Of course, one can always operate on the
assumption that all of the shibboleth.net resources are in English, but it's no big deal to add a
language attribute.
Small problem #2: the form on the EDW page is missing a label. This is true for both the enter
your organization form and the select from a list form.
Big problem: when typing in my organization's name, the custom combo box used is not at all
accessible. My screem doesn't even pick it up, leaving me to page through the 2,000+ IDPs in
the list instead of using this faster route. A proper ARIA solution would vastly improve the
accessibility here, either with an ARIA combo box or an ARIA auto-complete. I'm including a
link with a sample of an ARIA combo box with in-line auto-complete. If you need help adapting
this to the EDS, please feel free to contact me off-list and I'll put you in touch with our
accessibility specialist.
http://oaa-accessibility.org/examplep/combobox2/
Comment by Rod Widdowson [ 20/Jan/15 ]
I looked at the OAA stuff and its very compelling. However it uses JQuery which I have always
avoided (although its very common these days).
This has several issue before I even start to look more closely


Its license under a joint MIT/ GPL license. I expect that both of these are completely
hostile to BSD.
It will take significant work to mesh this up with the CSS we currently have.
However I think that there may be some mileage in chasing up this whole ARIA thing. I'll keep
on looking
Comment by Rod Widdowson [ 20/Jan/15 ]
So the ARIA thing is "just" the decoration of various nodes in the DOM with various attributes
which act as semantic signals to the screen reader
From my very roundabout grasp of things this might not be too difficult to add to the typeahead
package since we already have calls for "This guys is selected", and "show the drop down", hide
the dropdown". Nonetheless phrases like "The WAI-ARIA role taxonomy was modeled using
semantic web technology, in the form of Resource Description Framework (RDF) [RDF] and
the Web Ontology Language (OWL) [OWL]," which is found in the "primer" for this
technology make my brain explode so I'll leave this for today and try again tomorrow.
Comment by Rod Widdowson [ 04/Feb/15 ]
I sent off an example to the guys at Illinois to 50% success. I asked one of the devs there for
help and his reponse was great
I was able to take a look at the script. You are almost there as far as
implementing an ARIA combobox, but there are a few more things to do.
As an ARIA widget role, combobox causes the browser to expect the
application to handle things like updating visual state and managing focus.
A combobox assumes that focus will remain on the input control. It uses
the aria property aria-activedescendant to specify which of the options
have focus. The value of active descendant is the id of the selected
option, and it should be updated as a user arrows through the options or
when a user clicks on an option with the mouse. If you are setting the
control to a default value from the option list, it should be set when the
control is initialized. When a user clicks on an option, set focus back
on the input control as part of the click handler.
Next, since focus will remain on the input control, the aria-expanded
property must be placed on that control, not on the listbox as you have
now. Also, adding aria-owns and pointing it to the listbox (as with
aria-controls) causes assistive technologies to treat the listbox as if it
is contained by the combobox widget.
Lastly, the list of options should be placed in an unordered list rather
than as a series of divs. I¹ve seen some implementations that use divs for
list boxes, but it doesn¹t seem to work as well.
Aria-hidden should be set on the listbox and set to false when the list is
expanded. This is because some browsers and assistive technologies will
still read elements with display: none or visibility: hidden.
The modified markup would look something like this:
<input id=³idpSelectInput² type=³text² role=³combobox²
aria-controls=³IdPSelectDropDown² aria-owns=³IdpSelectDropDown²
aria-expanded=³false² aria-activedescendant=³²>
<ul class="IdPSelectDropDown² aria-hidden=³true² style="visibility:
hidden; left: 20px; top: 204px;">
<li id=³opt1² class="" role="option" aria-selected="false²>RENATA Red Nacional Academica de Tecnologia Avanz</li>
<li id=³opt2² class="" role="option" aria-selected="false">AAI@EduHr
Single Sign-On Service</li>
<li id=³opt3² class="" role="option" aria-selected="false">
<img width="16" height="16"
src="https://idp1.abertay.ac.uk/icons/small/shield_16x16.ico" alt="">
Abertay University
</li>
</ul>
I need to interalize this..
Comment by Rod Widdowson [ 05/Feb/15 ]
Revised example sent off to Keith
Generated at Tue Feb 09 06:03:15 EST 2016 using JIRA 7.0.10#70120sha1:37e3d7a6fc4d580639533e7f7c232c925e554a6a.