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.
What number do you see?
If you can see the number 74 in the image, you may have normal colour vision (but this is only one test).
What number do 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 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.***
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.
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…
The Practical “Bluffer’s Guide”�to Blackboard Theme Accessibility
Matthew Deeprose
Senior Learning Designer, University of Southampton
Poll!
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:
Agenda
By the end of this presentation you will:
What’s in scope?
In Scope:
Out of Scope:
What’s in scope?
In Scope:
Out of Scope:
Supporting website
About me
About me
About me
About me
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/
Where is Southampton?
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”
https://matthewdeeprose.github.io/bbworld20.html
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
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
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.
Helping you every step on the way.
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
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.
Ensuring equitable access to our learning environment has never been more important.
Ensuring equitable access to our learning environment has never been more important.
Ensuring equitable access to our learning environment has never been more important.
Ensuring equitable access to our learning environment has never been more important.
“But I don’t have any disabled students”
Impairments may be
Microsoft Design
“A website is not usable unless it is accessible.”
Krug, S., 2006. Don’t make me think: a common sense approach to web usability. (New Riders Press.)
“We will benefit from accessible features and design at different points in our lives.”
The Business Case for Digital Accessibility: https://www.w3.org/WAI/business-case/
“Is there any guidance for web accessibility?”
Developed by Worldwide Web Consortium (W3C).
Web Content Accessibility Guidelines
WCAG 2.1
Web Content Accessibility Guidelines - Timeline
May 1999
Dec 2008
June 2018
Feb. 2020
Nov 2022
Web Content Accessibility Guidelines - Timeline
May 1999
Dec 2008
June 2018
Feb. 2020
Nov 2022
14 guidelines, such as providing text equivalents, not relying on colour alone, and being sensitive to the needs of the individual.
Web Content Accessibility Guidelines - Timeline
May 1999
Dec 2008
June 2018
Feb. 2020
Nov 2022
Introduces “POUR” principles which are used to structure the guidelines.
Web Content Accessibility Guidelines - Timeline
May 1999
Dec 2008
June 2018
Feb. 2020
Nov 2022
Designed to be applicable beyond the web (e.g. for documents / software).
Web Content Accessibility Guidelines - Timeline
May 1999
Dec 2008
June 2018
Feb. 2020
Nov 2022
Conformance can be at three levels: A, AA, and AAA.
Web Content Accessibility Guidelines - Timeline
May 1999
Dec 2008
June 2018
Feb. 2020
Nov 2022
Updates such as reflow to account for different device sizes.
Web Content Accessibility Guidelines - Timeline
May 1999
Dec 2008
June 2018
Feb. 2020
Nov 2022
So far includes improvements to focus indicators.
Web Content Accessibility Guidelines - Timeline
May 1999
Dec 2008
June 2018
Feb. 2020
Nov 2022
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
Levels of WCAG Conformance (WCAG 2.1)
A
Minimum level of conformance.
AA
More accessible / Recommended.
AAA
Levels of WCAG Conformance (WCAG 2.1)
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 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 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)
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)
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)
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)
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
Use of Colour and Contrast
Use of Colour and Contrast
Use of Colour and contrast
Use of Colour and contrast
The result is a number, the higher the better.
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):
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):
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):
1.4.1 Non-text Contrast in Blackboard theme
Visual elements that do not contain text should have a contrast ratio above 3:1.
https://matthewdeeprose.github.io/bbworld20.html
Ratio:1.87:1 X
1.4.1 Non-text Contrast in Blackboard theme
Visual elements that do not contain text should have a contrast ratio above 3:1.
https://matthewdeeprose.github.io/bbworld20.html
Ratio: 7.33:1 ✔
1.4.1 Non-text Contrast in Blackboard theme
https://matthewdeeprose.github.io/bbworld20.html
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
The visual presentation of text and images of text has a contrast ratio of at least 7:1.
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.
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
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
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
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.
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.
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;
}
The ratios to remember
https://matthewdeeprose.github.io/bbworld20.html
3:1
4.5:1
7:1
Minimum for Graphical Objects / UI
Minimum for Text
Enhanced level for Text
AAA
AA
(not to scale)
The ratios to remember
https://matthewdeeprose.github.io/bbworld20.html
3:1
4.5:1
7:1
Minimum for Graphical Objects / UI
Minimum for Text
Enhanced level for Text
AAA
AA
(not to scale)
The ratios to remember
https://matthewdeeprose.github.io/bbworld20.html
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
Colour Contrast in your institutional context
My approach: a look up table showing contrast ratios of our institutional colours.
https://matthewdeeprose.github.io/bbworld20.html
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 {
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; }
.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
https://matthewdeeprose.github.io/bbworld20.html
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
https://matthewdeeprose.github.io/bbworld20.html
.button-4
Our default course menu theme
All courses reset to a theme which was on brand and had high colour contrast.
Respecting user choice
Course menus
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
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 {
color: #00131D !important;
font-weight: bold;
background-color: white !important; }
/* Course Menu Focus Colour*/
.listCm .courseMenu a:hover span, .listCm .courseMenu a:focus span {
color: #00131D !important;
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
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.
Keyboard navigation: focus and focus indicators.
https://matthewdeeprose.github.io/bbworld20.html
Keyboard navigation: focus and focus indicators.
https://matthewdeeprose.github.io/bbworld20.html
Keyboard navigation: focus and focus indicators.
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. |
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
https://matthewdeeprose.github.io/bbworld20.html
Situational examples
Using someone else’s computer and they have a trackball, trackpad, unusual mouse that you don’t like / know how to use…
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:
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:
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:
Making focus indicators “on brand”
Top tabs - Ratio: 7.36:1
�
Control Panel - Ratio: 7.36:1
�
Making focus indicators “on brand”
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
Examples of my customisations
@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;
color: #FFFFFF !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
Examples of my customisations
.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; }
Customising Bb Focus indicators
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.
Ratio: 1.72:1
Conclusion
Conclusion
Conclusion
Conclusion
The Practical “Bluffer’s Guide”�to Blackboard Theme Accessibility
Matthew Deeprose
Senior Learning Designer, University of Southampton
Questions
Let’s spend any remaining time reviewing remaining questions and free discussion.
WebAIM accessibility analysis of the top 1,000,000 home pages
WebAIM accessibility analysis of the top 1,000,000 home pages
In February 2019 and February 2020, WebAIM conducted an accessibility evaluation of the home pages for the top 1,000,000 web sites and over 100,000 additional interior site pages.
WebAIM accessibility analysis of the top 1,000,000 home pages
In February 2019 and February 2020, WebAIM conducted an accessibility evaluation of the home pages for the top 1,000,000 web sites and over 100,000 additional interior site pages.
WebAIM accessibility analysis of the top 1,000,000 home pages