The Bluffer’s Guide to Blackboard Theme Accessibility

https://matthewdeeprose.github.io/bluffer2020.html
The Bluffer’s Guide to Blackboard Theme Accessibility
Matthew Deeprose, VLE Manager, University of Southampton

Agenda
Topic Why you should care
Ensuring equitable access to our learning
environment has never been more important.
The accessibility of our VLE matters even more when
our staff and students are relying on it for online
delivery.
Reflections on last year’s talk. This presentation builds on theme customisation, this
time with a focus on accessibility.
How the various web accessibility rules and
regulations are related.
I believe it is important to know how the recent EU
web accessibility regulations relate to the wider
standards of the W3C, and what changes we should
expect going forward.
Blackboard Theme accessibility considerations: Use
of Colour, Colour Contrast, Focus Indicators,
Movement, and Usability.
Practical examples of the application of the
regulations and standards within the context of Bb
theme customisation.

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.
What’s in scope?

Assumed:
• That you have watched or will watch last
year’s “Bluffers guide to customising the
Blackboard theme”.
• That you have administrator access to your
environment or know someone who does.
• That you will test anything before
implementing in live.
Not assumed :
• That you have expertise in CSS.
• That you are an expert in accessibility.
• That you will watch the whole presentation.
Assumptions

• This presentation has:
• More content.
• Latest updates including new details about
WCAG 2.2
• More time.
• More code examples.
If you saw my talk at the MoCo session at this year’s Durham conference
.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; }

Supporting website

About me
@vleguru

About me
• Managing the Blackboard service at the University of
Southampton since July 2000.
• Blackboard MVP.
• Previous TLC presentations:
– Upgrade Club (2018).
– Bluffer’s guide to customising the 2016 Blackboard
theme. (2019).
• Presentations at this year’s TLC:
– The Bluffer’s Guide to Blackboard Theme Accessibility.
– Better Blackboard Help.
@vleguru

Where is Southampton?

Where is Southampton?
Top fact: Southampton Water has the
benefit of a double high tide, with two high
tide peaks, making the movement of large
ships easier

Ensuring equitable access to our learning environment has never been
more important.

more important.
https://www.nbcnews.com/news/education/i-hate-covid-19-kids-disabilities-struggle-adjust-schools-close-n1172906

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.edsurge.com/news/2020-
04-02-the-3-biggest-remote-teaching-
concerns-we-need-to-solve-now

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/

Reflections on last year’s talk

• Video now on YouTube, thanks again to Nathan
Cobb for organising the recording.
• The revised video is a multi-media ‘experience’
including almost 20 minutes of bonus materials
and is subtitled.
• Unfortunately most of the links I referenced are
no longer available following the migration to
the new Blackboard community site.

• The techniques and tips in the presentation are
still very valid, if you have not watched it yet be
sure to do so.
– Especially:
• Using Stylus.
• Using Inspect Element.

• Continuing on my journey, here are some
online resources that have helped me a lot that
I recommend you check out:
– https://developer.mozilla.org/en-
US/docs/Learn
– https://css-tricks.com/
– https://www.a11ywithlindsey.com/
– https://groups.google.com/a/d.umn.edu/foru
m/?hl=en#!forum/webdev

• There are now about 1700 lines of customised
CSS in our theme.
• Take a tour of the work I have been doing on
our Blackboard environment in my blog post
“Let me show you my Blackboard” on the
community site:
– https://community.blackboard.com/blogs/14/85

Be aware
• This is not legal advice.
• Learning about accessibility is a
journey.
• It is always possible that I have
misunderstood something.

How the various web accessibility rules and regulations are related.

How the various rules and regulations are related.
Statutory Instrument 2018 No. 952
The Public Sector Bodies (Websites and Mobile
Applications) No. 2 Accessibility Regulations 2018
Directive (EU) 2016/2102
On the Accessibility of the websites and mobile
applications of public sector bodies

