I am learning twitter bootstrap 3 these days.
There is a class called "active" in bootstrap. I have seen this feature even in CSS. As I know it indicates the active page or link (probably it is the page that we are currently in). Please correct me if I am wrong. What I need to know is why we need to call such a class in our mark-up. Because it is upto the user to decide which page that he needs to be in.
If I explain this further below mark-up has used class="active" in the 2nd list element. (i.e Profile). When I run the code in a browser it adds a nice blue background to Profile. Why should I add such a class? Active tabs vary when users navigate from one tab to another. Is not it?
<div class="container">
<div class="row">
<nav>
<ul class="nav nav-pills nav-justified">
<li>Dashboard</li>
<li class="active">Profile</li>
<li>Earnings</li>
<li>Settings</li>
</ul>
</nav>
</div>
</div>
With 4 pages in your Navigation, the .active class should be on each different list item from #1 to #4 depending on the page you're in. Below are 4 excerpts for each 4 pages.
Breadcrumbs.html:
<ul class="nav nav-pills nav-justified">
<li class="active">Dashboard</li>
<li>Profile</li>
<li>Earnings</li>
<li>Settings</li>
</ul>
Jumbotron.html:
<ul class="nav nav-pills nav-justified">
<li>Dashboard</li>
<li class="active">Profile</li>
<li>Earnings</li>
<li>Settings</li>
</ul>
FavoutieActors.html:
<ul class="nav nav-pills nav-justified">
<li>Dashboard</li>
<li>Profile</li>
<li class="active">Earnings</li>
<li>Settings</li>
</ul>
Breadcrumbs.html:
<ul class="nav nav-pills nav-justified">
<li>Dashboard</li>
<li>Profile</li>
<li>Earnings</li>
<li class="active">Settings</li>
</ul>
The active class is applied to the navigation element the user is currently viewing.
In the case of your given code, the user is viewing the the profile. It will serve as a guide or reminder to where in the website the visitor is in. That is why the active class is applied, which comes handy when viewing a website with many navigation links.
You can dynamically add the active class to whichever element is active. You can either do this as your page is rendered. Or via JavaScript, if you wish to change the active element without posting back to the server.
From your example, by adding the active class to your 'Profile' item, it should render the item in a way that suggests visually that this is the current item or page you're viewing.
What I need to know is why we need to call such a class in our mark-up. Because it is upto the user to decide which page that he needs to be in.
The user decide what page and the designer and developer decide how its button look while the user on it. The active class can do more than it's just a markup in your page. It could be used to add different look and feel, color effects etc.
Why should I add such a class? Active tabs vary when users navigate from one tab to another. Is not it?
You are not required to add and manage in many usual cases but sometimes you might need. From design point of view, it tells the user that he/she is now here, from programming point of view that class could be used in different ways to assign unique action for that button or other button and not for it.
The same thing for first and last classes we usually add, they allow us to do different scenarios or CSS proprieties for these buttons and/or elements.
Class="active" is usually used to highlight any active content from a selection, mostly in navigation. Let's say in a website with different page links on navigation, just to indicate that the user is on this page, active class highlights that link increasing the usability of navigation.
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 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.
It is such that I have a menu where there is a border in the page you're into, just currently the whole time on the index page, but if I click onto the news as it should be less.
I have tried so many ways but none of them works, think a little that you can do it with something GET?
This means that it must move to find the page you are on, and view page not in the menu so it should not be there.
there are border in Home, how can I do so that, for example, I go into the info then border under the info and not the front, what should I do there?
<div class="pi-header-block pi-pull-right">
<ul class="pi-simple-menu pi-has-hover-border pi-full-height pi-hidden-sm">
<li class="pi-has-dropdown active"><span>Forside</span></li>
<li class="pi-has-dropdown"><span>Info</span></li>
<li class="pi-has-dropdown"><span>Nyhed</span></li>
<li class="pi-has-dropdown"><span>Team</span></li>
<li class="pi-has-dropdown"><span>Kontakt</span></li>
<li class="pi-has-dropdown"><span>Opret bruger</span></li>
</ul>
</div>
Ses image HER
Here you can see how my menu appears when I click on the info.
The answer is as simple as this: see the pi-has-dropdown active part. If you don't want it, just remove it. If you want it in other pages, add it to each page, for example in Info, like this:
<div class="pi-header-block pi-pull-right">
<ul class="pi-simple-menu pi-has-hover-border pi-full-height pi-hidden-sm">
<li class="pi-has-dropdown"><span>Forside</span></li>
<li class="pi-has-dropdown active"><span>Info</span></li>
<li class="pi-has-dropdown"><span>Nyhed</span></li>
<li class="pi-has-dropdown"><span>Team</span></li>
<li class="pi-has-dropdown"><span>Kontakt</span></li>
<li class="pi-has-dropdown"><span>Opret bruger</span></li>
</ul>
</div>
. You usually do this with the help of a CMS or some JS/Jquery coding, but you could totally hard code it on each page if you want. This way, you need to copy this snippet of code on each page, only changing the active class keeping in mind in which page are you. As simple as that
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).
I hope this is a very simple question (I'm only using bootstrap since today), but how do I show a new page when someone clicks on a navbar item?
For example, I have this code:
<ul class="nav">
<li class="active">Home</li>
<li>Getting there</li>
<li>Japanese theme</li>
<li>Photos</li>
<li>RSVP</li>
</ul>
But how do I switch page when someone clicks on say, "Photos"?
I don't want to refresh the page and I'd prefer to do it all using AJAX.
Many thanks in advance,
As Alp says, Twitter bootstrap doesn't handle this functionality. I use PHP server side and AJAX client side to show/hide new content.