Blog Post

E-Learning Challenges

2 MIN READ

What Do Course Designers Need to Know About Building Accessible E-Learning? #304

Staff

4 years ago

Designing Accessible E-Learning #304: Challenge | Recap “Why do I keep hearing so much about accessibility?” That question came up in one of my recent training webinars, and it’s just one v...

Published 4 years ago

Version 1.0

E-Learning Challenge

Staff

Joined October 22, 2010

E-Learning Challenges

Join our weekly challenges to try new skills, get inspired, and build your portfolio.

CarmenBernadou_

Community Member

4 years ago

I learned a lot from this challenge's entries. Thanks for sharing such great tips and ideas!

My experiment this week looks to emulate in a slide a few of the common accessibility utilities we find in newspapers and portals. Including changing the font size and color mode; trying to also follow the WCAG 2.0 guidelines.

The source file is not really elegant and the end result is still working a little funny, but it was interesting to have an idea of how much effort takes creating these types of features.

Demo and File / https://carmenbernadou.com/elhc/accesible-toolbar/

MollyFisher-dd0
Community Member
4 years ago
I really enjoyed the design of your project, in both the light and dark mode. I didn't realize that was an accessibility function. How did you increase and decrease the size of the text when clicking the buttons?
- CarmenBernadou_
  Community Member
  4 years ago
  Thanks, Molly : )
  This article reflects a little about the accessibility component of the different color modes: https://uxdesign.cc/accessibility-and-dark-ui-themes-f01001339b65
  
  The 'change of size' function is not super elegant tbh, the text is just an object with 3 different states and I simply change the state when the user clicks the + or - buttons. This could be also achieved using numerical variables.
  
  The hardest part was to also change the color at the same time, to avoid managing heaps of text elements simultaneously, I had to use a little JS. The file is available if you want to have a look.
Ange
Community Member
4 years ago
Appealing design, great accessibility toolbar esp. ability to change text size. I have been trying to figure out how to do that. Does the +/- also work on the button/ text to the right?
- CarmenBernadou_
  Community Member
  4 years ago
  Thanks Ang! The text size change is an easy win. The right panel is not changing in this example, but could be done using the same logic 😊
KatelinJordan-2
Community Member
4 years ago
Nicely done! I really like it!