Real Decreto 1112/2018, de 7 de septiembre, sobre
accesibilidad de los sitios web y aplicaciones para
dispositivos móviles del sector público.
Gesetz zur Umsetzung der Richtlinie (EU) 2016/2102
des Europäischen Parlaments und des Rates vom 26.
Oktober 2016 über den barrierefreien Zugang zu den
Websites und mobilen Anwendungen öffentlicher
Stellen
Besluit van 3 mei 2018, houdende tijdelijke regels
betreffende de toegankelijkheid van de websites en
mobiele applicaties van overheidsinstanties (Tijdelijk
besluit digitale toegankelijkheid overheid)
Loi du 19 juillet 2018 relative à l'accessibilité des sites
internet et des applications mobiles des organismes du
secteur public
List of national transposition
measures:
https://eur-lex.europa.eu/legal-
content/en/NIM/?uri=CELEX:32016L2102
+23
more

Disability
Discrimination Act 1995
Applies to all UK
The “failure to make a reasonable adjustment” definition in the 2018 SI
refers to the detail already determined in the above two acts.
Equality Act 2010
Does not apply in Northern
Ireland

Disability
Applies to all UK
Equality Act 2010
Ireland
COM(2010)636
European Disability Strategy 2010-2020:
A Renewed Commitment to a Barrier-
Free Europe
COM(2010)245
A Digital Agenda for
Europe

Disability
Applies to all UK
Equality Act 2010
Ireland
Convention on the Rights of Persons
with Disabilities (CRPD) 2006
COM(2010)636
Free Europe
COM(2010)245
Europe

Disability
Applies to all UK
Equality Act 2010
Ireland
COM(2010)636
Free Europe
COM(2010)245
Europe
Standard - EN 301 549
Accessibility requirements suitable for
public procurement of ICT products and
services in Europe
Regulation (EU) No 1025/2012 of the
European Parliament and of the Council

Disability
Applies to all UK
Equality Act 2010
Ireland
COM(2010)636
Free Europe
COM(2010)245
Europe
services in Europe
WCAG 2.X Level AA

Disability
Applies to all UK
Equality Act 2010
Ireland
COM(2010)636
Free Europe
COM(2010)245
Europe
services in Europe
WCAG 2.X Level AA
ISO/IEC
40500:2012

Disability
Applies to all UK
Equality Act 2010
Ireland
COM(2010)636
Free Europe
COM(2010)245
Europe
services in Europe
WCAG 2.X Level AA
Section 508 of the
Rehabilitation Act of 1973
ISO/IEC
40500:2012

Disability
Applies to all UK
Equality Act 2010
Ireland
COM(2010)636
Free Europe
COM(2010)245
Europe
services in Europe
WCAG 2.X Level AA
Section 508 of the
Rehabilitation Act of 1973
Americans with
Disabilities Act (ADA)
Standards for Accessible
Design in September 2010
ISO/IEC
40500:2012

Global Momentum
Country Name
Australia World Wide Web Access: Disability Discrimination Act
Brazil e-MAG, Modelo de Acessibilidade de Governo Eletrônico
Canada Standard on Web Accessibility
Israel Israeli standard 5568
Italy Stanca Act
Japan Japanese Industrial Standards X 8341-3
Norway
Forskrift om universell utforming av informasjons- og kommunikasjonsteknologiske (IKT)-
løsninger

Global Momentum
Directive (EU) 2016 / 2102
On the Accessibility of the websites and
mobile applications of public sector bodies
Entered into force on June 27, 2019 and
has to be implemented in national regulation
on June 28, 2022 at the latest.
Takes effect from 28 June 2025.
European Accessibility Act

Global Momentum
Covers products and services that have been
identified as being most important for
persons with disabilities while being most
likely to have diverging accessibility
requirements across EU countries.

