[Athen] Flip Cards in Canvas

[Joshua Hori]

Hello Heather,

I see there’s a “.flip-card:hover”, which is a mouse activity, but it’s missing other input types such as tabbing and tapping (focus). Here’s an article that discusses this more: https://css-tricks.com/focusing-on-focus-styles/

Here’s a really quick to read article on adding ARIA instructions using id’s, with the third example best fitting your flip cards: https://www.tpgi.com/using-aria-describedby-to-provide-helpful-form-hints/ You may want to at least add “1 out of xxx” to inform the user how many cards there are.

The flip cards should be accessible to any user with the above implemented, with the exception of dictation. I’m failing to see how to activate a card without the use of “Show Numbers”. These numbers are very small when viewing webpages through a VR headset. The VR controllers and hands do not interact with your monitors, you have to use either your voice or the mouse connected to your computer. Most of the times the mouse wins, but I get so happy when it reacts to my voice.

I have a Macbook Pro and use Meta Workspaces as it’s the only VR app that works on eduroam. It feels similar to working in Zoom all the time. Distraction free environments for LD users and dictation testing.

I intern developmentally disabled students from our SEED program<https://redwoodseed.ucdavis.edu/> to assist with usability testing. They’re perfect for identifying keyboard issues and I’m building them up for dictation testing.

Best,

Joshua Hori
Accessible Technology Coordinator
Information Educational Technology
Academic Technology Services
50 Hutchison Dr.
Davis, CA 95616
530-752-2439
Schedule a meeting via Calendly<https://calendly.com/d/ytt-hsj-vbn>






From: athen-list <athen-list-bounces at mailman12.u.washington.edu> on behalf of Monica Olsson <molsson at sbctc.edu>
Date: Friday, June 30, 2023 at 1:58 PM
To: Access Technology Higher Education Network <athen-list at u.washington.edu>
Cc: The EDUCAUSE IT Accessibility Community Group Listserv <EDUCAUSE-ITACCESS at ConnectedCommunity.org>, WebAIM Discussion List <webaim-forum at list.webaim.org>
Subject: Re: [Athen] Flip Cards in Canvas
Hi Heather,

The way my inbox is filtering ATHEN email is awful right now, so I don' have a good sense on the response you have already received. I want to echo Dan Comden's sentiment here. You don't need to know much about HTML or CSS to do a very basic accessibility/usability audit of the flip card tool for Canvas. Instead, use your keyboard. Set your computer mouse far away from your computer or unplug it! After you open up the flip card tool, use your keyboard to see if you can navigate the keyboard's focus appropriately around the flip card's elements, and then test to see if you can use your keyboard to "flip" the card.

WebAIM Keyboard Testing<https://webaim.org/techniques/keyboard/#testing>

I am guessing you may encounter roadblocks, sadly, which will indicate accessibility issues. Just today I was on a call with a vendor about the flip card design they use in their LMS. It is not accessible and I'm advocating they remove it entirely and provide us an alternative accessible way to interact with the content.




[Title: SBCTC logo - Description: Compass]Monica M. Olsson (she/her/hers)

Policy Associate – Accessible IT Coordinator

Washington State Board for Community and Technical Colleges

•Email: molsson at sbctc.edu<mailto:molsson at sbctc.edu> • Phone: 360-704-3922



The power of the Web is in its universality.
Access by everyone regardless of disability is an essential aspect.

Tim Berners-Lee, W3C Director and inventor of the World Wide Web

[cid:07c9ca0f-cba8-4e8c-9425-480e78f099e9]<https://outlook.office.com/bookwithme/user/321a279c65664c04a18fa34a96e959ab@sbctc.edu?anonymous&ep=signature>
Book time to meet with me<https://outlook.office.com/bookwithme/user/321a279c65664c04a18fa34a96e959ab@sbctc.edu?anonymous&ep=signature>
________________________________
From: athen-list <athen-list-bounces at mailman12.u.washington.edu> on behalf of Dan Comden <danc at uw.edu>
Sent: Thursday, June 22, 2023 2:17 PM
To: Access Technology Higher Education Network <athen-list at u.washington.edu>
Cc: The EDUCAUSE IT Accessibility Community Group Listserv <EDUCAUSE-ITACCESS at connectedcommunity.org>; WebAIM Discussion List <webaim-forum at list.webaim.org>
Subject: Re: [Athen] Flip Cards in Canvas

[Sent from outside SBCTC]

Can't speak to the accessibility of this specific Canvas widget, but keyboard testing is something most anyone can do.

Check out nomouse.org<http://nomouse.org> for more details.

Make sure the same functionality for mouse users is present for keyboard-only folks.

-*- Dan



On Thu, Jun 22, 2023 at 1:08 PM Heather Mariger <heather.mariger at chemeketa.edu<mailto:heather.mariger at chemeketa.edu>> wrote:
Greetings,

I apologize for the cross posting (I need all the help I can get)...

I have a faculty member who wants to use flip cards in Canvas. He found this article: Create CSS Flip cards in Canvas<https://urldefense.com/v3/__https:/www.howtocanvas.com/theme-editor/flipcard__;!!K-Hz7m0Vt54!jGpW6nBeNIE4998Ztm4cEw5tAl9tfMByozWvdhXQbGo4DaOjXCnAIWUtoURvQUr2SKu0W03bVF2H82Sf_1mH4kSxtepsYvGQcA$>

While I have a very basic understanding of CSS and HTML, I am in no way qualified to determine if this technique is fully keyboard accessible (I rather suspect not).

So, I am reaching out to you brilliant people to ask if these instructions are actually accessible or if you know of a way to make accessible flip cards in Canvas.

Thanks so much!
H.




Heather Mariger
Digital Accessibility Advocate
Pronouns: She/Her

Center for Academic Innovation
Chemeketa Community College
4000 Lancaster Drive NE - 9/126A
Salem, OR 97305

503.589.7832

*****************
Diversity is being invited to the party; inclusion is being asked to dance.
Verna Myers, author and speaker

[Image removed by sender.]

_______________________________________________
athen-list mailing list
athen-list at mailman12.u.washington.edu<mailto:athen-list at mailman12.u.washington.edu>
http://mailman12.u.washington.edu/mailman/listinfo/athen-list
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mailman12.u.washington.edu/pipermail/athen-list/attachments/20230630/38c719ba/attachment.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: Outlook-Title_ SBC.png
Type: image/png
Size: 22672 bytes
Desc: Outlook-Title_ SBC.png
URL: <http://mailman12.u.washington.edu/pipermail/athen-list/attachments/20230630/38c719ba/attachment.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: Outlook-pyob5uea.png
Type: image/png
Size: 528 bytes
Desc: Outlook-pyob5uea.png
URL: <http://mailman12.u.washington.edu/pipermail/athen-list/attachments/20230630/38c719ba/attachment-0001.png>