I have a number of paginated items and when the next numbered page and the next button are the same, then the wave accesibility tool raises an alert about redundant links that point to the same URL. Can this be resolved or should I ignore it? An example of my pagination code is below.
See page 2 and next where the links are similar below for the issue in question.
<nav class="pagination" aria-label="Pagination">
<ul>
<li>
<a href="/1/"
aria-label="Page 1"
aria-current="page">
1
</a>
</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>Next</li>
</ul>
</nav>
It can be ignored. As #andy says in his comment, this is more of a warning than a failure. In general, it's best to not have adjacent links go to the same destination but it's not a WCAG failure.
In your code example, the links are not adjacent. They're not "next" to each other in the DOM. There are several links in between the "2" link and the "Next" link so I'm not sure why it would be flagged as an issue anyway.
If I copy/paste your code into a demo and run WAVE, it does not flag the "Next" link as redundant. But if I change the "Next" link to point to the same destination as the "5" link, then I do get the redundant warning since the links are indeed adjacent to each other.
One might argue that the "2" link and the "Next" link fail WCAG 3.2.4 Consistent Identification since you have two links that go to the same destination but they're not labeled the same, but in your case, it makes sense that they have different names so I wouldn't fail 3.2.4 if I were doing an accessibility review.
Related
I've seen similar questions here, but none of them seemed to have a working solution.
I'm on Wordpress, BeTheme. I have a long page of services, where I use anchor links leadings to elements that are lower on the same page, and they work as expected. ex.
text
I need to add links that can land from any other page to the same elements, lower on the target page.
<a href="https://www.url.com/en/#id_name>text</a>
And what happens is, sometimes it seems to land on the id indicated by the anchor, and then immediately jump back to top, and others it seemingly just lands directly at the top of the page as if the anchor id wasn't there at all in the link.
Could it be that clicking on the link lands you at the correct element, but before the page has fully loaded, and when it loads it jumps you back up to the top?
Any help would be appreciated
I am using weebly site builder and so just a beginner on Html coding. I am having issues making anchors work on my pages. They seem to work on some systems and not others, and so I think there must be a better method.
Here is what I am doing
I have a guest author page and I want each guest, to have a direct link to his section of the web page
I set up an anchor as follows
Then use the following link to it
http://arthurvaso.weebly.com/guests2016.html/#smith2
On some computers/broswers this works just fine, in others, it just goes to the Top of the page instead of the section I want.
I basically have pages I want to make direct links to
Poet1
Poet2
Poet3 etc
I search here, an all the posts were either years old, or not exactly the answer I was looking for. It seems the newer the browser version, the less my method works.
I really appreciate any help, thanks!
There is a little trick to it, but it's an easy fix for you. You are missing in your Anchor.
Change:
<a id="smith2"></a>
To:
<a id="smith2"> </a>
Make sure to publish the changes.
And, note that your Anchor Link should be:
http://arthurvaso.weebly.com/guests2016.html#smith2
without the / after .html
A typical wordpress menu has one menu item with a top-level target of #, going nowhere, to allow for its multiple, working submenus which do go to targeted URLs.
Philosophically, is the onus on me to visually signify to users that this top level menu item is a dead menu item, with no target, so they don't select it and wait for a change that will never come?
What design feature can or needs to be used to signify a non-working menu item which has only working submenus?
Or is it worth pondering at all?
That's an interesting thought. You could change the cursor on hover to indicate text rather than the pointer for a link.
The onus is absolutely on the designer & developer to implement proper UX. An ideal design would effectively communicate the difference between a unlinked dropdown and traditional link.
Check out how Stripe does this with their main navigation. A prominent, eye-catching dropdown appears on hover. Clicking the main, parent link closes the dropdown. Clicking again re-opens the dropdown.
I'm just getting started with Drupal and I'm trying to implement a piece of content that states "A first generation family farm, Wheat Ridge, CO" and then immediately afterwards displays 4 social media icons. see image.
And I don't know what the best way to implement this piece of content is. Should it be a black, a content type, or something else completely? And what's the best way to reference the images in drupal?
I've never worked within a content management system before so any help would be greatly appreciated.
~Austin
Austin - It largely depends on wether the content editor of the website needs access to update that content. If so, creating a content type and then displaying that information in view block would be the way to go. You could also use an iconfont for the social media links and avoid images all together.
Assuming this piece of content never changes, I would create a small block for
A first generation family farm | Wheatridge, CO
...and a Drupal menu for the 3 social networks links, opening in a new window (on menu link edit page), with text hidden in CSS (text-indent:-9999px on 'a' tags), proper titles for tooltips, and icons in background image (CSS). You can use Drupal Menu Attribute to add ids or classes to your menu items and generate something like
<ul class="menu">
<li class="drupal default classes">FB</li>
<li class="drupal default classes">TW</li>
<li class="drupal default classes">PI</li>
</ul>
...and be able to assign proper background-image to your 'a' in CSS. Then you'll just have to put your block and your new menu block in the right region of your theme and adjust CSS. A content type would definitely be overkill.
Was looking for a way for informational text to show up once the mouse hovers over a few words anywhere within the website. I see that there are some plugins that handle this but they dont seem to do anything witin custom content types created by the site admin. In addition, tey dont sem to work for specific html tags surrounding the text I wish to be a glossary term.
For example, lets say I have the words "Option 1" between two list tags (li) I would want it to read "Here is text" upon someone mousing over
"Option 1" which appears in an unordered list.In other words, I specifically want it to work for all instances of "Option 1" that appear enclosed within (li) tags
Is this request too far fetched? Maybe there is a different way to do this entirely. I just want people to be able ot select options from a checkbox, but have a way to see what those options are in detail from that page where they are listed. Tooltips seem to work well for glossary entries so I figured maybe the same could be done.
Seems that most of the tooltip plugins are not setup in lieu of WordPress Custom Content Types.
The simplest way is simply to add the title attribute, like to make a list tag that looks like this:
<li title="Here is text">
Option 1
</li>
Of course, this, you can't style, or modify - it's entirely interpreted by the browser. Alternatively, you could look into creating your own tooltips, using Javascript or CSS3.