Global Momentum
Covers products and services that have been
identified as being most important for
persons with disabilities while being most
likely to have diverging accessibility
requirements across EU countries.
• Computers and operating systems
• ATMs, ticketing and check-in machines
• Smartphones
• TV equipment related to digital television services
• Telephony services and related equipment
• Access to audio-visual media services such as television
broadcast and related consumer equipment
• Services related to air, bus, rail and waterborne
passenger transport
• Banking services
• e-books
• e-commerce

Continual Developments
View EN 301 549 at
http://mandate376.standards.eu/standard
Chapters 9, 10, and 11 are
relevant to the regulations.
services in Europe

Continual Developments
Updated:
• August 2018
• November 2019
• Now uses WCAG 2.1 AA (previously
WCAG 2.0 AA.)
See https://www.etsi.org/
services in Europe

https://www.etsi.org/

The new European Standard on 'Accessibility requirements suitable for public procurement of ICT products and services in Europe' (EN 301 549) was
produced by CEN, CENELEC and ETSI in response to a request from the European Commission (Mandate 376). It was developed by an international team of
experts, with the participation of the ICT industry and organizations representing consumers, people with disabilities and older persons.
The new European Standard is complemented by a series of three Technical Reports (TR 101 550, TR 101 551 and TR 101 552). Together, these documents
set out accessibility requirements that can be applied to a wide range of products and services related to ICT, including computers, smartphones and other
digital devices, ticketing machines, websites and emails. The aim is to ensure that ICT products and services are accessible either directly or through
compatibility with assistive technologies such as text-to-speech, so that everyone can access information and use services that are being delivered
electronically.
The new European Standard and its accompanying Technical Reports provide a framework for developing a wide range of applications that will make ICT
products and services more accessible for the 80 million Europeans who are living with various types of disability. Potential applications include audio and/or
tactile interfaces that can be used by visually impaired persons, or hardware such as smartphones and laptops that can be operated using one hand.
EN 301 549 is the most up-to-date standard for ICT accessibility, and it was developed through an inclusive process with the active involvement of relevant
stakeholders. While the accessibility requirements are defined in a form that is suitable for use in public procurement, they could also be used in other
contexts such as procurement in the private sector.
Find this and other information here: https://www.cencenelec.eu/News/Press_Releases/Pages/PR-2014-03.aspx
For further clarification contact:
- https://www.cencenelec.eu/helpers/Pages/ContactUs.aspx
- http://mandate376.standards.eu/contact

Global Momentum
WCAG 2.1

Global Momentum
WCAG 2.1
WCAG 2.2 will be released in November 2020
First Public Working Draft published on 27 February 2020
https://www.w3.org/TR/WCAG22/
WCAG 2.2

Global Momentum
WCAG 2.1
WCAG 2.2 will be released in November 2020
First Public Working Draft published on 27 February 2020
https://www.w3.org/TR/WCAG22/
WCAG 2.2
Project AG for the next generation of WCAG is expected to
have new standards in November 2022 and is currently
being worked on by “Taskforce Silver”.

Understand how the
regulations will impact your
institution.
Make a plan to fix any issues
you find.
Check the accessibility of your
websites.
Publish an accessibility
statement.
Four steps to ensure compliance with the Accessibility Regulations
https://www.gov.uk/government/publications/online-accessibility-regulations-campaign-supporter-pack/gds-accessibility-regulations-campaign-information-for-
education
Bb community: “Show us your
Accessibility Statement”
https://bit.ly/2zpXQ84

