Do I need aria-label attributes when I'm using h-card (this is for company contact information in a page footer)?
<div class="h-card">
<a class="u-url" href="http://example.com">
<img src="http://example.com/static/logo.svg" alt="Example Logo">
<span class="p-name sr-only">Example Corp.</span>
</a>
<div aria-label="Address" class="p-adr h-adr">
<span class="p-locality">Eugene</span>
<span class="p-region">OR</span>
<span class="p-postal-code">97403</span>
</div>
<a aria-label="Telephone" class="p-tel" href="tel:12345678">(12) 345-678</a>
</div>
Are the aria-labels superflous here or do they provide some value? Ought there be more detailed aria- attributes? (And if so, which?)
WAI-ARIA and Microformats don’t "compete":
WAI-ARIA is a framework to enhance the accessibility of your web content.
Microformats are a convention for marking up structured data on your HTML pages.
They have different goals, and consumers of WAI-ARIA don’t necessarily support Microformats, and consumers of Microformats don’t necessarily support WAI-ARIA.
So when deciding if you need the WAI-ARIA attribute aria-label in your example, ignore if or how you use the Microformat h-card, and vice-versa. They don’t interact with each other.
Best not to use aria-label here; at worst, a screenreader will end up reading out the aria-label instead of your content, making it less accessible.
As spec'd, the aria-label value, if present, is used instead of the element content (simplifying somewhat); but in practice, behavior varies quite depending on element type and on the specific screenreader/browser used;
As it turns out, in the case or aria-label being used on SPAN,
VoiceOver on Mac reads out the label instead of the content
NVDA and JAWS on Windows ignore the aria-label outright and just read out the div/span content. (This behavior could change in some future update to these tools...)
So at best, it's ignored; at worst, it replaces your actual content. Best to not use it in your case then.
ARIA can be pretty useful when used carefully; but browser compat issues mean it's unfortunately full of pitfalls; if you're going to use it at all, recommend checking out the specs, and also ensure that you test with real-world screenreaders so you can ensure that using aria doesn't have the unintended consequence of making your content less accessible!
Related
Is there an option to add custom attributes to a scheme? (same as we can expand DTD?)
itemprop="description" isn't enough for me. I got more attributes that I wish to add, that do not exist in the original scheme:
Objective
Duration
Availability
I need this attributes cause they project the full characteristic of my product.
In Microdata, you can use a "proprietary item property name":
one used by the author for private purposes, not defined in a public specification
It has to be an absolute URL, e.g.:
<div itemscope itemtype="http://schema.org/Thing">
<p itemprop="description">…</p>
<p itemprop="http://example.com/voc/objective">…</p>
</div>
(Of course you can’t expect other consumers to make use of it.)
If you are using the Schema.org vocabulary, you could also:
propose new Schema.org properties/types
extend an existing Schema.org property (but it’s considered outdated)
I'm creating a web page and currently I'm adding Microdata markup to the code. I’m using schema.org’s MusicGroup.
I have an index.html page from where I'd like to take the name and the image properties for this band:
<div class="container" itemscope itemtype="http://schema.org/MusicGroup">
...
<img itemprop="image" src="img/logo.png" alt="logo" />
<p>We are <span itemprop="name">NAME OF THE BAND</span>.</p>
...
</div>
However on the about_us.html page there is a short description which I'd also like to use:
<div class="container" itemscope itemtype="http://schema.org/MusicGroup">
...
<p itemprop="description">A description of the band.</p>
...
</div>
When I use the code like this, search enginges (understandably) treat them as two different MusicGroups:
MusicGroup 1:
Image: .../img/logo.png
Name: NAME OF THE BAND
MusicGroup 2:
Description: A description of the band.
How can I link these properties into one item?
Microdata’s name-value pairs are per webpage, not per website.
So on a website about a music group, it can be expected that each page contains an "own" MusicGroup item, which is, however, actually always about the same music group. But from the Microdata or schema.org perspective, these different items would not be semantically connected that way (consumers might guess this however, e.g. by comparing property values).
Microdata’s itemid attribute could be used to uniquely identify each item. But it is required that the used vocabulary supports "global identifiers for items" (itemid is used for some types on schema.org (e.g., in the example for MedicalScholarlyArticle), but it’s not clear to me if it’s really supported as required by Microdata for other types, like MusicGroup).
So in your case, you could:
leave it as it is
duplicate the information, so that each item has all relevant content (possibly using meta/link elements)
move all information on one page (possibly using itemref)
(if it should be allowed for general use with schema.org) use itemid to state that several items are actually about the same thing
I think the question is the same for huge manipulations with URL (ie Why?). Where people just reconstruct the URL from scratch.
Does it not hinder the visibility of the app for UI developers if all they see:
<link href="${some_url_possibly_not_named_logically_i_e_karamba1243}/less/bootstrap.less"/>
I just don't understand use cases where these tags are used and why should I?
How can this example snippet be improved with usage of spring:url tag? Would it be used just to remove repetitive part of URL?
<div id="header">
<ul>
<li>Home</li>
<li>My Profile</li>
<sec:authorize access="hasRole('ROLE_Coach')">
<li>Training</li>
</sec:authorize>
<sec:authorize access="hasRole('ROLE_Player')">
<li>Training</li>
</sec:authorize>
<sec:authorize access="hasRole('ROLE_Manager')">
<li>Administration</li>
</sec:authorize>
</ul>
</div>
Or the major concern is that if same URL will be used in another .jsp we can just grab a variable, but then again this tag is specific to jsp scope so other pages cannot use it. I
What's wrong with the traditional approach? Are there examples where I can't use anything but spring:url.
It is exactly one of those cases where everyone uses it, no one explains(even google - providing super url reconstruction cases) and everyone happy except me, feeling confused and dumb :-)
Use it when you need to have dynamic components in generated URLs (e.g. /app/resources/{name}) and when you need to make sure those URL components (e.g. {name} as above) are properly escaped. Look here for more info.
Also note that you CAN have global attributes that you use with e.g. the <spring:url /> tag across multiple JSPs. Have a look at setExposedContextBeanNames(String[]) here.
Hi I'am working for sone time with wicket and in my team we argue a lot abot the place that should be given to the design
I think that design should be only in markup in order to achive separation of concernes where others think what i am doing is a boiling plat code
for example we are using this structure to support IE8 usung round corners with pictures :
<div class="panel-wrapper">
<div class="panel-left"></div>
<div class="panel-right"></div>
<div class="panel-bottom"></div>
<div class="panel-top"></div>
<div class="panel-bottom-right"></div>
<div class="panel-bottom-left"></div>
<div class="panel-top-right"></div>
<div class="panel-top-left"></div>
<div class="panel-bg"></div>
<div class="panel-body">
//stuff
</div>
i think that allthoght it's against my belives as a developer this is the best way to achive mvc , to separate view from controler where others say that we should write this code once in wicket panel an derive from the wicket panel
what if tommarow this component would be in another place and the given markup would couse us problems such as using #override getVaration?
Why not use Behaviors?
Keep your component clean by putting the basic layout into the template but use AttributeAppender/AttributeModifiers to add CSS-Classes.
I think it's a good idea to allow designers (who should know about css and semantic markup) to create a static version of your page, then you can decide how to construct the panel and then "wicketize" your panel's markup. I think that's the role designers and developers can play.
Often when deciding how to create a panel, one might be concerned about "what if the markup changes"?.. Well, that's the reason why is useful to know the road map of your website and see how it can be reused. In my case, what I usually do is create an abstract panel with no markup and then start extending it, instead of creating styles and stuff like that, because that usually leads to changes in the panel every time you need a different style when you change the behavior of you panel depending on the style. If you think an abstract panel can be overkill, you can create a default panel with the markup that might get used the most and extend when necessary and use different markup for that new panel.
Each blog post on my site -- http://www.correlated.org -- is archived at its own permalinked URL.
On each of these archived pages, I'd like to display not only the archived post but also the 10 posts that were published before it, so that people can get a better sense of what sort of content the blog offers.
My concern is that Google and other search engines will consider those other posts to be duplicate content, since each post will appear on multiple pages.
On another blog of mine -- http://coding.pressbin.com -- I had tried to work around that by loading the earlier posts as an AJAX call, but I'm wondering if there's a simpler way.
Is there any way to signal to a search engine that a particular section of a page should not be indexed?
If not, is there an easier way than an AJAX call to do what I'm trying to do?
Caveat: this hasn't been tested in the wild, but should work based on my reading of the Google Webmaster Central blog and the schema.org docs. Anyway...
This seems like a good use case for structuring your content using microdata. This involves marking up your content as a Rich Snippet of the type Article, like so:
<div itemscope itemtype="http://schema.org/Article" class="item first">
<h3 itemprop="name">August 13's correlation</h3>
<p itemprop="description" class="stat">In general, 27 percent of people have never had any wisdom teeth extracted. But among those who describe themselves as pessimists, 38 percent haven't had wisdom teeth extracted.</p>
<p class="info">Based on a survey of 222 people who haven't had wisdom teeth extracted and 576 people in general.</p>
<p class="social"><a itemprop="url" href="http://www.correlated.org/153">Link to this statistic</a></p>
</div>
Note the use of itemscope, itemtype and itemprop to define each article on the page.
Now, according to schema.org, which is supported by Google, Yahoo and Bing, the search engines should respect the canonical url described by the itemprop="url" above:
Canonical references
Typically, links are specified using the element. For example, the
following HTML links to the Wikipedia page for the book Catcher in the
Rye.
<div itemscope itemtype="http://schema.org/Book">
<span itemprop="name">The Catcher in the Rye</span>—
by <span itemprop="author">J.D. Salinger</a>
Here is the book's <a itemprop="url"
href="http://en.wikipedia.org/wiki/The_Catcher_in_the_Rye">Wikipedia
page.
http://schema.org/docs/gs.html#advanced_enum
So when marked up in this way, Google should be able to correctly ascribe which piece of content belongs to which canonical URL and weight it in the SERPs accordingly.
Once you've done marking up your content, you can test it using the Rich Snippets testing tool, which should give you a good indication of what Google things about your pages before you roll it into production.
p.s. the most important thing you can do to avoid a duplicate content penalty is to fix the titles on your permalink pages. Currently they all read 'Correlated - Discover surprising correlations' which will cause your ranking to take a massive hit.
I'm afraid but I think it is not possible to tell a Search Engine that a specif are of your web page should not be be indexed (example a div in your HTML source). A solution to this would be to use an Iframe for the content you do not what search engine to index, so I would use a robot.text file with an appropriate tag Disallow to deny access to that specific file linked to the Iframe.
You can't tell Google to ignore portions of a web page but you can serve up that content in such a way that the search engines can't find it. You can either place that content in an <iframe> or serve it up via JavaScript.
I don't like those two approaches because they're hackish. Your best bet is to completely block those pages from the search engines since all of the content is duplicated anyway. You can accomplish that a few ways:
Block your archives using robots.txt. If your archives in are in their own directory then you can block the entire directory easily. You can also block individual files and use wildcards to match patterns.
Use the <META NAME="ROBOTS" CONTENT="noindex"> tag to block each page from being indexed.
Use the X-Robots-Tag: noindex HTTP header to block each page from being indexed by the search engines. This is identical in effect to using the ` tag although this one can be easier to implement since you can use it in a .htaccess file and apply it to an entire directory.