This presentation was to the Blackboard Mobile and Collaborate Usergroup at the Durham 2020 Blackboard Conference. The presentation covers the recent UK accessibility regulations in their global context and provides some examples of customising Blackboard to meet those regulations whilst aligning to an institutional brand.

1. Blackboard accessibility
beyond Ally
Matthew Deeprose
VLE Manager
University of Southampton
@vleguru
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
1
Twentieth Annual Durham Blackboard Users’ Conference Hybrid Meeting: Monday 6 January 2020

2. Agenda
• Setting the scene:
• The accessibility regulations.
• Their global context.
• Future direction.
• Sharing some work, insights, and tips on the
accessibility of the Blackboard UI* with reference to
the regulations.
1. Colour contrast.
2. Focus indicators.
3. Enhanced ATbar.
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
2
*2016 responsive theme, original experience

3. Relevant to MOCO?
• In terms of using the responsive interface on a
mobile device, as well as a computer.
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
3

4. Tips
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
4
Tip!
Press F11 for
Full Screen.
Tip!
Use X to close
side panel.

5. Note
• This is not legal advice.
• Learning about accessibility is a
journey.
• Whilst I have done a lot of research,
it is always possible that I have
misunderstood something.
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
5

6. Request
• I plan to develop this presentation for BBTLC.
• Let me know
• what you found interesting or useful,
• further content / areas to add
• Contact me via LinkedIn.
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
6

7. What are these regulations anyway?
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
7

8. 06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
8
Statutory Instrument 2018 No. 952
The Public Sector Bodies (Websites and Mobile
Applications) No. 2 Accessibility Regulations 2018

9. 06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
9
Statutory Instrument 2018 No. 952
The Public Sector Bodies (Websites and Mobile
Applications) No. 2 Accessibility Regulations 2018
Equality Act 2010
Does not apply in Northern
Ireland
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

10. 06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
10
Statutory Instrument 2018 No. 952
The Public Sector Bodies (Websites and Mobile
Applications) No. 2 Accessibility Regulations 2018
Equality Act 2010
Does not apply in Northern
Ireland
Directive (EU) 2016/2102
On the Accessibility of the websites and mobile
applications of public sector bodies
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

11. 06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
11
Convention on the Rights of Persons with
Disabilities (CRPD) 2006
Statutory Instrument 2018 No. 952
The Public Sector Bodies (Websites and Mobile
Applications) No. 2 Accessibility Regulations 2018
Equality Act 2010
Does not apply in Northern
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
Directive (EU) 2016/2102
On the Accessibility of the websites and mobile
applications of public sector bodies
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
Directive (EU) 2016/2102
On the Accessibility of the websites and mobile
applications of public sector bodies

12. 06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
12
Convention on the Rights of Persons with
Disabilities (CRPD) 2006
Statutory Instrument 2018 No. 952
The Public Sector Bodies (Websites and Mobile
Applications) No. 2 Accessibility Regulations 2018
Equality Act 2010
Does not apply in Northern
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
Directive (EU) 2016/2102
On the Accessibility of the websites and mobile
applications of public sector bodies
Disability Discrimination Act
1995
Applies to all UK
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
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
Directive (EU) 2016/2102
On the Accessibility of the websites and mobile
applications of public sector bodies

13. 06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
13
Convention on the Rights of Persons with
Disabilities (CRPD) 2006
Statutory Instrument 2018 No. 952
The Public Sector Bodies (Websites and Mobile
Applications) No. 2 Accessibility Regulations 2018
Equality Act 2010
Does not apply in Northern
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
Directive (EU) 2016/2102
On the Accessibility of the websites and mobile
applications of public sector bodies
Disability Discrimination Act
1995
Applies to all UK
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
WCAG 2.X Level AA
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
Directive (EU) 2016/2102
On the Accessibility of the websites and mobile
applications of public sector bodies