Out of scope In scope When
Websites published on or after 23 September 2018. After 22nd September 2019.
Websites published before 22 September 2018. After 22nd September 2020.
Mobile apps. After 22nd June 2021.
Office file formats published before 23rd September
2018, unless such content is needed for active
administrative processes relating to the tasks performed
by the public sector body.
Office file formats published from 23 September 2018, and any
published before 23rd September 2018 which are needed for active
administrative processes relating to the tasks performed by the
public sector body.
After 22nd September 2019.
Pre-recorded time-based media published before 23rd
September 2020.
Pre-recorded time-based media published on or after 23rd
September 2020.
After 23rd September 2020.
Live time-based media.
Recordings of live time-based media that are used on or after 23rd
September 2020.
After 23rd September 2020.
Content of extranets and intranets published before
23rd September 2019, or until such time as the website
undergoes a substantial revision, whichever is sooner.
Content of extranets and intranets published on or after 23rd
September 2019, and any content published before 23rd September
2019 that has been substantially revised.
From 23rd September 2019.
Content of websites and mobile applications qualifying
as archives, except those that are needed for active
administrative processes or have been updated or
edited since 23 September 2019.
Content of websites and mobile applications qualifying as archives
that are needed for active administrative processes or have been
updated or edited since 23 September 2019.
After 22nd September 2020.
Maps. An accessible alternative to maps should be provided.
Depends on publishing date of
host website (see above).
Reproductions of items in heritage collections that
cannot be made fully accessible.
Some accessibility requirements for websites or mobile applications
should still be complied with as regards the metadata linked to the
reproduction of items in heritage collections.
Depends on publishing date of
host website (see above).

Mobile apps. After 22nd June 2021.
Office file formats published before 23rd
September 2018, unless such content is needed
for active administrative processes relating to
the tasks performed by the public sector body.
Office file formats published from 23 September 2018, and
any published before 23rd September 2018 which are
needed for active administrative processes relating to the
tasks performed by the public sector body.
After 22nd September
2019.
Pre-recorded time-based media published
before 23rd September 2020.
Pre-recorded time-based media published on or after 23rd
September 2020.
After 23rd September
2020.
Live time-based media.
Recordings of live time-based media that are used on or
after 23rd September 2020.
After 23rd September
2020.
Content of extranets and intranets published
before 23rd September 2019, or until such time
as the website undergoes a substantial revision,
whichever is sooner.
Content of extranets and intranets published on or after
23rd September 2019, and any content published before
23rd September 2019 that has been substantially revised.
From 23rd September
2019.

Content of extranets and intranets
published before 23rd September
2019, or until such time as the website
undergoes a substantial revision,
whichever is sooner.
Content of extranets and intranets published on
or after 23rd September 2019, and any content
published before 23rd September 2019 that has
been substantially revised.
From 23rd
September 2019.

Essential reading from JISC
Accessibility regulations - what you need to know
https://www.jisc.ac.uk/guides/accessibility-
regulations-what-you-need-to-know
Prepared by John Kelly, JISC.

From the Government Digital
Service (UK)
“Most higher and further education
providers are considered to be in scope
for the regulations, due to their
dependence on government funding.
However, funding arrangements in this
sector differ, therefore organisations
should seek legal advice if they are
unsure of their position.”
https://www.gov.uk/government/publications/online-accessibility-regulations-campaign-supporter-pack/gds-
accessibility-regulations-campaign-information-for-education

“The question of how to prioritise actions
and what constitutes a ‘disproportionate
burden’ is a very real one for institutions.
GDS advise institutions to seek their own
legal advice on this - there is therefore a
prospect of multiple institutions spending
money on the same (or even contradictory)
legal advice.”
https://www.ucisa.ac.uk/-/media/Files/UCISA/Publication-files/Directors-cut/Digital-accessibility-directors-cut.pdf

ADA / Dominos
Domino's Pizza v. Guillermo Robles
9th Circuit Court of Appeals, in San Francisco,
ruled that the Dominos app and website should
be accessible.
• Dominos appealed to the Supreme Court, who
formally declined to hear the case.
"Here's what's shocking about
Domino's: like Target [in 2008], just
fixing the problem costs a great deal
less than suing.
Whitney Quesenbery, Center for Civic Design.
https://arstechnica.com/tech-policy/2019/10/accessibility-the-future-and-why-dominos-matters/
So they were suing
for the right to
discriminate…"

“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/
Accessibility / Usability / Inclusivity

