Device Specific Layouts: Adding Elements

Author: Phil Chambers | Mar 9, 2021 Devices

In the first of this series, I demonstrated how to separate content based on a learner’s device. In this tutorial, we will continue with the build and add some content.

Setting up the button 

In this case, we wanted to create an interactive button for the desktop mode:

You’ll need something like this:

<span class="element_toggler btn" role="button" style="width: 95%; text-align: left; background: #1C66A6; margin-top: 5px;" title="Button Title" aria-controls="button1" aria-label="Description of the current element" aria-expanded="false">
<a id="link_button1" style="color: white; text-decoration: none;" href="#"><strong>Button Text</strong></a>
</span>

Let’s explain what all these do:

Classes and Styles 

class="element_toggler btn"

This will create the button itself using the Canvas element toggler and styling it like a button.

role="button"

This tells a screen reader that this element is a button.

style="width: 95%; text-align: left; background: #1C66A6; margin-top: 5px;"

This styles the button so it takes up 95% of the screen, aligns the text to the left, sets the background color to a dark blue, and adds some space at the top.

Other attributes 

title="Button Title"

This provides some information related to the element and appears when you hover the mouse over it.

Screen Reader Specific Attributes 

aria-controls="button1"

This identifies the element that a screen reader will be interacting with. You should make sure that this is identical to the id of the element to which it is linked. More on that in a minute.

aria-label="Description of the current element"

Used when there is not a regular label about the element on the screen.

aria-expanded="false"

Tells the screen reader that the button is currently not expanded and so toggling it will open the button.

Anchor for keyboard users 

<a id="link_button1" style="color: white; text-decoration: none;" href="#">

This is used to turn the button text into a link for accessibility purposes. Enables users using the keyboard to lock on to the button and press enter to open it.

Creating the expansive content 

After we’ve set up the button, we need to link it to something so when we click it, content is revealed. I would usually do this in the following way:

<div id="button1" class="border-round" style="display: none;">
<div style="position: relative; top: 0px; left: 0px; padding: 10px:">
<p>Put your content here.</p>
</div>
</div>

More content 

You can manipulate the content inside those containers to add other things, like a grid-row. The cool thing about this is that you can write out the desktop version of the page within the grid-row and then just copy it all over to the mobile version of the page, editing for the xs screen size.