Making Jquery links accessible

[yourtechadvisors]

Hello,
I am currently building a BBPress forum with WordPress. I am also building a menu for BBPress to store all the admin links with the below code. The problem is I have marked the Create Topic and Reply buttons up as a link, but screen readers just say Create Topic or Reply and leave out that it is a link. If I put it in as a button, it no longer shows up in the links list. If I use

<code>href"#"</code>

It returns you to the top of the page after clicking the link.

Here is my full code.

<code>/*Add reply form slide out on BBPress*/
function show_form_on_click() {
    $classes = get_body_class();

    if ( is_user_logged_in() && !bbp_is_topic_closed() ) {

        if (in_array('single-forum',$classes)) { ?>
            <script type="text/javascript">
                jQuery( document ).ready(function() {
    jQuery( '<a class="custom-newtopic-button" alt="Click Here to create a new forum topic">Create Topic</a>' ).insertBefore( '#new-topic-0' );
                    jQuery('.custom-newtopic-button').click(function(){
                        jQuery('.custom-newtopic-button').hide();
                    });
                    jQuery('.custom-newtopic-button').click(function(){
                        jQuery('.bbp-topic-form').show();
                    });
                });
            </script>
        <?php } elseif(in_array('single-topic',$classes)) { ?>
            <script type="text/javascript">
                jQuery( document ).ready(function() {
                    jQuery( '<a class="custom-reply-button">Reply</a>' ).insertAfter( '.bbp-pagination' );
                    jQuery('.custom-reply-button, .d4p-bbt-quote-link').click(function(){
                        jQuery('.custom-reply-button').hide();
                    });
                    jQuery('.custom-reply-button, .d4p-bbt-quote-link').click(function(){
                        jQuery('.bbp-reply-form').show();
                    });
                });
            </script>
        <?php }
    }
}
add_action( 'wp_footer', 'show_form_on_click' );</code>

Can you provide any suggestions on how I can make this link more accessible to the blind? I have to say, this is the first time I have ever had a problem designing something for my own disability.

Thanks.

[Stomme_poes]

First:
anchors don’t have an alt attribute.

You could try aria-label="your string here" instead, but alt is an image attribute, not an anchor attribute. For sighted mousers, you could add that same string in the title attribute, and for keyboarders you could display that title text on :focus with something like a:focus:after { content: attr(title); plus styles…;}. Most ideally would be actual anchor text (text between the <a> and </a> tags).

Second, yeah, anchors are not links (and in most browsers not focusable) without an href. An href pointing to “#” indeed points to “the current page” and indeed most browsers will bring your focus back to the top. One trick I have used is to set the href to a fragment that does not exist: for example, if nothing on the page has the id of “void”, I can set the href=“#void” and focus will remain on the anchor after I click it. If Javascript does e.preventDefault() before the rest of whatever clicking the thing should do, though, it will stop focus from being thrown to the top of the page as well.

Since your clickables don’t bring people anywhere, but instead seem to Do Stuff on the page, you were right to consider buttons. Because they Do Stuff, it’s okay if they don’t show up in the links list. Buttons WILL show up in the buttons list though. You can get lists of buttons. You can jump from button to button as well, usually with the “b” key.

<button class="custom-reply-button">Reply</button> ought to work fine.

[yourtechadvisors]

Thanks.

[Stomme_poes]

Sorry if it was late-- I hadn’t been on the forums in a while.

[yourtechadvisors]

You are fine.