Impairments may be
• Permanent
• Temporary
• Situational
Microsoft Design

When we introduced the 2016
responsive theme in 2019 we
wanted the interface to be both:
Making the Blackboard responsive theme on brand and accessible
✔ “On brand” (using the
institutional colour
palette).
✔ Compliant with the new
web accessibility
regulations.

New to customising the theme?
“A Bluffer’s Guide to Customising the 2016 Blackboard Theme”
http://go.soton.ac.uk/bb

Approaches to ensuring your customised theme is accessible

Use of Colour and contrast

More than two million
people in the UK live
with a visual
impairment.*
Many more report
having difficulties with
their sight.*
4.5% of the British
population are colour
blind.**
• Red–green colour blindness
affects up to 8% of males
and 0.5% of females of
Northern European
descent.***
• The ability to see colour also
decreases in old age.***
Example 1: Colour contrast in context
* https://abilitynet.org.uk/blog/visual-impairment-and-computing-common-questions
** http://www.colourblindawareness.org/colour-blindness/
*** https://en.wikipedia.org/wiki/Color_blindness

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

Colour and contrast:
Examples of Accessibility
requirements

Level A
Colour is not used as the only visual
means of conveying information…
WCAG 1.4.1 Use of Colour
9.2.10 Use of colour
Where ICT is a web page, it shall satisfy WCAG 2.0 Success Criterion 1.4.1 Use of
Colour
public procurement of ICT products
and services in Europe
http://mandate376.standards.eu/
✔
X

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
WCAG 1.4.11 Non-text Contrast
9.1.4.11 Non-text contrast
Where ICT is a web page, it shall satisfy WCAG 2.1 Success Criterion 1.4.11 Non-
text Contrast.
ETSI EN 301 549 V3.1.1
(2019-11)
https://www.etsi.org/

Level AA
• Graphical Objects
“Parts of graphics required to
understand the content, except
when a particular presentation of
graphics is essential to the
information being conveyed.”

Level AA
• User Interface Components
“Visual information required to
identify user interface components
and states, except for inactive
components or where the
appearance of the component is
determined by the user agent and
not modified by the author”.

Visual elements that do not contain
text should have a contrast ratio
above 3:1.
1.4.1 Non-text Contrast in Blackboard theme
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;
}

Large Text
Large-scale text and images of large-
scale text have a contrast ratio of at
least 3:1;
Level AA
The visual presentation of text and
images of text has a contrast ratio of
at least 4.5:1 except for the
following:
WCAG 1.4.3 Contrast (Minimum)
9.2.12 Contrast (minimum)
Where ICT is a web page, it shall satisfy WCAG 2.0 Success Criterion 1.4.3
Contrast (Minimum).

Level AA
following:
Incidental
Text or images of text that
• are part of an inactive user
interface component,
• are pure decoration,
• are not visible to anyone,
• that are part of a picture that
contains significant other visual
content.

Logotypes
Text that is part of a logo or brand
name has no contrast requirement.
Level AA
following:
9.2.12 Contrast (minimum)
Where ICT is a web page, it shall satisfy WCAG 2.0 Success Criterion 1.4.3
Contrast (Minimum).

Level AAA
at least 7:1.
WCAG 1.4.6 Contrast (Enhanced)

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)

How can we check the contrast ratio of two colours?

Determine the relative luminance of
two colours.
https://www.w3.org/WAI/GL/wiki/R
elative_luminance
Compare the relative luminance of
the background and foreground
colour.
https://vanseodesign.com/web-
design/color-luminance/
How is colour contrast calculated?
See also https://planetcalc.com/7779/

https://www.24a11y.com/2019/color-theory-and-contrast-ratios/

Has an API to programmatically
calculate many ratios.
Suggests changes to a colour to
make it more accessible.
Online Colour Contrast Checkers
https://webaim.org/resources/contrastchecker/
https://accessible-colors.com/

