Term 2 – Week 7

This week I was working on centering the buttons on the actions bar. The visual design of the button placement was decided on to try and keep the buttons on the page a symmetrical with the rest of the app as possible.

There are different scenarios where 2, 3 or more buttons may be visible at a time. The currently implemented solution rendered all the available buttons and then uses css to hide them via the visibility property. Tho the buttons were visibly hidden, the flex box containing them treated them as if they were there, giving the appearance of the buttons not being centered. The benefit here was that the buttons remained in a fixed position.

As an alternative, we can create a service function to return the Boolean variable representing if the user currently has a mic connected. This service is then called in the button container, mute in this case. followed with a simple if condition in the mute component render method.

if(isInVoiceAudio){
  return(
    <Button
      onClick={callback}
      label={label}
      color={'primary'}
      icon={icon}
      size={'lg'}
      circle={true}
      className={className}
      tabIndex={tabIndex}
    />
   );
 }else{
   return null;
 }

For the rest of the week I have been doing research into the NVDA Screen reader and testing its current functionality with the BBB HTML5 client. Currently non of the NVDA keyboard keys are implemented. For example, if a user presses “B” while NVDA is open it should return the next button available on the page.

There is also a great deal of unexpected behavior from the screen reader itself. From my preliminary research, the biggest hurdle is that screen readers dont generally do well with content being dynamically added to the document model.

In terms of keyboard accessibility, the BBB HTML5 application seems to have most elements sharing a global tab index except for the modals. This can cause a somewhat unpleasant “tabbing” experience when using the chat and navigating certain menus.

the following is a link to the NVDA keyboard commands, user and developer guide:

Keyboard Commands

Dev

User Guide

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s