Presented at Bb World 2020. With the rapid move to online teaching in the current climate of COVID-19, ensuring equitable access to our learning environment has never been more important.
When we customise the Blackboard theme (original experience) to align it with our institutional colours, we must consider accessibility. Based on my own experience at the University of Southampton (in the UK) I will share practical lessons and recommendations, of how to ensure your theme customisation complies with web content accessibility guidelines.
5. https://matthewdeeprose.github.io/bbworld20.html
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
11. https://matthewdeeprose.github.io/bbworld20.html
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.
12. https://matthewdeeprose.github.io/bbworld20.html
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.
18. https://matthewdeeprose.github.io/bbworld20.html
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.
27. https://matthewdeeprose.github.io/bbworld20.html
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
38. https://matthewdeeprose.github.io/bbworld20.html
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
Using the techniques shown here
and in last year’s “Bluffers Guide”,
you will be able to get started
quickly.
53. https://matthewdeeprose.github.io/bbworld20.html
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)
14 guidelines, such as providing text equivalents, not relying on colour alone, and being
sensitive to the needs of the individual.
59. https://matthewdeeprose.github.io/bbworld20.html
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)
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.
78. https://matthewdeeprose.github.io/bbworld20.html
Use of Colour and Contrast
• 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.
79. https://matthewdeeprose.github.io/bbworld20.html
Use of Colour and contrast
• 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.
2. Compare the relative luminance of the
background and foreground colour.
https://planetcalc.com/7779/
80. https://matthewdeeprose.github.io/bbworld20.html
Use of Colour and contrast
• 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.
2. Compare the relative luminance of the
background and foreground colour.
3. Result = Contrast Ratio
https://planetcalc.com/7779/
94. https://matthewdeeprose.github.io/bbworld20.html
1.4.1 Non-text Contrast in Blackboard theme
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;
}
95. https://matthewdeeprose.github.io/bbworld20.html
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
The visual presentation of text and
images of text has a contrast ratio of
at least 7:1.
96. https://matthewdeeprose.github.io/bbworld20.html
WCAG 1.4.3 Contrast (Minimum) / 1.4.6 Contrast (Enhanced)
Level AA
The visual presentation of text and
images of text has a contrast ratio of
at least 4.5:1
Level AAA
The visual presentation of text and
images of text has a contrast ratio of
at least 7:1.
97. https://matthewdeeprose.github.io/bbworld20.html
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
The visual presentation of text and
images of text has a contrast ratio of
at least 7:1.
Except for the following:
Large Text
Incidental
Logotypes
98. https://matthewdeeprose.github.io/bbworld20.html
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
The visual presentation of text and
images of text has a contrast ratio of
at least 7:1.
Except for the following:
Large Text
Incidental
Logotypes
99. https://matthewdeeprose.github.io/bbworld20.html
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
The visual presentation of text and
images of text has a contrast ratio of
at least 7:1.
Except for the following:
Large Text
Incidental
Logotypes
100. https://matthewdeeprose.github.io/bbworld20.html
Visual presentation of text and images of text…
Ratio: 2.49:1 X
Level AA
The visual presentation of text and
images of text has a contrast ratio of
at least 4.5:1
Level AAA
The visual presentation of text and
images of text has a contrast ratio of
at least 7:1.
101. https://matthewdeeprose.github.io/bbworld20.html
Visual presentation of text and images of text…
Ratio: 14.44:1 ✔
Level AA
The visual presentation of text and
images of text has a contrast ratio of
at least 4.5:1
Level AAA
The visual presentation of text and
images of text has a contrast ratio of
at least 7:1.
102. https://matthewdeeprose.github.io/bbworld20.html
Visual presentation of text and images of text…
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;
}
106. https://matthewdeeprose.github.io/bbworld20.html
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/
112. https://matthewdeeprose.github.io/bbworld20.html
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; }
116. https://matthewdeeprose.github.io/bbworld20.html
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?
121. https://matthewdeeprose.github.io/bbworld20.html
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
126. https://matthewdeeprose.github.io/bbworld20.html
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
132. https://matthewdeeprose.github.io/bbworld20.html
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.
133. https://matthewdeeprose.github.io/bbworld20.html
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
134. https://matthewdeeprose.github.io/bbworld20.html
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:
• Focus contrast: Colour changes
used to indicate focus have at
least a 3:1 contrast ratio with the
colours changed from the
unfocused control.
https://www.w3.org/TR/WCAG22/#focus-visible-enhanced
135. https://matthewdeeprose.github.io/bbworld20.html
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:
• 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.
https://www.w3.org/TR/WCAG22/#focus-visible-enhanced
136. https://matthewdeeprose.github.io/bbworld20.html
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
137. https://matthewdeeprose.github.io/bbworld20.html
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
141. https://matthewdeeprose.github.io/bbworld20.html
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; }
142. https://matthewdeeprose.github.io/bbworld20.html
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
143. https://matthewdeeprose.github.io/bbworld20.html
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.
144. https://matthewdeeprose.github.io/bbworld20.html
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.
145. https://matthewdeeprose.github.io/bbworld20.html
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.
146. https://matthewdeeprose.github.io/bbworld20.html
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.
A - Minimum level – without addressing these items barriers exist that cannot be overcome by assistive technology. This level affects the broadest group with the most benefits and is essential.
AA - More accessible – Even with minimum support some barriers will still exist for some people. Not meeting criteria at this level may have an impact on certain groups of users and address the criteria may impact the look of a page to a greater extent or affect site logic.
AAA – Even more accessible– Some Level AAA criteria cannot be applied everywhere, so level AAA is generally not required. That being said, even meeting level AAA does not make web pages accessible to everyone.
A - Minimum level – without addressing these items barriers exist that cannot be overcome by assistive technology. This level affects the broadest group with the most benefits and is essential.
AA - More accessible – Even with minimum support some barriers will still exist for some people. Not meeting criteria at this level may have an impact on certain groups of users and address the criteria may impact the look of a page to a greater extent or affect site logic.
AAA – Even more accessible– Some Level AAA criteria cannot be applied everywhere, so level AAA is generally not required. That being said, even meeting level AAA does not make web pages accessible to everyone.
A - Minimum level – without addressing these items barriers exist that cannot be overcome by assistive technology. This level affects the broadest group with the most benefits and is essential.
AA - More accessible – Even with minimum support some barriers will still exist for some people. Not meeting criteria at this level may have an impact on certain groups of users and address the criteria may impact the look of a page to a greater extent or affect site logic.
AAA – Even more accessible– Some Level AAA criteria cannot be applied everywhere, so level AAA is generally not required. That being said, even meeting level AAA does not make web pages accessible to everyone.