You can now use the “Inspect
element” feature of your web
browser to check colour contrast.
See
https://developer.mozilla.org/en-
US/docs/Tools/Page_Inspector/How
_to/Inspect_and_select_colors
Local Colour Contrast Checkers

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

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.

You have to run it on each page, so it
is more for impromptu checking.
It can find common issues,
particularly with text colours that
you may not have considered.
It does not check all aspects, for
example changes when you hover on
an element.

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

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

Color Usage for Accessibility
WCAG 2.0 Level AA Contrast for Accessibility
12 pt Yes No Yes Yes Yes Yes Yes Yes No
12 pt No Yes Yes No No No No No Yes
18 pt No Yes Yes No No No No Yes Yes
12 pt No Yes Yes No No No No No Yes
18 pt No Yes Yes No No No No Yes Yes
Inspired by
Blackboard?

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

By the way…
A new method of testing colour contrast is
under discussion by “Taskforce Silver”.
https://github.com/w3c/wcag/issues/695

Complexity: Lessons from implementing in 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; }

‘The :hover CSS pseudo-class
matches when the user interacts
with an element with a pointing
device, but does not necessarily
activate it. It is generally triggered
when the user hovers over an
element with the cursor (mouse
pointer).’
US/docs/Web/CSS/:hover
https://css-
tricks.com/almanac/selectors/h/hover/
Hover in CSS
a:hover {
color: green;
text-decoration:
underline overline;
}

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.

As you build and
develop your
customised theme, be
sure to consider colour
contrast.
Building your theme
empowers you to
ensure colour are “on-
brand” and that
contrast is
appropriate.
(Some of the built in
Blackboard colours do not
have sufficient contrast.)
For those of us who
still use the “Original
experience”, there are
still many benefits to
customising our
theme.
Colour contrast in summary.
I reported all
occurrences of poor
contrast to Bb support
that I found.
Check out my blog post
on the community site:
“Let me show you my
Blackboard.”

What about Blackboard course menus?
Since 2018 Q2 release, instructors can customise their course menus on a Blackboard environment that uses the 2016 theme.

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?

Course menus…
– A community workaround for the sub header
colour not being configurable in the 2016
theme has been to set it as a specific colour.
– We set ours to black which does not
necessarily work with backgrounds other
than our default white colour.
/* Change colour of subheader */
#courseMenuPalette h3 span {
color: #000 !important;
}

From a current project
• A faculty wants a consistent menu, with
different colour schemes for their subject areas.
• The menu structure is done using course
templates.
• The menu colours are set by use JSHack to
– Load a CSS file that contains only details of
course menu.
– To appear only when in courses with certain
letters in the course id.

