The practical bluffer's guide to blackboard theme accessibility

https://matthewdeeprose.github.io/bbworld20.html
The Practical “Bluffer’s Guide”
to Blackboard Theme Accessibility
Matthew Deeprose
Senior Learning Designer, University of Southampton

What number do you see?
Write in the chat which number you
see.

If you can see the number 74 in the
image, you may have normal colour
vision (but this is only one test).

If you can see the number 74 in the
image, you may have normal colour
vision (but this is only one test).
If you can see 21, you may have a
red-green colour vision deficiency.

300 million people
have colour
blindness.*
Many more report
having difficulties with
their sight.**
The ability to see
colour decreases in old
age.***
* https://abilitynet.org.uk/blog/visual-impairment-and-computing-common-questions
** http://www.colourblindawareness.org/colour-blindness/
*** https://en.wikipedia.org/wiki/Color_blindness

Imagine if your Blackboard looked like this?

The examples use colours from our
Institutional brand colour palette.
The colour combinations have poor
contrast between each other, making
them hard to read.

Making the Blackboard responsive theme on brand and accessible
When we introduced the Blackboard
responsive theme at the University
of Southampton, we wanted the
user interface to be both:

Making the Blackboard responsive theme on brand and accessible
When we introduced the Blackboard
responsive theme at the University
of Southampton, we wanted the
user interface to be both:
✔ “On brand” (using the
institutional colour palette).
✔ Aligned with accessibility
guidelines.

Based on my experiences, this presentation is…

Poll!
• Question: Has the theme of your Blackboard environment been customised?
• Answers:
– Yes
– No

Evolutionary stages of the “Bluffer’s Guides”
Four stages of Bb
theme customisation
taking you from
Bluffer to Innovator.
Accessibility
considerations for
theme customisation,
referring to UK /
European regulation.
A more practical look
at theme accessibility,
with lots of help to
get you started
quickly.

Agenda By the end of this presentation you will:
• Know about Web Accessibility Guidelines
that relate to the Blackboard theme.
• Identify ways to align customisations to
the Blackboard theme with these
guidelines.

What’s in scope?
In Scope:
• Blackboard Original Experience.
• 2016 or 2012 theme.
• With or without customisation.
Out of Scope:
• Blackboard Ultra.
• Materials uploaded to Blackboard
by staff / students.

Supporting website

About me
@vleguru

About me
• Managing the Blackboard service at the University of
Southampton since July 2000.
• Was a Blackboard MVP, now a member of the
Blackboard Community Leadership Circle.
@vleguru

About me
• Previous presentations to the Blackboard European
Teaching and Learning Conference:
– Upgrade Club (2018).
– Bluffer’s guide to customising the 2016 Blackboard
theme. (2019).
– Bluffer’s Guide to Blackboard Theme Accessibility
(2020).
– Better Blackboard Help (2020).
@vleguru

Links
Blog: https://thevleguru.blogspot.com/
Twitter: https://twitter.com/vleguru
Blackboard Community site:
https://community.blackboard.com/profile/27
Feel welcome to connect with me on LinkedIn:
https://www.linkedin.com/in/mattdeeprose/
@vleguru

Where is Southampton?

Questions
Put questions in the chat or Q+A
boxes. We will go through them at
the end.
There is lots of material to go
through, your question may be
answered in a later section 

“I don’t know anything
about customising the
Blackboard theme!”

“A Bluffer’s Guide to Customising the 2016 Blackboard Theme”

2019 Blackboard European Learning and Teaching Conference

2m 14s minute video preview…
Play video
469906-video_1-blufferPreview.mp4
Length: 2 minutes 14 seconds
Also on YouTube at
https://youtu.be/DyZuOkavHtA

Helping you every step on the way.
Full theme and all my source code is
shared on the community site:
https://community.blackboard.com/
blogs/14/326

Full theme and all my source code is
shared on the community site:
https://community.blackboard.com/
blogs/14/326
Using the techniques shown here
and in last year’s “Bluffers Guide”,
you will be able to get started
quickly.

Using the techniques shown here
and in last year’s “Bluffers Guide”,
you will be able to get started
quickly.
Now I’m going to prove it!

1m 31s minute video demonstrating Stylus…
Play video
469906-video_2-using_stylus.mp4
Length: 1 minutes 31 seconds
Also on YouTube at
https://youtu.be/DyZuOkavHtA

