Screenreaders will read whatever string is set to the &quot;alt&quot; attribute. The use of this attribute is specifically for image tags.

If I have a div like so:

    &lt;div id=myCoolDiv tabindex=&quot;0&quot;&gt; 2 &lt;div&gt;


Is there a way to have a screen reader pickup  an attribute to read a string the same way an alt tag is used?

So for the div listed below, the screen reader will say ie: &quot;shopping cart items 2&quot;?

I tried using aria-label but the screenreader won&#39;t pick it up:

    &lt;div id=myCoolDiv tabindex=&quot;0&quot; aria-label=&quot;shopping cart items&quot;&gt; 2 &lt;div&gt;


Is there an equivalent to the &quot;alt&quot; attribute for div elements?

Can we use any other TAG in `&lt;ul&gt;` along with `&lt;li&gt;`?

like

    &lt;ul&gt;
    Some text here or &lt;p&gt;Some text here&lt;p&gt; etc
    &lt;li&gt;item 1&lt;/li&gt;
    Some text here or &lt;p&gt;Some text here&lt;p&gt; etc
    &lt;li&gt;item 1&lt;/li&gt;
    &lt;/ul&gt;



Can we use any other TAG inside &lt;ul&gt; along with &lt;li&gt;?

**Note:** I know `&lt;b&gt;` is presentational and `&lt;span style=&quot;font-weight:bold&gt;` is a better way, and `&lt;strong&gt;` and `&lt;em&gt;` are for emphasis but my question is not regarding this.


----------


Should we convert every `&lt;b&gt;` to `&lt;strong&gt;` blindly? Many people do this, they think `&lt;b&gt;` is not good as per web standards so they convert every `&lt;b&gt;` to `&lt;strong&gt;` upon site redesign, content re-population, new site design and people suggest this to others also.


----------


Dreamweaver has also given the option to convert all `&lt;b&gt;` and `&lt;i&gt;` to `&lt;strong&gt;` and `&lt;em&gt;` on code paste in design view and when we use B and I Which people use blindly.

![alt text][1]

And Dreamweaver (if above option is checked) and many online WYSIWYG editor give output in `&lt;strong&gt;` and `&lt;em&gt;` while button shows **B** and *I*.

![alt text][2]

In my opinion it&#39;s creating a misconception about `&lt;strong&gt;` and `&lt;b&gt;`


----------


When we get content from a client we don&#39;t know where the client wants to give emphasize and where he just wants to use bold text for presentation purposes. What should we do in this circumstance? No one has the time to give to decide for each instance (us and the client), whether it should be `&lt;b&gt;` or `&lt;strong&gt;`, `&lt;i&gt;` or `&lt;em&gt;`


What are the pros and cons to convert every `&lt;b&gt;` and `&lt;i&gt;` into `&lt;strong&gt;` and `&lt;em&gt;` blindly if we are saying our site is accessible?


----------
**Update:** remember [`&lt;b&gt;` and `&lt;i&gt;` are not deprecated they are in HTML 5 specification][3]


  [1]: http://shup.com/Shup/280420/1101118332-My-Desktop.png
  [2]: http://shup.com/Shup/280425/1101118921-My-Desktop.png
  [3]: https://stackoverflow.com/questions/2235450/why-html-5-still-have-support-for-presentational-elements

Is it ok to use &lt;strong&gt; in place of &lt;b&gt; blindly?

`input type=&quot;submit&quot;` and `button` tag are they interchangeable? or if there is any difference then When to use `input type=&quot;submit&quot;` and when `button` ?

And if there is no difference then why we have 2 tags for same purpose?

input type=&quot;submit&quot; Vs button tag are they interchangeable?

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&#39;ve tried so far:

        myButton.setFocusable(true);
        myButton.setFocusableInTouchMode(true);
        myButton.requestFocus();

