With the rapid move to online teaching, ensuring equitable access to our learning environment has never been more important. Recent legislation has brought an accessibility requirement for public sector organisations such as Universities. How can we ensure that our Blackboard environment reflects our institutional brand whilst following accessibility guidelines?
Customising the Blackboard Responsive theme for the Learn Original Experience continues to be a hot topic on the Blackboard Community site. We customise the theme both to improve the user experience, and to brand our environment with our institutional colours.
In this session I will put recent legislative and regulatory changes that relate to accessibility into a global context and explain how they impact University platforms such as Blackboard.
Using examples and developments from my own experience at the University of Southampton, I will provide practical advice and tips on what we should be doing when we customise our Blackboard theme. We all want our Blackboard environments to look great and appear congruent when viewed alongside our other institutional platforms. We also want to ensure changes we make are inclusive to our whole user community.
I will demonstrate how you may check the accessibility of your own custom Blackboard theme and illustrate the application of a number of the World Wide Web Consortium’s (W3C) Web Content Accessibility Guidelines to Blackboard theme customisation. I will also discuss how the work we do in this area can inform the accessibility statements we are required to create for our Virtual Learning Environment.
Making it simple to ensure the use of colour is both on brand and accessibleMatthew Deeprose
With more than two million people in the UK living with a visual impairment and many more having difficulties with their sight, it is crucial that, when we create content, we make accessible colour choices.
I will explain the importance of considering contrast when we use colour and share my own journey and lessons that resulted in the development of a method to make it simpler and easier to help my colleagues make accessible colour choices.
If time allows I will demonstrate further real-world examples and solutions that you can replicate at your own institution.
Better Blackboard Help: Where your users need it, when they want it.Matthew Deeprose
It has never been more important to provide localised, central, relevant, and up to date support and messaging within our Blackboard environments. This presentation is a practical guide to how you can use freely available tools to provide contextual, just in time support sign-posting staff and students to local support resources from within Blackboard Learn (original experience).
As Blackboard administrators, learning designers, technologists, programme leads, and support staff, we often wish we could be alongside our users to say, “well in these circumstances we recommend using the feature in this way”, or “you could use that tool, but there’s a much more effective tool over there”, right when the intervention would be most relevant and timely. In current times we may also wish to highlight newly provisioned services and tools such as Blackboard Collaborate.
Blackboard allows us to customise the language pack, but have you noticed that most users will just skim past plain text and get straight into clicking and submitting? Even when a user follows a help link, they may reach a generic help page rather than the bespoke institution-specific guidance that has been carefully curated to provide the most appropriate help, contextualised for an institution's Managed Learning Environment?
In this session 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. By the end of the session you will be eager to get back to work and start implementing the techniques I will show you.
The practical bluffer's guide to blackboard theme accessibilityMatthew Deeprose
Presented at Bb World 2020. With the rapid move to online teaching in the current climate of COVID-19, ensuring equitable access to our learning environment has never been more important.
When we customise the Blackboard theme (original experience) to align it with our institutional colours, we must consider accessibility. Based on my own experience at the University of Southampton (in the UK) I will share practical lessons and recommendations, of how to ensure your theme customisation complies with web content accessibility guidelines.
How to ensure accessible use of color in learning resources and materials ali...Matthew Deeprose
Is it possible to be both on brand and accessible? WCAG guides us on making our color choices accessible. We will demonstrate a simple and repeatable solution to share with your colleagues. Our innovative matrix concept will help YOU to determine accessible color combinations within your institutional brand palette.
Many students, such as those who are color blind, may not self-identify as having a disability. Poor use of color in online courses can have a detrimental impact on certain groups of students, including those who are color blind or have a visual impairment. Likewise, most people find vibrating color combinations difficult to read. Appropriate use of color (especially when used to distinguish and organize your content) can benefit everyone and reduce the 'burden' of ‘reasonable adjustments’. However, we design our learning materials, we should ensure that when we use color we do so accessibly.
A constraint that many practitioners must work within is their education institution’s brand color palette, which may not have been chosen with accessibility in mind.
We will share a simple and easy to use approach that can help you use colors accessibly while remaining congruent and consistent with your institution's color scheme.
Blackboard Masterclass #1 for Faculty of Health Sciences at the University of Southampton. In this presentation we cover some features of Blackboard that may not have been heavily used previously within the Faculy of Health Sciences.
Making it simple to ensure the use of colour is both on brand and accessibleMatthew Deeprose
With more than two million people in the UK living with a visual impairment and many more having difficulties with their sight, it is crucial that, when we create content, we make accessible colour choices.
I will explain the importance of considering contrast when we use colour and share my own journey and lessons that resulted in the development of a method to make it simpler and easier to help my colleagues make accessible colour choices.
If time allows I will demonstrate further real-world examples and solutions that you can replicate at your own institution.
Better Blackboard Help: Where your users need it, when they want it.Matthew Deeprose
It has never been more important to provide localised, central, relevant, and up to date support and messaging within our Blackboard environments. This presentation is a practical guide to how you can use freely available tools to provide contextual, just in time support sign-posting staff and students to local support resources from within Blackboard Learn (original experience).
As Blackboard administrators, learning designers, technologists, programme leads, and support staff, we often wish we could be alongside our users to say, “well in these circumstances we recommend using the feature in this way”, or “you could use that tool, but there’s a much more effective tool over there”, right when the intervention would be most relevant and timely. In current times we may also wish to highlight newly provisioned services and tools such as Blackboard Collaborate.
Blackboard allows us to customise the language pack, but have you noticed that most users will just skim past plain text and get straight into clicking and submitting? Even when a user follows a help link, they may reach a generic help page rather than the bespoke institution-specific guidance that has been carefully curated to provide the most appropriate help, contextualised for an institution's Managed Learning Environment?
In this session 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. By the end of the session you will be eager to get back to work and start implementing the techniques I will show you.
The practical bluffer's guide to blackboard theme accessibilityMatthew Deeprose
Presented at Bb World 2020. With the rapid move to online teaching in the current climate of COVID-19, ensuring equitable access to our learning environment has never been more important.
When we customise the Blackboard theme (original experience) to align it with our institutional colours, we must consider accessibility. Based on my own experience at the University of Southampton (in the UK) I will share practical lessons and recommendations, of how to ensure your theme customisation complies with web content accessibility guidelines.
How to ensure accessible use of color in learning resources and materials ali...Matthew Deeprose
Is it possible to be both on brand and accessible? WCAG guides us on making our color choices accessible. We will demonstrate a simple and repeatable solution to share with your colleagues. Our innovative matrix concept will help YOU to determine accessible color combinations within your institutional brand palette.
Many students, such as those who are color blind, may not self-identify as having a disability. Poor use of color in online courses can have a detrimental impact on certain groups of students, including those who are color blind or have a visual impairment. Likewise, most people find vibrating color combinations difficult to read. Appropriate use of color (especially when used to distinguish and organize your content) can benefit everyone and reduce the 'burden' of ‘reasonable adjustments’. However, we design our learning materials, we should ensure that when we use color we do so accessibly.
A constraint that many practitioners must work within is their education institution’s brand color palette, which may not have been chosen with accessibility in mind.
We will share a simple and easy to use approach that can help you use colors accessibly while remaining congruent and consistent with your institution's color scheme.
Blackboard Masterclass #1 for Faculty of Health Sciences at the University of Southampton. In this presentation we cover some features of Blackboard that may not have been heavily used previously within the Faculy of Health Sciences.
Website accessibility matters! There are many reasons to make your site accessible - not only will incorporating accessibility into your daily lives help people with disabilities actually be able to use your site, but it can help attract a wider audience/larger customer base, make your site rank higher with search engines, and can improve your overall user experience on both desktop and mobile devices.
But how can you make your site accessible? Website accessibility is often an afterthought at the end a project when there is an accessibility audit or a user submits an issue, but what if we switched focus and started thinking about accessibility at the beginning of a project during the initial design and development stages?
In this talk I will present a quick overview of website accessibility (the what, who, and why), then review the underlying guidelines to making a site accessible, and present some general rules to keep in the back of your mind while designing and developing your next site. Finally, we will review some current D7/D8 modules that can help you make your site accessible.
BS 8878: Systematic Approaches to Documenting Web Accessibility Policies and ...lisbk
Slides for a workshop session on "BS 8878: Systematic Approaches to Documenting Web Accessibility Policies and Practices" facilitated by Brian Kelly at the IWMW 2015 event held at Edge Hill University, Ormskirk on 27 July 2015.
See http://iwmw.org/iwmw2015/talks/systematic-approaches-to-documenting-web-accessibility-policies-and-practices/
Slides from talk on "Engaging Virtual Communities: Web 2.0" given at CILIP CDG conference on 30 April 2007.
See http://www.ukoln.ac.uk/web-focus/events/conferences/cilip-cdg-2007-04/
Open Badges – Open Credentials for All SkillsIlona Buchem
Presentation from the Webinar on "Open Badges" at the FUSCIA Group. The FUSCIA group members are involved in e-learning for engineering universities (French Grandes Ecoles), URL:
of universities2016 https://fuscia.info/comite-fuscia/
Slides for talk on "An Introduction to Web 2.0" given at the "Sharing Made Simple: a Practical Approach to Social Software" workshop on 6 June 2007.
See http://www.ukoln.ac.uk/web-focus/events/workshops/archivists-2007-06/
A talk on "Deployment Strategies For Web 2.0" given by Brian Kelly, UKOLN at the University of Nottingham on 12 March 2007.
See http://www.ukoln.ac.uk/web-focus/events/seminars/nottingham-2007-03/
Website accessibility matters! There are many reasons to make your site accessible - not only will incorporating accessibility into your daily lives help people with disabilities actually be able to use your site, but it can help attract a wider audience/larger customer base, make your site rank higher with search engines, and can improve your overall user experience on both desktop and mobile devices.
But how can you make your site accessible? Website accessibility is often an afterthought at the end a project when there is an accessibility audit or a user submits an issue, but what if we switched focus and started thinking about accessibility at the beginning of a project during the initial design and development stages?
In this talk I will present a quick overview of website accessibility (the what, who, and why), then review the underlying guidelines to making a site accessible, and present some general rules to keep in the back of your mind while designing and developing your next site. Finally, we will review some current D7/D8 modules that can help you make your site accessible.
BS 8878: Systematic Approaches to Documenting Web Accessibility Policies and ...lisbk
Slides for a workshop session on "BS 8878: Systematic Approaches to Documenting Web Accessibility Policies and Practices" facilitated by Brian Kelly at the IWMW 2015 event held at Edge Hill University, Ormskirk on 27 July 2015.
See http://iwmw.org/iwmw2015/talks/systematic-approaches-to-documenting-web-accessibility-policies-and-practices/
Slides from talk on "Engaging Virtual Communities: Web 2.0" given at CILIP CDG conference on 30 April 2007.
See http://www.ukoln.ac.uk/web-focus/events/conferences/cilip-cdg-2007-04/
Open Badges – Open Credentials for All SkillsIlona Buchem
Presentation from the Webinar on "Open Badges" at the FUSCIA Group. The FUSCIA group members are involved in e-learning for engineering universities (French Grandes Ecoles), URL:
of universities2016 https://fuscia.info/comite-fuscia/
Slides for talk on "An Introduction to Web 2.0" given at the "Sharing Made Simple: a Practical Approach to Social Software" workshop on 6 June 2007.
See http://www.ukoln.ac.uk/web-focus/events/workshops/archivists-2007-06/
A talk on "Deployment Strategies For Web 2.0" given by Brian Kelly, UKOLN at the University of Nottingham on 12 March 2007.
See http://www.ukoln.ac.uk/web-focus/events/seminars/nottingham-2007-03/
The development of better library information systems will always remain the core business of any serious library organization, but a shift took place towards (freely) available web-based tools for creating and managing the information workflow.
End-users are not only using these heavily, but are also creating their own preferred tools. Today's students are incorporating Web 2.0 skills in daily life, in their social and learning environments. Tomorrow's academic staff will expect to be able to use their preferred tools and resources within their work environment. Today's ánd tomorrow's libraries should support students and staff in the learning and research process by integrating their services and resources into our patrons' environments.
This practical workshop will demonstrate the use of Web 2.0 technology to empower users and librarians. During a hands-on session, participants will work with these tools. They will develop tailor-made services via personal start page software like Netvibes, making use of RSS-feeds, Widgets and Browser extensions.
We will explore the use of Netvibes and Web 2.0 tools in library staff and/or library user education/instruction. We will focus on library services which can be created almost on-the-fly with low costs and high impact. The growing use of social networks justifies the development of a library presence within these networks to reach out to our users.
Paper, slides and recommended reading : http://www.tilburguniversity.nl/services/lis/ticer/08carte/recommendedreading.html#brekel
Web 2.0: Opportunity Or Threat For IT Support Staff?lisbk
Slides used in a talk on "Web 2.0: Opportunity Or Threat For IT Support Staff?" given by Brian Kelly, UKOLN at the UCISA SDG 2007 conference.
See http://www.ukoln.ac.uk/web-focus/events/conferences/ucisa-sdg-2007/
Web 2.0: Implications For The Cultural Heritage Sectorlisbk
Brian Kelly, UKOLN gave a talk on "Web 2.0: Implications For The Cultural Heritage Sector" at a seminar on "From Bits to Blogs - Taking the IT Revolution into Museums, Libraries and Archives" organised by MLA North East and held at Teesside University, Middlesbrough on 18 October 2006.
See http://www.ukoln.ac.uk/web-focus/events/seminars/mla-ne-2006-10/
Web 2.0: What Is It, How Can I Use It, How Can I Deploy It?lisbk
Slides used in a presentation on "Web 2.0: What Is It, How Can I Use It, How Can I Deploy It?" given by Brian Kelly at an Aslib Engineering Group seminar on "Engineering Information: Today And Tomorrow" on 22 November 2006.
See http://www.ukoln.ac.uk/web-focus/events/seminars/aslib-2006-11/
How BS8878 relates to WCAG 2.0, PAS 78, Mandate 376 and UCD StandardsJonathan Hassell
An updated summary of BS8878 from its lead author, Jonathan Hassell. Including: how it relates to international standards on accessibility (WCAG 2.0 and ISO 9241-210), usability and user-centred design; and how it allows you to embed accessibility concerns into production processes.
It also provides information on how the Standard updates the older PAS 78 UK specification that it supersedes, and how it relates to work on the forthcoming EU accessibility procurement standard Mandate-376.
More information, including case studies of organisations using BS 8878, detailed blogs on its use by SMEs, tools and training for applying the Standard, and news on its progress towards becoming an International Standard can be found at
http://www.hassellinclusion.com/bs8878/
Similar to The Bluffer’s Guide to Blackboard Theme Accessibility (20)
The impact that high quality mark-up can have on accessibility, performance, ...Matthew Deeprose
Video, files, transcript, and links available at: https://matthewdeeprose.github.io/high_quality-markup_impact.html
Synopsis
Going beyond accessibility checklists, you may quickly get bogged down with technical details and acronyms that you feel you may never understand. In this fast-paced 30-minute presentation I use worked examples, with screen reader demonstrations, to cover topics including:
-semantic landmarks
-using ARIA attributes to improve the screen reader experience
respecting motion and colour preference
-dark and light themes
-the new contrast measurement in WCAG 3
-and more.
My hope is that by the end of this presentation you feel more informed and ready to dive deeper into web accessibility.
Sustaining accessibility efforts through accessibility-related appraisal obje...Matthew Deeprose
Video, transcript, files, and links available at: https://matthewdeeprose.github.io/objectives.html
Synopsis
How can IT departments sustain their accessibility efforts? While there are vital procedural and technical answers we should also consider the importance of cultural change. In this presentation, Tamsyn Smith and Matthew Deeprose will discuss early work on embedding accessibility within appraisal objectives.
Video, transcript, files, and links at: https://matthewdeeprose.github.io/powerBI.html
Synopsis
What can we do to make our Power BI reports more accessible? In this 20 minute presentation I explain the four principles of the Web Content Accessibility Guidelines and how they relate to the creation of Power BI reports.
Recent experiences have demonstrated that University staff and students expect to use online resources with a variety of devices, making full use of accessibility features such as reflow, captions, and text-to-speech.
Such features benefit everyone, but especially the increasing proportion of university students who self-report a disability.
University Information Technology departments know they must commit to accessibility; indeed, they have a legal obligation to do so, but how can they take this ambition and embed accessibility within their policies and processes?
In this presentation, we will share:
approaches to building a digital accessibility policy for university IT departments.
techniques for embedding accessibility within IT development processes by ‘shifting left’.
examples from within the Higher Education and wider IT sectors.
Digital diligence: guidance on using 'unsupported' toolsMatthew Deeprose
Presented during the Future Teacher "Getting savvy with online tools" webinar. This covers our work on dealing with use of tools that are not centrally supported but that academic staff wish to use with their students.
Introduction to Keyboard Navigation and AccessibilityMatthew Deeprose
What are the accessibility principles of Perceivable, Operable, Understandable, and Robust? Why is keyboard navigation so important within accessibility?
This presentation was used as part of the Digital Learning Connects webinar about Blackboard discussion boards. Half way through the presentation I went into a live demo, which you cannot of course see here. I'm sharing the slides more widely in case they are of use.
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.
Blended Learning Features within the Blackboard VLEMatthew Deeprose
We were asked to give a presentation outlining tools that may help the delivery of a new blended learning programme. These are the slides that went with our presenation.
Blackboard, Printing, Lecture Consoles for Presessional InstructorsMatthew Deeprose
A presentation delivered to instructors of pre-sessional students at the University of Southampton. This presentation covers the Blackboard VLE, printing and scanning, and using the lecture bench consoles.
Blackboard Masterclass #2 for University of Southampton Faculty of Heath Scie...Matthew Deeprose
The slides from our presentation "Blackboard Masterclass #2" delivered on 17 July 2014 to the Faculty of Health Sciences. In this presentation we focussed on some of the key new features in the newly upgraded Blackboard VLE at the University of Southampton.
Safalta Digital marketing institute in Noida, provide complete applications that encompass a huge range of virtual advertising and marketing additives, which includes search engine optimization, virtual communication advertising, pay-per-click on marketing, content material advertising, internet analytics, and greater. These university courses are designed for students who possess a comprehensive understanding of virtual marketing strategies and attributes.Safalta Digital Marketing Institute in Noida is a first choice for young individuals or students who are looking to start their careers in the field of digital advertising. The institute gives specialized courses designed and certification.
for beginners, providing thorough training in areas such as SEO, digital communication marketing, and PPC training in Noida. After finishing the program, students receive the certifications recognised by top different universitie, setting a strong foundation for a successful career in digital marketing.
A Strategic Approach: GenAI in EducationPeter Windle
Artificial Intelligence (AI) technologies such as Generative AI, Image Generators and Large Language Models have had a dramatic impact on teaching, learning and assessment over the past 18 months. The most immediate threat AI posed was to Academic Integrity with Higher Education Institutes (HEIs) focusing their efforts on combating the use of GenAI in assessment. Guidelines were developed for staff and students, policies put in place too. Innovative educators have forged paths in the use of Generative AI for teaching, learning and assessments leading to pockets of transformation springing up across HEIs, often with little or no top-down guidance, support or direction.
This Gasta posits a strategic approach to integrating AI into HEIs to prepare staff, students and the curriculum for an evolving world and workplace. We will highlight the advantages of working with these technologies beyond the realm of teaching, learning and assessment by considering prompt engineering skills, industry impact, curriculum changes, and the need for staff upskilling. In contrast, not engaging strategically with Generative AI poses risks, including falling behind peers, missed opportunities and failing to ensure our graduates remain employable. The rapid evolution of AI technologies necessitates a proactive and strategic approach if we are to remain relevant.
How to Make a Field invisible in Odoo 17Celine George
It is possible to hide or invisible some fields in odoo. Commonly using “invisible” attribute in the field definition to invisible the fields. This slide will show how to make a field invisible in odoo 17.
Embracing GenAI - A Strategic ImperativePeter Windle
Artificial Intelligence (AI) technologies such as Generative AI, Image Generators and Large Language Models have had a dramatic impact on teaching, learning and assessment over the past 18 months. The most immediate threat AI posed was to Academic Integrity with Higher Education Institutes (HEIs) focusing their efforts on combating the use of GenAI in assessment. Guidelines were developed for staff and students, policies put in place too. Innovative educators have forged paths in the use of Generative AI for teaching, learning and assessments leading to pockets of transformation springing up across HEIs, often with little or no top-down guidance, support or direction.
This Gasta posits a strategic approach to integrating AI into HEIs to prepare staff, students and the curriculum for an evolving world and workplace. We will highlight the advantages of working with these technologies beyond the realm of teaching, learning and assessment by considering prompt engineering skills, industry impact, curriculum changes, and the need for staff upskilling. In contrast, not engaging strategically with Generative AI poses risks, including falling behind peers, missed opportunities and failing to ensure our graduates remain employable. The rapid evolution of AI technologies necessitates a proactive and strategic approach if we are to remain relevant.
The French Revolution, which began in 1789, was a period of radical social and political upheaval in France. It marked the decline of absolute monarchies, the rise of secular and democratic republics, and the eventual rise of Napoleon Bonaparte. This revolutionary period is crucial in understanding the transition from feudalism to modernity in Europe.
For more information, visit-www.vavaclasses.com
Acetabularia Information For Class 9 .docxvaibhavrinwa19
Acetabularia acetabulum is a single-celled green alga that in its vegetative state is morphologically differentiated into a basal rhizoid and an axially elongated stalk, which bears whorls of branching hairs. The single diploid nucleus resides in the rhizoid.
2. https://matthewdeeprose.github.io/bluffer2020.html
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.
4. https://matthewdeeprose.github.io/bluffer2020.html
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
5. https://matthewdeeprose.github.io/bluffer2020.html
• 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; }
9. https://matthewdeeprose.github.io/bluffer2020.html
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
26. https://matthewdeeprose.github.io/bluffer2020.html
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.
28. https://matthewdeeprose.github.io/bluffer2020.html
Reflections on last year’s talk
• 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
29. https://matthewdeeprose.github.io/bluffer2020.html
Reflections on last year’s talk
• 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
33. https://matthewdeeprose.github.io/bluffer2020.html
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
34. https://matthewdeeprose.github.io/bluffer2020.html
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
35. https://matthewdeeprose.github.io/bluffer2020.html
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
36. https://matthewdeeprose.github.io/bluffer2020.html
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
COM(2010)636
European Disability Strategy 2010-2020:
A Renewed Commitment to a Barrier-
Free Europe
COM(2010)245
A Digital Agenda for
Europe
37. https://matthewdeeprose.github.io/bluffer2020.html
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
38. https://matthewdeeprose.github.io/bluffer2020.html
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
39. https://matthewdeeprose.github.io/bluffer2020.html
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
40. https://matthewdeeprose.github.io/bluffer2020.html
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
ISO/IEC
40500:2012
41. https://matthewdeeprose.github.io/bluffer2020.html
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
ISO/IEC
40500:2012
42. https://matthewdeeprose.github.io/bluffer2020.html
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
43. https://matthewdeeprose.github.io/bluffer2020.html
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
44. https://matthewdeeprose.github.io/bluffer2020.html
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.
Directive (EU) 2019/882
European Accessibility Act
46. https://matthewdeeprose.github.io/bluffer2020.html
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.
Directive (EU) 2019/882
European Accessibility Act
• 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
47. https://matthewdeeprose.github.io/bluffer2020.html
Continual Developments
View EN 301 549 at
http://mandate376.standards.eu/standard
Chapters 9, 10, and 11 are
relevant to the regulations.
Directive (EU) 2016 / 2102
On the Accessibility of the websites and
mobile applications of public sector bodies
Standard - EN 301 549
Accessibility requirements suitable for
public procurement of ICT products and
services in Europe
48. https://matthewdeeprose.github.io/bluffer2020.html
Continual Developments
Updated:
• August 2018
• November 2019
• Now uses WCAG 2.1 AA (previously
WCAG 2.0 AA.)
See https://www.etsi.org/
Directive (EU) 2016 / 2102
On the Accessibility of the websites and
mobile applications of public sector bodies
Standard - EN 301 549
Accessibility requirements suitable for
public procurement of ICT products and
services in Europe
50. https://matthewdeeprose.github.io/bluffer2020.html
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
54. https://matthewdeeprose.github.io/bluffer2020.html
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”.
55. https://matthewdeeprose.github.io/bluffer2020.html
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
56. https://matthewdeeprose.github.io/bluffer2020.html
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).
57. https://matthewdeeprose.github.io/bluffer2020.html
Out of scope In scope When
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.
Statutory Instrument 2018 No. 952
The Public Sector Bodies (Websites and Mobile
Applications) No. 2 Accessibility Regulations 2018
58. https://matthewdeeprose.github.io/bluffer2020.html
Out of scope In scope When
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.
Statutory Instrument 2018 No. 952
The Public Sector Bodies (Websites and Mobile
Applications) No. 2 Accessibility Regulations 2018
60. https://matthewdeeprose.github.io/bluffer2020.html
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
61. https://matthewdeeprose.github.io/bluffer2020.html
“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
62. https://matthewdeeprose.github.io/bluffer2020.html
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…"
64. https://matthewdeeprose.github.io/bluffer2020.html
“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
66. https://matthewdeeprose.github.io/bluffer2020.html
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.
72. https://matthewdeeprose.github.io/bluffer2020.html
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
75. https://matthewdeeprose.github.io/bluffer2020.html
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
Standard - EN 301 549
Accessibility requirements suitable for
public procurement of ICT products
and services in Europe
http://mandate376.standards.eu/
✔
X
76. https://matthewdeeprose.github.io/bluffer2020.html
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)
Accessibility requirements suitable for
public procurement of ICT products
and services in Europe
https://www.etsi.org/
77. https://matthewdeeprose.github.io/bluffer2020.html
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.”
WCAG 1.4.11 Non-text Contrast
78. https://matthewdeeprose.github.io/bluffer2020.html
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”.
WCAG 1.4.11 Non-text Contrast
81. https://matthewdeeprose.github.io/bluffer2020.html
1.4.1 Non-text Contrast in Blackboard theme
Ratio: 7.33:1 ✔
/* Change primary menu button colour -
(+ Icon) */
.mainButton > a {
background: #005c84;
}
/* Change secondary menu button
colours (Reorder, Refresh, Course Files
buttons) */
.secondaryButton > a,
.mainButton h2 > a,
.secondaryButton h2 > a {
background: #005c84;
}
82. https://matthewdeeprose.github.io/bluffer2020.html
Large Text
Large-scale text and images of large-
scale text have a contrast ratio of at
least 3:1;
http://mandate376.standards.eu/
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)
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).
83. https://matthewdeeprose.github.io/bluffer2020.html
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)
Standard - EN 301 549
Accessibility requirements suitable for
public procurement of ICT products
and services in Europe
http://mandate376.standards.eu/
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.
84. https://matthewdeeprose.github.io/bluffer2020.html
Logotypes
Text that is part of a logo or brand
name has no contrast requirement.
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)
Standard - EN 301 549
Accessibility requirements suitable for
public procurement of ICT products
and services in Europe
http://mandate376.standards.eu/
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/
86. https://matthewdeeprose.github.io/bluffer2020.html
Visual presentation of text and images of text…
Ratio: 2.49:1 X
Level AA
The visual presentation of text and
images of text has a contrast ratio of
at least 4.5:1
Level AAA
The visual presentation of text and
images of text has a contrast ratio of
at least 7:1.
87. https://matthewdeeprose.github.io/bluffer2020.html
Visual presentation of text and images of text…
Ratio: 14.44:1 ✔
Level AA
The visual presentation of text and
images of text has a contrast ratio of
at least 4.5:1
Level AAA
The visual presentation of text and
images of text has a contrast ratio of
at least 7:1.
88. https://matthewdeeprose.github.io/bluffer2020.html
Visual presentation of text and images of text…
Ratio: 14.44:1 ✔
.actionBar .mainButton h2 > a {
color: #FFFFFF !important;
background: none scroll 0 0 #002E3B
!important;
text-shadow: none !important;
text-decoration: none; box-shadow:
none !important;
border: none;
border-radius: 8px !important;
}
91. https://matthewdeeprose.github.io/bluffer2020.html
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/
94. https://matthewdeeprose.github.io/bluffer2020.html
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/
95. https://matthewdeeprose.github.io/bluffer2020.html
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
101. https://matthewdeeprose.github.io/bluffer2020.html
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.
Automated Colour Contrast Checking… and more
104. https://matthewdeeprose.github.io/bluffer2020.html
Color Usage for Accessibility
WCAG 2.0 Level AA Contrast for Accessibility
12 pt Yes No Yes Yes Yes Yes Yes Yes No
18 pt Yes No Yes Yes Yes Yes Yes Yes No
12 pt Yes No Yes Yes Yes Yes Yes Yes No
18 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?
109. https://matthewdeeprose.github.io/bluffer2020.html
‘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).’
https://developer.mozilla.org/en-
US/docs/Web/CSS/:hover
https://css-
tricks.com/almanac/selectors/h/hover/
Hover in CSS
a:hover {
color: green;
text-decoration:
underline overline;
}
110. https://matthewdeeprose.github.io/bluffer2020.html
Hover / Selected states
Hover / selected text - Ratio:
8.48:1
Normal text - Ratio:14.44:1 /* Change Control Panel section colour as
seen by instructors */
.menuWrap-inner {
background: #002E3B !important;
color: #FFF }
#controlPanelPalette_contents a {
color: #FFF; }
/* Control Panel - hover over text colour */
#controlPanelPalette_contents a:hover {
color: #FCBC00 !important;
transition: all 0.2s ease-in-out !important; }
/* Controls color and format of open Control
Panel Items */
.controlpanel a.comboLink_active,
.controlpanel h4 a.open {
color: #FCBC00 !important; }
113. https://matthewdeeprose.github.io/bluffer2020.html
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.”
117. https://matthewdeeprose.github.io/bluffer2020.html
Course menus
• Cannot currently allow customisation of menu
whilst ensuring good contrast.
• Other options:
– Course Templates?
• Instructors may still change their colour
schemes after course creation.
• Rollover (course copy) may reset course
menu colours to that of source course.
– Don’t allow customisation?
118. https://matthewdeeprose.github.io/bluffer2020.html
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;
}
119. https://matthewdeeprose.github.io/bluffer2020.html
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.
120. https://matthewdeeprose.github.io/bluffer2020.html
The CSS
/* Hide ability to change colour of menu */
li#menuDesignElement {
display: none; }
/* Change colour of subheader */
#courseMenuPalette h3 span {
color: #FEFEFE !important; }
/* Make subheader appear */
div.treeContainer ul.tree li.subhead h4.treeSubhead-collapsed a {
color: #FEFEFE !important; }
/* Make subheader rollover stay the same colour */
div.treeContainer ul.tree li.subhead h4.treeSubhead-collapsed hover {
color: #FEFEFE !important; }
/* 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.
123. https://matthewdeeprose.github.io/bluffer2020.html
/* Hide ability to change colour of menu */
li#menuDesignElement {
display: none; }
/* Change colour of subheader */
#courseMenuPalette h3 span {
color: #FEFEFE !important; }
/* Make subheader appear */
div.treeContainer ul.tree li.subhead h4.treeSubhead-collapsed
a {
color: #FEFEFE !important; }
/* Make subheader rollover stay the same colour */
div.treeContainer ul.tree li.subhead h4.treeSubhead-collapsed
hover {
color: #FEFEFE !important; }
/* 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; }
130. https://matthewdeeprose.github.io/bluffer2020.html
Keyboard Navigation on the web
Interaction Keystrokes
Navigate to most
elements
Tab
Shift + Tab - navigate backward
Link Enter
Button Enter or Spacebar
Checkbox Spacebar - check/uncheck a checkbox
Radio buttons
↑ / ↓ or ← / → = select an option.
Tab - move to the next element.
https://webaim.org/techniques/keyboard/
Deque Systems
UX Collective
139. https://matthewdeeprose.github.io/bluffer2020.html
‘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.’
https://developer.mozilla.org/en-
US/docs/Web/CSS/:focus
https://css-tricks.com/focusing-on-
focus-styles/
Focus in CSS
a:focus {
outline: 3px solid orange; }
141. https://matthewdeeprose.github.io/bluffer2020.html
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.
Standard - EN 301 549
Accessibility requirements suitable for public
procurement of ICT products and services in
Europe
142. https://matthewdeeprose.github.io/bluffer2020.html
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)
https://www.w3.org/TR/WCAG22/#focus-visible-enhanced
143. https://matthewdeeprose.github.io/bluffer2020.html
Level AA
When a User Interface Component
displays a visible keyboard focus, all
of the following are true:
• Focus contrast: Colour changes
used to indicate focus have at
least a 3:1 contrast ratio with the
colours changed from the
unfocused control.
WCAG 2.2 Draft: 2.4.11 Focus Visible (Enhanced)
https://www.w3.org/TR/WCAG22/#focus-visible-enhanced
144. https://matthewdeeprose.github.io/bluffer2020.html
Level AA
When a User Interface Component
displays a visible keyboard focus, all
of the following are true:
• Contrast or thickness: The focus
indication area has a 3:1 contrast
ratio against all adjacent colours
for the minimum area or greater,
or has a thickness of at least 2
CSS pixels.
WCAG 2.2 Draft: 2.4.11 Focus Visible (Enhanced)
https://www.w3.org/TR/WCAG22/#focus-visible-enhanced
145. https://matthewdeeprose.github.io/bluffer2020.html
Making focus indicators “on brand”
• Blackboard’s focus indicators have sufficient
contrast out of the box.
• When you customise the Blackboard theme to
use your institutional colours you should ensure
you update the focus indicators accordingly. Top tabs - Ratio: 7.36:1
Control Panel - Ratio: 7.36:1
154. https://matthewdeeprose.github.io/bluffer2020.html
When customising the Bb
responsive theme it
becomes almost inevitable
to deal with focus
indicators.
The default purple colours
often used in Blackboard
will not necessarily work
well with your institutional
colour scheme.
Customising Bb Focus indicators
Ratio: 1.72:1
156. https://matthewdeeprose.github.io/bluffer2020.html
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.
157. https://matthewdeeprose.github.io/bluffer2020.html
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)
162. https://matthewdeeprose.github.io/bluffer2020.html
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
164. https://matthewdeeprose.github.io/bluffer2020.html
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
@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/
165. https://matthewdeeprose.github.io/bluffer2020.html
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
@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/
171. https://matthewdeeprose.github.io/bluffer2020.html
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.
172. https://matthewdeeprose.github.io/bluffer2020.html
Conclusion
• Accessibility is a journey. There is always
something new to learn, and new
developments to understand.
• Customising our Blackboard theme still has
many benefits over staying with the defaults.
• In my experience colour contrast and focus
styles are the most important considerations
for Blackboard theme accessibility.
• With the techniques and suggestions shown
here you should feel confident to tackle these
in your theme.
173. https://matthewdeeprose.github.io/bluffer2020.html
Conclusion
• Accessibility is a journey. There is always
something new to learn, and new
developments to understand.
• Customising our Blackboard theme still has
many benefits over staying with the defaults.
• In my experience colour contrast and focus
styles are the most important considerations
for Blackboard theme accessibility.
• With the techniques and suggestions shown
here you should feel confident to tackle these
in your theme.
174. https://matthewdeeprose.github.io/bluffer2020.html
Conclusion
• Accessibility is a journey. There is always
something new to learn, and new
developments to understand.
• Customising our Blackboard theme still has
many benefits over staying with the defaults.
• In my experience colour contrast and focus
styles are the most important considerations
for Blackboard theme accessibility.
• With the techniques and suggestions shown
here you should feel confident to tackle these
in your theme.
175. https://matthewdeeprose.github.io/bluffer2020.html
Conclusion
• Accessibility is a journey. There is always
something new to learn, and new
developments to understand.
• Customising our Blackboard theme still has
many benefits over staying with the defaults.
• In my experience colour contrast and focus
styles are the most important considerations
for Blackboard theme accessibility.
• With the techniques and suggestions shown
here you should feel confident to tackle these
in your theme.