14. 06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
14
Convention on the Rights of Persons with
Disabilities (CRPD) 2006
Statutory Instrument 2018 No. 952
The Public Sector Bodies (Websites and Mobile
Applications) No. 2 Accessibility Regulations 2018
Equality Act 2010
Does not apply in Northern
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
Directive (EU) 2016/2102
On the Accessibility of the websites and mobile
applications of public sector bodies
Disability Discrimination Act
1995
Applies to all UK
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
WCAG 2.X Level AA
The “failure to make a reasonable adjustment” definition in the 2018 SI refers to the
detail already determined in the above two acts.
Section 508 of the
Rehabilitation Act
of 1973
Equality Act 2010
Does not apply in Northern
Ireland

15. 06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
15
Convention on the Rights of Persons with
Disabilities (CRPD) 2006
Statutory Instrument 2018 No. 952
The Public Sector Bodies (Websites and Mobile
Applications) No. 2 Accessibility Regulations 2018
Equality Act 2010
Does not apply in Northern
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
Directive (EU) 2016/2102
On the Accessibility of the websites and mobile
applications of public sector bodies
Disability Discrimination Act
1995
Applies to all UK
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
WCAG 2.X Level AA
The “failure to make a reasonable adjustment” definition in the 2018 SI refers to the
detail already determined in the above two acts.
Section 508 of the
Rehabilitation Act
of 1973
Americans with Disabilities Act
(ADA) Standards for
Accessible Design in
September 2010
Equality Act 2010
Does not apply in Northern
Ireland
Directive (EU) 2016/2102
On the Accessibility of the websites and mobile
applications of public sector bodies

16. 06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
16
Convention on the Rights of Persons with
Disabilities (CRPD) 2006
Statutory Instrument 2018 No. 952
The Public Sector Bodies (Websites and Mobile
Applications) No. 2 Accessibility Regulations 2018
Equality Act 2010
Does not apply in Northern
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
Directive (EU) 2016/2102
On the Accessibility of the websites and mobile
applications of public sector bodies
Disability Discrimination Act
1995
Applies to all UK
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
WCAG 2.X Level AA
The “failure to make a reasonable adjustment” definition in the 2018 SI refers to the
detail already determined in the above two acts.
Section 508 of the
Rehabilitation Act
of 1973
Americans with Disabilities Act
(ADA) Standards for
Accessible Design in
September 2010
ISO/IEC
40500:2012
Directive (EU) 2016/2102
On the Accessibility of the websites and mobile
applications of public sector bodies

17. Essential reading from JISC
Accessibility regulations - what you need to know
www.jisc.ac.uk/guides/accessibility-regulations-what-you-need-to-know
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
17
Prepared by John Kelly, JISC.

18. Speaking of JISC…
Be sure to join the Digital Accessibility Regulations
JISCMAIL list.
https://www.jiscmail.ac.uk/cgi-bin/webadmin?A0=DIGITALACCESSIBILITYREGULATIONS
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
18

19. Government Digital Service:
“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.”
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
19
https://www.gov.uk/government/publications/online-accessibility-regulations-campaign-supporter-
pack/gds-accessibility-regulations-campaign-information-for-education

20. 06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
20
https://www.ucisa.ac.uk/-/media/Files/UCISA/Publication-files/Directors-cut/Digital-accessibility-
directors-cut.pdf

21. “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.”
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
21
https://www.ucisa.ac.uk/-/media/Files/UCISA/Publication-files/Directors-cut/Digital-accessibility-
directors-cut.pdf

22. ADA / Dominos
Domino's v Robles
• 9th Circuit Court of Appeals, in San Francisco ruled Dominos app and web site
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. So they were suing for the right to
discriminate,"
Whitney Quesenbery, Center for Civic Design.
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
22
https://arstechnica.com/tech-policy/2019/10/accessibility-the-future-and-why-dominos-matters/

23. 1/6/2020 Matthew Deeprose https://www.linkedin.com/in/mattdeeprose/ 23
The Journey Continues…
1/6/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
23
Hiroshi Nagai

24. 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
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
24
https://en.wikipedia.org/wiki/Web_accessibility#Web_accessibility_legislation
https://www.lflegal.com/2013/05/gaad-legal/

