cancel
Showing results for 
Search instead for 
Did you mean: 
davidh1
Community Participant

Creating accessible tiles or buttons for a visual layout on a page?

Jump to solution

I have googled and looked a bunch of Home (or Front) page examples and quite a few use tiles or large buttons to create a nice looking visual page of links. I can't figure how to do that without using a table, which is problematic for accessibility. How are these sites doing it? Are they using tables? I am talking about layout for pages like this one at Clemson, and the course designer has layout ideas, but I can't get it to work for me and none of those instructions will build anything like the Home page for that course.

1 Solution

Accepted Solutions
eclisastewart
Community Participant

Hey @David

I figured it out by using this HTML code.

If you want to include 3 images, centered, you have to use percentages and padding. Plus to get them centered, you can use a spacer on both ends like a bookend for your image. 

This requires some math, but you can copy/paste the code I included below and fiddle with it until it looks right to you.

Just remember: Modify your spacer.gif percentage to accommodate 100%. Each of my spacer bookends are currently at 12% because each of my 3 images are 25% wide with 10px on both sides. This is the magic that keeps them centered.

I've attached a spacer for you. 

Visual representation of 3 centered images:

3 Images Centered Not Using Table

<p>

<img src="https://canvas.instructure.com/courses/1609968/files/77588985/preview" alt="spacer.gif" width="12%" height="50" data-api-endpoint="https://canvas.instructure.com/api/v1/courses/1609968/files/77588985" data-api-returntype="File" />

<a href="https://canvas.instructure.com/courses/1609968/announcements"><img style="padding-left: 10px; padding-right: 10px;" src="https://canvas.instructure.com/courses/1609968/files/77555482/preview" alt="ANNOUNCEMENTS.png" width="25%" align="center" data-api-endpoint="https://canvas.instructure.com/api/v1/courses/1609968/files/77555482" data-api-returntype="File" /></a>

<a href="https://canvas.instructure.com/courses/1609968/announcements"><img style="padding-left: 10px; padding-right: 10px;" src="https://canvas.instructure.com/courses/1609968/files/77555482/preview" alt="ANNOUNCEMENTS.png" width="25%" align="center" data-api-endpoint="https://canvas.instructure.com/api/v1/courses/1609968/files/77555482" data-api-returntype="File" /></a>

<a href="https://canvas.instructure.com/courses/1609968/announcements"><img style="padding-left: 10px; padding-right: 10px;" src="https://canvas.instructure.com/courses/1609968/files/77555482/preview" alt="ANNOUNCEMENTS.png" width="25%" align="center" data-api-endpoint="https://canvas.instructure.com/api/v1/courses/1609968/files/77555482" data-api-returntype="File" /></a>

<img src="https://canvas.instructure.com/courses/1609968/files/77588985/preview" alt="spacer.gif" width="12%" height="50" data-api-endpoint="https://canvas.instructure.com/api/v1/courses/1609968/files/77588985" data-api-returntype="File" />

</p>

View solution in original post

7 Replies
Bobby2
Community Coach
Community Coach

Hi  @davidh1  what a great question - and one that I've often pondered on. Those design people are awfully clever.

I was wondering if this offering could lead you to a helpful courseFree for Teachers Fun &amp; CanvasHacks Demo Course. Possibly it's a bit of HTML magic. 

Or this CanvasHacks Classroom 

 @kmeeusen ‌ is the font of much knowledge. 

eclisastewart
Community Participant

Hey @David

I figured it out by using this HTML code.

If you want to include 3 images, centered, you have to use percentages and padding. Plus to get them centered, you can use a spacer on both ends like a bookend for your image. 

This requires some math, but you can copy/paste the code I included below and fiddle with it until it looks right to you.

Just remember: Modify your spacer.gif percentage to accommodate 100%. Each of my spacer bookends are currently at 12% because each of my 3 images are 25% wide with 10px on both sides. This is the magic that keeps them centered.

I've attached a spacer for you. 

Visual representation of 3 centered images:

3 Images Centered Not Using Table

<p>

<img src="https://canvas.instructure.com/courses/1609968/files/77588985/preview" alt="spacer.gif" width="12%" height="50" data-api-endpoint="https://canvas.instructure.com/api/v1/courses/1609968/files/77588985" data-api-returntype="File" />

<a href="https://canvas.instructure.com/courses/1609968/announcements"><img style="padding-left: 10px; padding-right: 10px;" src="https://canvas.instructure.com/courses/1609968/files/77555482/preview" alt="ANNOUNCEMENTS.png" width="25%" align="center" data-api-endpoint="https://canvas.instructure.com/api/v1/courses/1609968/files/77555482" data-api-returntype="File" /></a>

<a href="https://canvas.instructure.com/courses/1609968/announcements"><img style="padding-left: 10px; padding-right: 10px;" src="https://canvas.instructure.com/courses/1609968/files/77555482/preview" alt="ANNOUNCEMENTS.png" width="25%" align="center" data-api-endpoint="https://canvas.instructure.com/api/v1/courses/1609968/files/77555482" data-api-returntype="File" /></a>

<a href="https://canvas.instructure.com/courses/1609968/announcements"><img style="padding-left: 10px; padding-right: 10px;" src="https://canvas.instructure.com/courses/1609968/files/77555482/preview" alt="ANNOUNCEMENTS.png" width="25%" align="center" data-api-endpoint="https://canvas.instructure.com/api/v1/courses/1609968/files/77555482" data-api-returntype="File" /></a>

<img src="https://canvas.instructure.com/courses/1609968/files/77588985/preview" alt="spacer.gif" width="12%" height="50" data-api-endpoint="https://canvas.instructure.com/api/v1/courses/1609968/files/77588985" data-api-returntype="File" />

</p>

View solution in original post

davidh1
Community Participant

Thank you! I knew it was something like this, but I just couldn't get it right.

eclisastewart
Community Participant

Code is tricky. Smiley Wink 

sbridge
Community Participant

I shouldn't have to know code to design a visually appealing page.  This is a huge drawback for me.  I am a teacher of science.  I don't have time to learn code.  Are there any templates I can just plug and change things on?

Hi Stefanie -

I absolutely understand your perspective. There are many different templates available in Canvas Commons. With a few searches, I'm sure you'll find something beautiful and engaging for your course(s)!

I have created several home pages without HTML, only using Canva or Google Drawing to make the buttons and images and then the resources in the Rich Content Editor to create the layout.

Here are a few blog posts that could kick-start the design process:

https://community.canvaslms.com/groups/k12/blog/2018/04/08/primaryelementary-home-pages-examples-ple... 

Student-Directed Home Pages

Jimandnor3
Community Member

The Google Chrome teachers in high school around hear use a Google slide with images and words that link to assignments, announcements, etc. Maybe a *.ppt slide could be used at the top of the home page in the same way. With a link like START HERE to get to the slide.

Coding and designing in html or anything else that is not immediately intuitive or friendly will only be attempted by many 5% of users. The rest need way more help than that.