For many lately, the only way to engage with their institution has
been through the internet. Therefore, it is even more vital that the
Learning Management System is as accessible as possible.

Ensuring equitable access to our learning environment has never been
more important.
https://modelviewculture.com/pieces/in-the-
middle-of-a-pandemic-covid-19-information-
remains-inaccessible-to-visually-impaired-
people

more important.
https://medium.com/age-of-awareness/people-with-disabilities-will-remember-your-words-and-actions-when-covid-19-is-over-ecc507480137

more important.
https://www.essentialaccessibility.com/blog/covid-19-highlights-the-importance-of-
digital-accessibility-and-inclusion/

more important.
https://knowbility.org/blog/2020/accessibility-in-your-covid-response/

more important.

“But I don’t have any disabled students”

Impairments may be
• Permanent
• Temporary
• Situational
Microsoft Design

“Is there any guidance for
web accessibility?”

WCAG2.1
Developed by Worldwide Web
Consortium (W3C).
Web Content Accessibility Guidelines

Web Content Accessibility Guidelines - Timeline
May 1999
• WCAG 1.0
Dec 2008
• WCAG 2.0
June 2018
• WCAG 2.1
Feb. 2020
• WCAG 2.2
First draft
Nov 2022
• WCAG 3.0
(planned)

May 1999
• WCAG 1.0
Dec 2008
• WCAG 2.0
June 2018
• WCAG 2.1
Feb. 2020
• WCAG 2.2
First draft
Nov 2022
• WCAG 3.0
(planned)
14 guidelines, such as providing text equivalents, not relying on colour alone, and being
sensitive to the needs of the individual.

May 1999
• WCAG 1.0
Dec 2008
• WCAG 2.0
June 2018
• WCAG 2.1
Feb. 2020
• WCAG 2.2
First draft
Nov 2022
• WCAG 3.0
(planned)
Introduces “POUR” principles which are used to structure the guidelines.

May 1999
• WCAG 1.0
Dec 2008
• WCAG 2.0
June 2018
• WCAG 2.1
Feb. 2020
• WCAG 2.2
First draft
Nov 2022
• WCAG 3.0
(planned)
Designed to be applicable beyond the web (e.g. for documents / software).

May 1999
• WCAG 1.0
Dec 2008
• WCAG 2.0
June 2018
• WCAG 2.1
Feb. 2020
• WCAG 2.2
First draft
Nov 2022
• WCAG 3.0
(planned)
Conformance can be at three levels: A, AA, and AAA.

May 1999
• WCAG 1.0
Dec 2008
• WCAG 2.0
June 2018
• WCAG 2.1
Feb. 2020
• WCAG 2.2
First draft
Nov 2022
• WCAG 3.0
(planned)
Updates such as reflow to account for different device sizes.

May 1999
• WCAG 1.0
Dec 2008
• WCAG 2.0
June 2018
• WCAG 2.1
Feb. 2020
• WCAG 2.2
First draft
Nov 2022
• WCAG 3.0
(planned)
So far includes improvements to focus indicators.

May 1999
• WCAG 1.0
Dec 2008
• WCAG 2.0
June 2018
• WCAG 2.1
Feb. 2020
• WCAG 2.2
First draft
Nov 2022
• WCAG 3.0
(planned)
Moves away from A, AA, AAA to Bronze, Silver, and Gold ratings, with multiple ways to
measure conformance and improvements to allow for more automated testing.

Levels of WCAG Conformance (WCAG 2.1)
A
Minimum level
of conformance.
AA
AAA
https://www.levelaccess.com/wcag-a-and-wcag-aa-conformance/

A
Minimum level
of conformance.
AA
More accessible
/
Recommended.
AAA

A
Minimum level
of conformance.
AA
More accessible
/
Recommended.
AAA
Even more
accessible /
Enhanced.

The principles of POUR
Perceivable
Cater to our
senses.
Operable
We can use
the site.
Understandable
Readable
and
predictable.
Robust
Compatible
across
devices and
methods of
use.

The principles of POUR
Perceivable
Cater to our
senses.
Operable
We can use
the site.
Understandable
Readable
and
predictable.
Robust
Compatible
across
devices -
even those
to come in
the future.

Relevant to this presentation
1.4.3 Contrast (Minimum)
1.4.6 Contrast (Enhanced)
1.4.11 Non-text Contrast
2.4.7: Focus Visible
2.4.11: Focus Visible (Enhanced)
(WCAG 2.2 Draft)

