1 of 32

The Bluffer’s Guide to Blackboard Theme Accessibility�(Live Version)

Matthew Deeprose, VLE Manager, University of Southampton

Thursday 21 May 2020

2 of 32

About me

  • Managing the Blackboard service at the University of Southampton since July 2000.
  • Was Blackboard MVP now member of “Blackboard Community Leadership Circle”.

  • Presentations at this year’s TLC:
    • The Bluffer’s Guide to Blackboard Theme Accessibility.
    • Better Blackboard Help.

3 of 32

Questions the full presentation answers.

  • How can we ensure that when we customise our Blackboard environment to align with our institutional brand and colours that we do so in an accessible way?

  • How do the European regulations on public sector website influence and guide this?

4 of 32

Questions the full presentation answers.

  • How can we ensure that when we customise our Blackboard environment to align with our institutional brand and colours that we do so in an accessible way?

  • How do the European regulations on public sector website influence and guide this?

Think of this as the trailer.

Imagine I am using my “trailer voice”.

5 of 32

Poll Question

With the current move to online delivery of education, accessibility has:

  1. become less important.
  2. never been more important.

6 of 32

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

7 of 32

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

8 of 32

9 of 32

https://cdn2.hubspot.net/hubfs/153358/Deque-COVID-19-Report.pdf

62 percent say it has increased awareness of the impact of accessibility on digital channels.

More than one-third of respondents have heard reports that users with disabilities are having increased difficulty accessing services during this time of crisis.

10 of 32

Building upon last year’s presentation

11 of 32

  • There are now about 1700 lines of customised CSS in our theme, and I have been heavily researching accessibility regulations and adapting customisations where necessary.

  • 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:

12 of 32

What’s in scope?

In Scope:

  • Blackboard Original Experience.

  • 2016 or 2012 theme.
    • With or without customisation.

Out of Scope:

  • Blackboard Ultra.

  • Materials uploaded to Blackboard by staff / students.

Much of the information in the talk will be of interest and relevance regardless.

13 of 32

If you saw my talk at the MoCo session at this year’s Durham conference

  • This presentation has:
    • More content.
    • Latest updates including new details about WCAG 2.2
    • More time.
    • More code examples.

.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; }

14 of 32

In Europe, ______________ describes the standards to which public sector websites, such as our VLE should comply.

  1. ISO/IEC 40500:2012
  2. COM(2010)636
  3. EN 301 549

15 of 32

Helping you to understand the regulations and legislation

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

+23 more

16 of 32

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

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

Convention on the Rights of Persons with Disabilities (CRPD) 2006

COM(2010)636

European Disability Strategy 2010-2020:

A Renewed Commitment to a Barrier-Free Europe

COM(2010)245

A Digital Agenda for 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

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

17 of 32

18 of 32

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.

19 of 32

Poll Question

Have you customised, or do you wish to customise your Blackboard theme,

and/or do you allow instructors to customise the colour scheme of their course menu?

  1. Yes.
  2. No.

20 of 32

You need to customise to be accessible!

When customising the Bb responsive theme it becomes almost inevitable to have to consider accessibility.

The default purple colours often used in Blackboard for “hover” and “focus” will not necessarily work well with your institutional colour scheme.

Ratio: 1.72:1

21 of 32

1.4.1 Non-text Contrast in Blackboard theme

https://go.soton.ac.uk/bb

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;

}

22 of 32

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;

}

23 of 32

Further complexity

https://go.soton.ac.uk/bb

.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.

24 of 32

More questions answered by the full presentation

How can I get around the “subheader” issue in the 2016 theme?

How can I adapt my theme to be more considerate of users who have motion-triggered vestibular spectrum disorder?

Can we enforce colour schemes for certain subject areas, without resorting to course templates?

Can customising my Blackboard theme improve usability?

25 of 32

More questions answered by the full presentation

How can I get around the “subheader” issue in the 2016 theme?

How can I adapt my theme to be more considerate of users who have motion-triggered vestibular spectrum disorder?

Can we enforce colour schemes for certain subject areas, without resorting to course templates?

Can customising my Blackboard theme improve usability?

And much more!

26 of 32

Supporting website

27 of 32

Watch the full version

28 of 32

Supporting website

29 of 32

In our next episode…

Live version:

Thursday 28 May

30 of 32

In our next episode…

“I will demonstrate a new approach for the Original Blackboard Learn Experience to provide proactive assistance to staff and students at the right time and in the right place.

At the University of Southampton, this method resulted in significantly higher engagement with institutional support resources and has the potential to reduce support calls and encourage better Blackboard usage.

I will show you how you can recreate this approach using free and open-source software.”

31 of 32

In our next episode…

“I will demonstrate a new approach for the Original Blackboard Learn Experience to provide proactive assistance to staff and students at the right time and in the right place.

At the University of Southampton, this method resulted in significantly higher engagement with institutional support resources and has the potential to reduce support calls and encourage better Blackboard usage.

I will show you how you can recreate this approach using free and open-source software.”

1952% increase between week 0 and week 4!

32 of 32