Hi everyone!
Just started learning HTML and CSS with this amazing site and finally got to the projects module.
I couldn’t really think of anyone in particular to pay a tribute to, so I decide do pay a sort of tribute to one of my favourite tributes. Hoping there are some other trekkies here who can get a laugh out of this.
I didn’t really change the layout much, only because I still only have the tiniest of inklings about what I’m doing, but practice makes perfect. Eventually.
Welcome to the forums @Olharapo. Your page looks good. Some things to revisit;
Hi, Roma.
Thanks for the tips, and for the links!
Honestly I need to review a lot more than just that accessibility lesson. As soon as I opened codepen it really sunk in how little I had retained from the earlier lessons (the joys of “adult learning” while working a completely unrelated full time job and managing a household, I guess…), so I figured that by copying chunks of the example page and fiddling with the values, I could at least get a picture of how it all fit.
My plan is to review as least the first two modules on basic HTML and CSS (and maybe take notes this time) and then give it another try. This time with a proper tribute, heh.
I just had to euthanize my cat of 17 years this past weekend so this one kind of hit home.
Just a few things to point out:
Best practices say that you shouldn’t skip heading levels, so “Ode to Spot” should be an <h2>.
The current <h5> should probably not be a heading at all. I’ll give you a suggestion as to how I would mark this up below.
The <h3> at the bottom should probably not be a heading either (it’s too long and it isn’t really functioning as a heading). I think the more appropriate thing to do here would be to add a <footer> after the <main> and include this as a <p> in that footer.
Nice use of <blockquote> at the bottom. There is some debate over whether your use of the <cite> tag like that is appropriate. Some people will argue that cite should only be used to cite a reference, not the author. A way to get around this debate would be to use figure/figcaption around the blockquote.
There really is no agreed upon one way to mark up a poem. Since the poem can exist on its own (its a self-contained composition) I think that the <article> tag is better suited to wrap around it than the <section> tag. Then you would have the title as an <h2>. I know it seems like the author’s name should be a heading, but it isn’t. I think in this situation the best choice is just a good ol’ <p>.
You’ve used the <br> tag to cause the line breaks in the poem, which is one of the acceptable uses for this tag since it is a poem. But I would suggest that each of those four line blocks get their own <p> instead of having everything in one <p>. Having to use two <br>s in a row just to create that extra space just doesn’t sit right with me. I’m no poet, so I don’t know if they would ever refer to each of those blocks as a paragraph (I think they are usually called stanzas), but I think they basically act as the same thing and thus they should each have their own <p>.
I’m going to get pretty deep into accessibility here. The image alt text and figcaption should not be the same. Yours are not exactly the same but they are pretty close. The alt text should almost literally describe the image. For example, you have to be able to see the image to know that Spot is an orange tabby, so that should be included in the alt text. I would also probably include the fact that Spot is lying still on his side and Data is staring at him with his face very close to Spot. You might even add that Data’s face is expressionless. You could take it even further and describe what Spot is lying on (though probably not necessary). Basically, you want to take all of the obvious details about the image and try to come up with a fairly short sentence that includes them and gives a blind user enough information to “see” what you see. You don’t want to add information that isn’t contained in the image though, such as the fact that Data is Spot’s caretaker and where the image comes from. This additional information would go in the figcaption. Adding this additional information in both is redundant for screen reader users. Also, if you weren’t using a figcaption, then only screen reader users would hear the additional information.
I won’t even get started on the accessibility of the <del> and <ins> elements. You’re using them to be funny here and I completely agree with you 
A screen reader will read this as “Spot and her android servant caretaker Data …” which is not terrible, and a cat person would probably be able to figure out that it is intended to be a joke. There are probably some ways to make this a little more clear to blind users, maybe just including a slash (/) between the words (and you could visually hide it on the page), but I’m not sure if most screen readers would read that as “slash”? Anyhoo, just wanted to point out that some tags have accessibility issues with screen readers and the only way to fix this is to test with the various screen readers and see what works best to convey the point you are trying to make.
Wow, I said a lot. I’m not trying to be too critical. I know you are just learning and I think you did great. Most of my suggestions were regarding accessibility. I feel it is important to make people aware of these issues early on because if you plan on doing this professionally then accessibility is going to be a big deal (or at least it should be).
Keep up the good work.
Hi, Bruce.
First of all, I’m very sorry about your cat. I currently share my house with four furry lordlings, and I’ve lost a few over the years, so I know how hard it is to say goodbye - especially when you’re the one who has to make the decision.
As regards the project, thank you for writing so much! You really gave me some very good pointers, and I’ll try to take them into account.
With regards to the and elements, I would’ve thought that they would somehow be properly identified by screen readers, as I was under the impression that one of their uses was to, for example, correct or update news articles that had reported wrong or outdated information. Guess not… Accessibility really is an important topic (or, like you said, it should be), so this is something we have to really pay attention to.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.