requestFocus(), it seems, is only requesting input focus and has nothing to do with accessibility focus. I&#39;ve also tried:

        myButton.sendAccessibilityEvent(AccessibilityEvent.TYPE_VIEW_ACCESSIBILITY_FOCUSED);
        myButton.sendAccessibilityEvent(AccessibilityEvent.TYPE_VIEW_FOCUSED);
        myButton.sendAccessibilityEvent(AccessibilityEvent.TYPE_VIEW_TEXT_CHANGED);
        myButton.announceForAccessibility(&quot;accessibility test&quot;);
        myButton.performAccessibilityAction(64, null); // Equivalent to ACTION_ACCESSIBILITY_FOCUS

        AccessibilityManager manager = (AccessibilityManager) getSystemService(Context.ACCESSIBILITY_SERVICE);
        if (manager.isEnabled()) {
            AccessibilityEvent e = AccessibilityEvent.obtain();
            e.setSource(myButton);
            e.setEventType(AccessibilityEvent.TYPE_VIEW_ACCESSIBILITY_FOCUSED);
            e.setClassName(getClass().getName());
            e.setPackageName(getPackageName());
            e.getText().add(&quot;another accessibility test&quot;);
            manager.sendAccessibilityEvent(e);
        }

None of this seems to work.

Android - Set TalkBack accessibility focus to a specific view

Consider the following:

    &lt;label&gt;Range from 
        &lt;input name=&#39;min_value&#39;/&gt; to
        &lt;input name=&#39;max_value&#39; /&gt;
    &lt;/label&gt;

Is this semantically correct since the W3C recommendations state that a label is associated with **exactly** one form control?

Clicking into the second input shifts focus immediately to the first input? Can this be prevented?

How would one markup a min/max input combination to show that two inputs belong together?

Two input fields inside one label

I get an warning about **[Accessibility]Missing contentDescription attribute on image** in eclipse. This warning show at line 5 (declare `ImageView`) in XML code below.

This not make any error when build and run my application. But I really want to know why i get this warning.

This is my XML file:

    &lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
    &lt;LinearLayout xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;
                  android:layout_width=&quot;fill_parent&quot;
                  android:layout_height=&quot;wrap_content&quot;&gt;
        &lt;ImageView
            android:id=&quot;@+id/contact_entry_image&quot;
            android:src=&quot;@drawable/ic_launcher&quot;
            android:layout_width=&quot;wrap_content&quot;
            android:layout_height=&quot;wrap_content&quot;
            /&gt;
        &lt;TextView
            android:id=&quot;@+id/contact_entry_text&quot;
            android:text=&quot;&quot;
            android:layout_width=&quot;fill_parent&quot;
            android:layout_height=&quot;wrap_content&quot;
            android:textSize=&quot;30sp&quot;
            /&gt;
    
    &lt;/LinearLayout&gt;

Please help me regarding this and thanks for your reading.


&#39;Missing contentDescription attribute on image&#39; in XML

I&#39;m working for a foundation that raises awareness for accessibility in the internet. For a presentation, we want to offer a small workshop that simulates different disabilities/impairments to people. This is done via a website created especially for this presentation.

One of the demonstrated impairments is having a tremor, which means experiencing shaky, difficult-to-control hand movements. With this impairment, it&#39;s very difficult to move the mouse cursor exactly and to press the mouse button while the mouse is over a link. Both some old people and people with disease, e.g. Parkinson&#39;s, can suffer from tremor.

Now I&#39;d like to somehow move the mouse cursor in an unpredictable way, so that it&#39;s very hard for people to click on a small button. Because JavaScript doesn&#39;t allow moving the mouse cursor directly, I&#39;m looking for other ways to achieve this. I came up with the following ideas:

- Using a mouse driver / utility that simulates the mouse shaking.
- Hide the mouse cursor via CSS, place a GIF animation of a shaking mouse cursor at the place of the original cursor (with JavaScript), and then make the target link clickable only every few seconds for a second or so. This would at least give the feeling as if one always clicks at the wrong moment.

While the first idea would be pretty cool, I couldn&#39;t find a tool like this, whether for Mac nor for Windows. And I don&#39;t have any skills in programming such a thing myself.

The second idea seems a bit clumsy, but it would achieve the desired effect, I think.

Does anybody have another idea?

