Questions about marking-up-a-letter-finished

CloudVillage · February 20, 2023, 8:45pm

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.

github.com

mdn/learning-area/blob/main/html/introduction-to-html/marking-up-a-letter-finished/index.html

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="author" content="Dr. Eleanor Gaye">
    <title>Awesome science application correspondance</title>
    <style>
      body {
        max-width: 800px;
        margin: 0 auto;
      }

      .sender-column {
        text-align: right;
      }

      h1 {
        font-size: 1.5em;
      }

This file has been truncated. show original

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?

mikoMK · February 28, 2023, 3:47am

Hi @CloudVillage and welcome to the community

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): https://www.deque.com/blog/text-links-practices-screen-readers/. 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="http://www.example.com" aria-label="Dr Gaye's exotic dance research">exotic dance research page</a>
```

I hope that helps.

Have a nice day,
Michael