I was wondering if anyone has any ideas of ways to add borders around text that are accessible versus using a table?
Alexandria, I'm not sure how borders are presented to screen readers and such, but adding a border around some text can be accomplished with the HTML <div> tag and associated styling.
Though, this system has stripped away the visual of my example...
Thanks for the resources Aaron.
You could also try one of these examples:
<div class="content-box pad-box-mini border border-trbl"> <p>some content here</p></div>
<div class="content-box pad-box-mini border border-trbl border-round"> <p>some content here</p></div>
Each of these single lines of code places a colored outline with rounded edges in the center of your page. Try each out in a sample page to see how it works, then you can use it in a page in your course.
<div class="ic-flash-info">Info: Sample flash notice style.</div><div class="ic-flash-success">Success: Sample flash notice style.</div><div class="ic-flash-warning">Warning: Sample flash notice style.</div><div class="ic-flash-error">Error: Sample flash notice style.</div>
Thanks for the resources Chris.
I tried the following and used the Canvas accessibility checker, and no accessibility problems were detected!
Nice! Again, just use one line of code (not all four) for whatever you need, and you can customize the message inside to whatever you want. You don't have to use the "Info", "Success", "Warning", or "Error" messages that were in the example.
Hi there - just a heads-up, I've used this flash notice style in courses and had feedback that it looks like a button and users were momentarily confused that it was not a navigational item. (Damn, looks so pretty!) So I'm sticking to the simple border now.
Retrieving data ...