Simulating tremor (from e.g. Parkinson&#39;s Disease) with the mouse on a webpage?

I wanted to know what the `aria-*` attributes are used for. What values can they have, and are they defined values or can I create my own values?

Can someone explain the HTML5 aria-* attribute?

Is it possible to set the default input focus on an HTML form without using JavaScript, for example:

    &lt;html&gt;
      &lt;form&gt;
        Input 1: &lt;input type=&quot;text&quot; name=&quot;textbox1&quot;/&gt;
        &lt;br/&gt;
        Input 2: &lt;input type=&quot;text&quot; name=&quot;textbox2&quot;/&gt;
      &lt;/form&gt;
    &lt;/html&gt;

I want to set the default focus to either of the text-boxes when the form loads without using JavaScript (as I want the behaviour to occur when a user has js disabled).

Default html form focus without JavaScript

Go to this ultra-simple fiddle in a Webkit browser and click on on of the inputs:

http://jsfiddle.net/eK4TT/

&lt;!-- language: lang-html --&gt;

    &lt;input type=&quot;text&quot;&gt;
    &lt;input type=&quot;text&quot;&gt;
    &lt;input type=&quot;text&quot;&gt;
    &lt;a href=&quot;#&quot;&gt;my first link&lt;/a&gt;
    &lt;a href=&quot;#&quot;&gt;my second link&lt;/a&gt;
    &lt;a href=&quot;#&quot;&gt;my third link&lt;/a&gt;

Then, notice that you can keyboard navigate through both the inputs and the links using the &lt;kbd&gt;Tab&lt;/kbd&gt; key (and &lt;kbd&gt;Shift&lt;/kbd&gt;+&lt;kbd&gt;Tab&lt;/kbd&gt; to navigate in reverse order).

Now, look at the same fiddle in Firefox on Mac OS and do the same thing. The inputs receive focus, but the links won&#39;t receive focus. It&#39;s not a CSS display problem. The focus leaps from the last input to the URL bar.

I&#39;ve tried endless combinations of `tabindex` declarations in the markup, and to no avail, e.g.:

http://jsfiddle.net/eK4TT/1/

What the heck is going on here? I will accept any answer that has:

a) a fiddle working in Firefox  
b) an explanation of what exactly is going on here in Mozilla&#39;s head. It appears to contradict the [spec][1].


  [1]: http://www.w3.org/TR/WCAG20-TECHS/H4

How to allow keyboard focus of links in Firefox?

Google Chrome does not refresh accessibility elements ([AutomationElement][1]) when a user scrolls down in the browser. 


To reproduce it: 

1. Enable renderer accessibility with :  `&quot;chrome --force-render-accessibility&quot;` or by setting on Global Accessibility at `&quot;chrome://accessibility&quot;`.
2. Go to http://en.wikipedia.org/wiki/Google
3. Open [inspect.exe][2] in UI Automation Mode (from Windows Kits), look for &quot;Links to related articles&quot; element. 
4. Come back to Chrome, Scroll down until &quot;Links to related articles&quot; at the bottom is visible
5. &quot;Links to related articles&quot; element is marked off screen


------

I found some manual solutions that can force Chrome to refresh it: 

 1. Set Zoom to 90% then set it back to 100 % (very very ugly way)
 2. Switch accessibility off then switch on in `chrome://accessibility/`

**What I&#39;m looking for is the ability to do one of these operations programatically, or any operation that can make Chrome refresh its cache tree.**

------


What I&#39;ve tried:

   - Resize window with `PInvoke/MoveWindow`
   - Redraw Window with `PInvoke/Redrawwindow`
   - Build a chrome extension and force zoom to 100% on demand: `chrome.tabs.setZoom(null, 0);` (working but blink and slow down the window)

None of these are working properly.

**EDIT**: Tested with Google Chrome 40.XX, 41.XX, 42.XX, 43.XX, 44.XX, 45.XX, 46.XX, 47.XX.Dev, 48.XX.Dev under Windows 7.


  [1]: https://msdn.microsoft.com/library/system.windows.automation.automationelement%28v=vs.110%29.aspx
  [2]: https://msdn.microsoft.com/en-us/library/windows/desktop/dd318521%28v=vs.85%29.aspx

