Working in Bootstrap and I have a row with two columns - image in one column, text in the other. All I want to do is hide the image on col-sm and col-xs devices. Is there a way to do this? All I've found is hidden-xs.
HTML
<section id="financialPlanning">
<div class="container">
<div class="row">
<div class="col-sm-4 col-m-12 col-lg-3 pull-left hidden-xs">
<p><p>
<img src="images/compass-img.png" alt="Retirment" class="img-responsive">
</div>
<div class="col-sm-8 col-m-10 col-lg-9">
<font size="5">FINANCIAL PLANNING</font>
<p>Financial planning is never a one-dimensional process. It entails coordinating numerous factors that touch
upon your investments, future income requirements, estate plan, tax situation and other key
considerations.</p>
<p>A strong financial plan gives you an objective view of your overall financial picture and provides you with
the guidance you need to enjoy a stress free retirement. Our Relationship Managers have the
experience, expertise, and resources to help you and your family create and implement a thoughtful
and disciplined financial plan.</p>
</div>
As per my understanding, you want to hide image on tablet and mobile devices.
To hide image on both devices you can use ".hidden-sm" (to hide in tablet) and ".hidden-xs" (to hide in mobile) classes.
Please see this http://getbootstrap.com/css/ post; in the "Grid options" section you can find browser related classes and in "Available classes" section you can see classes to hide content in different-2 devices.
Related
Here is an example using aria-describedby
<div role="application" aria-labelledby="calendar" aria-describedby="info">
<h1 id="calendar">Calendar</h1>
<p id="info">
This calendar shows the game schedule for the Boston Red Sox.
</p>
<div role="grid">
...
</div>
</div>
Say I changed to this:
<div role="application" aria-labelledby="calendar" aria-describedby="info">
<h1 id="calendar">Calendar</h1>
<div id="info">
<svg />
<div></div>
<div>
<p>This calendar shows the game schedule for the Boston Red Sox.</p>
</div>
</div>
<div role="grid">
...
</div>
</div>
Is screen reader like NVDA still announces This calendar shows the game schedule for the Boston Red Sox same as the first example?
Short Answer
The examples would both be announced as "calendar, This calendar shows the game schedule for the Boston Red Sox.** in the majority of screen reader / browser combos. This is assuming the SVG is handled correctly and the empty div you added is indeed empty (see end of this answer).
Long Answer
aria-labelledby would be announced first, with aria-describedby announced second in most screen readers.
They are not normally used together on the same element as both can contain a list of IDs to announce.
I would suggest that for ease of maintenance you change it to:-
aria-labelledby="calendar info", this would ensure reading order is consistent across all browser / screen reader combinations.
Although they would (should) be announced the same from your given example, this is assuming that you hide the SVG from screen readers with aria-hidden="true". It also assumes that the <div> you added is indeed empty (and not just a placeholder).
As an aside make sure you also add focusable="false" to your SVG to account for Internet Explorer users (otherwise they can focus the SVG). Nothing to do with the announcement issue in this question just a good practice.
I would suggest your second example should be marked up as follows to save a lot of hassle and to allow the SVG to be part of the document if you wish:-
<div role="application" aria-labelledby="calendar info">
<h1 id="calendar">Calendar</h1>
<div>
<svg focusable="false" aria-hidden="true"/>
<div></div>
<div id="info">
<p>This calendar shows the game schedule for the Boston Red Sox.</p>
</div>
</div>
<div role="grid">
...
</div>
</div>
Final thought
Do you really need the <h1 id="calendar" to be read out at all? Your description says "This calendar` at which point stating "Calendar" before is redundant.
Always try to avoid repetition.
If this is the case then you can simplify your example further to just have aria-labelledby="info".
Also one last observation role="application" is something that should be used sparingly as it causes all keyboard events to skip the screen reader and go straight to your application. Be very careful using this as in most circumstances it is not needed and can cause a lot of accessibility headaches. Here is a brief article that explains a bit more about the pros and cons of the role.
If you remove role="application" then the aria-labelledby may not work on a static div so replace it with an appropriate role.
I am having an issue with bootstrap grid framework within Wordpress. I am trying to create a grid. 2 Rows. First row is one column and second row is three columns with a little space in between them. The columns on the site are stacked as rows and not side by side. Bootstrap documentation says if you don't use something like sm-3 after col, then it will generate widths automatically.
Page in question: http://dev.dragonscaletech.com/our-story/
<div id="shoutOuts">
<div class="container">
<div class="row">
<div class="col">
<h1>Shout Outs!</h1>
</div>
</div>
<div class="row">
<div class="col">
<h4>The TitanTough21 Foundation</h4><br>
<p>An amazing foundation formed to find a cure for Li-Fraumeni Syndrome. Li-Fraumeni Syndrome is a rare genetic disorder that greatly increases the risk of developing several types of cancer, particularly in children and young adults. In addition,
they work hard to help families pay their cancer bills.</p>
<p>Learn more at: www.TitanTough21.org</p>
</div>
<div class="col">
<h4>47 Films</h4><br>
<p>A Digital Filmmaking Company based in Broward County, Florida.</p>
<p>Really, a great company with great people.</p>
<p>Learn more on Facebook: 47FilmsLLC</p>
</div>
<div class="col">
<h4>Seagull Services</h4><br>
<p>Assists individuals with life challenges by providing education, training, employment, residential services, community integration and support services.</p>
<p>We are working with Seagull Services to assemble a manageable quantity of Back Scratch Scrubbers for us!</p>
<p>Learn more at: www.SeagulServices.org</p>
</div>
</div>
</div>
The issue occurs because you are trying to use Bootstrap 4 syntax with Bootstrap 3 running on your site. Those 2 don't mix well.
Solution: Replace col with col-xs-4 in the second row and with col-xs-12 in the first row.
Alternatively, load Bootstrap 4 files on your site.
P.S. Remember that both the col class in Bootstrap 4 as well as col-xs-* in Bootstrap 3 are non-responsive i.e. those classes define what happens on the smallest screens and you probably don't want 3 columns on the smallest screens. So, adjust accordingly.
Searched quite a bit on google and discovered the container-fluid class. Then I searched Stack Overflow and found this post.
Bootstrap 3 adding gutters to the grid system
I modified the code to this and got exactly what I'm looking for! Thank you to all that gave me more things to check out.
<div id="shoutOuts">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1>Shout Outs!</h1>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="container-fluid">
<h4>The TitanTough21 Foundation</h4><br>
<p>An amazing foundation formed to find a cure for Li-Fraumeni Syndrome. Li-Fraumeni Syndrome is a rare genetic disorder that greatly increases the risk of developing several types of cancer, particularly in children and young adults. In addition,
they work hard to help families pay their cancer bills.</p>
<p>Learn more at: www.TitanTough21.org</p>
</div>
</div>
<div class="col-sm-4">
<div class="container-fluid">
<h4>47 Films</h4><br>
<p>A Digital Filmmaking Company based in Broward County, Florida.</p>
<p>Really, a great company with great people.</p>
<p>Learn more on Facebook: 47FilmsLLC</p>
</div>
</div>
<div class="col-sm-4">
<div class="container-fluid">
<h4>Seagull Services</h4><br>
<p>Assists individuals with life challenges by providing education, training, employment, residential services, community integration and support services.</p>
<p>We are working with Seagull Services to assemble a manageable quantity of Back Scratch Scrubbers for us!</p>
<p>Learn more at: www.SeagulServices.org</p>
</div>
</div>
</div>
</div>
you could use col-md-offset-2 class ass described here in Bootstrap 3, if you are using Bootstrap 4 there are no more Offset classes, so you should use auto margins because Bootstrap 4 use flexbox
this certainly solves your issue
I've got a 3x3 grid built with Zurb's Foundations framework and on load sometimes these boxes overlap each other. The number of image that load normally and the number that does not is completely random. Sometimes it's just one image, sometimes all of them, etc. It also happens more often when you view the website from http:// instead of locally. Just take a look at the image below.
The boxes are responsive, in such way they decrease in size when the browser gets smaller dan 1200px in width. Therefor a static height of each box isn't an option. They do remain the same ratio (4:3).
How do I make them not overlap each other?
I think the issue is the browser renders the boxes quicker than it can render each image- and therefor doesn't take the height into account.
My code for this part looks like this
<div class="row">
<div class="large-12 large-centered columns">
<div id="grid" class="row">
<figure class="small-6 medium-4 columns item" data-groups='["all", "app"]'>
<img src="images/portfolio/nos/sp-item.jpg" alt="img01"/>
<figcaption>
<h2><span>NOS</span></h2>
<p>5 maanden werken aan een nieuwe NOS app</p>
</figcaption>
</figure>
<!-- 8 more figures like the one above, each is one box -->
</div>
</div>
</div>
I think this is a classic case for a Foundation block-grid. Just change the class from large-3 to large-block-grid-3.
So your code will look like this:
<div class="row">
<div class="large-block-grid-12 large-centered columns">
<div id="grid" class="row">
<figure class="small-block-grid-6 medium-block-grid-4 columns item" data-groups='["all", "app"]'>
<img src="images/portfolio/nos/sp-item.jpg" alt="img01"/>
<figcaption>
<h2><span>NOS</span></h2>
<p>5 maanden werken aan een nieuwe NOS app</p>
</figcaption>
</figure>
<!-- 8 more figures like the one above, each is one box -->
</div>
</div>
You can learn more about Foundation block grid here
I added the .imageLoaded() jQuery plugin and configured it so that only when all images are loaded in the #grid then shuffle.js could load; a plugin that I use for shuffling/filtering the items.
Now, both on reload and clear-cache-full-reload, it works- and is showing correctly.
The problem was that if the plugin is fired before all/any of the image has been loaded, it just gives it a 10px height. Now, by firing the plugin after all images have been loaded, they get shown at their full height.
Strangely though, I applied this suggestion before I changed my grid to a block-grid, as suggested by #Asaf David, it didn't work. Now it does.
++ Credits to #Asaf David, for suggesting the block-grid, although I either can't confirm nor deny this helped. But at least it improved my code, imho.
Having seen the source of one of the Bootstrap Expo sites Tsaa Tea Shop I wonder if what they have done, adding semantic HTML5 tags in between BS classes, would give the site a better semantic value?
Considering they use the section element quite a bit, can this be seen as an accepted and good use of HTML5 tags/elements alongside BS?
Here a short excerpt:
<section class="about-us block">
<div class="container">
<div class="row">
<div class="col-md-8 text-center">
<h2 class="section-title">Welcome</h2>
<span class="fa fa-leaf"></span>
</div>
</div>
</div>
</section>
<section class="quote block">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>"We loved our relaxing time with great food and beverages..."</h2>
</div>
</div>
</div>
</section>
At the moment I am starting work on a smaller project and have something along the line of a simple one-page layout in mind.
Would it do any good in consideration of semantics to follow this approach?
The Bootstrap is unsemantic by default
Twitter Bootstrap is one of the most unsemantic frameworks on the market. If you put to your code classes like container, form-control or col-sm-2 you just can't be semantic.
But sometimes you don't want to be. You want to be readable, practical and maintainable — and that's why it is made for and it's great in it.
HTML5 tags
Yes, yes. We have all these new, sexy, useful, years-needed HTML5 tags like: article, section, nav, main, header, footer or details… But let's face truth — the section sucks almost as much as usuall div.
Semantic of the section is almost zero. God - it's a tag with display:block that is called "section". The biggest (and maybe only) advantage of it is improving of readability, not the semantics. And that's enough.
Why to still use the new HTML tags
Because:
It's more readable.
It's easier to debug.
It's more modern.
It's a bit more meaningful and consequential.
So, if you face the decision — to use or not to use HTML5 tags, do anything, but do not continue in this div-cancer-that-is-the-web-built-on.
… even minified version of new tags is more readable:
<article><section></section><section></section><aside></aside></article>
<div><div></div><div></div><div></div></div>
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.