This one’s for TJ

“Don’t make friends who are comfortable to be with. Make friends who will force you to lever yourself up.” – Thomas J Watson

How difficult those friends are to find. They’re not just complacent in your life. They encourage you. They challenge you. They push you to be the best version of yourself. They climb high, only to look back, reach out the hand and pull you up with them.

Today, TJ proved once more that he is that sort of friend.

The challenge

So how did he do this?

As I was making dinner, after having practiced HTML and server stuff all day, he sent me this test:

Your next challenge. Trick me into thinking you used a list of your choosing when you did not use any list markup.

So after dinner, I decided to get started. I’m going to document my progress.

Step 1: think it through

In order to trick TJ, I would have to use a method that would tell his screenreader that he’s working with a list. I couldn’t use markup, so no typical list HTML tags. The only way to communicate with screenreaders without making it seem like you’re communicating with screenreaders is using ARIA labels.

Step 2: turn to professor Google

I have not done anything with Aria labels, so my next step was to google:

How to write aria in HTMl

Google eventually brought me to
this mozzilla link about Aria.

One thing that struck me was this quote on the site:

The first rule of ARIA use is “If you can use a native HTML element or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.”

I knew I was on the right track!

Let’s learn about Aria

So I googled ARIA basics, and found that ARIA was comprised of Roles, States and properties.
This link on ARIA roles taught me what I needed to get started.

And then I found a link on list roles.

Playing around

The ARIA list role can be used to identify a list of items. It is normally used in conjunction with the
listitem role, which is used to identify a list item contained inside the list.

Okay, self explanatory. But then it gave this code:
< div role =&quot; list ">.
Side note: I learned about escape codes from He Who Must Not Be Named while asking him how to write code on wordpress; to be discussed in another blog.

So what is <div>?
I looked that up, and apparently they’re devision tags, which I supppose makes sense. I wonder where else they’re used…

Okay so taht first line means it’s a list we’re dealing with. Awesome.

< div role =” listitem “> List item 1 </ div >

That’s a list item one. First telling us that it’s an item, then saying what the item is.

< div role =" listitem "> List item 2 </ div >

List item two, just like the one above.

&lt; div role="listitem">List item 3</div>

</div>

The end … And now I see a copy to clipboard! Oh well, no shortcuts taken here…

okay, let’s fill it in

I’m going to read the code one more time and then try to write it from memory, substituting the list items with things and remembering my escape codes…

<div role="list">
<div role ="listitem">list 1</div>
<div role="listitem"&gt list thing 2&</div>
<div="listitem”>List thing next&</div>
&</div>

okay, I’m not going to go back and see if that works. I’m just going to write it out now without codes to see if I can fool TJ.

The test