I know the 'nofollow' means to Search Engines "Don't follow this link" (or at least, don't give SEO juice to that link), but what does the "me" mean?
I often see it paired up with "nofollow".
What is it used for? Where should it be used? What are the advantages?
Thanks
"me" means that this link leads to another of your profiles on the internet. Its for semantic purposes only.
i see that you use wordpress, so to see a full implementation go to the links page and add a new one. Near the bottom you'll see a link relationship section. The textbox at the top shows what the rel will look like on the link element once you save. This way you can explore how relationships influence the rel attribute.
Heres some further reading on this microformat: XFN
http://microformats.org/wiki/rel-me
has all explanations (including 30sec YouTube videos)
Related
Does anyone know how I should handle aria-labels on link labels that repeat dozens of time on a page? My website accessibility checker tool keeps flagging these elements as using the same link text for these labels and they require unique aria-labels. Problem is, all of the links go to the same generic pages and am not sure how to make the aria-labels specific enough.
Has anyone dealt with anything like this before and how did you handle it? I imagine I'd need a JS solution to inject aria-labels, but before I invest in a JS resource doing this for me does anyone know how I can make these specific enough to pass the checker but not confuse screen readers?
Screenshot of category labels for each article
In this case, it is correct to hide all duplicate links except for the first element that contains these labels
You force people with disabilities to navigate through all the same links using keyboard navigation, this is also bad for a screen reader
1.) Hide any duplicate labels from your screen reader
aria-hidden="true"
2.) Hide any duplicate labels from keyboard navigation
tabindex="-1"
Note! don't forget to leave one unique link! You can also hide everything and add them to context under elements or above elements. When I say hide, I mean the above methods.
It's easy to check for accessibility, close your eyes and imagine you click on a tab and hear (in a screen reader) a re-link through every two elements! This is annoying isn't it?
There is no need for aria-labels and what you are doing is not an accessibility fail. You have to bear in mind the automated accessibility checkers are dumb (and in this case quite possibly wrong) and are only there to offer guidance on common accessibility fails.
The main reason you are seeing this is that the accessibility checker thinks that this is text like "read more" that is not descriptive of the end-point. It should pick up the fact that the end-point is the same but it obviously does not.
Using the same link text for links that go to the same page is encouraged:
It is a best practice for links with the same destination to have
consistent descriptions (and this is a requirement per Success
Criterion 3.2.4 for pages in a set). It is also a best practice for
links with different purposes and destinations to have different
descriptions.
Source: https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-refs.html
Also one of the checks for success criterion 3.2.4 - Consistent Identification is:
Check that this associated text is identical for each user interface
component with the same function.
Source: https://www.w3.org/WAI/WCAG21/Techniques/general/G197.html
Assuming your articles are marked-up correctly a screen reader user could skip between headings (<h2>s for example) in order to not hear the same category links. This is one of the primary ways a screen reader user will navigate a page (via headings).
For this reason the categories should be AFTER the heading in the HTML so that they are read out after the heading.
You could place the heading visually after the tags using techniques similar to those in this answer I gave. This would be acceptable for "logical tab order" in my opinion so you wouldn't fail there.
Your only other option would be to use aria-hidden="true" and tabindex="-1" on your category links to hide them from screen reader users and take them out of the tab order. If you did this you would need to ensure a categories list is available at the side of the page.
Personally I would go with the first option as the categories information is useful to screen reader users, the fact the links repeat themselves over and over if I search by links would indicate they are categories to me when using a screen reader anyway.
I don't know if anyone else experienced the same problem, but I just don't know why article description is not visible on my feed page after sharing.
I used these recommendations for customized URL sharing:
https://developer.linkedin.com/docs/share-on-linkedin
i.e. my link looks like this:
https://www.linkedin.com/shareArticle?mini=true&url=http://developer.linkedin.com&title=LinkedIn%20Developer%20Network&summary=My%20favorite%20developer%20program&source=LinkedIn
If you follow this link, you'll see that the summary ("My favorite developer program") is visible in the preview. However, this summary is not visible in my feed after sharing.
The same happens if I use tag within page markup instead of specifying "summary" directly in URL
I'll be very grateful for your advice.
You can only choose one option:
Indicate an image with an og:image tag, and your image will display.
Don't indicate an image, and then your description will display.
Do you want both an image and a description to display? Currently just not possible. Maybe put the text of the description into the image? I have no idea, it would just be nice if they made their API work according to their own documentation.
Source: Arguing with LinkedIn Support for 2 Weeks.
There's probably a historical reason for this, but I don't know where to start looking for where this might be documented.
Specifically, instead of the cryptic "anchor tag" with a "hypertext reference" (well, I suppose terminology was different back then):
StackOverflow
why didn't something like this happen?
<link to="https://stackoverflow.com">StackOverflow</link>
What exactly did "anchor" mean anyway?
According to the W3 docs:
A link has two ends -- called anchors -- and a direction. The link starts at the "source" anchor and points to the "destination" anchor, which may be any Web resource (e.g., an image, a video clip, a sound bite, a program, an HTML document, an element within an HTML document, etc.).
I'm not an expert in the field, but I believe that it is merely because of the terminology at the time. Reading that article can provide more details about the definitions, but you may need to message the original authors or historians to provide a creditable answer.
A was short for anchor, which could be a url or a named anchor (created with <a name="myanchor">text</a>). The text in my example would not be visually different, and another A tag could set its href to #myanchor. When clicked, the browser would scroll the named A tag to the top of the page, or at least ensure it was visible.
Link wasn't added until later, and it means something else semantically.
See http://www.w3schools.com/tags/tag_a.asp
As to why, I think only the Html group at the time could answer, but i'd guess that since you could link to another page or within the document, hyper linking wasn't all it could do. Or perhaps since bandwidth was more expensive, brevity had a higher value.
The link tag references a link the current document has with an external source, so it is used to specify a link with associated CSS files. Your thinking is "hyperlink", which is different to the tag's intended usage.
As for your new question about "anchor", I would assume it got its name as an anchor is stuck to its place, and the anchor tag points to a specific location (sometimes on the same page, using #id).
I see many pages out there without OG tags (i.e. tags as specified here: http://ogp.me/), yet the Facebook URL Linter seems to be able to get an image and description for them.
For example - you won't see any OG tags (or even other relevant meta tags that could be used to infer said data) on the home page of:
http://www.magicka2.com
But when you take it through Facebook, it finds a description and image:
https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.magicka2.com%2F
So, what am I missing? The image and description they get seem very specific (and correct). Thanks :)
In case of missing Open-Graph tags, Facebook analyses the page and extracts the image for which it thinks it suits the best and what text should be the description text. They follow some "rules" to determine which picture, but there is also some AI involved and it's part of their systems.
If you want to control which image/title/description your page will show when shared, I would advise to always provide OG-details explicitly.
In Google reader(R.I.P) we could select some interesting links by a special tag and then make public them and show links on our blogs or websites.
Is there a way to create this by Google reader alternatives like Inoreader or Feedly or AOL reader or etc?
I should probably start by saying that I'm the BDFL of Inoreader, but I feel obliged to answer you. If anyone thinks my answer is inappropriate or that this can be achieved with one of the other mentioned options, feel free to bash me in the comments :)
Yes, you can do that in Inoreader.
Since you are familiar with Google Reader, you shouldn't have much difficulties starting up with it, but if you have, here's a quick guide to get you started.
Depending on what you need to achieve the option you want is accessible via right-click on a folder or a tag:
Then in the dialog that pops up, you will see an Export option. Click it and you will get 3 links - for RSS feed, HTML page (what you need) and a public OPML file (for folders only):
A few notes on folders and tags:
Folders are used to group sources (RSS, social and other feeds) and content inside them is automatically populated from the feeds.
Tags on the other hand are mostly manually populated by you. When you read an article and you find it interesting, you can press "T" or click the label icon at the bottom of article to tag it. This behavior is almost identical in all major RSS readers. Working with tags in Inoreader is covered in detail in this blog post.
Now I said mostly before, because tags can also be automatically populated by Inoreader's Rules. Basically they works like your email filter. You can set up keywords or other conditions and tag articles automatically as they arrive. This feature is covered in this blog post.
Hope this helps!