25. Global Momentum
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
25
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.
Directive (EU)
2019/882
European Accessibility Act
Directive (EU) 2016/2102
On the Accessibility of the websites and
mobile applications of public sector
bodies

26. Global Momentum
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
26
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.
Directive (EU)
2019/882
European Accessibility Act

27. Continual Developments
• 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
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
27
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.
Directive (EU)
2019/882
European Accessibility Act

28. Updated:
• August 2018
• November 2019
• Now uses WCAG 2.1 AA
(previously WCAG 2.0 AA.)
• See https://www.etsi.org/
Global Momentum
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
28
Standard - EN 301 549
Accessibility requirements suitable
for public procurement of ICT
products and services in Europe
Directive (EU) 2016/2102
On the Accessibility of the websites
and mobile applications of public
sector bodies

29. 06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
29
WCAG 2.1
Global Momentum

30. 06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
30
WCAG 2.1
WCAG 2.2 will be released in November 2020
WCAG 2.2
Global Momentum

31. 06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
31
WCAG 2.1
WCAG 2.2 will be released in November 2020
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”.
Global Momentum

32. Who Benefits?
1/6/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
32

33. Impairments
may be…
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
33
Microsoft
Design

34. UoS Blackboard Upgrade 2019
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
34

35. Making the Blackboard responsive theme on
brand and accessible
When we introduced the 2016 responsive theme in
2019 we wanted the interface to be both:
✔ “On brand” (using the institutional colour palette).
✔ Compliant with the new web accessibility regulations.
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
35

36. Example 1:
Colour contrast
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
36

37. Example 1: Colour contrast in context
• 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.**
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
37
* https://abilitynet.org.uk/blog/visual-impairment-and-computing-common-questions
** http://www.colourblindawareness.org/colour-blindness/

38. Situational visual impairments
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
38
Using a screen in bright light A projector screen in a well lit room
Steve Mason/Photodisc/Getty Images pxfuel.com - Creative Commons Zero - CC0

39. WCAG
1.4.11 Non-
text
Contrast
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
39

40. 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
• Parts of graphics required to
understand the content,
except when a particular
presentation of graphics is
essential to the information
being conveyed.
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
40

41. 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
• Parts of graphics required to
understand the content,
except when a particular
presentation of graphics is
essential to the information
being conveyed.
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
41

42. WCAG 1.4.1
Non-text
Contrast
Level AA
The visual presentation of the following
have a contrast ratio of at least 3:1 against
adjacent colour(s):
• 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;
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
42

43. 1.4.1 Non-text Contrast
Visual elements that do not contain text should
have a contrast ratio above 3:1
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
43
Ratio:1.87:1 X

44. 1.4.1 Non-text Contrast
Visual elements that do not contain text should
have a contrast ratio above 3:1
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
44
Ratio: 7.33:1 ✔

45. WCAG
1.4.3
Contrast
(Minimum)
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
45

46. 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
except for the following:
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
46

47. 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
except for the following:
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
47
Standard - EN 301 549
Accessibility requirements suitable
for public procurement of ICT
products and services in Europe
9.2.12 Contrast (minimum)
Where ICT is a web page, it shall satisfy WCAG 2.0
Success Criterion 1.4.3 Contrast (Minimum).
http://mandate376.standards.eu/

48. WCAG 1.4.6
Contrast
(Enhanced)
Level AAA
The visual presentation of
text and images of text has
a contrast ratio of at
least 7:1
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
48

49. Visual presentation of text and images of
text…
Ratio:
2.49:1 X
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
49

50. Visual presentation of text and images of
text…
Ratio:
14.44:1 ✔
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
50

51. The ratios to remember
3:1
4.5:1
7:1
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
51
Minimum for
Graphical
Objects / UI
Minimum for
Text
Enhanced level
for Text
AAAAA
(not to scale)

52. How is colour contrast calculated?
1. Determine the relative luminance of two
colours
2. Compare the relative luminance of the
background and foreground colour
See https://planetcalc.com/7779/
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
52

53. 06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
53
https://www.24a11y.com/2019/color-theory-and-contrast-ratios/

54. whocanuse.com
Created by Corey Ginnivan
@coreyginnivan
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
54
Or use an online
checker

