WCAG 2.0 is divided into three conformance levels (A-AA-AAA) because the success criteria are organised based on the impact they have on design or visual presentation of the pages. The higher the level, the more restraining it becomes on design. For example, let’s take guideline 1.4 (Distinguishable), which is about making it easier for users … Read more
I note the question is tagged WCAG and “accessibility”. The answer to your question is therefore “don’t do that.” The other answers on this page will all work fine, for everyone except the people who need it to work, i.e. those using screenreaders or other assistive technology. None of the javascript-based solutions here are WCAG … Read more
The best solution I could come up with was using role alert, and aria-busy=”true”. <div id=”loading” style=”display: none;”> <div class=”mgBot15″><span class=”txt16″ role=”alert” aria-busy=”true”>Working…</span></div> <img src=”https://stackoverflow.com/questions/38704467/loading.png” alt=”loading” /> </div>
Not sure why nobody has mentioned visibility: hidden yet. Setting display: none can in some cases mess up logic when dealing with dimensions of non-visual elements. visibility will persist the dimensions just like opacity: 0 would do, but also disable any tabbable children. Example: <div style=”visibility: hidden;”> <a href=”#”>I’m only tabbable if my parent is … Read more
You should probably not try to do anything special even if you could detect that a screenreader is running. Even if you get it right for one group of screenreader users, you may get it wrong for another group. It’s best to concentrate on writing good clean HTML5 in the first place. Note that not … Read more
You might find the Experiences of a Blind Computer Scientist a good read. MIT’s Open Courseware would be a good resource for you with the amount of videos/audio they have. Really though, for the core computer-science topics I find it pretty hard to beat some of the better textbooks out there. Some offer digital versions … Read more
In HTML5 it’s only defined that aside is “related to the content around the aside element”. In HTML 5.1 (CR) the definition became more specific, as it now says that aside is “related to the content of the parenting sectioning content“. Following the newer definition, the aside element should be inside of the section element … Read more
You can use announce for accessibility option in this case. anounceForAccessibility added in API level 16 public void announceForAccessibility (CharSequence text) Convenience method for sending a AccessibilityEvent.TYPE_ANNOUNCEMENT AccessibilityEvent to make an announcement which is related to some sort of a context change for which none of the events representing UI transitions is a good fit. … Read more
Officially it should be used only for menus or sub-menus, from the ARIA spec 1.0: Indicates that the element has a popup context menu or sub-level menu. The Whatsock style guide covers this under the ‘modals’ section: It might sound like a good idea to notify screen reader users that a ‘Popup’ is attached by … Read more
When John Foliot wrote that article in 2012 it was very much true. You needed both. Today that is no longer the case. I can take your example, put it in a CodePen, and check it in JAWS and NVDA (sorry, no VoiceOver today): <label for=”textbox1″>Input</label> <input id=”textbox1″ type=”text” name=”Text Box” required> You will be … Read more