[Accessibility] - add attributes for accessibility in MjBody

[llepere]

TLDLR; Add role article and two ARIA descriptors to MjBody

For accessibility the main landmark is important to point the user to the main content of the email and navigate easily with a screen reader. We can use the <main> tag or add a role="main" to a <div>

We don't use <main> tag here because of some limitations from email providers (Outlook, Gmail, etc.).

So update the MjBody class to add role: 'main' as parameter in htmlAttributes function.

So update the MjBody with a role: 'article and two ARIA-descriptors (see comment below here)

More on main here

[DazGreerMJ]

Hi @llepere, as per the link provided in the pull request: ARIA: main role - ARIA | MDN , only one main role should be present per document, which poses a problem for those using webmail clients which already use role=”main”.

Advice is to use the following:
https://www.goodemailcode.com/email-code/template#wrapping-element

<div role="article" aria-roledescription="email" aria-label="email name">

.. where ‘email name’ should be a useful descriptor of the email, e.g. the subject line.

[llepere]

Hi @llepere, as per the link provided in the pull request: ARIA: main role - ARIA | MDN , only one main role should be present per document, which poses a problem for those using webmail clients which already use role=”main”.

Advice is to use the following: https://www.goodemailcode.com/email-code/template#wrapping-element

<div role="article" aria-roledescription="email" aria-label="email name">

.. where ‘email name’ should be a useful descriptor of the email, e.g. the subject line.

Hi @DazGreerMJ

I've made the changes. Is it good for you ? :)

[dazgreer]

thanks @llepere,

The attributes are all good, but where it says 'aria-label': 'email name',, the value 'email name' should be a description of the email.

Probably best to use globalData.title for this in MJML and omit the attribute completely if it's blank

[llepere]

thanks @llepere,

The attributes are all good, but where it says 'aria-label': 'email name',, the value 'email name' should be a description of the email.

Probably best to use globalData.title for this in MJML and omit the attribute completely if it's blank

Done @dazgreer

[DazGreerMJ]

Thanks @llepere, that's great!

[dazgreer]

Hey @llepere, please can you update the README.md copy for mj-body from:

This is the starting point of your email.

.. to ...

This is the starting point of your email. To aid accessibility, MJML automatically adds a div tag as the child of the body, with the following ARIA attributes role="article", aria-roledescription="email" and aria-label="EMAIL NAME", where 'EMAIL NAME' is taken from the content of the mj-title tag. The lang" and dir attributes are also added here, with values taken from the mjml tag.

Thanks
Daz

[llepere]

Hey @llepere, please can you update the README.md copy for mj-body from:

This is the starting point of your email.

.. to ...

This is the starting point of your email. To aid accessibility, MJML automatically adds a div tag as the child of the body, with the following ARIA attributes role="article", aria-roledescription="email" and aria-label="EMAIL NAME", where 'EMAIL NAME' is taken from the content of the mj-title tag. The lang" and dir attributes are also added here, with values taken from the mjml tag.

Thanks Daz

The readme is updated 👍🏻