FAQ Database Discussion Community


WAI-ARIA HTML. How to force 2 divs to be read out as one?

html,accessibility,wai-aria,voiceover
I'm new to ARIA and I'm having trouble combining two divs (both just text) into one readout. The layout is an iOS like table with 2 text labels in one row. The idea is to readout the row as a whole as opposed to labels one by one. I have...

Add alternate text to hyperlink control from codebehind

c#,hyperlink,accessibility,alt
I am creating clickable images from the codebehind file as needed based on feedback from a web service. I create the hyperlink using the hyperlink() method HyperLink hyplAlertbox = new HyperLink(); then add the image to that using the "imageUrl" property hyplAlertbox.ImageUrl = "~/templateimages/alert_scale_1.jpg"; This works, but the image contains...

Why would an `a` tag need `tabindex=0`?

html,accessibility
I'm working on a web app, and one of the repeated a (anchor) elements does not get keyboard focus as I tab through the page. Only if I add tabindex=0 can I tab to it. (Although my goal is to make the focus visible, I'm determining whether an element gets...

How to re-factor 2 functions which are the same?

javascript,jquery,html,css,accessibility
I'm working on an accessible carousel with my weak javascript knowledge, and I'm facing a syntax problem. Here is the part that gives me a problem : events: function () { var self = this; this.target.on('click', '.nav-right, .right', function (e) { e.preventDefault(); self.moveCarousel(self.target.find('.carousel-wrapper li'), 'left', 'right', function (cur, $el) {...

Why are screenreaders not speaking this dialog correctly?

jquery-ui,accessibility,screen-readers,jaws-screen-reader
We have a modal dialog being popped up using jquery, just to alert a user of some info before they start using the main part of the application. Nothing complex, but for some reason all the browser/screenreader combinations I've tested with fail to read all or part of the dialog....

How do I get pickadate.js working with the JAWS screenreader?

javascript,accessibility
I have an application that is in the late stages that uses pickadate.js. It's been reported to me that JAWS does not work with the date picker since the arrow keys are required to select a day and they are already mapped to something else in JAWS. Is there a...

Is there anything that shows what works/doesn't for various screenreader/browser combinations?

accessibility,wai-aria,screen-readers,jaws-screen-reader
I'm enhancing the UI for an application to be more compatible with screen readers. The problem is I keep running into issues and I'm beginning to suspect that it' due to the screen reader itself. Right now I'm mostly testing JAWS 15 with IE 8 (due to corporate limitations it's...

Why does Chrome have issues with JAWS screen reader?

google-chrome,firefox,browser,accessibility,jaws-screen-reader
Often, I have observed that Chrome and JAWS do not work very well together, while Firefox works seamlessly with JAWS.

Adding tabindex to all the DIVs

html,accessibility,jaws-screen-reader,accessible
I know DIVs and P elements are not inherently focusable and can be made to be one by adding tabindex attribute. I am trying to make a Screen Reader friendly website and was wondering if it is necessary to have tabindex on each and every DIVs and P on my...

workaround for getting alt for a css image

html,css,accessibility,attr-accessible
I came to know that we cannot have an alt for a css generated image.There are solutions that say by having title atribute we can get the alt effect only on hovering on the image,however when we disable the css we will not able to see that text in place...

Android - Set TalkBack accessibility focus to a specific view

android,accessibility,talkback
When TalkBack is enabled, is there any way to set the accessibility focus manual to a specific view? For instance, when my Activity is started I want TalkBack to automatically focus on a certain Button (yellow frame around the view) and read its content description. What I've tried so far:...

PagerTabStrip TalkBack accessibility

android,accessibility,talkback
I'm currently struggling to create PagerTabStrip with more TalkBack vocalization. The context is: I want to add "Tab [tab name] not selected, click twice to select" on left and right tabs and "Tab [tab name] selected" to the center one for TalkBack user. I also want to add a vocalization...

Links with images and text - combined or separate?

html,image,hyperlink,href,accessibility
For accessibility purposes when linking an image associated with a few brief words of text, is it better to put links on them separately or together? Together: <a href="to.html"><img src="">Go to this page</a> Separately: <a href="to.html"><img src=""></a><a href="to.html">Go to this page</a> (Assuming we put other accessibility arguments aside - like...

ARIA Roles: Can an 'owned element' be nested arbitrarily deep in the DOM?

html,html5,dom,accessibility,wai-aria
W3C's Accessible Rich Internet Applications (WAI-ARIA) 1.1 defines an owned element as follows (from Part 4): Owned Element: An 'owned element' is any DOM descendant of the element, any element specified as a child via aria-owns, or any DOM descendant of the owned child. (Let's ignore aria-owns, a property that...

Should a heading “Navigation” be above a following

html,html5,accessibility,semantic-markup
What is better: <h1>Navigation</h1> <nav> <ul> <li>...</li> </ul> </nav> Or: <nav> <h1>Navigation</h1> <ul> <li>...</li> </ul> </nav> Is there any significant difference?...

event.getSource() returns null Accessibility in android

android,android-activity,accessibility,accessibility-api
i am trying to fill EditText filed using accessibility service like DashLane or some other apps which are using accessibility Service. i am using an event view focused. when EditText gets focused the event getting started but getSource() returns null. Code is: AccessibilityNodeInfo source = event.getSource(); if (source != null)...

Correct way to mark HTML text as decorative with ARIA

html,accessibility,wai-aria,screen-readers
In an earlier version of the http://getbootstrap.com/components/#pagination page/section, it had the code: <nav> <ul class="pager"> <li class="previous"><a href="#"><span role="presentation">&larr;</span> Older</a></li> ... </ul> </nav> This has been changed to: <nav> <ul class="pager"> <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li> ... </ul> </nav> The left arrow...

event.getSource() returns null on View_Focused using Accessibility in Android

android,android-activity,accessibility
i am trying to fill EditText filed using accessibility service like DashLane or some other apps which are using accessibility Service. i am using an event view focused. when EditText gets focused the event getting started but getSource() returns null. Code is: AccessibilityNodeInfo source = event.getSource(); if (source != null)...

Is it acceptable to have redundant language attributes in HTML?

html,accessibility,lang
In terms of accessibility, is it OK to have something like: <html lang="en"> <body> <h2 lang="fr">Imagine this is in French</h2> <h2 lang="en">English headline</h2> <h2 lang="en">English headline</h2> <h2 lang="fr">Imagine this is in French</h2> </body> </html> Please note this is just a rough and ready example to demonstrate, I don't need HTML...

How to programmatically group items when using switch control of IOS?

ios,accessibility,switchcontrol
When using the Switch Control accessibility feature of iOS, you can turn on "Group Items" to improve the scanning speed. But does anyone know, how the system decides which controls should be grouped together and which should not? I have tried laying out the controls in many different ways, but...

Accessiblity on Bootstrap Panels

html,twitter-bootstrap,accessibility
background: I'm currently setting up a website using bootstrap. First thing I found is that in bootstrap the Panel (Accordion) does only toggle if you click exactly at the link. after swaping the h4 and a tag there was still some places where i can click on the panel without...

How can I make TalkBack ignore android:text element?

android,xml,textview,accessibility,talkback
I am improving the accessibility for visually impaired in my android app. I have the following TextView in a popover.xml file in my Android project. <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="12dp" android:text="@string/pass_code"/> Whenever I test the app with TalkBack, the app speaks back the string in android:text but in this case I...

Accessibility issue with p:select

primefaces,accessibility
Using primefaces 5.1, i'm testing my app with WCAG validator and the following code is breaking a guideline: <p:outputLabel for="selectHowMuch" value="Do you feel edgy lately ?" /> <p:selectOneMenu id="selectHowMuch" value="Yes"> <f:selectItem itemLabel="Argggg" itemValue="3" /> <f:selectItem itemLabel="Yes" itemValue="2" /> <f:selectItem itemLabel="hmmm" itemValue="1" /> <f:selectItem itemLabel="NO!" itemValue="0" /> </p:selectOneMenu> the broken guideline...

Tabbing through content in IE10

javascript,html,angularjs,accessibility,internet-explorer-10
I'm working on an angular application where some of the UI elements need to be accessible by hitting the tab key this is for accessibilty reasons. As an example we have content areas that open and close when you click/hit return on a button. I do not want the button...

How can I make an HTML input element in a WAI-ARIA tree accessible to VoiceOver in Safari?

html,safari,accessibility,wai-aria,voiceover
I want to put an <input> element inside an element with role="tree" like this: <div role="tree"> <div role="treeitem"> <h1>Tree Input</h1> <input> <a href="#">Submit</a> </div> </div> However, when I do this, I am unable to access the <input> element using my screen reader – VoiceOver in Safari on OS X. When...

Android: how to interrupt during a talkback (accessibility) when the “focus” is on a specific view?

android,accessibility,talkback,accessibilityservice
So, I have an Android application written in Java. I want to be able to use talkback in the accessibility option for those that are visually impaired. As the user swipes through the activity, the talkback "focuses" on various components and I want to be able to know this: 1)...

KVC in UITableView subclass causing crash with accessibility enabled

ios,objective-c,uitableview,accessibility,key-value-coding
I have a custom UITableView subclass in which I override +accessInstanceVariablesDirectly to return NO in order to ensure attributes with no setter cannot be set using KVC. When removing this table view from the view hierarchy, the app crashes - sometimes - and now for the weird part: only if...

ARIA attributes for reading different text than in the HTML document

html5,accessibility,wai-aria
In my HTML document I am using roman numbers (e.g.: MMXV = 2015). Is there a way to inform screen readers to interpret certain text in another way (e.g.: roman numerals as "Two thousand and fifteen" instead of M-M-X-V)? My guess was that there would be an ARIA attribute, but...

In Firefox, Angular model doesn't update until focus leaves dropdown. How to properly set focus when tabbing?

angularjs,firefox,drop-down-menu,model,accessibility
I have a select element. The selected value determines whether a text input box shows up afterwards (using ng-show). For accessibility purposes, I want the user to be able to tab seamlessly through the inputs; as soon as they tab away from the select, I want the new input box...

Accessibility Check fail when using TextInputLayout

android,accessibility
I'm using the new TextInputLayout provided by Android.support to do floating label. But it will fail Espresso Accessibility Check because "View is missing speakable text needed for a screen reader". Looked into it and find out the TextInputLayout will nullify hint when parent does addView(). This is basically how it...

Can aria-disabled only be applied to a focusable element? Doesn't it also apply to child elements?

html5,twitter-bootstrap,accessibility,wai-aria,screen-readers
I've created a page using Bootstrap with a standard layout of next and previous page links. On the first page, I disable the 'previous page' link as follows: <div role="navigation"> <ul class="pager"> <li class="previous disabled" aria-disabled="true"> <a href="#">Previous page</a> </li> <li class="next"> <a href="search.php?page=2">Next page</a> </li> </ul> </div> It seems...

Chrome Vox not getting radio buttons

html,google-chrome,radio-button,accessibility,wai-aria
I'm testing a website for accessibility using Chrome Vox. I have 3 radio buttons, one of which is selected. I have no idea why, but Chrome Vox only reads the selected radio button, the others are ignored. Here's an example: <p>Chrome Vox test</p> <input type="radio" id="radio1" name="radio" tabindex="0" role="radio" aria-checked="false">...

Cannot tab to select dropdown menus in Bootstrap Navbar

jquery,html,css,twitter-bootstrap,accessibility
So I'm having a problem where for some reason you can't select the dropdowns from my Bootstrap navbar using the tab key? I'm concerned that this means people using screen-readers and the such won't be able to navigate the website. It seems to work on other bootstrap sites so I...

Enable VoiceOver on the view and it subviews

ios,objective-c,accessibility,subview,voiceover
Background: Like the voicemail view inside Apple's Phone app. I want to be able to get voiceover announcement from the cell context as well as the individual controls. Problem: It seems that if the parent view has the accessibility turned on, the subviews become non-accessible. I looked into shouldGroupAccessibilityChildren and...

setting text color to transparent for hiding accessibility content?

css,screen,accessibility,transparent,reader
I have a bunch of tags with background-images properties that I would like to give some content for screenreaders but I obviously can't give it an alt attribute since they are not <img> tags. Would screenreaders be able to read the content as long as I set the text color...

How to fix UITableView Accessibility speak in wrong languge while scrolling?

ios,iphone,accessibility,voiceover,uiaccessibility
I'm creating an app in Polish (Polish is set in iPhone settings). All VoiceOver text are said in Polish (like button, numbers etc.). But when I scroll UITableView with three fingers it say in English: "Rows 1 to 10 of 16" (1, 10 and 16 in Polish). How to fix...

How to add links to tabbing order when they're made visible with CSS?

javascript,html,css,drop-down-menu,accessibility
Links that are subject to display: none aren't in the default tabbing order. However, when they're revealed - e.g. CSS for a drop-down menu reveals a sub-menu when a parent link gains focus - they still aren't in the tabbing order. Presumably JavaScript is required, but simply setting tabindex="0" does...

Inconsistent Accessibility C#

c#,accessibility
I'm working on a custom UI for Tracking stocks, although one UI I've made has caused an issue that I can't locate. I keep getting the error: "Inconsistent accessibility: parameter type 'SCM_Addin.Funds.TrackFund[]' is less accessible than method 'SCM_Addin.Forms.frm_FundTracker.frm_FundTracker(SM_Addin.Funds.TrackFund[])' I've checked the protection in my classes, but I can't find any...

Does an elements with the attribute aria-hidden and css visibility:hidden get read by screen readers?

javascript,html,html5,accessibility,wai-aria
I have a mobile menu that I am hiding from view on desktop with visibility:hidden. I would like to also hide this menu from screen readers on a desktop without using display:none or hidden=hidden if possible. Is aria-hidden=true enough to prevent all the hidden menu links from being read out...

Find all display:none attributes and add in aria-hidden attribute using JavaScript

javascript,jquery,accessibility,wai-aria
Is there a way to search for all the instances where display:none is used and add the attribute aria-hidden="true" using JavaScript. My site has hundreds of instances of this and i am looking for a quicker way. Could it be something like this: (added to a function) $(*).css( "display", "none"...

Is there a Standardized method of Form Accessibility and Semantics?

html5,forms,accessibility
With so many articles on the "proper," "semantic," and "accessible" use of forms and architecture, I'm rethinking how I approach forms. There are literally so many variations of what is "right" that I'm not 100% on what is really accurate anymore. In an MDN article (here), it mentions: With this...

Acessibility on Ajax Checkbox

javascript,ajax,accessibility
I have a bootstrap switch checkbox which triggers an Ajax call. However, its functionality is pretty important and I need to ensure that it will work in any browser. I have a url that handle the request. What I need to know is how can I make the checkbox a...

How to set priority for screen readers of some HTML page parts?

html,accessibility,wai-aria,screen-readers,wcag2.0
I want to make my HTML page suitable for screen readers. Currently, the page have 3 main parts: header, sidebar and content: Screen readers read header at first, then sidebar and finally search results. Unfortunately, users which has problems with eyesight wait for a long time while the program will...

Accessibility app for android that runs on top of all other applications and can intervene and send touch/tap events to views of other apps

android,overlay,accessibility
I have been trying to design an accessibility application for android for disabled people like that of ios7 switch control point mode. The biggest problem I am facing is how would I make an activity that would appear over all applications and takes switch events and send touch/tap events accordingly...

How can I make a form label keyboard accessible?

jquery,html5,accessibility
I have an HTML5 form that collects some information and processes it when the user submits the form. It uses the jQuery Validation Plugin to validate the inputs and, if there are errors, it shows an error-message-container div at the top of the screen containing a list of errors, and...