Skip to main content
Learn about Community
Sign In
You're signed out
Sign in to ask questions, follow content, and engage with the Community
Sign In
'; hoverCardInner.innerHTML = loadingHTML.repeat(4); hoverCardContainer.classList.add('profile-hover-card-show'); // Extract information from the image element const titleField = avatar.getAttribute('title'); const userInfoUrl = `https://${mainURL}/api/2.0/search?q=SELECT first_name, last_name, login, view_href, rank, topics, solutions_authored, id, email FROM users WHERE login = '${titleField}'`; const userPostsUrl = `https://${mainURL}/api/2.0/search?q=SELECT count(*) FROM messages WHERE author.login = '${titleField}'`; const userSolutionsUrl = `https://${mainURL}/api/2.0/search?q=SELECT count(*) FROM messages WHERE author.login = '${titleField}' AND is_solution = true`; const userBadgesUrl = `https://${mainURL}/api/2.0/search?q=SELECT user_badges from users where login = '${titleField}'`; // Fetch user information async function createProfileData() { const userInfo = await fetch(userInfoUrl); const userPosts = await fetch(userPostsUrl); const userSolutions = await fetch(userSolutionsUrl); const userBadges = await fetch(userBadgesUrl); const userInfoData = await userInfo.json(); const userPostsData = await userPosts.json(); const userSolutionsData = await userSolutions.json(); const userBadgesData = await userBadges.json(); const userBadgesArray = userBadgesData.data.items[0].user_badges.items; const earnedBadgesArray = userBadgesArray.filter(badge => badge.earned_date); earnedBadgesArray.sort((a, b) => new Date(b.earned_date) - new Date(a.earned_date)); const userRankName = userInfoData.data.items[0].rank.name; const userID = userInfoData.data.items[0].id; // const userKudosUrl = `https://${mainURL}/restapi/vc/users/id/${userID}/metrics/name/net_kudos_events_received?restapi.response_format=json`; const userKudos = await fetch(userKudosUrl); const userKudosData = await userKudos.json(); let fullName = userInfoData.data.items[0].login; if (userInfoData.data.items[0].first_name !== undefined && userInfoData.data.items[0].last_name !== undefined) { let firstName = userInfoData.data.items[0].first_name; let lastName = userInfoData.data.items[0].last_name; fullName = firstName + " " + lastName; } else { fullName = userInfoData.data.items[0].login; } let userRankIcon = ""; if (userInfoData.data.items[0].rank.icon_left !== undefined) { userRankIcon = userInfoData.data.items[0].rank.icon_left; } else { userRankIcon = ""; } let userEmail = ""; // <#if user_has_role> if (userInfoData.data.items[0].email !== undefined) { userEmail = userInfoData.data.items[0].email; } else { userEmail = ""; } // <#else> userEmail = ""; // #if> const userViewHref = userInfoData.data.items[0].view_href; const userPostsCount = userPostsData.data.count; const userSolutionsCount = userSolutionsData.data.count; const userKudosCount = userKudosData.response.value.$; const userBadgesCount = earnedBadgesArray.length; let badgesHTML = ""; if (earnedBadgesArray.length === 0) { badgesHTML = `
This user hasn't earned any badges yet.
`; } else { for (let i = 0; i < earnedBadgesArray.length; i++) { const badgeName = earnedBadgesArray[i].badge.title; const badgeIcon = earnedBadgesArray[i].badge.icon_url; const badgeHTML = `
`; badgesHTML += badgeHTML; if (i >= 4) { break; } }; } const hoverCardHTML = `
${userRankName}
${userEmail}
${badgesHTML}
`; // // Display the hover card return hoverCardHTML; } if (hoverCardInner.innerHTML.includes('loading-box')) { createProfileData().then((hoverCardHTML) => { hoverCardInner.innerHTML = hoverCardHTML; }); } } }); //Hide the hover card on mouseout avatar.addEventListener('mouseout', () => { const hoverCardContainer = avatar.nextElementSibling; hoverCardContainer.classList.remove('profile-hover-card-show'); }); hoverCardInner.addEventListener('mouseout', () => { const hoverCardContainer = avatar.nextElementSibling; hoverCardContainer.classList.remove('profile-hover-card-show'); }); hoverCardInner.addEventListener('mouseover', () => { const hoverCardContainer = avatar.nextElementSibling; hoverCardContainer.classList.add('profile-hover-card-show'); }); }); });
Turn on suggestions Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for
Showonly | Search instead for
Did you mean:
- Community
- Groups
- Accessibility
- Forum
- Re: Accessibility - Bold content for screen reader...
Options
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Mute
- Printer Friendly Page
`; const toolTip = document.createElement('div'); toolTip.classList.add('like-button-tooltip'); toolTip.innerHTML = toolTipCode; likeButton.appendChild(toolTip); } document.addEventListener('DOMContentLoaded', function () { const likeButton = document.querySelector('.lia-button-image-kudos'); const likeButtonLink = document.querySelector('.kudos-link'); let likeDismissCookie = localStorage.getItem("inst_comm_like_dismiss"); if (!likeDismissCookie) { localStorage.setItem("inst_comm_like_dismiss", "-1"); loginDate = -1; } if (likeDismissCookie !== "-1") { // toolTip.style.display = 'none'; const storedTime = new Date(parseInt(loginDate)); const currentTime = new Date(); if (storedTime.getTime() < currentTime.getTime()) { localStorage.setItem("inst_comm_like_dismiss", "-1"); } } else { createToolTip(likeButton, likeButtonLink); const toolTip = document.querySelector('.like-button-tooltip'); const toolTipClose = document.querySelector('.like-button-tooltip-close'); const observer = new IntersectionObserver(entries => { entries.forEach(entry => { if (entry.isIntersecting) { toolTip.style.display = 'block'; setTimeout(() => { toolTip.style.opacity = '1'; }, 2000); // toolTip.style.animationName = 'toolTipFlash'; // Stop observing once elementOne is visible observer.unobserve(likeButton); } }); }); // Start observing elementTwo observer.observe(likeButton); likeButtonLink.addEventListener('click', () => { toolTip.style.display = 'none'; }); if (toolTipClose) { toolTipClose.addEventListener("click", function () { const now = new Date(); const fourteenDays = new Date(now.getTime() + 14 * 24 * 60 * 60 * 1000); // Adding 24 hours in milliseconds const epochTime = fourteenDays.getTime(); // Getting the epoch time in milliseconds localStorage.setItem("inst_comm_like_dismiss", epochTime); toolTip.style.display = 'none'; }); } setTimeout(() => { toolTip.style.opacity = '0'; setTimeout(() => { toolTip.style.display = 'none'; }, 500); // Fade out duration (0.5 seconds) + delay (0.5 seconds) = 1 second }, 15000); // Hide after 10 seconds (including 2-second fade-in delay) } });
Accessibility - Bold content for screen readers
kathryn4
Community Member
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
07-31-202409:45 AM
Hi,
I'm looking to make my courses more accessible for those with screen readers.
For bolded text, do I need to embed <strong> before and after the already bolded text, or does Canvas already do this automatically?
Thank you.
Labels (1)
Labels
- Labels:
Instructor
I also have this question
- All forum topics
- Next Topic
6 Replies
Chris_Hofer
Community Coach
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
07-31-202406:55 PM
Hi there,@kathryn4...
I'm not an accessibility expert, but one of my former teammates told me a few times before she left that bolding text isn't accessible. I was searching for some information on this, and I thought I'd share some links of what I've found with you:
- Accessibility: The use of emphasis in text (siteimprove.com)
- H49: Using semantic markup to mark emphasized or special text | WAI | W3C
- html - Is it ok to use <strong> in place of <b> blindly? - Stack Overflow
- Accessibility at Penn State | Bold and Italic Formatting in HTML (psu.edu)
- Screen Readers Don’t Convey the Semantics of STRONG and EM · Matthias Ott – User Experience Designer
Hopefully some of these links will be of help to you.
2Likes
kathryn4
Community Member
In response to Chris_Hofer
Author
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
08-01-202408:15 AM
Thank you so much for these brilliant resources!!
1Like
ipriest
Community Explorer
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
08-01-202407:59 AM
Adding strong tags should automatically add the visual bold effect.
I wanted to add too that while using strong meets the technical requirements for accessibility, it does not always account for user experience (that is, not all students are familiar enough with their technology to know what that means exactly). I always encourage faculty to consider additional ways to communicate bolded text, such as using asterisks (*) around the text in question.
3Likes
kathryn4
Community Member
In response to ipriest
Author
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
08-01-202408:17 AM
The asterisks is a brilliant solution to this. Thank you!
1Like
sbj
Community Participant
In response to ipriest
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
08-05-202406:08 AM
I think a better option is to add text like Important or Please Note to any text that you want to emphasize. My understanding of screen readers is that they would read an asterisk as "star" and I don't know that that is an equivalent experience for the user to understand this is important.
I think this would also help users of other assistive technology such as Kurzweil, or even Immersive Reader.
0Likes
ipriest
Community Explorer
In response to sbj
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
08-05-202407:53 AM
It definitely depends on the context. If the bolded text is in the middle of a sentence, adding "Important" could be more problematic. An alternative to this would be to repeat the bolded text after the sentence with the added note.
My suggestion for asterisks was based on a common method for indicating bold in plain text. While an individual may not inherently know this, a simple statement at the beginning of pages or documents that bold text is indicated by asterisks can fix that relatively quickly.
0Likes
Unanswered Topics
How to Report Canvas Accessibility Issues via Emai...
EyeAble software integration
Math content and the JAWS screen reader
Reading PDFs and epubs within Canvas
ReadSpeaker's docReader for Canvas helps support e...
View All
Latest Topics
Tables in Canvas Pages
Accessibility - Bold content for screen readers
How to Report Canvas Accessibility Issues via Emai...
Advice for Accessibility audit across the school
Exploring AI-Powered Solutions for Enhancing Acces...
View All
View our top guides and resources:
Find My Canvas URL Help Logging into Canvas Generate a Pairing Code Canvas Browser and Computer Requirements Change Canvas Notification Settings Submit a Peer Review Assignment
To participate in the Instructure Community, you need to sign up or log in:
Sign In