Google Chrome accessible tree cache issue with UI Automation

Sight is one of the senses most programmers take for granted. Most programmers would spend hours looking at a computer monitor (especially during times when they are *in the zone*), but I know there are blind programmers (such as T.V. Raman who currently works for Google).

If you were a blind person (or slowly becoming blind), how would you set up your development environment to assist you in programming?

(One suggestion per answer please. The purpose of this question is to bring the good ideas to the top. In addition, screen readers can read the good ideas earlier.)

How can you program if you&#39;re blind?

I was browsing [Amazon][1] and I noticed that when searching &quot;[1TB][2]&quot; if you hover the mouse cursor over the stars rating  image, you only see the score if using IE.  If you are using another browser then the score won&#39;t show.

A rating of 3.8 and a rating of 4.2 both show up as 4 stars. Of course a 3.8 stars vs 4.2 stars (76% vs 84% score) could make a difference!

This is because the standard way of displaying `alt` text is only when the user turns off graphics or when the browser is &quot;read out&quot; (e.g browser for users who are visually  impaired).  IE however, shows it on hover.

So I think if Amazon is to show it regardless of the user&#39;s browser, then `title` should be used in addition to `alt`. Would you agree?


  [1]: https://www.amazon.com
  [2]: http://www.amazon.com/s/ref=nb_ss_gw?url=search-alias%3Daps&amp;field-keywords=1TB

HTML img tag: title attribute vs. alt attribute?

I have 2 buttons next to a textbox and another textbox after the 2 buttons.  The tabindex for the first textbox is 1000, the first button is 1001 and the second button is 1002.  The second textbox has a tabindex of 1003.

When I press tab, the tabindex works fine in all browsers except for Safari, where it immediately moves from the first textbox to the second textbox although the tabindex has been set properly.  Any ideas on how to prevent this issue?

Safari ignoring tabindex

**Overview**

HTML5 [now allows][1] `&lt;svg&gt;` and `&lt;math&gt;` markup with an HTML document without depending on external namespaces (decent overview [here][2]). Both have their own `alt`-attribute analogs (see below) which are effectively ignored by today&#39;s screen-reader software. Thus, these elements are inaccessible to blind users.

**Are there plans to implement a standard alt-text convention for these new elements?** I&#39;ve scoured the docs and have come up dry!

**Futher Details**

*Regarding SVG:* an SVG&#39;s alternate text could be considered the contents of the root `title` or `desc` tag.
    
    &lt;svg&gt;
      &lt;title&gt;An image title&lt;/title&gt;
      &lt;desc&gt;This is the longer image description&lt;/desc&gt;
      ...
    &lt;/svg&gt;

I&#39;ve found [one][3] screen-reader which reads it as such, but is this standard? [Previous methods][4] of inserting SVG also had accessibility issues since `&lt;object&gt;` tags are treatedly inconsistently by screen-readers.

*Regarding MathML:* MathML&#39;s alternate text should be stored in the [`alttext` attribute][5].

    &lt;math alttext=&quot;A squared plus B squared equals C squared&quot;&gt;
      ...
    &lt;/math&gt;

Since screen readers do not seem to acknowledge this, the math-rendering library [MathJax][6] inserts text into an `aria-label` attribute at run-time.

    &lt;span aria-label=&quot;[alttext contents]&quot;&gt;...&lt;/span&gt;

Unfortunately NVDA, JAWS, and others do not reliably read these labels yet either. (More on [WAI-ARIA][7])

*Regarding both:* lacking success with the largely-unsupported ARIA attributes, I tried using `title` attributes. These also seem to be ignored on these &quot;foreign&quot; HTML elements.

**Wrap-Up**

More than a quick hack, I&#39;m looking for the *recommended way* to place alternate-text on these new HTML elements. Perhaps there is a W3C spec I&#39;m overlooking? Or is it still just too early in the game?


  [1]: http://dev.w3.org/html5/markup/syntax.html#svg-mathml
  [2]: http://www.sanbeiji.com/archives/1243
  [3]: http://www.screenreader.net/
  [4]: http://www.carto.net/papers/svg/samples/svg_html.shtml
  [5]: http://www.daisy.org/z3986/structure/SG-DAISY3/part2-math.html#math_examp1e1
  [6]: http://www.mathjax.org/
  [7]: http://www.w3.org/TR/wai-aria/