Use of Colour and Contrast

• The Accessibility guidelines provide a way to
ensure that when we use two colours together,
they will be legible to as many people as
possible.

• The Accessibility guidelines provide a way
to ensure that when we use two colours
together, they will appear to be legible.
1. Determine the relative luminance of two
colours.

Use of Colour and contrast
colours.
2. Compare the relative luminance of the
background and foreground colour.
https://planetcalc.com/7779/

Use of Colour and contrast
colours.
2. Compare the relative luminance of the
background and foreground colour.
3. Result = Contrast Ratio
https://planetcalc.com/7779/

The result is a number, the higher the better.

whocanuse.com
whocanuse.com
Created by
Corey Ginnivan
@coreyginnivan

Automated Colour Contrast Checking… and more
Microsoft’s free Accessibility Insights
tool provides a number of checks on
the page your are currently viewing.
Including Colour Contrast.
https://accessibilityinsights.io/

Automated Colour Contrast Checking… and more
“Fast pass” will run a quick check
and highlight issues on a page.

Situational visual impairments
Using a screen in bright light.
Steve Mason/Photodisc/Getty Images
A projector screen in a well lit
room.
pxfuel.com - Creative Commons Zero - CC0

WCAG 1.4.11 Non-text Contrast
Level AA
The visual presentation of the
following have a contrast ratio of at
least 3:1 against adjacent colour(s):
• Graphical Objects
• User Interface Components

1.4.1 Non-text Contrast in Blackboard theme
Visual elements that do not contain
text should have a contrast ratio
above 3:1.
Ratio:1.87:1 X

Visual elements that do not contain
text should have a contrast ratio
above 3:1.
Ratio: 7.33:1 ✔

Ratio: 7.33:1 ✔
/* Change primary menu button colour -
(+ Icon) */
.mainButton > a {
background: #005c84;
}
/* Change secondary menu button
colours (Reorder, Refresh, Course Files
buttons) */
.secondaryButton > a,
.mainButton h2 > a,
.secondaryButton h2 > a {
background: #005c84;
}

WCAG 1.4.3 Contrast (Minimum)
Level AA
The visual presentation of text and
images of text has a contrast ratio of
at least 4.5:1
Level AAA
at least 7:1.

WCAG 1.4.3 Contrast (Minimum) / 1.4.6 Contrast (Enhanced)
Level AA
at least 4.5:1
Level AAA
at least 7:1.

Level AA
at least 4.5:1
Level AAA
at least 7:1.
Except for the following:
Large Text
Incidental
Logotypes

Level AA
at least 4.5:1.
Level AAA
at least 7:1.
Except for the following:
Large Text
Incidental
Logotypes

Visual presentation of text and images of text…
Ratio: 2.49:1 X
Level AA
at least 4.5:1
Level AAA
at least 7:1.

Ratio: 14.44:1 ✔
Level AA
at least 4.5:1
Level AAA
at least 7:1.

Ratio: 14.44:1 ✔
.actionBar .mainButton h2 > a {
color: #FFFFFF !important;
background: none scroll 0 0 #002E3B
!important;
text-shadow: none !important;
text-decoration: none; box-shadow:
none !important;
border: none;
border-radius: 8px !important;
}

The ratios to remember
3:1
4.5:1
7:1
Minimum for
Graphical
Objects / UI
Minimum for Text
Enhanced
level for
Text
AAA
AA
(not to scale)

Colour Contrast in your institutional
context
• Many institutions will have a standard colour
palette.
• So we will often find ourselves using the same
set of colours.
https://www.southampton.ac.uk/brand/category/colour/

Colour Contrast in your institutional
context
• Many institutions will have a standard colour
palette.
• So we often find ourselves using the same set
of colours.
https://www.southampton.ac.uk/brand/category/colour/

My approach: a look up table showing contrast ratios of our institutional
colours.

Contact me via LinkedIn
if you would like a
similar table for your
colour scheme…

Complexity: Lessons from implementing the Blackboard theme

Accounting for “hover”
Ratio:
14.44:1
Ratio:
12.33:1
.actionBar .mainButton h2 > a {
background: none scroll 0 0 #002E3B !important;
text-shadow: none !important;
text-decoration: none;
box-shadow: none !important;
border: none;
border-radius: 8px !important; }
.actionBar ul li a:hover {
background-color: #FCBC00
!important;
color: #00131D !important;
font-weight: bold !important;
transition: all 0.2s ease-in-out; }

