Not all tags work

HTML-CSS
1

i’ve added Alt tage to my images. but not all work. i checked my html and it seems fine.

http://www.charismacommunications.ca/422/gallery.html

<!DOCTYPE html>
<!-- Website template by freewebsitetemplates.com -->
<html>
<head>
	<meta charset="UTF-8">
	<title><title>Gallery - Charisma Communications</title></title>
	<link rel="stylesheet" href="css/style.css" type="text/css">
	<!--[if IE]>
		<link rel="stylesheet" href="css/ie.css" type="text/css" charset="utf-8">
	<![endif]-->
	<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox-plus-jquery.min.js"></script>
<title>Charisma Communications - Gallery</title>	
</head>
<body>
	<div id="page">
		<div id="header">
			<a href="index.html" id="logo"><img src="images/logo.png" alt="LOGO"></a>
			<ul id="navigation">
				<li class="selected">
					<a href="index.html" title="Home"></a>
				</li>
				<li>
					<a href="about.html">About</a>
				</li>
				<li>
					<a href="speaker.html">Speaker</a>
				</li>
				
				<li>
					<a href="gallery.html">Gallery</a>
				</li>
				
				<!---
				<li>
					<a href="services.html">Services</a>
				</li>
				
				<li>
					<a href="news.html">News</a>
				</li>
				<li>
					<a href="blog.html">Blog</a>
				</li>
                 --->
				<li class="last-child">
					<a href="contact.html">Contact us</a>
				</li>
				
				</ul>
		</div>
		<div id="contents">
			  <div class="gallery">
        <div class="thumbnail">
            <a href="images/AmericanGoldfinch.jpg" data-lightbox="gallery" data-title="American Goldfinch">
                <img src="images/AmericanGoldfinch.jpg" alt="American Goldfinch">
            </a>
        </div>
				  
				  
        <div class="thumbnail">
            <a href="images/cappedchickadee.jpg" data-lightbox="gallery" data-title="Black-capped chickadee">
                <img src="images/cappedchickadee.jpg" alt="Black-capped chickadee">
            </a>
        </div>
		<div class="thumbnail">
            <a href="images/cappedchickadee2.jpg" data-lightbox="gallery" data-title="Second Picture of Black-capped chickadee">
                <img src="images/cappedchickadee2.jpg" alt="Second Picture of Black-capped chickadee">
            </a>
        </div>		  
				  
		 <div class="thumbnail">
            <a href="images/Harris.jpg" data-lightbox="gallery" data-title="Harris Sparrow">
                <img src="images/Harris.jpg" alt="Harris Sparrow">
            </a>
        </div>
				  
		 <div class="thumbnail">
            <a href="images/Finch.jpg" data-lightbox="gallery" data-title="House Finch">
                <img src="images/Finch.jpg" alt="House Finch">
            </a>
        </div>
				  
		 <div class="thumbnail">
            <a href="images/Finch2.jpg" data-lightbox="gallery" data-title="Second Picture of House Finch">
                <img src="images/Finch2.jpg" alt="Second Picture of House Finch">
            </a>
        </div>	
		<br>
		<div class="thumbnail">
            <a href="images/Morning Dove.jpg" data-lightbox="gallery" data-title="Morning Dove">
                <img src="images/Morning Dove.jpg" alt="Morning Dove">
            </a>
        </div>	
		<div class="thumbnail">
            <a href="images/White Throated Sparrow.jpg" data-lightbox="gallery" data-title="White Throated Sparrow">
                <img src="images/White Throated Sparrow.jpg" alt="White Throated Sparrow">
            </a>
        </div>
		<div class="thumbnail">
            <a href="images/Eastern Phoebe.jpg" data-lightbox="gallery" data-title="Eastern Phoebe">
                <img src="images/Eastern Phoebe.jpg" alt="Eastern Phoebe">
            </a>
        </div>	
		<div class="thumbnail">
            <a href="images/Mallard Duck.jpg" data-lightbox="gallery" data-title="Female Mallard Duck">
                <img src="images/Mallard Duck.jpg" alt="Female Mallard Duck">
            </a>
        </div>
		<div class="thumbnail">
            <a href="images/White Tail Deer.jpg" data-lightbox="gallery" data-title="Female White-tailed deer">
                <img src="images/White Tail Deer.jpg" alt="Female White-tailed deer">
            </a>
        </div>			  
        <!-- Add more thumbnails as needed -->
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox-plus-jquery.min.js"></script>
</body>
</html>
				
	
		</div>
		<div id="footer">
			<div class="connect">
				<!---<a href="http://freewebsitetemplates.com/go/facebook/" target="_blank" class="facebook"></a> <a href="http://freewebsitetemplates.com/go/twitter/" target="_blank" class="twitter"></a> <a href="http://freewebsitetemplates.com/go/googleplus/" target="_blank" class="googleplus"></a>
--->
			</div>
			<p>
				Copyright &copy; 2024. Charisma Communications All Rights Reserved.
			</p>
		</div>
	</div>
</body>
</html>
2

The link you provided redirects to a page that takes a long to open, I had to quit cause it was taking too long, and the page is not secure.

3

Same,

it’s the giant images with up to 8,5 MB in size in the gallery section and your host sends the content on a slow network it seems.

An image should never exceed 300kb. There are tutorials on how to optimize media for web traffic.

4

the link i provided is the garllary page. when you click on the image. the photo gets bigger, and regarding not secure. how do i rectify that?

5

thank you. but what about the alt tags. visual impaired people rely on them.

6

What do you mean by, not work? They seem to be fine when I look at the page you posted.

Validate your HTML

https://validator.w3.org/nu/#textarea

7

when you hover over a image. text should pop up. not all of them do it.

8

That is not what the alt attribute is used for. Maybe you wanted a title attribute.

How would creating a text hover help someone that is visually impaired?

9

How would creating a text hover help someone that is visually impaired you ask? screen readers see it. i know what alt attribute are used for. there for screen readers for the blind. im trying to foigure out why only some of them work.

10

A screen reader announcing the alt text, and seeing text when hovering the images are unrelated.

If you want to test your site for screen readers, you have to use a screen reader.

11

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.