Accessibility: recommended alt-text convention for SVG and MathML?

There seem to be so many color wheel, color picker, and color matcher web apps out there, where you give one color and the they&#39;ll find a couple of other colors that will create a harmonic layout when being used in combination. However most of them focus on background colors only and any text printed on each background color (if text is printed at all in the preview) is either black or white.

My problem is different. I know the background color I want to use for a text area. What I need help with is choosing a couple of colors (the more, the merrier) I can use as font colors on this background. Most important is that the color will make sure the font is readable (contrast not being too low, also maybe not being too high to avoid that eyes are stressed) and of course that the combination of foreground and background just looks good.

Anyone being aware of such an application? I&#39;d prefer a web application to anything I have to download. Thanks.

How to find good looking font color if background color is known?

Many ARIA demonstration websites use code such as:

    &lt;label for=&quot;name&quot; id=&quot;label-name&quot;&gt;Your Name&lt;/label&gt;
    &lt;input id=&quot;name&quot; aria-labelledby=&quot;label-name&quot; type=&quot;text&quot;&gt;

&lt;br&gt;
But what&#39;s the purpose of using &lt;code&gt;aria-labelledby&lt;/code&gt; attribute in this case? The &lt;code&gt;input&lt;/code&gt; element has already been labeled by the &lt;code&gt;label&lt;/code&gt; element which is using &lt;code&gt;for&lt;/code&gt; attribute, isn&#39;t it?

The purpose of using &quot;aria-labelledby&quot; on already labeled input elements?

I am a totally blind programmer who would like to learn Python. Unfortunately the fact that code blocks are represented with different levels of indentation is a major stumbling block. I was wondering if there were any tools available that would allow me to write code using braces or some other code block delimiter and then convert that format into a properly indented representation that the Python interpreter could use?

Is there a way to convert indentation in Python code to braces?

Is there any attribute like tab-index?

CONTEXT : I&#39;m making a section in a web form visible or invisible depending on some condition where I want to set the tab-index manually when that particular section is visible.

Can I dynamically set tabindex in JavaScript?

I am trying to add accessibility features to an iOS app that has already been developed. 

There are a couple of UI features (e.g. buttons) that I like them to show up if the VoiceOver option in the accessibility menu of the iPhone settings is on and do not show up if the voiceover is off. 

Is there a way to check whether the voiceover option is on or not?

iOS Voiceover status

I have a `ToolStripMenuItem` called `myMenu`. How can I access this like so:

    /* Normally, I would do: */
    this.myMenu... etc.

    /* But how do I access it like this: */
    String name = myMenu;
    this.name...

This is because I am dynamically generating ToolStripMenuItems from an XML file and need to reference MenuItems by their dynamically generated names.


Get a Windows Forms control by name in C#

I have read that the `role` attribute was added to [Bootstrap][1] for accessibility, and I would like to know how `&lt;form role=&quot;form&quot;&gt;` helps accessibility. See http://getbootstrap.com/css/#forms-example for an example of this specific usage.

