accessibility / usability in bbpress default theme

[tharsheblows]

I had an issue today with a guy who was using a screen reader and couldn't figure out how to start a topic. I've also had this problem with a couple of other people, too.

I added in links under the breadcrumbs to anchors at the top of the topic form in topic-form.php and the reply form in reply-form.php and made sure that the focus goes to the appropriate textarea / input.

I'm not sure if there's work being done on the default template but thought I'd mention because he was super happy with it and I think it will help other users too. (He was quite complimentary about the usability of the site, which is mainly bbPress, as a whole! This is down to you guys, not me. :) )

Examples here (this is not default bbpress theme but I started from that and the default doesn't have them):
forum - ​http://thefastdiet.co.uk/forums/forum/body/weight-loss/
topic - ​http://thefastdiet.co.uk/forums/topic/no-weight-loss-please-help/

What I added at the top under the breadcrumbs (this is just to show what's happening - I have custom breadcrumbs and this is called from that function)

 //top-nav-bar
 function bbp_my_top_nav(){
 	
 	if( bbp_is_single_forum() || bbp_is_single_topic() ){
 	printf(_x('<div class="bbp-breadcrumb"><a href="%1$s#newtopic" id="new-topic">Start a new topic in %2$s</a>', 'bbpress'), bbp_get_forum_permalink(), bbp_get_forum_title() ) ;
 	}
 	if( bbp_is_single_topic() ){
 	printf(_x(' &bull; <a href="#the-reply-form" id="new-reply">Reply</a> ', 'bbpress' ) );
 	}
 	if( bbp_is_single_forum() || bbp_is_single_topic() ){
 	echo '</div>';
 	}
 }

and the jQuery for focus

//put focus on correct input when "start a new topic" and "reply" are clicked (in bbp_my_top_nav in bbpress-functions.php  

$('#new-topic').click(function (){
  $("input#bbp_topic_title").focus();
});

$('#new-reply').click(function (){
  $("textarea#bbp_reply_content").focus();
});

$(function() { 
      var prevURL = window.location.href.indexOf("#newtopic");
      if(prevURL > -1){
        $("input#bbp_topic_title").focus();
      }
});

[netweb]

Thanks, and yes, accessibility is an integral part bbPress :)

The last time I looked into the bbp_breadcrumbs in relation to 'semenatic markup' the issue of accessibility with navigational breadcrumbs popped up all over the place. I'll ask the WP a11y team for what the current 'best practices' are for navigational breadcrumbs and if needed add any other required tweaks at the same time.

[tharsheblows]

I would love to know what they said, I'm trying to be better about accessibility myself -- having bbPress work so well already definitely helps.

[netweb]

The WordPress Accessibility team is probably a good place to start:
​http://make.wordpress.org/accessibility/

The guidelines to earn the 'accessibility-ready' tag for wp.org submitted themes:
​http://make.wordpress.org/themes/guidelines/guidelines-accessibility/

[netweb]

Related:

• #2632 Accessibility: Forms – fix HTML label and select ID’s and names
• #2633 Accessibility: Tabindex – Remove all instances of tab index from bbPress
• #2634 Accessibility: Remove title attributes - They serve no useful purpose
• #2635 Accessibility: Templates - Breadcrumbs
• #2636 Accessibility: Template Forms - Fieldset
• #2637 Accessibility: Template Notices
• #2638 Accessibility: Template Forms - textarea's should use aria-label

[netweb]

​http://make.wordpress.org/themes/guidelines/guidelines-accessibility/

Skip Links
Themes MUST include a mechanism that enables users to navigate directly to content or navigation on entering any given page. These links MAY be positioned offscreen initially but MUST be available to screen reader users and MUST be visible on focus for sighted keyboard navigators.

A minimally conforming skip link MUST:

• Be the first focusable element perceived by a user via screen reader or keyboard navigation.
• Be visible when keyboard focus moves to the link.
• Move focus to the main content area of the page when activated.

[netweb]

• #2632 Accessibility: Forms – fix HTML label and select ID’s and names
• #2633 Accessibility: Tabindex – Remove all instances of tab index from bbPress
• #2634 Accessibility: Remove title attributes - They serve no useful purpose
• #2635 Accessibility: Templates - Breadcrumbs
• #2636 Accessibility: Template Forms - Fieldset
• #2637 Accessibility: Template Notices
• #2638 Accessibility: Template Forms - textarea's should use aria-label

Moving this to 2.7 to go along with the above tickets

[johnjamesjacoby]

Bumping all 2.7 to 2.8 milestone.