I'm working on WCAG compliance and I need to fix "Empty link" errors.
This is an example of one of the elements providing the error:
<a style="bottom: 0px; left: 7px; width: 25px; cursor: default;" class="histogram_bar_link" title="Less than 2,016 (0)" href="#"
onclick="AjaxControlToolkit.SliderRefinementControl.FindAndSetSliderHandlesAndValuesToRange(" ctl00_ctl43_g_453d6d26_9535_440a_ba72_b7b88de22f31_csr5
", 0, 1, this); return false;" activebarid="ctl00_ctl43_g_453d6d26_9535_440a_ba72_b7b88de22f31_csr5_HistogramActiveBar0" disabled="disabled">
<div id="ctl00_ctl43_g_453d6d26_9535_440a_ba72_b7b88de22f31_csr5_HistogramBgBar0" class="histogram_bar_background">
<div id="ctl00_ctl43_g_453d6d26_9535_440a_ba72_b7b88de22f31_csr5_HistogramActiveBar0" class="histogram_bar_active" style="height: 0px; margin-top: 50px;">
</div>
</a>
I need to find this element and other anchor tags which contain no text within so I can fix them through JS
This is not a link. Do not try to fix it client-side, just correct the HTML. Ideally if you update whatever control generates that HTML, then you do not need to rely on client-side script.
1. Choosing the right control
Let's address the first issue, using the right element...
Does the Control Take Me to Another Page? Use an Anchor
If, when clicked, tapped, or activated by keyboard or voice (or insert novel interaction method here), the user is whisked to another URL (including an anchor on the same page), then use <a href="[URL]">. Make sure you use the href attribute and that it has a real URL, not a “#” (otherwise you’re probably relying on JavaScript, which is not at all necessary for a hyperlink). If an href points to just a “#”, then you’re probably doing it wrong. If it points to a named anchor as part of your progressive enhancement efforts, then that’s totally valid.
Does the Control Change Something on the Current Page? Use a Button
If, when activated, the user is not moved from the page (or to an anchor within the page), but instead is presented with a new view (message boxes, changes in layout, etc.), then use a <button>. While you could use an <input type="button">, it’s more likely you’ll get into conflicts with pre-existing styles and subsequent developers (like me).
Does the Control Submit Form Fields? Use a Submit
If, when activated, information the user has entered (either by manually typing or by choosing items on the screen) is being sent back to the server, then use an <input type="submit">. This had better live within a <form>. If you need more styling control or have to embed more than just a simple text string, use a <button type="submit"> instead. I tend to prefer <input type="submit"> as I find it runs into fewer conflicts (both mentally and stylistically) with developers.
Keyboard User Consideration
Think of keyboard users for a moment. A hyperlink can be fired by pressing the enter key. But a true button can be fired by pressing the enter key or the space bar. When a hyperlink has focus and the user presses the space bar, the page will scroll one screenful. If there isn’t more to scroll then the user just experiences nothing. Given a set of interface elements that look the same, if some work with a space bar and some don’t, you can’t expect users to have much confidence in how the page behaves.
I have a CodePen demo that shows this in action: http://s.codepen.io/aardrian/debug/PZQJyd
I think it’s also worth mentioning that events triggered by a space bar only fire when the key is released, whereas using the Enter key will fire the event as soon as you press the key down (prior to releasing it).
For reference: http://adrianroselli.com/2016/01/links-buttons-submits-and-divs-oh-hell.html
2. Giving it an accessible name
Now let's talk about how you get an accessible name into that button. I assume you do not want it to be seen visually. In that case, give it a class of visually-hidden and apply these styles:
.visually-hidden {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
padding:0 !important;
border:0 !important;
height: 1px !important;
width: 1px !important;
overflow: hidden;
}
This will allow it to be read by screen readers. It also means you can (and should) dump that title attribute.
3. Combine it
Now take your control and adjust it accordingly:
<button style="…" class="histogram_bar_link" onclick="…" disabled="disabled">
<span class="visually-hidden">Less than 2,016 (0)</span>
<div id="…" class="histogram_bar_background">
<div id="…" class="histogram_bar_active" style="…"></div>
</div>
</button>
I have turned it into a <button> and given it an accessible name by inserting a <span> with the visually-hidden class to hide it from view.
Related
Im trying to create a facebook share button for my page that is accessibe by tab-indexing and pressing enter (for accessibility). A lot of the solutions I had created were using javascript and wouldn't load my script until after tabbing out of the share button.
So far I have created this button.
<a tabindex="0" class="fb-share-button" href="javascript:window.location=%22http://www.facebook.com/sharer.php?u=%22+encodeURIComponent(document.location)+%22&t=%22+encodeURIComponent(document.title)" data-layout="button_count">
<img src="/sites/all/themes/saralee/images/icon-facebook.png" alt="facebook icon">
</a>
This almost gives the desired outcome except I need it to open in either a new tab or an iframe. Which I haven't been able to do with keeping a valid url. (since the above button parses the current url). using target="_blank" doesnt work.
Quick Note - The best option would be to build the URL on the server and serve it as part of the HTML, use the JavaScript option below if you are unable to do that for any reason.
All other points other than the URL below are important to make your share 'button' accessible.
Instead of using an inline function on the button, build the URL in a separate JavaScript function and then apply it on document load.
JS
var URL = "http://www.facebook.com/sharer.php?u=%22+encodeURIComponent(document.location)+%22&t=%22+encodeURIComponent(document.title)";
var elements = document.getElementsByClassName("fb-share-button");
elements[0].setAttribute("href", URL); //using [0] to get first element, would be better to use an ID or simply **build the URL on the server before loading the page** and serve it as part of the HTML.
HTML
<a target="_blank" class="fb-share-button" href="fallback URL In Case Of JS Failure" data-layout="button_count">
<img src="/sites/all/themes/saralee/images/icon-facebook.png" alt=""/>
<span class="visually-hidden">Share This Page on Facebook (opens in new window)</span>
</a>
CSS
.visually-hidden {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap; /* added line */
}
Because you are no longer setting window.location using target="_blank" will work as expected (window.location was overriding the functionality of the link).
Also notice that I removed the tabindex as links are focusable by default (so it isn't needed).
I also changed the alt description to "" and added a 'visually hidden' <span> containing the purpose of the link.
I have included the CSS to make something 'visually-hidden' by applying that class to an item, as it is a useful tool to have in your accessibility toolkit!
Note how I indicated the link 'opens in a new window' within brackets to let screen readers know the behaviour of this link.
An empty alt tag is used to mark an image as decorative (make sure it is empty and not null, i.e. alt="" NOT alt).
Visually Hidden text is still accessible to screen readers but will not show visually.
To allow my users to pick their colour scheme of my site, I decided to add a "Settings" page that lets them pick their colours. The simplest way to choose a colour that I could think of was to let them type a colour's name, and have the text they enter fed directly into the CSS of the elements. This code shows the idea.
var saveButton = document.getElementById('saveButton');
var saveBox = document.getElementById('textToSave');
var colourBox = document.getElementById("colourBox");
saveButton.onclick = function() {
colourBox.style.backgroundColor = saveBox.value;
}
#colourBox {
display: inline-block;
background-color: grey;
height: 100px;
width: 100px;
}
input {
margin: 0px;
}
input,
Button {
height: 30px;
font-size: 15px;
margin-left: 10px;
margin-right: 10px
}
<input id="textToSave" type="text">
<button id="saveButton">Save</button>
<br>
<div id="colourBox"></div>
Since I'm directly feeding user input into the element though, I'm worried this might open my site up to an injection attack.
I know very little about exploits though. The best I could do to attempt an injection attack was to enter the following "colour" into the text box:
yellow; width: 200px;
But the second statement was dropped, likely because I'm specifying in the JavaScript that I'm changing the background colour, and not the style in general.
Is the above fiddle susceptible to an injection attack?
I think this should be safe. You're not assigning to the style attribute in general, you're assigning specifically to element.style.backgroundColor. This doesn't get re-parsed as HTML or a CSS style string.
If it's not a valid color specification, it will just be ignored.
Note that this would not be entirely safe if you were doing this with an attribute that allows URLs, such as background-image. The user could then enter the URL for any remote site, and execute code there. This might allow for some kinds of XSS exploits.
Use <input type="color" />
Since JavaScript and CSS run on client side (browser), it can not be used to attack to your website back-end. The worst case is that a user breaks his own view, but a page/browser refresh will undo the bad view. I hope this addresses your question.
I am trying to create a button on a web page to increase the page size, font size image size etc. This is for a Special needs school website in order to make it more accessible. website is www.applefieldsschool.co.uk. Please note it is a work in progress.
So far I have managed to come up with this;-
<button onclick="body.style.zoom='300%'">Zoom 300%</button>
This works but simply magnifies what is rendered on the page and is not responsive. My page is HTML5 and CSS3 responsive to different viewport sizes etc.
If I use the keyboard shortcut Ctrl+ and Ctrl- This does exactly what I need. I now need to program a button to utilise the keyboard shortcut.
Sadly this is getting a little beyond my javascript skills (which I have only just, in the last week, started to play with) Thanks in advance.
It's not possible to tell your browser to 'Use the CTRL + + keys'.
Here is another thread which lists some possible alternatives. In particular:
body {
transform: scale(1.1);
transform-origin: 10% 10%;
// add prefixed versions too.
}
You can also set the font-size. Unless you did all your sizes in em, which is relative to the font size, this won't really zoom the page as such, but it will (obviously( change the size of the font (which may still be acceptable for you).
You can try this:
var value = event.keyCode;
Call it from onkeydown="keyCode(event);"
And here is the list of keycodes:
http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes
I guess the zooming is browser specific (please corret me if i'am wrong)
I'd recommend to add multiple styles, that you append on the website and define by your self.
for example, some CSS
/*default -no styles*/
body
{
font-size: 14px;
}
body.big
{
font-size: 20px;
}
body.omg
{
font-size: 25px;
}
body.omg img
{
width: 150%;
}
The pain with this is, that only the text will be scaled up. You will have to adress certain items to make them appear bigger. Like the <img> in the example.
Then you can address the styles on button click (you should maybe use something like jQuery to make this more clean...)
<button onClick="document.getElementsByTagName('body')[0].className ='big';">+ Zoom</button>
<button onClick="document.getElementsByTagName('body')[0].className ='omg';">++ Zoom</button>
Update here in an working example, using jQuery: http://jsfiddle.net/9DCry/
I want to link an entire <div>, but CSS2 does not support adding an href to a div (or span for that matter). My solution is to use the onClick property to add a link. Is this acceptable for modern browsers?
Example code:
<div class="frommage_box" id="about_frommage" onclick="location.href='#';">
<div class="frommage_textbox" id="ft_1"><p>who is Hawk Design?</p></div>
My test page is at http://www.designbyhawk.com/pixel. Updated daily.
Thanks for the help.
You don't need to do that. There's a perfectly simple and standards-compliant way to do this.
Block-level elements will by default take up the entire available width. a elements are not by default block-level, but you can make them so with display: block in CSS.
See this example (no Javascript!). You can click anywhere in the div to access the link, even though the link text doesn't take up the whole width. You just need to remove that p element and make it an a.
Attaching a click event handler to a <div> element will work for your users with JavaScript enabled.
If you're looking for a progressive enhancement solution, however, you'll want to stick with a <a> element.
It is acceptable, only it's not good for SEO.
Maybe you can make a <a> element act like a div? (settings it's style to display:block etc.)
It will work in every browser(even IE6). The only problem with this is that search engines probably won't fetch it since it's javascript. I see no other way to be able to make an entire div click-able though. Putting an "a" tag around it won't work in all browsers.
If all you're trying to achieve is a large clickable box, try setting the following CSS on an anchor:
a {
display: block;
padding: 10px;
width: 200px;
height: 50px;
}
HTML:
<div class='frommage_box'>
<a href='location.html'>CONTENT GOES HERE</a>
</div>
CSS:
.frommage_box a{
display:block;
height:100%;
}
By default block elements take up 100% width. We adjust the height to 100%. And this will allow spiders to crawl yoru page.
I have a <button> with an accesskey assgined to it. The accesskey works fine as long as the button is visible, but when I set display: none or visibility: hidden, the accesskey no longer works.
Also tried without success:
Use a different element type: a, input (various types, even typeless).
Assign the accesskey to a label that wraps the invisible control.
Note, I'm not sure if this is the standard behavior, but prior to Firefox 3 the accesskey seemed to worked regardless of visibility.
The behavior you are seeing is correct, you cannot "access" an element that is not displayed. Sal's suggestion will almost certainly work, but may I ask what your purpose is in doing this? There is probably a better way to accomplish what you are trying to achieve. Have you considered using a keypress handler?
I think you probably want to go with the other suggestions if you don't want a keypress handler. Try position:absolute; left:-9999px; to pull your content out of the page. Or use absolute position, change opacity to zero and z-index to -1. By using position absolute the element won't affect positioning of other content on the page, setting opacity will make it not visible. Even with opacity set to zero you can still click on the element and though you cannot see it it may prevent you from being able to click on other elements of the page so use a negative z-index to pull it behind other content.
You can apply a negative margin to push the element outsite of the visible page. I think many browsers and text readers ignore elements with display:none and possibly also visibility:hidden.
Easiest solution: height: 0px; margin: 0px; padding: 0px; in your CSS.
Instead of visibility or display attributes, position the button outside of the page
<button accesskey="a" style="position: absolute; top: -9999px">button</button>
Warning: using left instead of top causes a weird display bug in ie7