I'm working on a website, and I want to add gallery to it. But I have a problem - the gallery must be accessible to blind etc, and I have no idea how to do it.
Usually, in those kinds of galleries, I would do the html like this:
<ul>
<li data-src="path/to/image/1.jpg"></li>
<li data-src="path/to/image/2.jpg"></li>
<li data-src="path/to/image/3.jpg"></li>
<li data-src="path/to/image/4.jpg"></li>
<li data-src="path/to/image/5.jpg"></li>
<li data-src="path/to/image/etc.jpg"></li>
</ul>
and using css and jquery I would use the data-src and add it as a background to the li (because not all photos are squers, so I'll use background-size: cover;). Then, when user will click on the li, a popup will appear with the full size image.
There are some problems with that. For example, it must be clickable using tab in the keyboard. I can add a to the li, but is it ok not having href? And what the machine will "think" when it'll see empty ul list? Another problem is the popup. The html of the popup and it's img tag located at the bottom of the page, so the machine won't be able to see it immediately after click. Another problem is the alt. There won't be description to photos (because they aren't uploaded by me), so I'll leave the alt empty?
Thanks!
Principles:
Images that convey information must have a text description. Best practice is to always use am <img> for an informational image, however, you could also use a title attribute on the anchor around the image.
Everything must be keyboard operable. Anchors without an href will not be tab focusable, add href="#" to fix that problem.
Blind people are not the only keyboard users. Make sure that you can control the gallery with the keyboard only.
Manage the focus when dynamic content appears and disappears. Make sure that the focus goes onto the full size popup and that the "close" control is keyboard operable. When closed, focus should go back to the anchor that opened the image.
Controls should have the correct role. Links are used to go to different pages. Buttons are used to control things on the same page. Your "anchor" around the image is acting like a button so add role="button" to the anchor.
You will have to give the image uploaders a way to add the alt text for the images. Facebook is not a good example of accessibility - it is a bad example. Look at EasyChirp for a good example of how to do alts on images that are uploaded.
Related
Sorry if something like this has been asked, but I've spent a long time Googling it and searching it here.
I'm trying to build a homepage for a website where the menu is along the top, rolling over the menu items should show a description of the page in the middle of the screen, which they do, and this is working.
The problem is that because jQuery/JS is using the href tag to find the page the description is on, clicking on the menu item takes the user to a description page and not the actual page.
I've put the description paragraphs on separate pages from those they're describing since it'd be redundant if the description showed up on both home and the page the user wants to navigate to. I've also tried display=none in the CSS to get the description to be hidden in the main page and show on the homepage, but as the description carries the CSS from the main page, it's also being hidden on the homepage.
I'll post any code if asked, I wasn't sure whether to dump it all here or just certain parts.
Thanks
I have a section of a div container text that I'm trying to 'preview' another page, or at least show it when the mouse is over specific text - I don't want the actual text to be clickable since I need it to remain on the 'main' page
I've messed around using some custom CSS's to 'preview' data, locally, and provide a remote img src, but I cannot seem to find any examples to do this for a page.
You can get thumbnails of those pages that you want to show and when they hover that text you can show them that thumbnails. Tt is kind of tricking user since they are not actually seeing the page.
I have a link in my menu that opens up a fancybox with some ajax contents. This box contains links, like a menu for the data shown in the fancybox. I would like to be able to click these links and change the content of the fancybox but all I manage is to open a new box instead, which makes the screen fade to white and back which makes it look like it's flickering.
I tried using an array of content dictionaries to just change the but couldn't get it to load any of them. I've also added a rel to the links making it a album with arrows on the side so I can go to the next/previous and that works fine except that's not the type of navigation I want. It must be possible to do the same through links instead, but I can't figure out how. Can anyone help me with this?
Edit: a small jsfiddle of some things that I tried.
Fancybox supports iframes. You could make an iframe instead. And put in another html-page there.
You can try on each link
The links located on the same server or different domains?
Have you tried with onclick="window.location.replace(url)"
I use fancybox on our web system and that helped me with fancybox
I've seen a few sites offer a tool that allows users to drag a button to their favorites bar and then when they click on it, no matter what site they are on, a div of some form would pop up on the page. When I looked at the url of the button that I had dragged onto my favorites bar, I realized that it was actually javascript code.
How is this effect accomplished?
This is called a "bookmarklet". You can create a hyperlink that contains the necessary JavaScript code, which they drag into their bookmark toolbar.
It is as simple as creating a hyperlink on your page containing the JavaScript as its href. For example:
<a href='javascript:alert("you clicked a bookmarklet");'>Drag me to your bookmarks</a>
See it in action at JSFiddle...
In order to make it look like a button, CSS is applied (borders, background color, etc.).
Try typing this in the location bar of your browser, when you press return the javascript will execute automatically:
javascript:alert('hi');
Bookmark 'scriptlets' work using the same notion. If you have an <A> tag as follows on your page:
<a href="javascript:alert('hi');" >Hello Scriptlet</a>
And you drag it onto your bookmarks bar, you'll create a scriptlet with the same behaviour.
I designed my own gallery which consists of a bunch of thumbnails on load, and when they are clicked on the image pops out to a bigger picture so the user can see it more clearly. On these pop out windows I have the ability to specify a URL which the user will be sent to if he/she clicks on the popped out image.
Because this whole gallery is being loaded by JavaScript, search engines will not be able to see the links that are attached to the pop out boxes. I thought about putting a text link also below the gallery thumbnails, but I think that would just make the gallery look sloppy. I have also thought about creating a hidden link, but I believe that will be ignored by the search engines and its frowned upon.
Anyone have any idea on how I can get this link to look good, and be visible by search engines?
Googlebot is able to construct much of the page and can access the onClick event contained in most tags. For now, if the onClick event calls a function that then constructs the URL, Googlebot can only interpret it if the function is part of the page (rather than in an external script).
Some examples of code that Googlebot can now execute include:
<div onclick="document.location.href='http://foo.com/'">
<tr onclick="myfunction('index.html')">new page
open new window
Put the link right around your thumbnail:
<img src="thumb.jpg" />
Bind your expand function to the link and cancel the default behavior in your javascript:
$("a.thumb").click(function(e)
{
// show the larger version
e.preventDefault();
});
You could make your thumbnails link to the bigger picture and use JavaScript to ignore that actual link and open the popup with your current functionality. The thumbnails will get indexed and the links will get spider-ed as well.
use jquery event.preventDefault(); This will prevent the link action from happening, and you can do what you want to do with javascript. This is a good way of allowing sites to work for users without javascript enabled, but adding nice features for those that do. This way, the search engines will see the link and follow it, and users will still get the rich javascript experience you are creating.
<a href="link-to-page1.html" class="thumb-link">
<img src="thumbnail1.png" alt="thumb 1" />
</a>
<a href="link-to-page2.html" class="thumb-link">
<img src="thumbnail2.png" alt="thumb 2" />
</a>
<a href="link-to-page3.html" class="thumb-link">
<img src="thumbnail3.png" alt="thumb 3" />
</a>
then in your javascript:
$(document).ready(function(){
$(".thumb-link").click(function(event){
event.preventDefault(); // cancel the hyperlink default action
// do your javascript here
});
});