WCAG Compliance

I’m not an accessibility expert, but I’m trying to learn here too. I hope it’s helpful! (and any additional expert advice is appreciated too)

When I run a screen reader on a page, it reads the title of an image, not the alt text I have set.

I’m not sure which image you are referring to. Could you share the exact image you are having trouble with? I could not find any image element with alt and title attributes on the site’s home page you linked.

How do I set alt text for social media or other buttons in my header/footer?

The search icon in the header and social media footer buttons use SVG elements. You can add <title> inside of that element (more info: https://css-tricks.com/accessible-svgs/#aa-2-inline-svg).

I’m not sure how your theme is set up; this may need to be written in your custom theme’s header/footer files.

How do I change the settings of the menu so that it drops down the sub menu when using tabbing. (It only shows sub menu when you hover over with a mouse.)

How about adding :focus-within CSS pseudo-class, where the menus become visible when they are in :hover state?

https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within

I ran the screen reader on this page: https://sdpride.org/accessibility/

I tried to add the title element to the facebook button but didn’t work when I ran a screen reader. I have pasted some of the code below. Does that look right?

<svg xmlns=”https://www.w3.org/2000/svg&#8221; width=”18″ height=”18″ viewBox=”0 0 24 24″><path d=”M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z”/></svg>
<title id=”Facebook Icon”>San Diego Pride Facebook</title>

I’m also not sure how to add it to buttons on the page, for example on the home page there is the Newsletter highlight thing with the arrow buttons and they just say “button.”

for the focus within / hover state, do you know where to add that? I can’t figure out where that code is.

Can you try the following code for the Facebook icon:

<a href="https://www.facebook.com/SanDiegoPride" title="Facebook">
    <svg role="img" aria-label="Facebook" xmlns="https://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"></path></svg>
</a>

@bworx that worked for the icon! thank you so much!

@bworx do you know how to add “next” and “previous” labels to the arrow buttons on the blog part of this page? https://sdpride.org/

Here is the code for that section

<?php

$args = array(
	'category_name' => 'featured'
);

$featposts = new WP_Query($args);

if ( $featposts->have_posts() ) { ?>

<section class="home-blog">
	<div class="container">
		<div class="posts one-scroller" data-parallax='{"y": -20}'>
<?php
	while ( $featposts->have_posts() ) {
		$featposts->the_post(); ?>
			<div class="post">
				<?php
				if (has_post_thumbnail()) {
					$bg = wp_get_attachment_image_src(get_post_thumbnail_id(), 'large');
					echo '<a href="' . get_the_permalink() .'">';
					echo '<img class="alignright" src="'. $bg[0] .'">';
					echo '</a>';
				}
				?>

				<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
				<aside>Date Posted: <?php the_date(); ?> &nbsp;|&nbsp; By: <?php the_author(); ?></aside>
				<p><?php echo get_the_excerpt(); ?>&hellip;</p>
				<a href="<?php the_permalink(); ?>" class="btn">Read More</a>
			</div>
<?php } ?>
		</div>
	</div>
</section>
<?php
}

wp_reset_postdata();

?>