Hover / Selected states
Hover / selected text - Ratio:
8.48:1
Normal text - Ratio:14.44:1
/* Change Control Panel section colour as
seen by instructors */
.menuWrap-inner {
background: #002E3B !important;
color: #FFF }
#controlPanelPalette_contents a {
color: #FFF; }
/* Control Panel - hover over text colour */
#controlPanelPalette_contents a:hover {
color: #FCBC00 !important;
transition: all 0.2s ease-in-out !important; }
/* Controls color and format of open Control
Panel Items */
.controlpanel a.comboLink_active,
.controlpanel h4 a.open {
color: #FCBC00 !important; }

Further complexity
.button-4
 Is used in the Course Files search box in
the Control Panel.
 Is the cancel button for reordering items.
 Is used for searching for courses in the
admin panel.

Our default course menu theme
All courses reset to a theme which was on brand
and had high colour contrast.

Respecting user choice
• Our instructors often like to change their course
menus.
• The choices they make may not be as accessible
as we would wish.

Course menus
• Cannot currently allow customisation of menu
whilst ensuring good contrast.
• Other options:
– Course Templates?
• Instructors may still change their colour
schemes after course creation.
• Rollover (course copy) may reset course
menu colours to that of source course.
– Don’t allow customisation?

Even if we use the default theme but
allow menu colour customisation,
the default hover and focus colours
do not contrast well if you stray from
the Blackboard default.

Course menus
• What else can we do?

Course menu workaround
/* Course menu focus colour only (not control panel) */
#courseMenuPalette div.navPaletteContent a:focus, #courseMenuPalette h3
a:focus {
background-color: rgba(255, 255, 255, 1) !important;
outline-color: rgba(255, 255, 255, 0) !important;
border: black 1px; border-style: hidden double hidden; }
/* Hover of course menu */
#courseMenuPalette h3 a:hover, #courseMenuPalette_contents li:hover {
background-color: white !important;
outline-color: white !important;
border: #00131D 1px;
border-style: hidden double hidden;
color: #00131D !important; }
#courseMenuPalette .courseMenu a:hover span {
font-weight: bold;
background-color: white !important; }
/* Course Menu Focus Colour*/
.listCm .courseMenu a:hover span, .listCm .courseMenu a:focus span {
font-weight: bold !important; }
/* Configure rollover of Subheader */
#courseMenuPalette span:hover {
color: #00131D !important; }
/* Options /*
/* Force colour of subheader here if you wish*/
#courseMenuPalette h3 span {
/* color: black !important; */
/* background-color: white !important; */ }

36 second video preview of course menu workaround…
Play video
469906-video_3-course_menus.mp4
Length: 36 seconds
Also on YouTube at
https://youtu.be/jmof8-b23c0

Course menus workaround... for the community
“I agree with Matt and others in the
chat, that we really need Blackboard
to provide us with an easy way to
change that purple colour on ‘hover’
and ‘focus’. It’s breaking our
accessibility experience! We’re not
all as good at bluffing on CSS as Matt
is.”
Lilian Soon
Educational Adviser at University of York,
UK

Course menus workaround.. for the community
On my conference support web site
below you will find a JSHack package
that will implement this hover/focus
workaround.
MENU-HOVER-FOCUS.zip

Keyboard navigation: focus and
focus indicators.

Keyboard Navigation on the web
Interaction Keystrokes
Navigate to most
elements
Tab
Shift + Tab - navigate backward
Link Enter
Button Enter or Spacebar
Checkbox Spacebar - check/uncheck a checkbox
Radio buttons
↑ / ↓ or ← / → = select an option.
Tab - move to the next element.
https://webaim.org/techniques/keyboard/
Deque Systems
UX Collective

Keyboard (non-mouse) navigation
Not only for keyboard
navigation
Used with other assistive technologies, e.g..
mouth stick, head pointer, eye gaze, sip-and-
puff.
Focus indicators are used by screen readers
Power users love keyboard shortcuts

Keyboard (non-mouse) navigation

Using someone else’s
computer and they
have a trackball,
trackpad, unusual
mouse that you don’t
like / know how to
use…
Situational examples