55. Use an online checker
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
55

56. By the way…
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
56
A new method of testing colour
contrast is under discussion by
“Taskforce Silver”.
https://github.com/w3c/wcag/issues/
695

57. Complexity
Lessons from implementing in the Blackboard UI
1/6/2020 Matthew Deeprose https://www.linkedin.com/in/mattdeeprose/ 57
Complexity
Lessons from implementing in the Blackboard UI

58. New to customising the theme?
“A Bluffer’s Guide to Customising the 2016 Blackboard
Theme”
http://go.soton.ac.uk/bb
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
58

59. Accounting for “hover”
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
59
Ratio:
14.44:1
Ratio:
12.33:1
.actionBar .mainButton

60. Hover / Selected states
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
60
Hover / selected text - Ratio:
8.48:1
Normal text - Ratio:14.44:1
Control Panel:
.menuWrap-inner
#controlPanelPalette_contents a:hover
.controlpanel a.comboLink_active
.controlpanel h4 a.open

61. Further complexity
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
61
.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.

62. At least I can’t go wrong with the out of the
box setting?
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
62

63. 06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
63
The word ‘ON’ within the grey
box.
Foreground colour: #777777
Background colour: #FFFFFF
Ratio: 4.47:1
= Fail WCAG 1.4.3

64. Receipt message:
Foreground color: #FFFFFF
Background color: #C56FD5
Ratio: 3.17:1
= Fail WCAG 1.4.3
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
64

65. 06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
65

66. Top tip
Use Microsoft’s Accessibility Insights tool
https://accessibilityinsights.io
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
66

67. Accessibility Insights
Browser plugin.
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
67
“Fast pass” will run a quick
check and highlight issues
on a page.
Free!

68. UoS Brand
https://www.southampton.ac.uk/brand/category/colour/
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
68
Choosing brand colours that
have sufficient contrast to meet
the accessibility requirement…

69. Having spent a summer checking contrast
ratios…
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
69
Look up table to ease the process of checking which colours are suitable

70. Contact me via
LinkedIn if you would
like a similar table for
your colour scheme…
Having spent a summer checking contrast
ratios…
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
70

71. 06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
71
Contact me via
LinkedIn if you would
like a similar table for
your colour scheme…

72. Customising Bb Colours
Not simple. Little
documentation, but lots
of help on the Bb
community site, as well
as our presentation
from TLCEUR 19.
Building a theme
empowers you to
ensure colour
contrast is
appropriate.
Brands your
Blackboard
environment with
your institutional
colour scheme.
Hiroshi
Nagai
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
72

73. What about Blackboard course menus?
• Since 2018 Q2 release, instructors can customise
their course menus on a Blackboard environment
that uses the 2016 theme.
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
73

74. All courses
reset to WCAG
2.1 AAA colour
scheme
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
74

75. User choices
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
75Bianca Caroline Soares

76. Course menus
• Cannot currently allow
customisation of menu whilst
ensuring good contrast.
• Other options:
• Course Templates
• Don’t allow customisation
• Vote on community idea to
disallow poor choices via UI.
• Make a JSHack to prevent bad
choices?
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
76

77. Course menu workaround - mouse
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
77
/* Make course menu text change on rollover */
#courseMenuPalette .courseMenu a:hover span {
color: #002E3B ;
font-weight: bold;
transition: all 0.2s ease-in-out ;
}
#courseMenuPalette h3 a:hover,
#courseMenuPalette_contents li:hover {
color: #002E3B ;
background-color: white ;
transition: outline-offset .2s linear ;
}

