I am trying to create a dropdown with the options taking you to external sites or in my case my website but another language.
I have already made the dropdown but I don't know where to put the code which will allow you to go to the site.
$(document).ready(function() {
$('button').click(function() {
$('ul').toggleClass('active')
})
})
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<div>
<button class="btn">Change Language</button>
<a href="https://discord.com/oauth2/authorize?client_id=709030261605793803&permissions=171166800&scope=bot">
<button type="submit" class="btn">Invite To Discord</button>
<a href="">
<button type="submit" class="btn">Get Started</button>
<ul class="active">
<li>Français</li>
<li>Português</li>
<li>русский (Russian)</li>
</ul>
</a>
</a>
</div>
You need to replace the # within your <a> tags with the actual urls of the page you want to direct to. Also, your html doesn't seem correct. Links within links, plus the addition of buttons all seems very confusing. Depending on what you are trying to do, try simplifying it to something like this...
<div>
<ul>
<li>Français</li>
<li>Português</li>
<li>русский (Russian)</li>
</ul>
</div>
Related
I have a lengthy list of buttons that I want to make WCAG compliant. Many of the items have endnotes (marked with an asterisk) as below. What is the proper way to provide the accessible description for these endnotes?
As far as I know, some browsers are not reading aria-describedby on not focusable elements.
<ul aria-describedby="list_description">
<li><button>Element **</button></li>
<li><button>Element</button></li>
<li><button>Element *</button></li>
<li><button>Element</button></li>
<li><button>Element *</button></li>
<li><button>Element *</button></li>
<li><button>Element **</button></li>
<li><button>Element</button></li>
<li><button>Element</button></li>
<li><button>Element *</button></li>
<li><button>Element **</button></li>
</ul>
<p id="list_description">
* - Important element <br>
** - Very important element
</p>
I was thinking about the solution described here: Accessibility and asterisks end notes, but placing <a> inside <button> doesn't seem right.
Another way is to provide duplicated descriptions for every list item.
What would you suggest to approach it?
placing <a> inside <button> doesn't seem right
Not only does it not feel right, it's not valid html :-) If you look at the <button> spec, under "content model", it says "there must be no interactive content descendant". An <a> is interactive so is not allowed inside a button.
Since you already have the text on the page that documents what * and ** mean, I would put IDs on those elements and then refer to them in the aria-labelledby attribute on each button.
I would also "hide" the * and ** in the button text from the screen reader since the user doesn't need to hear "star" or "star star". You do this with aria-hidden.
The final solution would be:
<ul>
<li>
<button id='b1' aria-labelledby='b1 vimportant'>Element
<span aria-hidden="true">**</span>
</button>
</li>
<li>
<button id='b2' aria-labelledby='b2'>Element</button>
</li>
<li>
<button id='b3' aria-labelledby='b3 important'>Element
<span aria-hidden="true">*</span>
</button>
</li>
<li>
<button id='b4' aria-labelledby='b4'>Element</button>
</li>
<li>
<button id='b5' aria-labelledby='b5 important'>Element
<span aria-hidden="true">*</span>
</button>
</li>
</ul>
<p id='important'><span aria-hidden="true">* - </span>Important element</p>
<p id='vimportant'><span aria-hidden="true">** - </span>Very important element</p>
Note, for consistencies sake, I put IDs on all the buttons and used aria-labelledby on all the buttons even though the buttons without a footnote don't really need them. It kind of makes for some silly code to have a button labeled by itself but it makes it easy to add other footnotes or have some simple text that is applied to the "not important" elements. If that's not likely, then you can remove the IDs and aria-labelledby on the simple buttons:
<ul>
<li>
<button id='b1' aria-labelledby='b1 vimportant'>Element
<span aria-hidden="true">**</span>
</button>
</li>
<li>
<button>Element</button>
</li>
<li>
<button id='b3' aria-labelledby='b3 important'>Element
<span aria-hidden="true">*</span>
</button>
</li>
<li>
<button>Element</button>
</li>
<li>
<button id='b5' aria-labelledby='b5 important'>Element
<span aria-hidden="true">*</span>
</button>
</li>
</ul>
<p id='important'><span aria-hidden="true">* - </span>Important element</p>
<p id='vimportant'><span aria-hidden="true">** - </span>Very important element</p>
I'm creating a simple notes SPA for my portfolio and i'm wondering what would be the correct HTML tags to use while creating the sidebar. I was using lists like everybody else but after i read an article about how listless navbars are better to SR (screen reader) users, i'm thinking about said technique, so instead of this:
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Help</li>
<li>Contact</li>
</ul>
</nav>
We have this:
<div>
<a>Home</a>
<a>About</a>
<a>Help</a>
<a>Contact</a>
</div>
But then again, the navbar i'm creating does not technically includes links, but more like actions, like this:
/* Clicking shows saved notes */
<div class="nav-item">
<div class="nav-item__inner-ctr">
<i class="note-icon"></i>
<span>Notes</span>
</div>
</div>
/* Queries through saved notes */
<div class="nav-item">
<div class="nav-item__inner-ctr">
<i class="search-icon"></i>
<span>Search</span>
<div>
</div>
You get the point. So what should i use to group these elements? Thanks for your help in advance and sorry for the long post.
Is it a set of navigation links? Use a nav element.
Is it a list of things? Use an unordered or ordered list.
Is it something that the user is supposed to click on which isn't a link? Use a button element.
Is it multiple of these things? Combine multiple of these things.
I created an Angular component which has a navbar, which is created as an unformatted list. By clicking on a list element, I want to call a method from the component.ts, which changes the showed component within this component.
I am an absolute beginner to Angular and web development, so I need help to solve that.
I tried using button oncklick="methodcall()" and a href="methodcall()" in the list element, which both worked. But using a button changes the styling of my navbar icons and a link shows the function call in the uri. I don't want any of this side effects.
html:
<nav>
<ul>
<li onclick="switch('page1')">page1</li>
<li onclick="switch('page2')">page2</li>
</ul>
</nav>
component.ts:
switch(propertyName: string) {
...
}
An easy way to call the method without changing my styling or the uri would be great!
You should be able to use (click) rather than onclick.
Something like this:
<nav>
<ul>
<li (click)="switch('page1')">page1</li>
<li (click)="switch('page2')">page2</li>
</ul>
</nav>
Depending on how you are switching pages I would also consider using Angular Routing, it's incredibly powerful! Check it out.
You need to put parentheses around the event to bind it.
Template/HTML:
<li (click)="switch('page1')">page1</li>
Component.ts:
export class ClickMeComponent {
public switch(pageId: string) {
// do something
}
}
Here's the official Angular documentation about event binding:
https://angular.io/guide/template-syntax#event-binding
<nav>
<ul>
<li (click)="switch('page1')">page1</li>
<li (click)="switch('page2')">page2</li>
</ul>
</nav>
Should work, but remember that it is actually not semantically correct, also for accessibility reasons I would always use a button or anchor for clicks. The styling for your icon can be kept in its original state by CSS. I would advise to do the following
<nav>
<ul>
<li>
<button type="button" (click)="switch('page1')">
<span class="icon"></span>
<span class="label">page1</span>
</button>
</li>
<li>
<button type="button" (click)="switch('page2')">
<span class="icon"></span>
<span class="label">page2</span>
</button>
</li>
</ul>
</nav>
I am working on a bespoke WordPress build and for some reason, I just cannot get some anchor links to work. It's driving me potty and I just don't know what the problem is.
I have discovered, static anchor links are working fine (the back to top button works). However, I am using Advanced Custom Fields to generate ID's for the anchor tags. The IDs are generating correctly, but won't work as anchor tags.
Anyone have any ideas? The bit I am referring to is the service boxes near the bottom of the page. The idea being you click on these and that they will take you to the services page, and down to the relevant section.
The markup I am using is:
<ul class="cf">
<li>
<div>
<a href="/services/#dimensional-surveys">
<div class="filter"></div>
<img width="500" height="600" src="pexels-photo-175771-500x600.jpeg" class="attachment-feature size-feature" alt="" />
<h3>3D Dimensional Surveys</h3>
</a>
</div>
</li>
</ul>
<ul class="service-list cf">
<li id="#dimensional-surveys">
<div class="feature" style="background-image:url(pexels-photo-175771.jpeg);">
</div>
</li>
</ul>
Just remove the # from id and it will work.
<ul>
<li id="example"></li>
</ul>
I have looked at your page
The point where an ancor should jump to should have no #
You do: <li id="#dimensional-surveys">
But do just <li id="dimensional-surveys">
Fix that first and test again.
You don't want the '#' on the anchor: <li id="#example"></li> should be <li id="example"></li>
In the middle of my page I have this <div> which includes a list. When I view the page source I see all the code there, but the only thing actually rendered for the user to see in the browser is the "Brand" h4 heading. (note that this is actually generated dynamically, and this is example output)
Also I have checked in several different browsers on several different machines so I don't think thats the issue
Is there something obvious I'm missing here why my list is not displaying?
<div class="filter-group filter-group-brand">
<h4>Brand</h4>
<ul class="nav-brand ">
<li class="collection-container aimpoint active ">
<div class="collection-name">
<a title="Narrow selection to products matching tag aimpoint"
href="/collections/firearm-accessories/aimpoint">
<i class="check-icon"></i> Aimpoint
</a>
</div>
</li>
<li class="collection-container aimshot active ">
<div class="collection-name">
<a title="Narrow selection to products matching tag aimshot"
href="/collections/firearm-accessories/aimshot">
<i class="check-icon"></i> Aimshot
</a>
</div>
</li>
<li class="collection-container barska-optics active ">
<div class="collection-name">
<a title="Narrow selection to products matching tag barska-optics"
href="/collections/firearm-accessories/barska-optics">
<i class="check-icon"></i> Barska Optics
</a>
</div>
</li>
</ul>
</div>
Without any CSS this works well and <li> elements will appear. Always think about giving your CSS code when you have a display error/problem
You must have an error in your CSS file. Check for display:none or hidden properties, etc on the following classes : collection-name, new-brand, collection-container.
Also you have empty <i> tags, just in case it's an error.