See place 1,2 and 3.
<body>
<Place 1>
<div id="container">
<Place 2>
<div id="header">
<Place 3>
<div id="logo">
</div>
</div>
</div>
</body>
'Skip to content' and 'Skip to menu' links should be placed before any other link or text. It doesn't matter if there are 15 opening div before them.
The relevant Technique for WCAG 2.0 is G1: Adding a link at the top of each page that goes directly to the main content area
I prefer on the top. In this case, it is more useful.
See following sample
http://www.w3.org/WAI/
http://websitetips.com/
It will no doubt vary from site to site, but I would put it before the navigation.
That way a screen reader can read out 'Skip to content' before it has to go through the main navigation list and say things like 'About Us. Links. Contact Us.' etc
Shouldn't place it at all -- place your content first in the HTML file, and put navigation/spammy stuff afterwards.
(I know a lot of places find this difficult in practice, but if you're going for screen reader/text-only browser support, you might as well go all the way)
Related
My question is probably based on a bad design. However, I can't change that and need to work with it. This is the visual draft I'm talking about, it's just a part of a full website:
As you can see there's a title of an article with a background image, then a breadcrumb toolbar and finally, the articles content. Now, usually, if there wouldn't be the breadcrumb toolbar you could simply wrap it into an <article>. But the breadcrumb divides the article in a "pre" article and a main article part. The only "clean" HTML5 way would be to wrap the article including the header with background image into an <article> and position the breadcrumb into the target visual position. However, I'm classifying this as "hack" and I'm searching a better way.
What would be the preferred markup for this scenario?
There won't be any perfect the solution for the current requirement.
As pointed out by comments to the previous answer, the nav is not related to the article.
Also, WCAG instructs that :
1.3.2 Meaningful Sequence: When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined. (Level A)
EDIT : If changing the order of the element can preserve a meaningful sequence (G57), when the elements does not match visually the DOM order (see C27) the visual focus indicator of the screen reader will not match the standard reading order which will result in bad UX for people with low vision using a screenreader.
So it's impossible to try a CSS visual hack to invert the order between the elements visually without breaking another rule.
You may think of a third technique :
set aria-hidden on the visible title,
use aria-labelledby on the article tag to point to the h1 outside the article element :
For instance:
<header>
<h1 aria-hidden="true" id="title">Your title</h1>
<nav><!-- nav here --></nav>
</header>
<article aria-labelledby="title">
// article here
</article>
Another way to do is to duplicate the title element, one visible, one for assistive technology
<header>
<div aria-hidden="true">Your title</div>
<nav><!-- nav here --></nav>
</header>
<article>
<h1 class="sr-only">Your title</h1>
// article here
</article>
It could be something like this -
<article>
<header>
//APPLY BACKGROUND IMAGE
<h1>YOUR TITLE</h1>
</header>
<nav>
//USE BREADCRUMBS HERE
</nav>
<section>
//USE THIS FOR CONTENT
</section>
</article>
I have a lot of sub pages and latest 3 I am showing at homepage, I could display only title but image can't(every sub page has TV named 'image_prew' and I am trying to get value of this TV for image), here is my code:
<div class="cat">
<div class="role">
<h1 class="[[+pagetitle]]">[[+pagetitle]]</h1>
</div>
<div class="menu_prew-[[+pagetitle]]">
<img src="[[*image_prew]]" class="image"/>
</div>
<div class="clear"></div>
</div>
You don't say how you're fetching the sub-pages, but if you're using getResources you need to use the parameter &includeTVs=1.
And as Sean mentions above, in a template chunk TVs are placed in a placeholder tag -- use a plus sign not an asterisk.
try [[+tv.image_prew]] and check the documentation near the bottom "Displaying Template Variables with getResources" is clearly labelled
What is your output setting on the TV? Whenever you are outputting image source urls in your TVs, make sure in your output setting tab the output is set to "text". You want the text to render to your html tag. Default may or may not work depending on your input type setting, so I always force this to "text". I have had that issue once or twice;).
Hiall,
could someone please tell me, is the
<div class="container">
class/element some kind of special class for wordpress???
This div is currently wrapping all the content on my site and I am trying to put html code outside of this div, but no matter what I do it won’t let me and it automatically puts everything inside this div.
I’m looking at the file that contains the ending
</body>
</html>
tags for the document and when I try to put code right before the end like
<div class=“myotherrclass”></div>
</body>
</html>
When I load the page in the browser the last tag before , it automatically always puts the closing tag for the container div! eg.
<div class=“myotherrclass”></div>
</div> <!— container class closing div, automatically appears from no where! —>
</body>
</html>
Any help trying to understand what is happening would be great
I started with the Underscores.me starter theme and just deleted the "container" div from both header.php (the opening) and footer.php (the closing). And...nothing bad happened! Will report back if something does, but right now I'm deleting div tags not being used in order to make sense of what's going on. This one's gone!
I have a page with two html files. I have exactly the same code for the footer in them. They use exactly the same CSS file but they look different and I still cannot find out why :
The code is here for the footer :
<div class="container_12">
<div class="grid_12"><footer>
<div class="socials">
facebook |
twitter |
google+
</div>
<div class="copy">COSMOSET © 2013 | Privacy Policy <!--{%FOOTER_LINK} -->
</div></footer>
</div>
</div>
Also if you visit the page here: HERE you can see the text-box-areas do not have the same transparent white background. I assume this one is a server issue (plesk). Because when i open the file on my PC (saved on my PC) it looks perfect.
If you go to the second link from the left (of your navigator) you can see that you have the following DOM structure:
The problem is that, on the page your provided in your post, the footer is a sibling of the <header>, <div class="clear"> and <div class="bg1"> elements, as you can see it in the following screenshot:
Your problem will get solved if you move the "container_12" to be a sibling of the elements I mentioned above.
LATER EDIT:
To answer your second question, for the #form textarea CSS selector you've added an extra . after the png extenstion:
I was hoping somebody would be able to help with the following query...
I've setup a Tumblr blog on which I'm going to regularly post photo sets.
I'd like to write a brief description with each set. I can do this
within the caption field that sits below the image. The problem with
this is that when including multiple images within a post the description
will be lost at the bottom, below all the images.
I'd like the caption to be positioned at the top of the post, before
the images so that viewers can read the description first.
Here's a link to the blog, though empty for now I've inserted a test
post to show how the information is displayed. The black block
represents an image set,'Coming Soon' was entered in the caption field.
http://rg-e.tumblr.com/
Any thoughts/or guidance would be greatly appreciated.
Thanks.
Would need to see your theme's code to provide you with specifics, but you just need to move where the {block:Caption} is being rendered.
An example:
{block:Photoset}
{block:Caption}{Caption}{/block:Caption}
{Photoset-500}
{/block:Photoset}
This will put the photoset's caption above the photoset.
Just to expand upon graygimore's answer - changing the position of the {block:Caption} - Here's the exact code I modified from my custom tumblr theme. Worked a treat.
Thanks again.
{block:Photo}
<section class="caption group">
{block:Caption}
<div class="cont">{Caption}</div>
{/block:Caption}
{block:ContentSource}
<div class="cont content_source">
<a href="{SourceURL}">
{lang:Source}:
{block:SourceLogo}
<img src="{BlackLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
{/block:SourceLogo}
{block:NoSourceLogo}
{SourceTitle}
{/block:NoSourceLogo}
</a>
</div>
{/block:ContentSource}
</section>
<section class="top media" style="display:block;">
{LinkOpenTag}<img src="{PhotoURL-HighRes}"> {LinkCloseTag}{Question}
</section>
{/block:Photo}