screen-readers

问题 I have a div like this: <div class="whatever">17:03</div> And when someone using a screen reader hovers over that text, I'd like it to read "17 minutes and 3 seconds" What's the standard practice for doing this? 回答1: You can include some additional text for screenreader only: <div class="whatever">17<span class="sr-only"> minutes and </span>:03<span class="sr-only">seconds</span></div> and CSS (taken from Bootstrap 3) .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin:

问题 I'm working on an accessibility task for a mobile web app (HTML+Angular+ARIA). I tested some potential ways: aria-flowto and aria-owns , not working for web page tabIndex , not working In my local test with iOS 9.2.1 Safari, the default screen reader is linear way from top. Is there a way I can define elements reading order? Like what aria-flowto is doing. 回答1: aria-flowto is supposed to provide this sort of functionality (and it is the only proposed way to do so) but it has not been

问题 What is preferred accessible and semantically correct method to code this type of data design? Table UL, LI DIV,SPAN For icons should i use for each place or i should is icon from CSS sprites? If we use css sprite here then how to code, and what will happen when images will be disabled ? Every link will open in new window and I have to indicate about file size also for both sighted and blind users? So what is the best method to make this design and what is best method to show icon and to

问题 I have a link within an unordered list as follows: <li class="savelink"> <a href="/save"><span>Save</span></a> </li> Normally the screen readers read "Save". Is it possible, and with which attribute, to change that without changing the actual link text? The business need is to have a link, styled with an icon. The icon will be complementary to the link text. For example: An icon of a "+" sign and a link text "menu" that is equal to the "add menu item" action. I tried aria-label, with no

问题 I'm currently trying to make a DOM element with one to several child elements as accessible as possible. The element will contain illustrative content using background images in several layers. I'm currently using a child element for providing the image description as described in this informative blog post about how to label illustrative content inside of a content group. The container element may also contain other child elements containing text content. An example element would currently

问题 I'm trying to have Screenreaders (I'm testing with NVDA) read out the AutomationProperties.Name and AutomationProperties.Helptext of the focused Controls. However all it does is saying "MAINWINDOW", when I focus the Application. <Window x:Class="AutomationPropertiesTest.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="394" Width="307" > <Grid> <Label Content="Summand" Height="28"

问题 I am trying to make the screen reader (NVDA) to read my currency value (US dollar) $47.49 as "47 Dollars 49 Cents", but the screen reader is reading my currency value as "Dollar 4749". <div class="perVendorCarDetails"> <span class="carCurrencySymbol">$</span> <span class="carPriceDollar">38</span> <span class="carPriceDot">.</span> <span class="carPriceCents">57</span> </div> 回答1: Your example is spoken by NVDA/Firefox as "dollar thirty-eight dot fifty seven." This is not good. If you just

问题 I'm wondering about screen reader accessibility using Twitter Bootstrap framework and FontAwesome icon fonts. I'm looking at 2 different icon situations: 1) The icon has helper text that a screen reader will pick up: <a href="#" class="btn btn-default" role="button"><span class="fa fa-pencil"></span> Edit</a> 2) And a standalone icon without any helper text: <a href="#" class="btn btn-default" role="button" title="Edit"><span class="fa fa-pencil"></span></a> Ideally, in both situations, a

问题 If for presentational purposes one needs to separate a word with span s or other inline elements, does a screenreader still read the whole word? Example: <code>span</code>s or Forscher<span class="gendered">In</span> 回答1: Generally screen readers don't pause in this case. However, if a user enables font changes and/or colors reporting, it might cause interruptions like this: Consolas span Arial s for <span> s. That's because the code segments are rendered with Consolas font here at

问题 I want to ignore text inside the button when Jaws reads, My Code is : <span style="display:none;" id="text1">Hai</span> <button aria-labelledby="text1"><span>firstbutton</span></button> But Jaws reads as Hai first button Thanks in advance 回答1: This markup is announced at 'Hai button' in Voiceover OSX 10.8.4, ChromeVox 1.29.1, and JAWS 14. <button aria-label='Hai'> <span aria-hidden='true'>firstbutton</span> </button>` 来源： https://stackoverflow.com/questions/18209327/to-avoid-screen-reader