Questions tagged [accessibility]

Accessibility seeks to make an application or website usable by everyone, including people with disabilities such as visual, auditory, ambulatory, or cognitive impairment. *This tag should NOT be used for:* programming that requires "accessing" a process in multiple threads, a object in a class, a resource on a network, etc. or responsive design, which deals with serving content to a wide range of devices, unless there are also accessibility concerns.

Accessibility seeks to make an application or website usable by everyone, including people with disabilities such as visual, auditory, mobility or cognitive impairment. For example, usage of alt="description" text for graphic images on the web can help users with low-functioning vision.

Accessible design for the Internet is formally guided by the Web Content Accessibility Guidelines (WCAG), the Authoring Tool Accessibility Guidelines (ATAG) and the Web Accessibility Initiative's Accessible Rich Internet Applications standard (WAI-ARIA).

Accessible design may be required by law, notably Section 508 of the Rehabilitation Act of 1973 (USA) and the European Accessibility Act (Europe).

Other helpful resources are found at WebAIM.org.

Stand-alone software is made accessible by thoughtful design and APIs such as Microsoft UI Automation for Windows.

This tag should not be used for:

  • programming that requires "accessing" a process in multiple threads, a object in a class, a resource on a network, etc.
  • , which deals with serving content to a wide range of devices. (This can be closely related at times, but is generally a separate topic.)
7805 questions
74
votes
4 answers

iOS Voiceover status

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…
Arash
  • 1,286
  • 1
  • 8
  • 14
74
votes
14 answers

Get a Windows Forms control by name in C#

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…
user186249
71
votes
6 answers

