I have a couple upcoming posts where I have multiple versions of the same poem all translated. I was thinking of giving two buttons to reveal each of them. I thought of implementing this as a double spoiler, but that would mean the poem could also be completely hidden (both spoilers closed) or be shown simultaneously in both versions (both spoilers open), whereas I would like to have one version and one only displayed at all times. Something like Edcel spreadsheets, where you have the buttons at the bottom to switch between sheets but cannot view multiple sheets simultaneously or not view any of the sheets. Can that be done in HTML? And if so, how?
Update
A now-deleted answer suggested Bootstrap Panels. I tried them out, but the following code:
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">Vulgate version</div>
<div class="panel-body">pefanthi</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Campbell version</div>
<div class="panel-body">Abanthi</div>
</div>
</div>
This is merely a test post to try out "Boostrap Panels". It is not meant to make any sense, but only to be able to click on buttons, which previews do not (or at least, spoilers and links don't work in previews, which is why I'm posting this).
produces this:
Is that the expected output, in which case this is not what I'm after, or is there something wrong with the code?
I cannot think of a website with this kind of thing implemented. What I want to achieve is to have a row of (in this case two) buttons at some point in the page (in this test post the point would be the top, in the actual blog posts it will be after a short introduction which is nothing more than a <div style="text-align: justify"> and a couple <br>s) which, when clicked on, will either change a part of the page below them, or, if I click the already active one, not change it. In particular, in the above code, I want two buttons, with "Vulgate version" on the leftmost one and "Cambpell version" on the other one, so that the former is automatically activated and shows "pefanthi", whereas the latter can be activated by clicking and that means "pefanthi" goes away and is replaced by "Abanthi", and then if I click on "Vulgate version" again I get pefanthi back and Abanthi leaves. Just like happens with tabs from a single window of a browser like Firefox:
So in this comparison, I want a "Vulgate version" tab that shows the "pefanthi" and a "Campbell version" which shows the "Abanthi", while the text about that being a test post stays below whatever is displayed, like that "It looks like you haven't started Firefox in a while […]" text in the picture, but with no X to make it disappear.
Update 2
Just figured out a way to do almost what I want. Here it is:
<button title="Vulgate version" type="button" onclick="if(document.getElementById('Vspoiler') .style.display=='none') {document.getElementById('Vspoiler') .style.display=''; document.getElementById('spoiler') .style.display='none'}">Vulgate version</button>
<button title="Campbell version" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''; document.getElementById('Vspoiler') .style.display='none'}">Campbell version</button>
<div id="Vspoiler" style="display:">pefanthi</div>
<div id="spoiler" style="display:none">Abanthi</div>
This way, if I click on a button and its content is shown, nothing happens, whereas if its content is not shown, it gets shown and the other button's content is hidden. The Vulgate version button has its content shown by default, so it is now impossible to have more or less than one button's contents shown.
There are two problems with this:
If the spoilers are more than two - and one of the posts I'm planning to use this on will have from 3 to 5 - the code gets pretty complex, so I'd like to know if there is a way to make the buttons hide the other buttons' contents when clicked without having to place a display:none for each of the other buttons: can the buttons "talk to each others" the way Firefox tabs to?
Having buttons that seem to do nothing is not good-looking IMO, so is there a way to make the button change look when it's pressed? For example, changing its color to the background color so it becomes almost invisible?
Update 3
Just found out how to change the color of a button:
style="background-color:<insert color>"
in the button tag. Implemented at this page, which is the rendered version of the above code. Now one question remains: how do I make each button change the other button's color, along with its own?
Update 4
This is exactly what I want. Except I tried adapting the code to my needs:
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#vulg">Vulgate version</a></li>
<li><a data-toggle="tab" href="#C">Campbell version</a></li>
</ul>
<div class="tab-content">
<div id="vulg" class="tab-pane fade in active">
<p>pefanthi.</p>
</div>
<div id="C" class="tab-pane fade">
<p>Abanthi.</p>
</div>
</div>
and the result is this, which is just not right. What am I doing wrong?
Update 5
Just tried copy-pasting the whole part over here, and the result can be seen here, and is not what the page says it should be, so is the page misguided or is there a problem of HTML versions that makes the code work on that page but not on my Blogger blog?
Update 6
Following #crapier' comment, I looked at "BS get started" (what an unfortunate initialism :) ), and found the code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
I added it to my page, and something happened. The tabs appeared, but they do not work. What is going on? Should I add another one of the code lines here?
Update 7
Apparently it only works when all three of the lines here are added, but why?
Update 8
Moved the matter over to here, so this question merits a closure.
Related
This question already has answers here:
Anchor or Button in React SPA?
(3 answers)
Closed 9 months ago.
I see a lot of discussion on the internet about <a> tags that look like buttons, and rules that all links must obey. However, I am confused about <button> tags that are styled to look like links.
I am creating a single-page-app and my navigation component is responsible for rendering / hiding different sections of the website. Only one section would be visible at a time, so I'm treating each section as if it was a unique page with its own route.
My navigation controls are buttons, instead of links. I did this because there is nothing valid that I'm aware of, which I can put inside the hrefs (given that the hidden content is not present in the DOM).
I read on the internet that buttons must have styling to identify the priority of the button, for accessibility reasons. Ideally, I want the buttons to look like links since they behave similarly to links (although not identical).
Are there any accessibility concerns with styling buttons to look like links? Would it make more sense to style these buttons as buttons? If they should look like buttons then what should be the priority? Does it make more sense just to hide the hidden "pages" with css, so that I can turn the buttons into <a> tags and add an href?
Here is the typical markup for single page apps
<div>
<nav>
<ul>
<li>
<button data-name="Skills">Skills</button>
</li>
<li>
<button data-name="Projects">Projects</button>
</li>
<li>
<button data-name="History">History</button>
</li>
<li>
<button data-name="Employment">Employment</button>
</li>
<li>
<button data-name="Contact">Contact</button>
</li>
</ul>
</nav>
<div id="content-panel">
Home
</div>
</div>
The part at the bottom div#content-panel represents the Home page. It will be replaced with the other pages using JavaScript, which will contain the main content of the website.
For those who stumble across this, please don't use <a> without an href, it results in an element that is not longer focusable with the keyboard.
The following fiddle shows this. Try using Tab to focus the links.
You could obviously add tabindex="0" to add them back to the focus order, but this is an anti-pattern and if you ever find yourself doing this it is an indication that you have made a mistake with your HTML.
<div>
<nav>
<ul>
<li>
<a data-name="Skills">Skills</a>
</li>
<li>
<a data-name="Projects">Projects</a>
</li>
<li>
<a data-name="History">History</a>
</li>
<li>
<a data-name="Employment">Employment</a>
</li>
<li>
<a data-name="Contact">Contact</a>
</li>
</ul>
</nav>
<div id="content-panel">
Home
</div>
</div>
If you are building a SPA in a fashion similar to that described by the OP you should still be using anchors <a> for navigation.
There are a few things you should consider:
When each section is shown you should update the URL on the site via JavaScript.
If your site also has Server Side Rendering (SSR) and can function in a limited fashion without JavaScript (recommended as JavaScript does fail more often than you think due to network errors, JS errors for certain scenarios you missed etc. etc.) then the href of the anchors should point to the correct URL.
On SPA navigation it is recommended that once the new page is loaded you programatically set focus on that pages <h1>. You can do this by adding tabindex="-1" to the <h1> (which allows it to receive focus programatically without being added to the focus order of the page) and then using header1.focus()
For an even better experience for people who use a screen reader it may also be beneficial to add an aria-live section to the page with the value of assertive that announces "loading" once a link is clicked. <div aria-live="assertive"><!--add "loading" here programatically when the link is clicked, remove it once the page has loaded--></div>
I have a reasonably long answer with a bit more detail of this technique here that explains why.
To answer the original question finally!
You can style a button to look like a link. However consistency across a site is key.
So make sure that if that is the styling you use for buttons that the majority of buttons look the same.
Also if you make a button look like a standard link then really you should make your links look different to your buttons styled as links.
This avoids confusion as a button has the expectation it will change something on the current page or submit a form, a link has the expectation of changing the page / URL / navigation.
However the advice is not quite the same for a link styled like a button. It has become acceptable that links can be styled like buttons if they are a Call To Action for example. Yet again though, consistency across a site is key for a great user experience.
As stated on MDN Navigation expects to have a links as children. So if you want to prevent any accesibility issue, I suggest you to stick to them, just remove the href attribute and add a type="button" to your a tags.
Anything that looks like something else fools the user. This applies to a link looking like a button, a link looking like plain text, an h1 looking like an h2, a ul looking like an ol, etc. When the user is fooled, the user can get confused or be misled into errors. With a link that looks like a button, for example, the user may press Space to activate it and be surprised to find that it is not activated, but instead the page is scrolled.
I am trying to implement the notification component that will show the list of the items and will be opened by clicking on the notification icon on the fixed navigation bar on the top. I don't think it's a menu bar. Because the menu provides the actions that can be performed and it can also have a sub-menu.
https://www.w3.org/TR/wai-aria-practices/#menu
Can anyone let me know what should be the aria-role of such kind of components?
Below is the code sample. I will open the template dynamically by clicking on the notification icon button:-
<button aria-label="notifications">
<mat-icon class="mr-md">notifications</mat-icon>
</button>
<!-- Notification template -->
<div class="notifications__item">
Notifications
<li *ngFor="let notification of notifications" class="notifications__item">
<mat-icon class="notifications__icon material-icons-round">
{{ notification.icon }}
</mat-icon>
<div class="notifications__content">
<div [ngClass]="{ 'notifications__warn': notification?.type }">
<span>{{ notification.title }}</span>
</div>
<div>{{ notification.description }}</div>
</div>
<small class="notifications__caption">
{{ notification.duration }}
</small>
</li>
</div>
There are still a lot of things to consider that your example doesn't cover, so this isn't a complete answer, it is just pointing you to the relevant WAI-ARIA depending on what route you take.
The button
The first thing to consider is the button. You need to tell screen reader users what state it is currently in. For this we use aria-expanded to indicate whether the item it controls is currently opened or closed. (aria-expanded="true" for open, aria-expanded="false" for closed.)
At the same time we want to indicate what item this button controls (as the notification list isn't 'owned' by the element - for example if it was an <li> with a nested <ul> in a menu then the list would be 'owned' by it).
For this we would use aria-controls or aria-owns and point it to the ID of the element it controls. For the difference between them see this stack overflow post as a good explanation, in this example I would say it is aria-controls but yet again depends on your implementation and positioning in the DOM.
With regards to the button itself and where it sits in your menu, this is still considered navigation so it should sit within your <nav> element. However if this sits outside of your navigation along with say a 'help' and 'account' section you may consider those items part of a toolbar. (yet again I would say it doesn't apply here but something to look at)
Also it doesn't appear to be applicable here but if you include any links etc. within the 'popup' / modal that shows the notification list (i.e. a 'view all notifications' link), you should consider aria-haspopup="true"
The notification list
Right so we have a button pointed to the container (don't forget to give the container the relevant ID for aria-owns or aria-controls). Next what about the container itself?
Well in this example it appears that the container should be treated like a modal.
So for this reason you need to consider:-
trapping focus in the modal,
close with Escape,
returning focus to the button that activated it on close,
providing a close button that is accessible by keyboard,
a title for the modal (even if it is visually hidden)
What I would recommend is add some of the accessibility features above, try it with a screen reader and keyboard and see if it is easy to use. Once you have decided on your pattern ask some more questions on specific use case issues as the above is general guidance.
A few things to consider based on your markup
Additional things to consider from your example:-
use aria-hidden="true" on your icons, they don't add anything for screen readers (assuming your notification.title is descriptive).
For the notification title consider making it a relevant heading (<h2> - <h6> depending on position in document.
Don't forget to add some visually-hidden text that describes the warning level (I can see you have some form of colouring / distinction in [ngClass]="{ 'notifications__warn': notification?.type }" - expose the same info to screen readers.)
You currently have a <li> within a <div> - maybe change the outer <div> into an <ul> so it is semantically correct (<div class="notifications__item"> into <ul class="notifications__item">)
I hope the above is useful to set you on the right track, a lot to read but after reading the linked articles you should be able to make a better decision on what pattern you are using (as I didn't even mention making this a sub item within your menu) and can then ask some more questions on specific details you don't yet understand.
final thoughts / tips
test with a screen reader - this is the biggest tip I can give on working out how WAI-ARIA works and interacts with things.
Also if you are ever in doubt as to whether a WAI-ARIA attributre is applicable it is better to not include it.
Incorrect use or WAI-ARIA is actually worse than not including it at all so make sure you understand when to use an attribute reasonably well before implementing it. If I am ever unsure (as it still happens to me!) I tend to look at 2 or 3 examples of it in use and see if my pattern fits the examples I looked at.
Simple JsFiddle: http://jsfiddle.net/p5sZJ/17/
<ul id="mainTab" class="nav nav-tabs">
<li>First</li>
<li>Second</li>
</ul>
<div id="mainTabContent" class="tab-content">
<div id="first" class="tab-pane">
</div>
<div id="second" class="tab-pane">
<div id="second-accordion" class="accordion">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" href="#second-body">
Heading
</a>
</div>
<div id="second-body" class="accordion-body collapse">
Content
</div>
</div>
</div>
</div>
</div>
Preconditions:
1. Make sure the first tab is active.
2. Make sure accordion on the second tab is collapsed.
Steps to reproduce:
1.Click navigate to the second tab and then click on the heading of the accordion immediately.
2.Try expanding/collapsing the accordion.
Expected result: the accordion still works.
Actual result: the accordion freezes in the collapsed state and cannot be expanded.
Note: you may need to repeat these actions several times before the bug is reproduced.
I am basing my question on another question that I've asked a while ago:
Some problems with Bootstrap collapse + Tab navigation
I've also read this question, but it's also a little bit different:
Twitter bootstrap expand/collapse all - within bootstrap tabs
I think the accordion stucks because the browser (I reproduced the issue in chrome 36.0.1985.125 m) still thinks the accordion is hidden and doesn't fire the 'transitionend' event. The accordiong stucks in the transitioning state forever.
When I opened the tab programmatically (like in first question) I could set a timeout to resolve this issue, I don't think I can do so in this case.
Edit:
Just tried in FF. Couldn't reproduce.
Edit 2:
Maybe I am not completely right about the steps to reproduce the problem. Just try to do the following cycle fast:
1. Open second tab.
2. Open accordion.
3. Close accordion.
4. Open first tab.
5. Repeat from first step.
It might be that the accordion stucks while it is in process of hiding and you click on the first tab.
Edit 3:
Yes, I think the second set of steps is the right one.
Edit 4:
A link to swf file with video of me reproducing the problem.
http://1drv.ms/1ttaeJr
My question is what is the best way to resolve this particular situation?
So I have 4 different room transitions (up, down, left & right). I want to be able to set each transition to go to a specific page, and repeat if the same transition is clicked again.
For example, have "left" (data-animation 55) goto "Page1.html", and if I was already on "Page1.html", then it would just transition right back into the page. And I would have the "right" button, go to "Page2.html", etc.
https://github.com/cweigen/page_transition_room
There's the github repo, but this is the code that I've been messing with, experimenting with different versions of it to attempt going to a specific page and repeating if the same button is clicked, but go to another specific page is another menu button is clicked.
<div class="pt-triggers">
<div id="dl-menu" >
<ul class="dl-menu">
<li data-animation="54"><a href="#" > right </a></li>
<div class="pt-triggers1">
<li data-animation="55"><a href="#" > left</a></li>
<div class="pt-triggers2">
<li data-animation="56"><a href="#" > down</a></li>
<div class="pt-triggers3">
<li data-animation="57"><a href="#" > up</a></li></div>
</ul>
</div>
</div>
<div id="pt-main" class="pt-perspective">
<div class="pt-page pt-page-1"><iframe src="http://visiondigit.al/VisionDigital_Launch/" width="100%" height="100%"> </iframe></div>
<div class="pt-page pt-page-2"><iframe src="http://scsuchat.com" width="100%" height="100%"> </iframe></div>
</div>
You can't expect others to download the repo and build it for you. Time matters! That's the first thing you need to learn how to ask a question properly on StackOverflow.
As you are a new user, I'm going to make one-off excuse for you.
The library you are using is not the best choice for your task. However, it does provide as many as 67 different transition effects, which are defined in **pagetransions.js** and called using data-animation attribute. Have a look at the js file and you can choose the specific animation you are looking for.
To solve your other problem, you'll have to write a bit of your own code as the author doesn't provide a function to link each button with specific page, nor hiding the button when you are already on that page. You can use jQuery to do so.
But like I said, this is not the best nor the only option you have.
Check
THIS DEMO
I have created a structure that mostly mimics your requirements. Have a play and try to understand the demo. The structure is quite simple. It uses two external resources which you can see and download from the fiddle.
I am creating a website with navigation that causes a page-jump. But when the page-jump event is executed my page will not load properly, and most content above the called is not loaded. Here is a copy of my navigation:
<div id="navbar-type">
<ul>
<li>BEAR SOUP</li>
<li>FIAT MOTORS</li>
<li>NEWSEUM</li>
<li>TEXAS PARKS</li>
<li>ZACH THEATRE</li>
<li>GUINNESS</li>
</ul>
</div>
How can I fix the code so that the items above the page-jump are visible?
Thanks
you just need to put <a name="bear-logo"> where you want the page to scroll to when the user clicks the link and the same for the others. For example, if you wanted to scroll to the <p> tag below, you could do it like this:
BEAR SOUP
<!--More Code-->
<a name="bear-logo">
<p>Bear Soup:</p>
There doesn't seem to be any error in the displayed HTML. However, you shouldn't need to include the target for inline page anchors.
I assume you actually have the links on the page. For example, <a id="bear-logo"></a>, <a id="fiat-logo"></a>, and so on.
Moreover, the issue you describe seems to indicate that there is some invalid code elsewhere on the page (perhaps JS or jQuery). I'd recommend commenting out sections of your HTML until you isolate the interfering culprit.
BTW, have you considering using a simple jQuery script to flow the navigation to the logos instead of just abruptly jumping to them?