Double Border Example

Benefits

When you use two border lines together, users of text-to-speech programs will generally hear this border as "separator separator." Hearing "separator" twice may cause these members of your audience to wonder if there is an entire section of content that has been hidden from them. Using an image with alt text or the provided code eliminates the extra "separator," making for a smoother user experience.

Why Is This Recommended?

Looking at other designs on the web, you probably won't find double borders used very often. Because of this and the relatively low impact that following or not following this recommendation has on accessibility, there just isn't a need for WCAG to create a requirement. That said, as discussed in the previous section, there is still a beneficial purpose to using the methods discussed on this page.

How to [Advanced]

For guidance on applying the recommendations labeled [Advanced] refer to the directions below or seek assistance from your college's Digital Learning Strategist. Additionally, if you're not used to working with HTML, you may want to review our HTML Crash Course page.

Advanced: Editing the Code

<div aria-label="Separator">
<div role="presentation" aria-hidden="true">
<hr style="border: 1px solid #522d80; margin-bottom: 0px; padding-bottom: 0px;" />
<hr style="border: 1px solid #f66733; margin-top: 0px; padding-top: 0px;" />
</div></div>

To customize the appearance of the borders generated by this code, you will edit border: 1px solid #522d80; and border: 1px solid #f66733; using one of the following techniques:

To increase the thickness of the border, increase the 1px to 2px, 3px, 4px, etc.
To stylize the border so that it is dashed, dotted, etc, change solid to one of the following:
- dotted
- dashed
- solid
- double
- ridge
To change the border's color, change the #522d80 and #f66733 to another hexadecimal color code. Color-hex can help you decide your new color.

Advanced: Inserting the Code

To check if your sizing technique works well on mobile devices, do the following:

Copy the double border code in the top section of this page.
Go to the page or post in Canvas where you want the double borders.
Open the page or post in editing mode.
Type xx where you want the borders.
Click the HTML Editor link.
Open the web browser's Find tool with Ctrl/⌘+F.
Use the Find tool to find xx.
Replace the xx with the code you copied.
Use the information in the previous section to edit the border line styles.
Click the Rich Content Editor link or Save the page to see how your code looks.
If the borders aren't as desired, open the page again, open the HTML Editor, Find xx, and make adjustments.
Repeat steps 10 and 11 until satisfied then delete the xx and save the page.

Additional Reading

Last Updated Summer 2018