[ARCHIVED] How to add borders around text that are accessible?

[lewisale]

I was wondering if anyone has any ideas of ways to add borders around text that are accessible versus using a table?  

[aaron_bahmer]

 @lewisale , 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.

As an example, <div style="borders: 1px #000 solid;"> will create a squared box around whatever text follows until the </div> tag. Here's a link to W3 Schools - CSS Borders. Or you could do the same to the <p> tag.

Though, this system has stripped away the visual of my example...

Enjoy!

[lewisale]

Thanks for the resources Aaron.

[Chris_Hofer]

 @lewisale ...

You could also try one of these examples:

Square borders

<div class="content-box pad-box-mini border border-trbl">
   <p>some content here</p>
</div>‍‍‍

or

Round borders

<div class="content-box pad-box-mini border border-trbl border-round">
   <p>some content here</p>
</div>‍‍‍

[Chris_Hofer]

 @lewisale ...

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>‍‍‍‍

[lewisale]

Thanks for the resources Chris.

I tried the following and used the Canvas accessibility checker, and no accessibility problems were detected!

[Chris_Hofer]

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.

[carmen_vallis]

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.

[t_l]

I don't advocate using tables in page design, but it's hard to ignore how easy they are to use and manipulate for people who aren't well versed in HTML/CSS. Also, when sharing a page with someone, it's far harder for them to break a table than to break CSS. So...

You can make a screenreader ignore the table framework and just read the content in the table like normal content by adding the 'role="presentation"' attribute to the table. This does require a quick hop into the HTML, but nothing extensive. Just find the opening table tag which will look something like this:

<table style="border-collapse: collapse; width: 100%;" border="1">

and then throw the role attribute in there like this:

<table style="border-collapse: collapse; width: 100%;" border="1" role="presentation">

That's it. You'll definitely want to run it through a screen reader and make sure it's reading the content in the order you anticipated. There may possibly be some compatibility issues, but this does work with most popular screen readers. You may also want to check with your local accessibility person to see if they have any guidance on this. Your local web designer may also have some guidance too (probably: don't do that!).

[lewisale]

Thanks t_l‌ for your response.  One of my goals is to stop using tables in page design; as you said, they are easy.  I recognize tables are not accessible when used for design.  I will try your code for tables I may not have the opportunity to adapt until later.