*I [searched Bootstrap&#39;s repo for &quot;role&quot;][2] to no avail.*

My issue is that the information seems redundant. The notion that the element is a *form* is already expressed by the HTML tag itself (`&lt;form&gt;`), so what does it help if we also add that the element is playing the `role` of `form`? It would make sense to add `role=&quot;...&quot;` if `role` was going to be different than `form` (I don&#39;t know what - but let&#39;s pretend); as it stands (especially without concrete reasoning / use case examples), it is puzzling at best.

  [1]: http://getbootstrap.com/
  [2]: https://github.com/twbs/bootstrap/search?q=role

How does role=form help accessibility?

What would be the best method to code heading/title of `&lt;ul&gt;` or `&lt;ol&gt;`? Like we have `&lt;caption&gt;` in `&lt;table&gt;`, and we don&#39;t want to make them bold.

Is this okay?

    &lt;p&gt;heading&lt;/p&gt;
    &lt;ul&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
    &lt;/ul&gt;

Or should headings always be used?

    &lt;h3|4|5|6&gt;heading&lt;/h3|4|5|6&gt;
    &lt;ul&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
    &lt;/ul&gt;


What would be the best method to code heading/title for &lt;ul&gt; or &lt;ol&gt;, Like we have &lt;caption&gt; in &lt;table&gt;?

I&#39;ve been investigating a few of the JavaScript frameworks such as Backbone.js and Batman.js for a while and whilst I really like them, I have one niggling thing that I keep coming back to. That issue is accessibility.

As a web developer I&#39;ve always tried to make my websites and applications with accessibility in mind, especially using the idea of progressive enhancement.

Clearly out of the box these new JS frameworks don&#39;t gracefully degrade, so I was wondering what are other developers thoughts on this issue and what are you doing about it.  After all the accessibility of a website / app isn&#39;t really an optional thing as it&#39;s part of the law in many countries.

Maybe I&#39;m just being overly zealous on this subject, and not appreciating how far things have come in terms of accessibility.

Accessibility and all these JavaScript frameworks

Within an article-oriented page (such as a blog post), the `&lt;h1&gt;` element (level 1 heading) is commonly used to markup either:

  - the blog title (i.e. the often-large site title at the top of the page, _not_ to the `&lt;title&gt;` element), or
  - the article title

What is the best choice and why?

To the site owner, who may want to shout out to the world the name of their site/blog, using a level 1 heading around the site title might seem to make sense.

From the perspective of what you are trying to communicate to the user, the site title is of less relevance - the article content is what you&#39;re trying to communicate and all other site content is secondary. Therefore using `&lt;h1&gt;` for the article title seems best.

I feel the `&lt;h1&gt;` element should focus on the article title, not the site title or other content. This does not appear to be a popular convention by any means.

Examples:

  - [Joel Spolsky][1] uses `&lt;h1&gt;` for the article title, and an anchor for the site title
  - [Jeff Atwood][2] uses _no `&lt;h1&gt;` at all_, `&lt;h2&gt;` for the article title and an anchor for the site title
  - [37 Signals&#39; SVN][3] uses `&lt;h1&gt;` for the site title and an anchor for the article title

That&#39;s three different approaches across three sites where you might expect a strong consideration for correct semantic markup.

I think Joel has it right with Jeff a close second. I&#39;m quite surprised at the markup choices by the 37Signals people.

To me it seems quite a simple decision: what is of greatest relevance to the consumer of the article? The article title. Therefore wrap the article title in an `&lt;h1&gt;` element. Done.

Am I wrong? Are there further considerations I&#39;m missing? Am I right? If so, why is the &#39;`&lt;h1&gt;` for article title&#39; approach not more commonly used?

Is the decision of where to use the `&lt;h1&gt;` element as invariable as I put it? Or are there some subjective considerations to be made as well?

**Update**: Thanks for all the answers so far. I&#39;d really appreciate some angle on how the use of the `&lt;h1&gt;` for the article title instead of site title benefits usability and accessibility (or doesn&#39;t, as the case may or may not be). Answers based on fact instead of just personal supposition will get many bonus points!


  [1]: http://joelonsoftware.com/
  [2]: http://codinghorror.com/
  [3]: http://37signals.com/svn/

H1 in article page - site title or article title?

I have a website that has colored divs with numbers, e.g. a red block with the number 2 inside of it.  The color is important to understanding. A blind user emailed me asking if I could make it say &quot;2 red&quot; for his screen reader.

I tried adding this as an alt=&quot;2 red&quot; but he said that didn&#39;t do anything. He thinks it might only read alt tags for images.

Is there a good way to do this for divs?

All Accessibility Solutions on Gang of Coders

Total of 27 Accessibility Solutions

Is there an equivalent to the "alt" attribute for div elements?

Can we use any other TAG inside <ul> along with <li>?

Is it ok to use <strong> in place of <b> blindly?

input type="submit" Vs button tag are they interchangeable?