Skip to:
Content

bbPress.org

Opened 10 years ago

Last modified 10 years ago

#2579 new enhancement

accessibility / usability in bbpress default theme

Reported by: tharsheblows's profile tharsheblows Owned by:
Milestone: 2.8 Priority: normal
Severity: normal Version:
Component: Appearance - Theme Compatibility Keywords:
Cc: jjjay@…, mercijavier@…

Description

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();
      }
});

Change History (10)

#1 @tharsheblows
10 years ago

  • Cc jjjay@… added

#2 @netweb
10 years ago

  • Component changed from Included Themes to Code Improvements
  • Milestone changed from Awaiting Review to 2.6

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.

#3 @tharsheblows
10 years ago

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.

#4 @netweb
10 years ago

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/

#5 follow-up: @netweb
10 years ago

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

#6 @netweb
10 years ago

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.

#7 @netweb
10 years ago

  • Component changed from Code Improvements to Theme Compatability

#8 @mercime
10 years ago

  • Cc mercijavier@… added

#9 in reply to: ↑ 5 @netweb
10 years ago

  • Milestone changed from 2.6 to 2.7
  • #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

#10 @johnjamesjacoby
10 years ago

  • Milestone changed from 2.7 to 2.8

Bumping all 2.7 to 2.8 milestone.

Note: See TracTickets for help on using tickets.