The CSS
/* Hide ability to change colour of menu */
li#menuDesignElement {
display: none; }
color: #FEFEFE !important; }
/* Make subheader appear */
div.treeContainer ul.tree li.subhead h4.treeSubhead-collapsed a {
/* Make subheader rollover stay the same colour */
div.treeContainer ul.tree li.subhead h4.treeSubhead-collapsed hover {
/* Set menu background to brown */
#courseMenuPalette div.navPaletteContent, #courseMenuPalette_contents li {
background-color: #5a3737 !important; }
/* Set menu item text to #FEFEFE */
#courseMenuPalette div.navPaletteContent ul li a, #courseMenuPalette h3 a, #previewCourseMenu h3 a, .navPaletteContent h3
a.submenuLink:before, .navPaletteContent h3 a.submenuLink_active:before, #courseMenuPalette div.navPaletteContent ul li a span,
#courseMenuPalette .navPaletteContent .subhead { color: #FEFEFE; }
Hide option to change
menu colours ;-)
Easy to change all the
colour values to suit
your purposes.

The JSHack

/* Hide ability to change colour of menu */
li#menuDesignElement {
display: none; }
/* Make subheader appear */
div.treeContainer ul.tree li.subhead h4.treeSubhead-collapsed
a {
/* Make subheader rollover stay the same colour */
div.treeContainer ul.tree li.subhead h4.treeSubhead-collapsed
hover {
/* Set menu background to brown */
#courseMenuPalette div.navPaletteContent,
#courseMenuPalette_contents li {
background-color: #5a3737 !important; }
/* Set menu item text to #FEFEFE */
#courseMenuPalette div.navPaletteContent ul li a,
#courseMenuPalette h3 a, #previewCourseMenu h3 a,
.navPaletteContent h3 a.submenuLink:before,
.navPaletteContent h3 a.submenuLink_active:before,
#courseMenuPalette div.navPaletteContent ul li a span,
#courseMenuPalette .navPaletteContent .subhead { color:
#FEFEFE; }

The restrictions
Look out for my other
presentation, “Better
Blackboard help” for more.

Course menus
• What else can we do?

Course menu workaround - keyboard
/* Course Title Text Focus */
#courseMenuPalette h3 a:focus {
outline-color: rgba(255, 255, 255, 0) ;
border: #00131D 1px;
border-style: hidden hidden double hidden;
color: #00131D ; }
/* Course Menu Text Colour Focus */ .
listCm .courseMenu a:focus span {
color: #00131D ;
font-weight: bold ; }
/* Course Menu Background Colour Focus */
#courseMenuPalette div.navPaletteContent a:focus {
background-color: white ;
outline-color: rgba(255, 255, 255, 0) ;
border: #002E3B 1px;
border-style: hidden hidden double hidden; }

Course menus workaround, example animation.

Course menu workarounds
We include this coping
strategy in our
Accessibility Statement.

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

The focus indicator shows where we are on a website as we navigate using the tab
key

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

‘The :focus CSS pseudo-class
represents an element (such as a
form input) that has received focus.
It is generally triggered when the
user clicks or taps on an element or
selects it with the keyboard's "tab"
key.’
US/docs/Web/CSS/:focus
https://css-tricks.com/focusing-on-
focus-styles/
Focus in CSS
a:focus {
outline: 3px solid orange; }

Focus indicators in Blackboard default 2016 theme

9.2.26 Focus visible
Where ICT is a web page, it shall satisfy WCAG 2.0
Success Criterion 2.4.7 Focus Visible. Any keyboard
operable user interface has a mode of operation
where the keyboard focus indicator is visible.
…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.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
WCAG 2.2 draft
2.4.11 Focus Visible (Enhanced)
https://www.w3.org/TR/WCAG22/#focus-visible-enhanced
Focus indicators in the regulations and guidelines.
Accessibility requirements suitable for public
procurement of ICT products and services in
Europe

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.
WCAG 2.2 Draft: 2.4.11 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…
div#puller a:focus,
.item a:focus,

Usually 3px wide,
with a 2px offset.
div#puller a:focus,
.item a:focus,
Ratio: 18.9:1 Ratio: 18.9:1
Ratio: 18.9:1

div#puller a:focus,
.item a:focus,
Ratio: 18.9:1 Ratio: 18.9:1
Ratio: 18.9:1
A well contrasting
colour.

Focus styles
• Does not have to be “just a box”.

Not always “just a box”…
x:focus {
outline-style: none;
text-transform: uppercase; }
y:focus {
background-color: #8D3970;
color: #FFFFFF;
outline-style: none;
transform: scale(1.2);
transition: all 0.2s ease-in-
out;
}
z:focus {
outline: 3px solid #00131D;
outline-offset: 2px;
transition: outline-offset .2s
linear;}

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

The focus indicator also appears
when you click on something.
This may give that extra comfort to
users “yes I did click on it”.
Other benefits

Challenges
• Finding all the theme elements that you wish to
style can take some time, as without full
documentation it can be a lot of trial and error
whilst using inspect element.*
• Once I have tidied up my theme work I will share a
new version to the community site.
*See last year’s Bluffers guide for more about inspect
element.

9.2.16 No keyboard
trap
…ensure that keyboard users do
not become trapped in a subset
of the content that can only be
exited using a mouse or pointing
device.
9.2.20 Bypass blocks
…allow people who navigate
sequentially through content
more direct access to the
primary content of the Web
page.
9.2.22 Focus Order
…focusable components receive
focus in an order that preserves
meaning and operability.
9.2.29 On focus
…ensure that functionality is
predictable.
9.2.31 Consistent
navigation
…encourage the use of
consistent presentation and
layout for users who interact
with repeated content.
9.2.32 Consistent
identification
…ensure consistent
identification of functional
components that appear
repeatedly.
Not just focus (examples from EN 301 549)

9.2.22 Focus Order

Microsoft Accessibility Insights has a
feature to present the focus order of
web pages in this way.
https://accessibilityinsights.io
9.2.22 Focus Order

What more can we do? Some examples…

Reducing motion

All major operating
systems allow the user
to express a
preference for reduced
motion on-screen—
perhaps because they
have motion-triggered
vestibular spectrum
disorder.
We can detect
whether the user has
done this with the CSS
prefers-reduced-
motion media query.
Reducing motion

All major operating
to express a
motion on-screen—
vestibular spectrum
disorder.
We can detect
prefers-reduced-
motion media query.
Reducing motion
@media (prefers-reduced-
motion: reduce) {
#puller.pullcollapsed a
{
animation: pulse 0s
infinite !important;
}
#puller.pullcollapsed
a:after {
animation: pulse2
0s infinite
!important;
}
}
Reducing motion
More info at: https://websitesetup.org/web-accessibility-checklist/

All major operating
to express a
motion on-screen—
vestibular spectrum
disorder.
We can detect
prefers-reduced-
motion media query.
Reducing motion
@media (prefers-reduced-
motion: reduce) {
#puller.pullcollapsed a
{
animation: pulse 0s
infinite !important;
}
#puller.pullcollapsed
a:after {
animation: pulse2
0s infinite
!important;
}
}
Reducing motion
And https://elijahmanor.com/prefers-reduced-motion/

Make usage easier

Case study: Grade Centre
• Improving the Grade Centre in
the 2016 theme was one of the
early focuses of the community.
• The Grade Centre scroll bar in
Chrome has been problematic
since the 2012 theme.

/* Make GC in Chrome Scroll Bar better */
/* Add border around thumb part to make it clearer */
#nonAccessibleTableDiv ::-webkit-scrollbar-thumb {
border: 1px solid #00131D; }
/* Add Scroll Buttons */
#nonAccessibleTableDiv ::-webkit-scrollbar-button:single-
button {
background-color: #005C84;
display: block;
border-style: none;
height: 13px;
width: 14px; }
/* Scroll Buttons Hover colour */
button:hover {
background-color: #E73238;
transition: all 0.2s ease-in-out !important; }

/* Up Button */
button:vertical:decrement {
-webkit-border-radius: 200px 200px 0px 0px; }
/* Down Button */
button:vertical:increment {
/* Left button */
#nonAccessibleTableDiv ::-webkit-scrollbar-
button:horizontal:decrement {
/* Right button */
#nonAccessibleTableDiv ::-webkit-scrollbar-
button:horizontal:increment {

Reaching the end…

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.

Thanks to…
Nathan Cobb
Chris Boon
Hervé Didiot-Cook
Andy Holohan
Ester Muñoz

Thank you and goodbye!

The Bluffer’s Guide to Blackboard Theme Accessibility

Recommended

Recommended

More Related Content

What's hot

What's hot (10)

Similar to The Bluffer’s Guide to Blackboard Theme Accessibility

Similar to The Bluffer’s Guide to Blackboard Theme Accessibility (20)

More from Matthew Deeprose

More from Matthew Deeprose (13)

Recently uploaded

Recently uploaded (20)

The Bluffer’s Guide to Blackboard Theme Accessibility