More situational examples
Using device one-handed.
Using device in a cramped space with
limited movement.
Adobe Stock Image

Focus indicators in Blackboard default 2016 theme

Focus indicators in the guidelines.
WCAG 2.1
The visual focus indicator … must have
sufficient contrast … except where the
appearance of the component is
determined by the user agent and not
modified by the author.
https://www.w3.org/WAI/WCAG21/Understanding/non-text-
contrast.html
…If the focus state relies on a change of
colour (e.g.., changing only the
background colour of a button), then
changing from one colour to another
that has at least a 3:1 contrast ratio with
the previous state of the control is a
method for meeting the Focus visible
criteria.

WCAG 2.2 Draft: 2.4.11 Focus Visible (Enhanced)
Level AA
When a User Interface Component
displays a visible keyboard focus, all
of the following are true:
• Minimum area: The focus
indication area is greater than or
equal to the longest side of the
bounding rectangle of the
focused control, times 2 CSS
pixels.
https://www.w3.org/TR/WCAG22/#focus-visible-enhanced

Level AA
• Focus contrast: Colour changes
used to indicate focus have at
least a 3:1 contrast ratio with the
colours changed from the
unfocused control.

Level AA
• Contrast or thickness: The focus
indication area has a 3:1 contrast
ratio against all adjacent colours
for the minimum area or greater,
or has a thickness of at least 2
CSS pixels.

Making focus indicators “on brand”
• Blackboard’s focus indicators have sufficient
contrast out of the box.
• When you customise the Blackboard theme to
use your institutional colours you should ensure
you update the focus indicators accordingly. Top tabs - Ratio: 7.36:1
Control Panel - Ratio: 7.36:1

Examples of my customisations
.appTabs input:focus,
.appTabs button:focus,
.appTabs select:focus,
.appTabs a:focus {
outline: 2px dotted #FCBC00
!important;
transition: outline-offset .2s
linear !important;
text-transform: none !important;
}
Ratio: 8.48:1

@media only screen and (min-width: 1024px) {
div.global-nav-bar
.logout-link:focus {
font-weight: bold !important;
margin-right: 0.5em !important;
font-family: Arial !important;
margin-top: 7px !important;
width: 72% !important;
text-indent: 0px !important;
overflow: visible !important;
background: #8D3970 !important;
text-decoration: none !important;
font-size: medium !important;
padding: 2px 10px 2px 10px !important;
border: solid #005C84 0px !important;
border-radius: 9px 9px 9px 9px;
-moz-border-radius: 9px 9px 9px 9px;
-webkit-border-radius: 9px 9px 9px 9px;
text-align: center !important; }
}
Ratio: 14.44:1

.navPalette input:focus,
.navPalette button:focus,
.navPalette select:focus,
.navPalette a:focus {
outline-color: #74C9E5
!important; }
Ratio:
7.72:1

More focus style examples
Ratio: 18.9:1 Ratio: 18.9:1
Ratio: 18.9:1
Style is for large
identifiable
indicators…
.mainButton a:focus,
.secondaryButton a:focus,
div#puller a:focus,
.item a:focus,
.student-preview-control a:focus,
.attachments a:focus,
.breadcrumbs a:focus {
outline: 3px solid #00131D !important;
outline-offset: 3px !important;
transition: outline-offset .2s linear !important; }

When customising the Bb
responsive theme it
becomes almost inevitable
to deal with focus
indicators.
The default purple colours
often used in Blackboard
will not necessarily work
well with your institutional
colour scheme.
Customising Bb Focus indicators
Ratio: 1.72:1

Conclusion
• Accessibility is a journey. There is always
something new to learn, and new
developments to understand.
• Customising our Blackboard theme still has
many benefits over staying with the defaults.
• In my experience colour contrast and focus
styles are the most important considerations
for Blackboard theme accessibility.
• With the techniques and suggestions shown
here you should feel confident to tackle these
in your theme.

Questions
Let’s spend any remaining time
reviewing remaining questions and
free discussion.

The practical bluffer's guide to blackboard theme accessibility

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Similar to The practical bluffer's guide to blackboard theme accessibility

Similar to The practical bluffer's guide to blackboard theme accessibility (20)

More from Matthew Deeprose

More from Matthew Deeprose (13)

Recently uploaded

Recently uploaded (20)

The practical bluffer's guide to blackboard theme accessibility

Editor's Notes