Questions about marking-up-a-letter-finished

Hey, everybody. After completing enough yesterday for the Marking Up A Letter project, I look at the finished version on GitHub to see if I had to making any changes.

A couple of things I don’t understand and would like help with.

First thing is this. On the GitHub repository for this line there’s an aria-label:

For more of my research, see my exotic dance research page.

Instead I put an a tag wrapped around a cite tag:

For more of my research, see my exotic dance research page.

For some reason the codes aren’t showing up here. I’d have to figure it out or something if there’s a way I can post it.

Is using wrong? Can both be used? Is aria-label better for accessibility purposes (I don’t know if my description for the a tag is good, but I didn’t want to focus much on that).

I was doing some aria-label research this morning reading MDN and watching a video Kevin Powell had with somebody on accessibility, but I need more explained for the basics of it ARIA. Anybody have any resources they’d recommend?

The second thing I want to know about the GitHub repo is why is there no section, div, or article tags? Is it because it’s a letter?

Hi @CloudVillage and welcome to the community :wave:

Interesting observation! I haven’t looked at the solution for quiet some time and didn’t know about this change. What’s a bit strange is that just one of the two links got changed. The other still has the title attribute.

I found this older article (with an update from 2020): Regarding screen readers it seems that they mostly read the title and the link text. When there’s an aria-label, only the label will be read (but not the link text). So I would say it’s about what your goals are. In general, important information should be directly provided in the link text (with no aria-label). Otherwise, users without a screen reader need to hover the link to see the title or won’t be able to see it at all in the case of an aria-label.
Using an aria-label should be seen as a last resort when there’s no good way to convey the information with standard HTML code.

Beside the pure references of the aria-* attributes, there’s also a learning module about accessibility on MDN. I definitively recommend that one if you want to learn how you can make your code more accessible:

You need to use so called “code fences” around your code. Three backticks before and after on their own lines:

<a href="" aria-label="Dr Gaye's exotic dance research">exotic dance research page</a>

I hope that helps. :slightly_smiling_face:

Have a nice day,

1 Like