78. Course menu workaround - keyboard
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
78
/* 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;
}

79. Course menu workarounds
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
79
We include this coping
strategy in our
Accessibility
Statement.

80. Example 2: Focus indicators
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
80
https://www.reddit.com/user/simonlachapelle/

81. Keyboard (non-mouse) navigation
•Navigate website using tab, enter, cursor keys
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
81
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

82. Keyboard (non-mouse) navigation
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
82
Indicating focus

83. Keyboard (non-mouse) navigation
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
83
Indicating focus

84. Keyboard (non-mouse) navigation
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
84
Indicating focus

85. 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
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
85

86. Keyboard (non-mouse) navigation
Focus indicators in the Blackboard
default 2016 theme.
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
86
Ratio: 7.36:1

87. 9.2.26 Focus visible
Where ICT is a web page, it shall satisfy WCAG 2.0 Success
Criterion 2.4.7 Focus Visible.
WCAG 2.0 Success Criterion: Focus Visible
Any keyboard operable user interface has a mode of operation where the
keyboard focus indicator is visible.
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
87
http://mandate376.standards.eu/
Standard - EN 301 549
Accessibility requirements suitable for
public procurement of ICT products and
services in Europe

88. Additional in WCAG 2.1
In combination with 2.4.7 Focus Visible, the visual
focus indicator … must have sufficient contrast
…
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
88
https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html

89. Focus indicators for UoS Theme
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
89
Ratio: 8.48:1
Ratio: 14.44:1

90. 06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
90
Ratio:
7.72:1

91. 06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
91
Ratio: 18.9:1 Ratio: 18.9:1
Ratio: 18.9:1
Style is for large
identifiable
indicators.

92. 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.
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
92

93. Customising Bb Focus indicators
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
93
Ratio:
1.72:1
Hover Focus

94. Colour contrast / focus indicators
1/6/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
94
Hiroshi
Nagai

95. Recognised as best practice
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
95
https://moritzgiessmann.de/accessibility-cheatsheet/

96. Recognised as best practice
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
96
https://uxdesign.cc/designing-for-accessibility-is-not-that-hard-c04cc4779d94

97. Enhanced ATbar
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
97

98. Enhanced ATbar
•Uses JSHack to add the ATbar and to style
existing Bb accessibility features into a
coherent whole.
•Add a help section.
•Normalise accessibility tools.
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
98

99. Enhanced ATbar
• Will be shared to community site soon.
• You will be able to change the colours / style / help
content for your own purposes.
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
99

100. Enhanced ATbar
Skip to Content
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
100
Does not appear by
default in
Blackboard. Not
accessible using
mouse.

101. Enhanced ATbar
Quick Links
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
101
Appears in top left corner of
Blackboard.
Does not appear in mobile view.

102. Quick Links
Allows user to quickly
locate any heading or
section within any page
in Blackboard and jump
directly to it.
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
102

103. Enhanced ATbar
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
103

104. ATbar: www.atbar.org
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
104
Created by the ECS
Accessibility team at
UoS, funded by LexDis
project.
Can be used as a
browser extension, as
a standalone program,
or added to websites.

105. Enhanced ATbar
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
105
Increase /
decrease font size
without changing
size of images.

106. Enhanced ATbar
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
106
Change font
style and
line-spacing.

107. Enhanced ATbar
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
107
Text to
speech.

108. Enhanced ATbar
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
108
Change text
and link
colours.

109. Enhanced ATbar
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
109
Colour
overlays.

110. Enhanced ATbar
Help
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
110
Explains the toolbar. Provides relevant
links, for example to:
• Our enabling services team
• Accessibility statement
• Assistive technology suite

111. 06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
111

112. Next steps
Make changes based on
community feedback.
Make a mobile version?*
(Quick Links is not available
in mobile theme currently.)
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
112
Hiroshi
Nagai

113. Find out more
Enhanced ATbar will be available
to download on the Bb
Community site soon.
Introductory video:
https://www.youtube.com/watch?v=2XtUe0HaOJk
Post reflecting on its creation:
http://bit.ly/2SI7nz6
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
113
Chad Knight

114. Summary
• Setting the scene:
• The accessibility regulations.
• Their global context.
• Future direction.
• Sharing some work, insights, and tips on the
accessibility of the Blackboard UI* with reference to
the regulations.
1. Colour contrast.
2. Focus indicators.
3. Enhanced ATbar.
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
114
*2016 responsive theme, original experience
Getty Images

115. Questions and Discussion
06/01/2020
Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
115
Remember to show
example animations!
Remember to send me
feedback about the
presentation!