I am modifying a site that has a menu with the following code:
<h3>Menu</h3>
<ul class="nav">
<li><a data-scroll href="#home">Home</a></li>
<li><a data-scroll href="#services">Service</a></li>
<li><a data-scroll href="#contact">Contact</a></li>
</ul>
As a user clicks on those links the user will be taken to the corresponding section on that page.
I need to modify this to allow for links that do not point to the same page.
I tried the obvious:
<h3>Menu</h3>
<ul class="nav">
<li>Google</li>
</ul>
but it won't work.
The status bar shows the correct link but when I click the page won't change.
Is there any special code I need to add (links on other places of the page work fine).
As we discussed, Javascript (specifically jQuery preventDefault) can override the default behavior of an anchor (that is to say, follow it). Therefore, check all Javascript for this situation.
Also, a link MUST have an http:// in front of it, to define the resource type. Links only work on the same page or domain if there isn't one.
It is clear to me that
Google
Will not work because you should write it like so:
Google
Give that a try, if the answer is not this, then you should share with us what else you are doing on your site that we cannot simply imagine by the snippet you have shared with us.
Related
I have a simple question. Should the button, that I use to open/close my navigation menu be included in the nav tags?
The button itself is not helping in navigating but without him, there is no access to navigation.
<nav>
<ul class="nav">
<li class="nav__el nav__el-active">Home</li>
<li class="nav__el">Generic</li>
<li class="nav__el">Services</li>
<li class="nav__el">Blog</li>
<li class="nav__el">Contact</li>
</ul>
<i class="fas fa-bars"></i> //menu btn
</nav>
that's the example. Now the btn is in the nav, but it also can be like that:
<div class="topbar">
<nav>
<ul class="nav">
<li class="nav__el nav__el-active">Home</li>
<li class="nav__el">Generic</li>
<li class="nav__el">Services</li>
<li class="nav__el">Blog</li>
<li class="nav__el">Contact</li>
</ul>
</nav>
<i class="fas fa-bars"></i> //menu btn
</div>
At first glance, when reading this at WHATWG:
The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.
It seems to me that the button should not be included, as that's clearly not a navigation link.
Anyway, if you continue reading:
User agents (such as screen readers) that are targeted at users who can benefit from navigation information being omitted in the initial rendering, or who can benefit from navigation information being immediately available, can use this element as a way to determine what content on the page to initially skip or provide on request (or both).
With that in mind, it makes sense to include that button and any other non-link control you might have (usually in the header area) because if a screen reader user wants to...:
...skip the whole navigation, they also want to skip the other controls that are not links.
...jump straight to the navigation, they might also want to use some navigation elements that are not links.
If you check some of the examples at WHATWG, it looks like they are applying these criteria. The first example is:
<body>
<h1>The Wiki Center Of Exampland</h1>
<nav>...</nav>
<article>...</article>
...
</body>
Here, it makes sense not to skip the title on the page (to know where you are) but then skip all the navigation elements and jump straight to the content.
However, on the last one:
<nav>
<h1>Folders</h1>
<ul>
<li><a ...>... </a></li>
...
</ul>
</nav>
It would make sense to skip the Folders heading element if you are not interested in the navigation because it's actually part of it, the same way you put the heading of a section inside a section and not before it. The same applies to your menu button.
Some other examples of elements that might be part of the main navigation of the site, and thus go into <nav> are logos that link to the root of the site or search forms.
For example, LinkedIn is doing that:
Also, Bruce Lawson, who is part of the Accessibility Task Force, has the search inside the <nav> element on his personal website:
However, you can also find examples of the opposite. For example, AirBnB only includes some links in the <nav> element:
While in this case, I would have also included the search, that for me clearly represents the main way to navigate on their site.
Anyway, you could and should also use ARIA for accessibility and structured data / Schema.org markup for search engine support.
I'm always trying to use the new html5 elements, but find myself doing stuff like this:
<nav class="some-menu">
<ul class="menu">
<li>
<a title="link to somewhere" href="the-link.php">link to somewhere</a>
</li>
</ul>
</nav>
When I could have achieved the same (visually) with:
<ul class="menu">
<li>
<a title="link to somewhere" href="the-link.php">link to somewhere</a>
</li>
</ul>
More symantic markup vs bloated DOM, should I include the <nav> tag in that situation?
EDIT
I've found the <menu> item can actually be used in this situation along with <li> e.g:
<menu class="side-menu">
<li><a title="a menu item" href="touch-my-nipples.thanks">Inappropriate Href</a>
</menu>
Which achieves more semantic markup without verbosity
Well you could argue that not including html5 tags increases the readability of your html file.
However, for SEO purposes, using html5 tags may assist in your page rank, so that might be a consideration if you are developing for a commercial web page.
In this one particular case, if the purpose of the <li> is not for navigation, then it I doubt you would get any criticism for it.
This is a good question. More DOM == more time to load the page, which is not good. However, you could try to use a combination of both. How about simply doing something like this:
<nav class="menu">
<a class="menu-item" href="...">Link 1</a>
<a class="menu-item" href="...">Link 2</a>
</nav>
I don't think there is a huge benefit to one over the other, though you should test to see how this appears to different screen reader users (as accessibility may be benefit of semantic markup).
It's not just about code bloat, don't forget about accessibility. By having a <nav> element, you can tell user's screen readers where the menu is. It would be difficult to detect if it was just ul.menu.
As Denis mentions, there are also advantages for SEO rankings.
"the element which allows you to group together links, resulting in more semantic markup and extra structure which may help screenreaders."
By: http://html5doctor.com/nav-element/
Example:
<nav>
<ul>
<li>Home</li>
<li>About</li>
</ul>
</nav>
Good idea use because: internal links for site navigation
<menu> tag
The HTML element represents an unordered list of ""menu"" choices, or commands.
By: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu
Recently I've been implementing ARIA into a web application and I found this question to be quite helpful in the improving the navigation parts.
After implementing this in all modules, I discovered this HTML validation error:
Attribute aria-selected not allowed on element a at this point.
Looking at the ARIA specification, I see that aria-selected is only used in roles gridcell, option, row, and tab. In my case, the role of the link is menuitem.
This is a representative sample of the HTML code:
<nav role=navigation>
<ul role=menubar>
<li role=presentation><a href='page1.php' role=menuitem>Page 1</a></li>
<li role=presentation><a href='page2.php' role=menuitem>Page 2</a></li>
<li role=presentation><a href='page3.php' role=menuitem aria-selected=true>Page 3</a></li>
<li role=presentation><a href='page4.php' role=menuitem>Page 4</a></li>
</ul>
</nav>
As you can see, this is taken on "page 3".
What is the correct ARIA role to use here?
you may also use aria-current="page" for describing current displayed page among navigation items.
I believe that aria-selected is for 'widgets' that are one-tab stop, like a set of tabs that you then arrow around to select. The selected aspect is about which one is in focus, not which page you are on.
I would check out this as a well tested example:
http://whatsock.com/tsg/Coding%20Arena/ARIA%20Menus/Horizontal%20(Internal%20Content)/demo.htm
From: http://whatsock.com/tsg/
For showing the current page I would probably use a more traditional method: Make it not a link. E.g:
<li><a href='page2.php'>Page 2</a></li>
<li><strong>Page 3</strong></li>
This also prevents people from clicking on the same-page link by accident (which I see quite often in usability testing). You can apply the same CSS to nav ul a and nav ul strong and then override the styling for the strong.
Short answer: you can use aria-current="page" or aria-current="location" to indicate the current link in a list of links.
Your pagination component could be improved in terms of accessibility (you can see this as a variation of the similar breadcrumbs pattern):
<nav aria-label="pagination">
<ol>
<li>
Page 1
</li>
<li>
Page 2
</li>
<li>
Page 3
</li>
<li>
Page 4
</li>
</ol>
</nav>
A few notes:
Use <nav> to automatically use the navigation landmark (<nav> is equivalent to <div role="navigation"> but shorter and more elegant)
Use aria-label to provide a meaningful name to the <nav> (most likely, you have more <nav> elements on the page and you should label each one accordingly).
Use to make the set of links structured. This can also help screen reader users as it will be announced as "pagination, navigation (next) list, 4 items, helping users understand how many pages there are.
Use aria-current="location"oraria-current="page"` current page of the list (this is most likely shown in a different style as the other pages, but we need to mark it for screen reader users).
There seems to be conflicting examples in documents relating to the <nav> tag in html5. Most examples I've seen use this:
<nav>
<ul>
<li><a href='#'>Link</a></li>
<li><a href='#'>Link</a></li>
<li><a href='#'>Link</a></li>
</ul>
</nav>
But I'm wondering if that's only because people are used to using divs. There are examples that I've seen that simply do this
<nav>
<a href='#'>Link</a>
<a href='#'>Link</a>
<a href='#'>Link</a>
</nav>
The second way seems cleaner and more semantic to me. Is there an "official" correct version? Is there a good reason to still use a <ul> inside the nav tag rather than just use anchor elements directly?
Both examples are semantic.
In the first example, the list of anchors is explicitly an unordered list. In the second example, the list of links is just a collection of anchor elements.
If you simply want a one-dimensional collection of links, I recommend sticking with
<nav>
<a href='#'>Link</a>
<a href='#'>Link</a>
<a href='#'>Link</a>
</nav>
however, using ul elements allows for explicit hierarchical menus (such as drop-downs or tree-lists):
<nav>
<ul>
<li>
Link
</li>
<li>
Link
<ul>
<li>
Sub link
</li>
<li>
Sub link
</li>
<li>
Sub link
</li>
</ul>
</li>
<li>
Link
</li>
<li>
Link
<ul>
<li>
Sub link
</li>
<li>
Sub link
</li>
</ul>
</li>
</ul>
</nav>
The only real difference might be how search engines might look at the links. When in an unordered list Google might for example understand that all the items in that list are related. In the second example Google might just as well assume none of the links are related. Google can use that information for indexing and display your information more accurately.
They may display the same, but really a lot of markup is about how information should be presented if there was no style attached to the page at all or if a bot is searching your website for relevant information.
You can use either.
A list only tends to be used as a list of links is generally just that, a list. But, it's up to you.
There is no real difference between them. However like Caimen said, search engines use the page markup to group data to better web search results. I'd advise you use the first if the links are quite similar on topic (eg for a blog) and the second if the links aren't so similar (for navigating results from a website search).
I have a weirdest thing, in this peace of code a browser adds tags automatically. I disabled all javascript and css, left only simple HTML and still see tags added. Here is my code:
<div id="menu-contact" class="menuNew">
<ul class="navi-list">
<li class="goto">Go to:</li>
<li id="whats">Welcome!</li>
<li>About</li>
<li>Shop</li>
<li><a class="active" href="#menu-contact">Contact</a></li>
</ul>
</div>
and here is what firefox4 sees:
<div id="menu-contact" class="menuNew">
<a> </a>
<ul class="navi-list">
<a>
<li class="goto">Go to:</li>
</a>
<li id="whats">
<a></a>
Welcome!
</li>
<li>
About
</li>
<li>
Shop
</li>
<li>
<a class="active" href="#menu-contact">Contact</a>
</li>
</ul>
</div>
It basically surrounds each tag by a tag. Again, I removed all js and css references..any idea what's going on?? Funny thing, that I have the same code (with unique IDs) in the same page and it renders normally.. only the last snippet adds tags..
My best guess absent a link to a live example is that there is a stray <a> somewhere above that element, and Firefox is attempting to apply it to all the elements below, and of course not having a very happy time of it. A quick HTML validation will reveal if something like that is going on, since either the <a> is unclosed (invalid) or the <ul> is inside it (also invalid).
If that doesn't explain it (which is entirely possible, since I'm just speculating wildly), consider crafting a live example we can inspect in detail. Certainly what you're describing is not normal Firefox behavior, so any clues we can get to what makes your situation different will help.