Been testing an accessibility modal window, it works as expected with JAWS 13 on IE8. However when I use NDVA and test on IE8 or Firefox, the focused content is not read.
When the modal is displayed it has aria-hidden="false" while the rest of the content on the page has aria-hidden="true".
This code works ("read at start" is read first on focus):
<div id="modalContent" aria-hidden="false">
<h2>Some Text</h2>
<div class="offScreen" id="first-focus">read at start</div>
<p> asdf as df asdf asd fasdf</p>
</div>
But this code does not ("read at start" is not read when given focus):
<div id="modalContent" aria-hidden="false">
<div class="offScreen" id="first-focus">read at start</div>
<h2>Some Text</h2>
<p> asdf as df asdf asd fasdf</p>
</div>
Keeping the working code and putting something that isn't really read, like a "." and changing the h2 to a span provides a workable solution.
Related
I'm working a little dashboard app for one of our internal systems, and opted to add a full-screen overlay when something is loading. It all works fine in Chrome, but on Edge I get something to this effect...
As far as I can tell its caused by having the fa-spin class on my main loading indicator as well as the overlay being transparent. I've removed fa-spin, Edge still has a few weird side effects (that I can live with), but it exacerbated by having the spin effect active.
Questions:
Has anyone encountered this before as my google attempts are returning seemingly futile results. Is there even a fix / work around for this, or is it just Edge being Edge...
Even though I'd love to opt and say to our users to not use Edge / IE, I'd feel like I'm giving up which isn't an option :P
HTML structure (More or less)
<div class="container-fluid" ng-class="{ 'overlay' : vm.isLoading }">
<div ng-if="vm.isLoading">
<div class="overlay-modal">
<p><i class="fa fa-gear fa-spin"></i>
</p>
</div>
</div>
<div class="col-md-7 main">
<div class="container-fluid">
<div class="row">
<div class="row">
<div class="col-md-12 container-fluid" ng-class="{ 'blur' : vm.isLoading }">
...
</div>
</div>
<div class="row">
</div>
</div>
</div>
</div>
<div class="col-md-5">
...
</div>
</div>
I've just tried on my dashboard application using fa-spin and I can assure you that it didn't caused my issues. I've tried fontawesome both from cdn and embedded in my static files. Most probably that weird effect is caused by a number of overlapping CSS/JS styles/class toggling. I hope this answers your question.
For designs similar to this the image card used on Materialize: http://materializecss.com/components.html#
Screenshot: http://i.imgur.com/zvncUFz.png
Should I be using roles of a group or listbox for properly describing the content? I'm a tad lost reading through the aria accessibility specs.
Basic Structure:
<div class="card">
<div class="card-image">
<img src="images/sample-1.jpg">
<span class="card-title">Card Title</span>
</div>
<div class="card-content">
<p>Card Content</p>
<a href='#'>Authors</a>
</div>
<div class="card-action">
This is a link
</div>
</div>
Side question on possibly how to deal properly addressing the links for multiple authors.
I would consider this to be a figure with a figcaption.
I would mark this up as follows(in Jade):
figure
div.card-image
img(src="", alt="If needed, any descriptive text here will be spoken by a screen reader, but will not be visible")
span.card-title Card Title
figcaption Anything within this figcaption tag will automatically be spoken by the screen reader
a.card-action(href="#") This is a link
In this case, there is no need at all to use any ARIA attributes. All that is needed is semantic markup. I hope this helps.
I'm new to web dev and I'm working with Twitter Bootstrap right now. I am trying to create 3 columns on my page using this code:
<div class="container">
<div class="row">
<div class="span4">
<h4 class="muted text-center">About me</h4>
<p>Sample Text1.</p>
<i class="icon-user"></i> Text1
</div>
<div class="span4">
<h4 class="muted text-center">About you</h4>
<p>Sample Text2</p>
<i class="icon-star icon-white"></i> Text2
</div>
<div class="span4">
<h4 class="muted text-center">About Us</h4>
<p>Sample Text3</p>
Text3
</div>
</div>
</div>
I've looked at numerous examples and tested it on my page but they don't seem to work.
This code outputs all the text one above the other and doesn't divide it into columns in the same row.
Do I need to alter the bootstrap.css file in some way? The default one doesn't contain a span4 class or anything.
Assuming you might have fumbled up with the library you are using for bootstrap and the syntax. (happened to me a while back)
As of bootstrap 3.0...spanX have been depreciated,instead,col-xx-## is used now where xx can be lg, md, sm or xs and # ranges from 1 to 12
so in above html markup of yours change <div class="span4"> to <div class="col-xs-6 col-md-4"> and it should work
see the demo here
see docs here on how to use it
Also, if you are using ver 2.xx of bs...i'll suggest you to move to latest 3.0 on which this solution is based!!
I think you’re using Bootstrap 3 with the classes of Bootstrap 2. Grid class names have changed in the last version, see the documentation.
How do I make a VoiceOver on Mac read the aria-label (or another aria- attributes) with no conflict with tabindex?
I am trying to provide some accessibility stuff to a search result page with the structure like this
<div class="header">
<input value="" name="search" type="search"/>
</div>
<div class="main">
<div class="adv-block">
Link to adv 1
Link to adv 2
</div>
<div class="search-result">
Search result 1
Search result 2
</div>
</div>
First, I want a user with tab navigation skip advertisments, so I provide tabindex for and input and then for the search results, like this.
<div class="header">
<input value="" name="search" tabindex="1" type="search"/>
</div>
<div class="main">
<div class="adv-block">
Link to adv 1
Link to adv 2
</div>
<div class="search-result">
Search result 1
Search result 2
</div>
</div>
But then I would like to help screen reading programme (in my case a VoiceOver on Mac) to read the zones correctly. So, I mark the search results contaiter with its role and description.
<div class="header">
<input value="" name="search" tabindex="1" type="search"/>
</div>
<div class="main" role="main" aria-label="Search results">
<div class="adv-block">
Link to adv 1
Link to adv 2
</div>
<div class="search-result">
Search result 1
Search result 2
</div>
</div>
The problem is that VoiceOver also navigates according to tabindex and it goes from the input directly to the first link.
I tried to cheat with adding a tablindex attribute to the container
<div class="header">
<input value="" name="search" tabindex="1" type="search"/>
</div>
<div class="main" role="main" aria-label="Search results" tabindex="2">
<div class="adv-block">
Link to adv 1
Link to adv 2
</div>
<div class="search-result">
Search result 1
Search result 2
</div>
</div>
But this cases changes for a usual tab navigation.
So, is there a way to make VoiceOver read that a user proceeded to a search result zone?
Please be very careful when trying to force a particular navigation style, as tabbing is not the only (or even primary) method of navigating with a screen reader.
Most of the time a screen reader user would use 'browse' navigation to read the content. On VoiceOver this is cntl-alt-right arrow, in Jaws/NVDA it is just down-arrow.
Browse mode will go through all content, not just form controls and links. Browse mode is not affected by tabindex.
The problem with tabindex is that it over-rides the default (code) order, which can be very confusing when it doesn't match the browse order. This is more obvious when there are other things in the page, and then you skip chunks of content and go to the lowest tabindex.
I would recommend something like:
<header role="banner">
<div class="header" role="search">
<label for="search" class="hidden">Search</label>
<input value="" name="search" type="search" id="search">
</div>
</header>
<div class="adv-block">
Link to adv 1
Link to adv 2
</div>
<main role="main" id="main" aria-labelledby="results">
<h1 id="results" class="hidden">Search results</h1>
<div class="search-result">
Search result 1
Search result 2
</div>
</main>
NB: I am assuming there will be other stuff to go into the header, otherwise it wouldn't be worth using the header with banner role.
Typical ways that people using screen readers get to the 'content' are:
Arrow down through everything, time consuming but reliable.
Skip by heading (cntl-alt-cmd-h in VoiceOver), and the main heading 1 is a good indicator of the primary content of the page.
Open the landmarks dialogue (cntl-alt-u and then left/right to find it in VO) and go to the 'main' landmark.
Tabbing through links, and consistency trumps efficiency here.
Overall I would recommend against trying to manipulate the tab-order, and make sure you provide good headings, landmarks, and maybe a skip-link if you really need to provide a short-cut. This applies to Windows based screen readers as well.
The current w3 accessibility standard says to try to avoid using positive tabindex values. It is best practice to layout your dom so that you can simply use tabindex=0 for everything that should be tabbable to.
I've put together this small little piece but I'm having problems with the renderings below IE9.
I've been going over a bunch of tutorials and have even tried a version of the "html shiv" technique, but to no avail.
I'm not sure what the problem is. I cross tested it and it works in pretty much every browser minus IE8 and below. I'm just curious if I'm going to have to rework an entire style sheet for the IE8 and less bunch or if I'm just missing something.
In IE8/IE7/IE6 the hover states for the buttons work, but it's as though all of the boundaries disappear.
http://www.brodieyazaki.com/matt_tiles
is a live working version.
Here's the HTML (I would include the CSS but it's long, but you can view it in developer tools sorry for the inconvenience).
<section id="tile">
<button id="toggle_button"></button>
<section id="tile_content">
<figure id="tile_content_figure" class="clearfix">
<img src="imgs/tile_pic.png">
<h1>
“Siri's Default Settings Leave
Your iPhone 4S Exposed”
</h1>
</figure>
<div id="tile_content_link">
<p id="from_in">
From nytimes.com in arab spring
</p>
</div>
<div id="tile_content_comment" class="clearfix">
<img src="imgs/user_img.png">
<p>
"This is the basic version of the tile"
</p>
</div>
</section>
<footer id="tile_foot">
<div id="foot_wrap" class="clearfix">
<figure class="like_view">
<img src="imgs/like.png">
<span>10</span>
</figure>
<figure class="like_view">
<img src="imgs/view.png">
<span>100</span>
</figure>
<article id="social" class="clearfix">
<button id="facebook"></button>
<button id="tumblr"></button>
<span>share</span>
</article>
</div>
</footer>
</section>
Just looking to get pointed in the right direction. I know that the CSS has features that IE8 and below won't pick up, but the head scratcher for me is that it's as though the style sheet in its entirety is broken.
please help, and thank you
< ie9 doesn't understand your html5 elements: article, footer, section, figure; offhand i'd just go ahead add html5.js and then turn them on in your css:
article,figure,section,footer{display:block}
i think that should fix what you are talking about
You have lots of duplicate id's. id's must be unique per element or a browser may ignore subsequent instances of the id. You should also declare a document encoding, among other HTML Validation errors...
http://validator.w3.org
Your site is more likely to work as expected, in all browsers, when its HTML code is fully compliant.