Making an enhanced Accessibility Toolbar for Blackboard

"Scenes from the Life of Saint Vincent Ferrer"​ After Francesco del Cossa (Carrine Palmieri and Rosa Falcone)



Recently I have created and launched what I'm calling an Enhanced Accessibility Toolbar for our Blackboard VLE.


Background

Back in the summer, I integrated the ATbar produced by University of Southampton's Electronics and Computer Science department's Accessibility Group as part of our summer upgrade and visual refresh. 

The Show ATbar icon as it appeared in our Blackboard environment.
The Show ATbar icon as it appeared in our Blackboard environment.

Screenshot of the ATbar showing all available icons.  Icons include those for changing text, a dictionary, text to speech, and colour overlays.
Screenshot of the ATbar showing all available icons.  Icons include those for changing text, a dictionary, text to speech, and colour overlays.

The Blackboard VLE includes "skip to content" and "quick links" features which are a little hidden away.
Example of a quick links screen for a course.  This shows page landmarks such as menu areas and outline of content based on heading tags.
Example of a quick links screen for a course.  This shows page landmarks such as menu areas and outline of content based on heading tags.

I wanted to style the links to open these tools to be consistent with our user interface design and to make them more prominent and inviting to our users.

I also wanted to include a visible help link which would explain these features and add relevant links such as to our Accessibility Statement and support from our Enabling Services team.

Screenshot of the "enhanced toolbar", this shows four buttons instead of one.  The four buttons are to 1) Skip to Content, 2) Show Quick Links 3) Show the ATbar 4) Show Help
Screenshot of the "enhanced toolbar", this shows four buttons instead of one.  The four buttons are to 1) Skip to Content, 2) Show Quick Links 3) Show the ATbar 4) Show Help


What I learned along the way

It took a while to do this because when I created a "modal" pop up for the help screen, I discovered that you have to be very careful to ensure it is accessible.

Screenshot of the "help" screen which opens as a Modal.
Screenshot of the "help" screen which opens as a Modal.

In the first version I made, the links within it were picked up by keyboard tabbing even when the modal was not open. It was a real lesson for me in how one has to be careful when creating content and designing front-end changes to ensure what you do is accessible. Luckily I found a fantastic example of creating an accessible modal that I was able to re-purpose.

Testing

I used the Accessibility Insights browser plugin to verify that the changes I made were accessible.


Philosophical choices

I also kept in mind something I really liked from a presentation Amy Low of AbilityNet gave to us about "normalising" accessible tools and help. It is still the case that often users have to declare themselves in order to receive (usually non-IT) assistive help. Making tools available to all normalises their use. So, while I have read posts saying the skip to content links should be hidden from users, I can see a benefit in making such features more prominent.

Doing so should make the use and purpose of these tools better known by all. I believe this encourages inclusivity and raises awareness of the benefits of using such accessibility features, not only for those whom we would traditionally expect to benefit from them, but for everyone.

I remember explaining keyboard navigation to a student who told me, "that is a great way to use the laptop when I am sitting up in bed, and don't want to use the trackpad which is uncomfortable when I sit in that position".

Accessibility features can be useful in many circumstances, for example when we are using a device we are not familiar with, or when our mouse is broken, or when we have to use a device in a cramped space, and so on.

I will be interested to see what reaction to this we receive from users and stakeholders as we move forward.

Showing and telling

To explain the benefits of the toolbar and some of its uses I created a video. It appears at the top of this post, but here it is again.


Sharing the code

Following some real world testing in our live environment over the next weeks, I will be sharing the code to set this up in the Blackboard VLE on the Blackboard Community Site when it is relaunched in January 2020.

Next steps

Currently the toolbar disappears when the screen is resized to the tablet or mobile view. Next I'll be looking at how to apply the functionality of the toolbar and make it usable on mobile device.

Comments

Popular posts from this blog

My updated theme for Blackboard 3800.13