I'm facing a scenario where I need to tell screen readers to read content in order in a specific section only given that the HTML mark up is not in order.
Here is the HTML
<!-- Everything above this section -->
<div class="section-of-concern">
<div id="div2" style="float: right"></div>
<div id="div1" style="float: left"></div>
</div>
<!-- Everything below this section -->
The browser renders this markup and puts div1 to the left and div2 to the right. But screen readers think that div2 is coming first since the markup for it is coming first. I was wonder if there is a way to correct this with some attributes rather than changing the entire design.
Until the AT and browser vendors provide full support for the aria-flowto attribute, your only solution is to change the DOM order to reflect the visual order and modify your CSS so that your visual presentation remains the same.
Maybe you can use the tabindex. The tabindex attribute can be used to include additional elements in the tab order and to set programmatic focus to them to order the elements, for example:
tabindex="X" (where X is a positive integer between 1 and 32768)
For more information: http://www.w3.org/TR/2009/WD-wai-aria-practices-20090224/#focus_tabindex
Related
In the Bootstrap 3 documentation they give the following example of using push and pull classes to change column ordering (http://getbootstrap.com/css/#grid-column-ordering):
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
I understand how this works but why would you not just write the order in which you want them to appear in your HTML, like this?
<div class="row">
<div class="col-md-3"> ... </div>
<div class="col-md-9"> ... </div>
</div>
I can't see any possible use case for the example they give, because whether the order is col-md-3, col-md-9, or col-md-9, col-md-3 you're still not going to gain any more or less width on any device - they still add up to 12. Therefore why not just define it in the HTML in the correct order?
I understand how the classes work technically. But I don't understand what the use case of them could possibly be since they don't appear to do anything you cannot do already by defining things in the order you want? Essentially you can't gain any more or less viewport width on a given device, so where would you ever want to do something like this?
Column ordering classes allow us to change the order of our grid system based on different browser sizes. This means that on a large screen, you can have a different grid than on a mobile screen.
You can check this for example,
https://scotch.io/tutorials/reorder-css-columns-using-bootstrap
why would you not just write the order in which you want them to
appear in your HTML
It's because when we write markup we're supposed to think of its semantics too.
For example you have a page which has a sidebar on the left side, and an article on the right side. In your markup hierarchy the article should comes before the sidebar because the article is the main page content.
But then if you float them left, the article will be on the left side and sidebar will be on the right side, which is the opposite of what you want to achieve. So to fix this you will use push and pull classes, you get the idea.
This is just an example. Of course other options are available to achieve the same result such as float them right, or place the sidebar markup before article but wrap it with <aside> element.
I'd like to ask can this code be correct from Bootstrap point of view? I expect the answer is yes. The question is about additional tag in between row and col(s).
<div class="row">
<something>
<div class="col-sm-6">
a
</div>
<div class="col-sm-6">
b
</div>
</something>
</div>
P.S. <something> has no css styles and that's a directive from AngularJS.
There is nothing wrong here, but there are better practices on using bootstrap.
Just take care of minus margins and clearfix, check if the style flow its ok.
By the way, you can use "comment directive" if u need to use that something tag just for angularJs directive.
From the Bootstrap docs..
Content should be placed within columns, and only columns may be
immediate children of rows.
The Bootstrap row has a negative margin to compensate for column padding. <something> doesn't specifically cause a problem in your example, but it's incorrect from a Bootstrap standpoint.
In that code, the something tag will simply be given the entire 12 column width of the row div. The internal elements will then be split into the relevant grids as long as there is nothing on the something tag which would interfere.
I think this should work fine, but as a sidenote I would normally write this as
<something>
<div class="row">
<div class="col-sm-6">
a
</div>
<div class="col-sm-6">
b
</div>
</div>
</something>
That way then gives you the option to add more rows etc into the something section easily if needed, and just aids readability in my humble opinion.
In this case row basically has the same purpose as col-md-12, but row will give you a margin of -15px to both left and right. To avoid a horizontal scroll-bar you can wrap the whole thing in a div with the class container.
looks good to me but i think according to your "something" element it can vary
Is it possible to prevent the effect of ng-show on a specific child element.
Lets say I have the following html.
<div ng-show="showParent" class="parent">
<div class="childOne"></div> <!-- don't hide this -->
<div class="childTwo"></div>
</div>
Now what I would like to achieve is hiding everything except childOne. Actually hiding a parent, but one or some of its children?
No, you can't. The HTML standard prevents that. All children get hidden when the parent gets hidden, and AngularJS just adds things to HTML, it doesn't change it.
However, AngularJS allows one variable to control multiple elements, and can probably help us get the same affects you want. So let's go back to what you are really trying to accomplish. To do this, we're going to need some more details that you took out in this question to make the question smaller (and thank you for that). What about just hiding childTwo is not working for you? Are there other things in parent you need to hide? We can put those in seperate elements (div or span or something) and hide those with the same variable as we hide ChildTwo. Does parent have some formatting (say, a border or something) you need to hide? We can change what classes are on parent based on the same variable we use to hide the other elements to something that removes the border and any other styling, effectively making it not visible, although still technically present in the DOM.
ngShow relies on a CSS class (.ng-hide). You may be able to override that class with your own more specific selector for just the divs you want excluded from the directive.
<div class="parent" ng-show="showParent">
<div class="childOne nghide-override"></div>
<div class="childTwo"></div>
</div>
Source: https://docs.angularjs.org/api/ng/directive/ngShow
(I'm unable to test this right now, but I'll mock something up shortly and edit/remove this if it doesn't work.)
You could also just split the children out into divs and hide the second div:
<div class="parent">
<div class="shown children">
<div class="childOne"></div>
</div>
<div class="hidden children" ng-show="showParent">
<div class="childTwo"></div>
</div>
</div>
Use Jquery unwrap.
Include jquery in your application:
bower install jquery --save
Set on ready unwrap to specified div:
<script type="text/javascript">
$(document).ready(function() {
$(".childOne").unwrap();
});
</script>
I'm wondering if anybody knows the meaning of this tag I found in a valid html file I've downloaded.
<div style="clear: both;"> </div>
Thanks for help in advance.
It clears the floats from both left and right in order to bring the content after it back into the main flow of the page.
Official definition.
The technique is known as a "spacer div" - the article is now ten years old and at the time this was a good solution to a common problem. It typically appears in scenarios like this:
<div class="container">
<div style="float:left">
...
<div style="float:left">
...
</div>
<div style="clear:both"> </div>
</div>
The inner divs are floated - if you simply left out the "spacer div" the container element would not completely enclose its contents (unless you float it itself, which is often impractical). The is needed in some older browsers (you know which one) to ensure it behaves as expected in all situations, i.e. a simple <div style="clear:both"/> didn't always work - you really needed a div with actual (though invisible and nonsensical) content to make it work everywhere.
It's a working solution to a common problem, but there are more elegant ways to solve this, e.g. using the :after CSS pseudo class. This is more elegant because it doesn't require us adding semantically worthless markup elements that are just there for styling purposes. Another great article with a different solution.
This tag will not allow any float to be place either left or right of this tag.
When writing HTML, what is the industry standard regarding a Container div?
Is it more popular to have a Container id, or use a container class which I add to the divs I wish to inherit the features?
For example:
<body>
<div id="container">
...etc
</div>
</body>
or
<body>
<div id="main" class="container">
...etc
</div>
</body>
I don't know that there is an industry standard. If it's a container, you should have only one so an ID makes sense. You can use classes and IDs however you see fit, the bigger challenge is having cleanly-written, well-stacking rules that apply to the design you're working with.
Edit: Your question just updated -- it'd be better to have id="container" and then class="home", class="about", etc. as needed. This would make for a neater stylesheet and would give you the option of simply overwriting #container rules if you need to.
Setting an id of container would be most appropriate because you should only have one container. Setting the class = container would imply that more than one container existed. Since a container is designed to wrap all of your page content you should only have 1.
Giving an element an id, implies that that element is unique.
In your case, a container div is usually unique and therefore an id would do.
A class is used when you want multiple items to have the same styling.
Giving different items the same id, is a violation to the w3c standards.
I think this is something you should decide for yourself, I've always used the above way.
HTML document can have several containers, all sharing some style and each with some unique style.
So best practice is giving each both class and ID:
<div id="Header" class="container">
...header goes here...
</div>
<div id="Menu" class="container">
...menu goes here...
</div>
<div id="Contents" class="container">
...main contents come here...
</div>