So I've searched high and low on the site and can't find an answer that addresses my problem specifically.
I tried making the links in the usual way - gave an id attribute, then used href# as it was a link on the same page - and they worked fine for a while, I think it was when I added pics to the page that they stopped working but I'm not sure. They only work now if I click on them twice - has anyone else experienced this issue?
I've made sure all elements eg body are closed, and none of the IDs are duplicated.
Early Life<br />
Career<br />
Equipment<br />
Techniques<br />
Dan's top 5 blues fusion guitarists
<H2 id="Early Life">Early Life</H2>
<h2 id="Career">Career</h2>
Related
I have be rewriting my website to be accessibility friendly and have a really good handle on good behavior, but I'm having a problem with the following pattern:
I have a list page of blog entries that I am trying to remove a duplicate link alert for (I know it's just an alert, but it's right to alert me).
<article>
<a href="destination">
<img src="decorative picture.jpg" alt="">
<h2>Blog entry title</h2>
</a>
<p>Summary of blog post and other meta info about the post</p>
<p>
<a href="destination" class="btn btn-details" tabindex="-1"
aria-label="Continue reading about Blog Entry Title">
Continue reading
</a>
</p>
</article>
The usual pattern discussed is when you have an image and title together (solved), but what should I do with the "continue reading" part? It is not, nor should it be, near the image/title, but it really is redundant. I thought about either making the link or the surrounding paragraph aria-hidden="true" because "Continue reading" is really stylistic, someone in a screen reader would know to click the link above, but I know we're not supposed to put links in a hidden context. I thought tabindex="-1" would solve that problem, but there is still a link there, it's just not focusable and is weird for visual navigators because they can't tab to it.
I found the following article, which makes me wonder if I should remove tabindex and use aria-labeledby to bring some semantic connection to the previous link?
<article>
<a id="md5-hash-of-destination" href="destination">
<img src="decorative picture.jpg" alt="">
<h2>Blog entry title</h2>
</a>
<p>Summary of blog post and other meta info about the post</p>
<p>
<a aria-labeledby="md5-hash-of-destination" href="destination"
class="btn btn-details">
Continue reading
</a>
</p>
</article>
What is the optimal way to "eliminate" the entire Continue reading link to give the best UX to people who use screen readers et al?
I think the key to your question is at the very end where you're asking about the UX since the code you have is technically accessible according to WCAG.
Having two adjacent links go to the same destination isn't ideal but it's not a horrible UX either. Users with mobility issues will have two tab stops to navigate through for each article, which can be draining for some assistive technology such as a sip-and-puff device.
I'm not sure I see the need for the "continue reading" link at all. Hearing the blog title and that it's a link, then a summary afterwards seems sufficient. What benefit is the "continue reading" link? I suppose my question might be better asked on https://ux.stackexchange.com/.
If you have to keep the second link for whatever reason, you definitely don't want tabindex="-1" on the link. That would give you a link that mouse users can click on but keyboard users couldn't. Technically, that's not a failure of WCAG 2.1.1 since that guideline says that all functionality of the page must be available to keyboard users, and since your first link is available, having the second link unavailable doesn't fail.
But if you shouldn't have tabindex="-1" on the link, then you shouldn't have aria-hidden="true" either. As you said, interactive elements should not be aria-hidden.
If you really want to keep the second link, my first choice is just leave it as is. If you only want one link clickable, then perhaps make the entire <article> a link. That would cause the blog title and the blog summary/metadata and the "continue reading" to all be read as the link name. That makes for a pretty wordy link, which isn't a great UX either.
So I'm not sure you have a win-win situation. My first choice is to remove the second link completely. The "continue reading" doesn't seem to have any benefit.
Your second code example is not much different from your first. You changed the label of the second link so it ends up being less accessible than your original code. You'll hear "blog entry title" as the name of both links. The "continue reading" will not be announced because you're overriding the link text with the aria-labelledby.
I've got a problem with Blazor, probably something with routing. I'm using MudBlazor components and I can see a strange behavior. I've got the navigation menu (MudNavMenu) and when I'm choosing to go to another page, it redirects me successfully, however it's not redirecting to the beginning of the page - it's redirecting to the same moment as the last page.
So for example: You scrolled all the way down, Yoy were at the end of the page, then You choose to go to another page and this page is loaded at the end, not at the beginning.
I have no idea why is that (and I would like a new page to be loaded at the beginning of course). I tried with normal href, MudBlazor Href, hrefs/Hrefs with Id (#), code-behind NavigationManager with NavigateTo method. It behaves same for every solution.
MainLayout.razor:
<MudLayout>
<MudAppBar Style="background-color: #FFFFFF">
<MudImage Width=200 Src="images/svg/logo-blue.svg"></MudImage>
<p class="title-text">Some Title</p>
<MudSpacer />
<MudIconButton Icon="#Icons.Material.Filled.Menu" Color="Color.Info" Edge="Edge.End" OnClick="#((e) => DrawerToggle())" />
</MudAppBar>
<MudDrawer #bind-Open="#_drawerOpen" Anchor="Anchor.Right">
<NavMenuMud />
</MudDrawer>
<MudMainContent>
<MudContainer MaxWidth="MaxWidth.Medium" Class="pt-5">
#Body
</MudContainer>
</MudMainContent>
</MudLayout>
#code {
bool _drawerOpen = false;
void DrawerToggle()
{
_drawerOpen = !_drawerOpen;
}
NavMenuMud.razor
<MudNavMenu Bordered="true" Rounded="true" Margin="Margin.Dense" Color="Color.Info" Class="pa-2">
<MudText Typo="Typo.h6" Class="px-4">Navigation</MudText>
<MudText Typo="Typo.caption" Class="px-4 mud-text-secondary">Click to navigate</MudText>
<MudNavLink Href="/" Match="NavLinkMatch.All" Icon="#Icons.Rounded.Home">Main page</MudNavLink>
<MudNavLink Href="/Example1" Match="NavLinkMatch.Prefix" Icon="#Icons.Rounded.Info">Example1</MudNavLink>
<MudNavGroup Title="List" Icon="#Icons.Rounded.ListAlt">
<MudNavLink Href="/Example2">Example2</MudNavLink>
<MudNavLink Href="/Example3">Example3</MudNavLink>
<MudNavGroup Title="Examples">
<MudNavLink Href="/Examples/Example4">Example4</MudNavLink>
</MudNavGroup>
</MudNavGroup>
</MudNavMenu>
Beside these, I have some razor components with content of course (some MudTexts, MudPapers etc., nothing questionable).
I'm facing a similar problem. A long search for a solution to this problem led me to change here, I didn't find an answer here, I started digging guides for redirecting to blazor wasm.
And I noticed that I didn't read the guides carefully, in general, the App.razor file contains the following standard code:
<Found Context="routeData">
<RouteView RouteData="#routeData" DefaultLayout="#typeof(MainLayout)" />
<FocusOnNavigate RouteData="#routeData" Selector="h1" />
</Found>
From this code as a whole, it becomes clear that when switching to another page, the priority is towards the <h1> tag.
Just add the <h1> tag to the page and when you go to this page, you will be redirected to this tag
What do I have to do to get my images to show up on my webpage. I am trying to put the images in my html document. The box shows up but not the image. This the code <img scr="smile.jpg" width="120" height="90"/> I have not put the web page on the internet yet.
<HTML>
<HEAD>
<TITLE> Tay first Web page </TITLE>
</HEAD>
<BODY>
<H1 ALIGN="center"> Why do I want to learn to code? </H1>
<P> I want to learn to code because it will help me develop the skills I need in web development and game development. My goal is to learn how to code in many different languages. It is amazing to me to be able to create something from scratch and making it into your vision.</P>
<H2 ALIGN="center"> Why is coding fun? </H2>
<P> Computer coding is <STRONG> wonderful.</STRONG> You get to make a web page with whatever info you want and add so many things to it to make it mind blowing.There are colours, images, flash, and you can even make a video game if you wanted too. The possibilities are endless and mind blowing.</P>
<H3 ALIGN="center"> How can coding be important in the real world? </H3>
<P> <EM>Technology</EM> is everywhere and is constantly changing. <MARK>Computers</MARK> are so intertwined in our lives. People view web pages all the time and are looking at code everyday. Being able to code can get you a job if you are efficient with different languages.
<P><STRONG>These are the best consoles ever!!!!</STRONG></P>
<UL>
<LI>N64</LI>
<LI>SEGA GENESIS</LI>
<LI>XBOX</LI>
<LI>XBOX 360</LI>
</UL>
<TABLE BORDER="1">
<TR><TD>First</TD></TR>
<TR><TD>Second</TD></TR>
<TR><TD>Third</TD></TR>
</TABLE>
<IMG SRC="smile.jpg" WIDTH="120" HEIGHT="90"/>
</BODY>
</HTML>
You have to spell src correctly (SouRCe). You have two of its letters reversed.
This would have been picked up if you had performed some basic automated QA by using a validator.
your img tag was wrong,it should be
<img src="smile.jpg" width="120" height="90"/>
Check the following:
Could your image possibly be in another folder than your your file?
Could there be other divs or elements on the page that might be "on top" of your image?
Could your layout place things "off-screen"?
Could there be code that sets something to visibility: none?
Could you have spelled the filename of the image wrong?
Are you absolutely certain you force refresh your browser window when trying to load again?
Please give us the entire code; preferably as a JS-fiddle.
If you're looking to find it on a Linux server, the file name is case-sensitive. If you set it up and tested it and found that it tests fine on a Windows system, you will perhaps not have noticed that smile.JPG and SMILE.jpg and Smile.jpg will all be treated as though they're the same thing as smile.jpg. On a Linux host, if you call for smile.jpg and it's been stored as smile.JPG (for example), you'll get the result you're observing.
Width and Height attributes should have units. You want them in pixels?
Try this:
<img src="smile.jpg" width="120px" height="90px"/>
Ok, first of all I'm sorry if my question appears unclear as I'm going to find it hard to explain. I don't know if you guys help with the coding at all but if you could set me off in the right direction that would be great.
Overview-
Basically similar to that of YouTube where on the side panel under "recommended >>" There is a single column with different rows. On each row there is a <div> element which contains a picture, title, who uploaded it and views. So these different parts so the title picture etc. are specific and link to that one video. I know the different videos that are recommended are based on numourous factors etc. But, anyway driving to the point here now-
Q- Is there a way of making the page load a random element or shall we say set for a video within a <div> tag?
I'll put up some code to demonstrate the basic layout:
<table>
<tr>
<td>
<div id="thumbnail">
<img src="thumbnail.png"
</div>
</td>
<td>
<div id="author">
<a> somebody </a>
</div>
</td>
... and so forth.
I have read up on how to make a random image come up upon load but is there a way of making a whole section or say a random style sheet come up on load? and each contain the different videos ( Just taking a stab in the dark here) or some sort of script?. Again I'm sorry if I'm sounded very vague or if I'm using the wrong terminology...
Probably a stupid question, but I honestly can't wrap my head around what's going wrong here.
http://harrisonfjord.com/thinkinc/
A site I'm building at the moment. I want to make an anchor link at http://harrisonfjord.com/thinkinc/index.php#sponsors. I've set up the anchor to occur just before in the following code:
<a name="sponsors"></a>
<div class="sponsors">
<div class="sponsors-left">
<h2>Sponsors</h2>
<p>Support the lovely folks who support us! Visit their websites, join their mailing lists and peruse their wares. They are all highly-deserving of your custom, and we're thrilled to have each and everyone one of them on-board!</p>
</div>
However, when you click on the anchor link it lands about halfway down the div. I thought it might have been a problem with the images loading after the anchor link loads, so I manually put in widths/heights for all of the tags. I also did the same for the cufon text replacement in the title bar.
None of that helped, so now I turn to you. The anchor is also not working in Firefox, for whatever reason. Any thoughts on what I've done wrong here?
Cheers!
I think the problem is resulting from the anchors with no contents that you are using.
Also, it appears that name= has been deprecated in favor of id= as a fragment identifier in certain elements (including A) which makes a kind of sense as ID attributes are unique whereas NAME attributes are not so guaranteed.
I'd try sticking the fragment identifier in the actual renderable entity such as:
<h2 id="sponsors">Sponsors</h2>
and see where that gets you. Incidentally, it looks like a good conference, I hope you get a comp admission.
I got the exact same issue in Firefox and solved it with this (same as sasi answer but more generic - it detect if there is an anchor in the url and scroll to it):
$(document).ready(function() {
if(window.location.hash.length > 0) {
window.scrollTo(0, $(window.location.hash).offset().top);
}
});
It seems it's a well known issue, see https://bugzilla.mozilla.org/show_bug.cgi?id=60307
I got problem in iphone for links with fragments, having
TYPES OF INFORMATION WE COLLECT, correctly linking to
<h3 id="info">TYPES OF INFORMATION WE COLLECT</h3>.
That wasn't working properly, and I fixed with a solution like this (using jQuery):
window.scrollTo(0,$('#info').offset().top);
I solved this with a trick, I have put an empty span element with the required ID and a line break before the div
<span id="sponsors"> </span>
<br>
<div class="sponsors">
<div class="sponsors-left">
<h2>Sponsors</h2>
<p>Support the lovely folks who support us! Visit their websites, join their mailing lists and peruse their wares. They are all highly-deserving of your custom, and we're thrilled to have each and everyone one of them on-board!</p>
</div>
</div>
GO TO SPONSORS
I don't know what standard your page is trying to conform to, but it is full of errors:
http://validator.w3.org/check?uri=http%3A%2F%2Fharrisonfjord.com%2Fthinkinc%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
Some of them so severe, for example:
Unable to Determine Parse Mode!
No DOCTYPE found, and unknown root element. Aborting validation.
that the validator gives up. Contrasted with a page like gnu.org
http://validator.w3.org/check?uri=www.gnu.org&charset=%28detect+automatically%29&doctype=Inline&group=0
You should be pleased that the site renders at all.
I had a problem with scrolling to the wrong position and I fixed it by disabling the Development Tools panel in Chrome :) Apparently Chrome calculates the position incorrectly when DevTools is open.