What would be the best method to code heading/title for
    or
      , Like we have in ?
      What would be the best method to code heading/title of
        or
          ? Like we have
      in , and we don't want to make them bold. Is this okay?

      heading

      • list item
      • list item
      • list item
      Or…
      Jitendra Vyas
      • 148,487
      • 229
      • 573
      • 852
      71
      votes
      4 answers

      How can I add new line/linebreak character in title attribute in HTML

      I am using this Click here When someone hover over it I see all the text in one line. Is there any way to show it on new line?
      user26
      • 3,937
      • 5
      • 22
      • 22
      69
      votes
      4 answers

      How does role=form help accessibility?

      I have read that the role attribute was added to Bootstrap for accessibility, and I would like to know how
      helps accessibility. See http://getbootstrap.com/css/#forms-example for an example of this specific usage. I searched…
      user664833
      • 18,397
      • 19
      • 91
      • 140
      68
      votes
      6 answers

      In HTML, how can I have text that is only accessible for screen readers (i.e. for blind people)?

      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 "2 red" for his screen reader. I tried adding this…
      Some Guy
      • 12,768
      • 22
      • 58
      • 86
      67
      votes
      4 answers

      Accessibility and all these JavaScript frameworks

      I'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've always…
      64
      votes
      10 answers

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

      Screenreaders will read whatever string is set to the "alt" attribute. The use of this attribute is specifically for image tags. If I have a div like so:
      2
      Is there a way to have a screen reader pickup an…
      Kode_12
      • 4,506
      • 11
      • 47
      • 97
      60
      votes
      8 answers

      Two input fields inside one label

      Consider the following: Is this semantically correct since the W3C recommendations state that a label is associated with exactly one form control? Clicking…
      sqwk
      • 1,506
      • 2
      • 12
      • 13
      60
      votes
      8 answers

      H1 in article page - site title or article title?

      Within an article-oriented page (such as a blog post), the

      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 element), or the article…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/html" class="post-tag grid--cell" title="show questions tagged 'html'" rel="tag">html</a> <a href="../../questions/tagged/usability" class="post-tag grid--cell" title="show questions tagged 'usability'" rel="tag">usability</a> <a href="../../questions/tagged/accessibility" class="post-tag grid--cell" title="show questions tagged 'accessibility'" rel="tag">accessibility</a> <a href="../../questions/tagged/semantics" class="post-tag grid--cell" title="show questions tagged 'semantics'" rel="tag">semantics</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Nov 06 '08 at 12:20">asked Nov 06 '08 at 12:20</time> <a href="../../users/5343/jon-cram" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/5343.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Jon Cram" /> </a> <div class="s-user-card--info"> <a href="../../users/5343/jon-cram" class="s-user-card--link">Jon Cram</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">16,609</li> <li class="s-award-bling s-award-bling__gold" title="24 gold badges">24</li> <li class="s-award-bling s-award-bling__silver" title="76 silver badges">76</li> <li class="s-award-bling s-award-bling__bronze" title="107 bronze badges">107</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-2161337"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>58</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status answered-accepted"> <strong>11</strong> answers </div> </div> </div> <div class="summary"> <h3><a href="../../questions/2161337/can-we-use-any-other-tag-inside-ul-along-with-li" class="question-hyperlink">Can we use any other TAG inside <ul> along with <li>?</a></h3> <div class="excerpt">Can we use any other TAG in <ul> along with <li>? like <ul> Some text here or <p>Some text here<p> etc <li>item 1</li> Some text here or <p>Some text here<p> etc <li>item 1</li> </ul> </div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/css" class="post-tag grid--cell" title="show questions tagged 'css'" rel="tag">css</a> <a href="../../questions/tagged/xhtml" class="post-tag grid--cell" title="show questions tagged 'xhtml'" rel="tag">xhtml</a> <a href="../../questions/tagged/accessibility" class="post-tag grid--cell" title="show questions tagged 'accessibility'" rel="tag">accessibility</a> <a href="../../questions/tagged/w3c" class="post-tag grid--cell" title="show questions tagged 'w3c'" rel="tag">w3c</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Jan 29 '10 at 10:43">asked Jan 29 '10 at 10:43</time> <a href="../../users/84201/jitendra-vyas" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/84201.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Jitendra Vyas" /> </a> <div class="s-user-card--info"> <a href="../../users/84201/jitendra-vyas" class="s-user-card--link">Jitendra Vyas</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">148,487</li> <li class="s-award-bling s-award-bling__gold" title="229 gold badges">229</li> <li class="s-award-bling s-award-bling__silver" title="573 silver badges">573</li> <li class="s-award-bling s-award-bling__bronze" title="852 bronze badges">852</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-28472985"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>55</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status answered-accepted"> <strong>5</strong> answers </div> </div> </div> <div class="summary"> <h3><a href="../../questions/28472985/android-set-talkback-accessibility-focus-to-a-specific-view" class="question-hyperlink">Android - Set TalkBack accessibility focus to a specific view</a></h3> <div class="excerpt">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…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/android" class="post-tag grid--cell" title="show questions tagged 'android'" rel="tag">android</a> <a href="../../questions/tagged/accessibility" class="post-tag grid--cell" title="show questions tagged 'accessibility'" rel="tag">accessibility</a> <a href="../../questions/tagged/talkback" class="post-tag grid--cell" title="show questions tagged 'talkback'" rel="tag">talkback</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Feb 12 '15 at 08:48">asked Feb 12 '15 at 08:48</time> <a href="../../users/3503928/skywalker10" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/3503928.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Skywalker10" /> </a> <div class="s-user-card--info"> <a href="../../users/3503928/skywalker10" class="s-user-card--link">Skywalker10</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">939</li> <li class="s-award-bling s-award-bling__gold" title="3 gold badges">3</li> <li class="s-award-bling s-award-bling__silver" title="9 silver badges">9</li> <li class="s-award-bling s-award-bling__bronze" title="21 bronze badges">21</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-2243074"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>54</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status answered-accepted"> <strong>9</strong> answers </div> </div> </div> <div class="summary"> <h3><a href="../../questions/2243074/is-it-ok-to-use-strong-in-place-of-b-blindly" class="question-hyperlink">Is it ok to use <strong> in place of <b> blindly?</a></h3> <div class="excerpt">Note: I know <b> is presentational and <span style="font-weight:bold> is a better way, and <strong> and <em> are for emphasis but my question is not regarding this. Should we convert every <b> to <strong> blindly? Many people do this, they think…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/html" class="post-tag grid--cell" title="show questions tagged 'html'" rel="tag">html</a> <a href="../../questions/tagged/xhtml" class="post-tag grid--cell" title="show questions tagged 'xhtml'" rel="tag">xhtml</a> <a href="../../questions/tagged/accessibility" class="post-tag grid--cell" title="show questions tagged 'accessibility'" rel="tag">accessibility</a> <a href="../../questions/tagged/web-standards" class="post-tag grid--cell" title="show questions tagged 'web-standards'" rel="tag">web-standards</a> <a href="../../questions/tagged/semantic-markup" class="post-tag grid--cell" title="show questions tagged 'semantic-markup'" rel="tag">semantic-markup</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Feb 11 '10 at 08:15">asked Feb 11 '10 at 08:15</time> <a href="../../users/84201/jitendra-vyas" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/84201.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Jitendra Vyas" /> </a> <div class="s-user-card--info"> <a href="../../users/84201/jitendra-vyas" class="s-user-card--link">Jitendra Vyas</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">148,487</li> <li class="s-award-bling s-award-bling__gold" title="229 gold badges">229</li> <li class="s-award-bling s-award-bling__silver" title="573 silver badges">573</li> <li class="s-award-bling s-award-bling__bronze" title="852 bronze badges">852</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-38059140"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>53</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status answered-accepted"> <strong>3</strong> answers </div> </div> </div> <div class="summary"> <h3><a href="../../questions/38059140/when-to-use-the-disabled-attribute-vs-the-aria-disabled-attribute-for-html-ele" class="question-hyperlink">When to use the disabled attribute vs the aria-disabled attribute for HTML elements?</a></h3> <div class="excerpt">I'm trying to make a form accessible. Should I make my inputs have both disabled and aria-disabled attributes, or just one? <label for="textbox1">Input</label> <input id="textbox1" type="text" name="Text Box" disabled> Or like this? <label…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/html" class="post-tag grid--cell" title="show questions tagged 'html'" rel="tag">html</a> <a href="../../questions/tagged/accessibility" class="post-tag grid--cell" title="show questions tagged 'accessibility'" rel="tag">accessibility</a> <a href="../../questions/tagged/wai-aria" class="post-tag grid--cell" title="show questions tagged 'wai-aria'" rel="tag">wai-aria</a> <a href="../../questions/tagged/html-input" class="post-tag grid--cell" title="show questions tagged 'html-input'" rel="tag">html-input</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Jun 27 '16 at 16:43">asked Jun 27 '16 at 16:43</time> <a href="../../users/2127769/ralph-david-abernathy" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/2127769.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Ralph David Abernathy" /> </a> <div class="s-user-card--info"> <a href="../../users/2127769/ralph-david-abernathy" class="s-user-card--link">Ralph David Abernathy</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">5,230</li> <li class="s-award-bling s-award-bling__gold" title="11 gold badges">11</li> <li class="s-award-bling s-award-bling__silver" title="51 silver badges">51</li> <li class="s-award-bling s-award-bling__bronze" title="78 bronze badges">78</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-13273806"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>53</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status answered-accepted"> <strong>7</strong> answers </div> </div> </div> <div class="summary"> <h3><a href="../../questions/13273806/using-the-html-label-tag-with-radio-buttons" class="question-hyperlink">Using the HTML 'label' tag with radio buttons</a></h3> <div class="excerpt">Does the label tag work with radio buttons? If so, how do you use it? I have a form that displays like this: First Name: (text field) Hair Color: (color drop-down) Description: (text area) Salutation: (radio buttons for Mr., Mrs., Miss) I'd like…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/html" class="post-tag grid--cell" title="show questions tagged 'html'" rel="tag">html</a> <a href="../../questions/tagged/accessibility" class="post-tag grid--cell" title="show questions tagged 'accessibility'" rel="tag">accessibility</a> <a href="../../questions/tagged/forms" class="post-tag grid--cell" title="show questions tagged 'forms'" rel="tag">forms</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Nov 07 '12 at 16:20">asked Nov 07 '12 at 16:20</time> <a href="../../users/1128668/glenpeterson" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/1128668.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="GlenPeterson" /> </a> <div class="s-user-card--info"> <a href="../../users/1128668/glenpeterson" class="s-user-card--link">GlenPeterson</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">4,866</li> <li class="s-award-bling s-award-bling__gold" title="5 gold badges">5</li> <li class="s-award-bling s-award-bling__silver" title="41 silver badges">41</li> <li class="s-award-bling s-award-bling__bronze" title="49 bronze badges">49</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="s-pagination pager fr"> <a class="s-pagination--item" href="../../questions/tagged/accessibility_page=1" rel="prev" title="Go to page 1">Prev </a> <a class="s-pagination--item" href="../../questions/tagged/accessibility_page=1" rel="" title="Go to page 1">1</a> <div class="s-pagination--item is-selected">2</div> <a class="s-pagination--item" href="../../questions/tagged/accessibility_page=3" rel="" title="Go to page 3">3</a> <div class="s-pagination--item s-pagination--item__clear">…</div> <a class="s-pagination--item" href="../../questions/tagged/accessibility_page=99" rel="" title="Go to page 99">99</a> <a class="s-pagination--item" href="../../questions/tagged/accessibility_page=100" rel="" title="Go to page 100">100</a> <a class="s-pagination--item" href="../../questions/tagged/accessibility_page=3" rel="next" title="Go to page 3"> Next</a> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>