I am not sure if tab navigation is the right term, but here goes. As you know if you hit the tab button on your keyboard the focus of the element changes to the next element. So the first question is, is this called tab navigation or is tab navigation like moving from one tab to another changing the screen (two different web page one on each tab)? Second question is how do I control the flow of the the tab when it is moving, for instance I want it to move vertically to a certain point before it moves horizontally. I am not even sure how to tag this so if I tag something wrong please correct me.
First:
Both can and are called tab navigation. But the one referred to that way more, is the one you describe. Using the tab button to move from one element to the next.
Second:
Most of the time you shouldn't mess with the tab navigation. People see a form and expect the tab button to work a certain way, when it doesn't then they usually assume that tab is broken for your website. It's also very browser dependent which means head-aches galore when messing with it.
If you must have the tab work a certain way, then form elements have a tabindex attribute, and you can set this to a number. The tab should then follow the numbers, i.e. from 1 --> 2 --> 3.
More info can be found here.
Any element in html has a tab index <element tabindex="number">. Hitting the tab will traverse the elements on your page. The navigation part of your question is answered -- as you concluded in the first of two alternatives for interpretation -- nicely here: http://en.wikipedia.org/wiki/Tabbing_navigation
Related
I'm mainly interested in the a11y aspects
So as you might be aware, sometimes you might wish to have a button that acts as an anchor.
These are 4 ways (I can think of) of approaching this issue:
1. Button inside an anchor element
<button>Button</button>
2. Anchor inside button element
<button>Button</button>
<!-- Also should it be a href or button onclick (?) -->
3. Anchor styled as a button (without a button element)
<a class="buttonLike" href="//redirection">Button</a>
4. Button acting as a redirection (without an anchor element):
const button = document.getElementById('button')
button.addEventListener('click', () => {
window.location.href = "//redirection"
})
<button id="button">Button</button>
I've tried to find an answer to this myself. Closest I could find was this excerpt:
According to the MDN anchor spec, which states the following:
Anchor elements are often abused as fake buttons by setting their href to # or javascript:void(0) to prevent the page from refreshing, then listening for their click events .
These bogus href values cause unexpected behavior when copying/dragging links, opening links in a new tab/window, bookmarking, or when JavaScript is loading, errors, or is disabled. They also convey incorrect semantics to assistive technologies, like screen readers.
Use a <button> instead. In general, you should only use a hyperlink for navigation to a real URL.
Unfortunately this doesn't help me too much. Basically all it states is you should not use the third approach (anchor styled as a button) if you don't mean to provide a real link to it, which is not what this question is about.
Is there any official WCAG on this subject matter that I was unable to find or?
Option 1 is not valid HTML.
Option 2 is not valid HTML.
Option 3 is the correct choice here.
Option 4 is semantically incorrect.
Semantics are one of if not the most important aspects of accessibility.
There are two things at play which dictate option 3.
The first is that an anchor should be used only to jump to sections and to navigate between pages.
The second is that a button should perform actions on the same page.
Now if you want to style a call to action link to look like a button that is fine but make sure you use the correct semantics, but make sure that CTA leads to a new page or it isn't semantically correct.
And although it is swearing on StackOverflow to mention SEO, a hyperlink rather than a JavaScript redirection will be far better.
The first and second rules of ARIA say:
1st rule : If you can use a native HTML element [...] then do so
2nd rule : Do not change native semantics, unless you really have to.
Interactive elements like a and button can't contain other interactive elements:
The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links).
So, as what you want to do is linking to a page, your third solution is obviously the only one correct.
I think you might have confused the "bogus" stagement which refers to your 4th example.
From my little experience with Accessibility and semantics there is no "one size fits all". It really depends on your priorities and the user experience you are aiming for.
A <button> gets all the accessibility goodies from the browser automatically: Being selected or pressed using the tab or spacebar/enter keys.
A <a> element is a link, links are meant to be used as links or anchors within a page.
Anchors are not as important in comparison to a button within a page. From a user experience point of view; a button is used by people to interact with a UI, either to confirm or make the UI do something. Pressing a button provides a different feedback compared to a link. Anchor links on the other hand help a user with finding content within a page.
Again, it really depends on what you are trying to do:
Is this a terms page or an article? Then list your anchor links without any button-like styling
Does this a link that has to look as a button so users find it easier to spot or interact? Then style it as a button without it being actually a <button>.
How do I make a slide show of text?
For exemple, on my “about” page (for my brand), I have three different points, but I don’t want to have them all together so I have three different parts (still in my “about” section) and when someone presses “continue” or “next”, a new point is switched out with the first one (still in the “about” sub page).
This has been answered here: Very Simple with Link Click Change the Content of a Div on a Single Page
Basically you want to use onclick events to toggle between versions of content for a div.
I am trying to implement "Anchor Jumping" functionality using JavaScript and Angular 2 in my application, Means user can jump across the section within a page.
As per the client requirement, User can jump(Navigate) the section using of pressing Ctrl+Shift+Left/Right Arrow key.
Here, I add one snap to clear out the question as below.
As an example, Suppose first time focus on Menu and user press the Ctrl+Shift+Right Arrow at that time focus should be go to next element item(i.e. Breadcrumb section or any section).
I am very confuse about, How to manage the dynamic loading content? (How can I count this dynamic content in my section?)
Please suggest any idea to achieve this functionality.
What you need is a focus manager. I wouldn't bother writing one from scratch, Angular Focus Manager is one example of how to solve this problem. It also incorporates Mousetrap.js, which adds shortcut directives.
Your dynamic content can always be wrapped in something (even a div) that has its focus managed.
I hope this helps!
In Oracle ApEx, I have 6 regions on one page. Within Region 5, I have a report with an edit button that branches to another page, where I can edit some details, hit the save button, which then returns me back to the original page, with the 6 regions.
On return though, it branches back to the top of the page, where region 1 is.
Is there anyway of branching back to region 5 from where I initially pressed the edit button instead of scrolling to the top of the page?
If so, how?
Thanks.
See this example page. It has 3 reports (all the same as it happens). Each report has a link that takes you to another page with a Cancel button. When you cancel, it returns to the first page and scrolls to the report you clicked from.
How it works:
In each of the report regions I added a named anchors in the HTML header like this:
<a name="REPORT1" />
In the links for each report I pass a value like "REPORT1" to an item called P18_RETURN_ANCHOR in the second page (I made this item visible just to help you follow what I have done; in reality you would probably use a hidden item).
In the second page's Cancel button I branch back to page 17. In the "with these values" property I put #&P18_RETURN_ANCHOR. This has the effect of adding a tag like #REPORT1 to the end of the URL, which means "scroll down to the anchor named REPORT1". (This is standard browser behaviour, not Apex-specific.)
I'm building something similar to this - http://www.impressivewebs.com/demo-files/content-switcher/content-switcher.html
I wondered if anyone had any ideas as to how I can show the current panel in the navigation WITHOUT using JavaScript - pure CSS.
I'm fairly confidant it's not possible but I thought I'd ask anyway.
Just to clarify...
You'll notice that when you click a link on this page - http://www.impressivewebs.com/demo-files/content-switcher/content-switcher-javascript.html the link you just clicked on highlights to inform the user which panel they're looking at. That's what I want to do in CSS.
It's possible, believe it or not, it's just really tricky. This should get you started: http://thinkvitamin.com/design/css/how-to-create-a-valid-non-javascript-lightbox/ The key bit is captured in this quote:
I'm sure you are all aware of linking to an an element on the same page with the use of the ID attribute and how it works. However, you may not have known that linking to an element that is hidden off the page causes the element to be "pulled" into view as opposed to the window jumping down to that element.
So basically, you'd put all of your slides off-page and then have the numbered links use anchors to pull those into view. Your use case should be a bit simpler than the one she's doing, since you don't have to dim out the rest of the page.
What you need to do is to put what you need to slide inside a container with fixed size and "overflow" property set to hidden.
Then, inside this container, you put your "slidable" contents inside a list of anchor elements with "display" set to block and size the same of the container.
If, from a link on the page, you call one of the anchors in the list, the element with the correspondent anchor name will automgically show up..
simple as that.