wai-aria

问题 Using Bootstrap modal, I've seen these aria attributes a lot, but I never knew how to make use of them. Does anyone know what cases to use these attributes? I googled—just didn't find any straightforward answers. 回答1: HTML5 ARIA attribute is what you're looking for. It can be used in your code even without bootstrap. Accessible Rich Internet Applications (ARIA) defines ways to make Web content and Web applications (especially those developed with Ajax and JavaScript) more accessible to people

问题 Is it possible using VoiceOver on the iPhone to announce the updated text on a label if it changes? This would be analogous to a live-region in ARIA. Thanks. 回答1: You can make VoiceOver announce any text you like with: UIAccessibilityPostNotification(UIAccessibilityAnnouncementNotification, @"Your text"); If a label should announce its text as soon as it is updated, simply extend the UILabel and override the setText method. The .h File: @interface UIVoicedLabel : UILabel { } @end And its

问题 Screen reader not reading this div: <div tabindex="7" aria-label="Here be redundant or extraneous content" > It should read "Here be redundant or extraneous content" Any help how to solve this problem with HTML? 回答1: A div is neither landmark nor interactive content. An aria-label will not be read by a screen reader (and rightly so). Use an off-screen technique: <div class="sr-only"> Here be redundant or extraneous content </div> The CSS might look like this (accounting for RTL languages too)

问题 This question already has an answer here : HTML5 main element versus ARIA landmark role=“main” (1 answer) Closed 5 years ago . A quick question, if I'm using within my markups 'main' am I still obligated to use 'role' attribute? For example, should I use: <main> or <main role="main"> ? 回答1: The main element has the main role by default. You are allowed to explicitly set the role attribute with this value, but it’s not recommended: In the majority of cases setting an ARIA role and/or aria-*

问题 As I understand it's not recommended to add duplicate roles to an element: <nav role="navigation"></nav> This is redundant because nav tells the screen reader what the semantics of content is already. So far so good. Now I want to invalid a form field. I understand that classical I should transform this: <input type="text" name="username"> … into <input type="text" name="username" aria-invalid="true"> … after form submission. However, we are using JavaScript and the HTML5 constraint

问题 I recently noticed a very weird problem with VoiceOver's web navigation on tabs and tab panels. In particular, if the wrapper wrapping the tabs and tab panels has attribute aria-label set, then VoiceOver navigation cannot navigate to tab panel when switching tabs. The problem may be hard to describe by words, thus I created this fiddle to demonstrate. Notice that the outside wrapper div has aria-label="Wrapper" . Below are the steps to recreate the problem: Run the jsFiddle to get the result

问题 I'm working on fixing some accessibility issues on a web page. I have this div that acts as a dialog, and inside at one point a div containing a loading animation and a text "Working..." is displayed. I am unsure as to how to label these two items in order to correctly notify the blind user that there is a progress animation and that it's working and he should wait. <div id="loading" style="display: none;"> <div class="mgBot15"><span class="txt16" role="alert">Working...</span></div> <img src

问题 I am getting this error Error: Bad value radio for attribute type on element input. when trying to validate the following HTML on https://validator.w3.org/nu/#file <fieldset> <p class="city" id="citypref">Generally, I would prefer to live in...</p> <br> <label for="la" id="laLabel"> <br> <input type="radio" name="city" id="la" value="la" aria-required="false" aria-labelledby="laLabel" role="radiogroup" >Los Angeles, California</label> <br> <label for="boston" id="bostonLabel"> <input type=

问题 Is there any lightbox solution (along the lines of Fancybox, etc.) that is both accessible (VoiceOver & JAWS, etc., compatible, with perhaps WAI-ARIA roles) and mobile-friendly? Bonus points for being a jQuery plugin. 回答1: It might be too late for you but I'll answer for people who may land here from Google search: recently I used NETEYE Touch-Gallery and it worked pretty well, at least on iPhone and Android. 回答2: I am making the same research at the moment to integrate into our project! I

问题 I would like to get some advice on WAI-ARIA markup I have added to my paginated post navigation. Does this look correct, am I missing anything? Should anything be added/removed to the current page link (#2)? Also, curious on my "Page Count" and "View All" sections what if anything can be added to make it more ARIA-friendly. <nav role="navigation" class="post-navigation"> <ul role="menubar" class="pagination"> <!-- Page Count --> <span class="page-count">Page 2 of 4 </span> <li aria-label=