How to add custom attributes to <main>?

How To
1

Hello everyone, for accessibility reasons, I need to add custom attributes to the tag, such as ‘tabindex’ and ‘role’.
I’ve tried several filters (bricks/content/tag, bricks/frontend/render_data, bricks/frontend/render, bricks/element/render_attributes), but nothing has been added.
I can do this with JavaScript (querySelector + setAttribute), but I’d prefer to avoid using client-side code and use server-side code instead.
Any help would be much appreciated.
Thank you

2

Curious what accessibility reasons mean you need this…

3

The role=”main” and tabindex=”-1” attributes must be added to the `main` element because some assistive technologies do not work correctly with the `main` tag only.

Role:

  • WCAG Criteria:
    • 1.3.1 (A)
    • 2.4.1 (A)
    • 4.1.2 (A)]
  • EN 301 549 V2.1.2 (2018-08) criteria:
    • [9.1.3.1 Info and Relationships (A)
    • 9.2.4.1 Bypass Blocks (A)
    • 9.4.1.2 Name, Role, Value (A)]

Tabindex:

  • WCAG Criteria:
    • 2.4.1 (A)
    • 2.4.3 (A)
    • 3.2.3 (AA)]
  • EN 301 549 V2.1.2 (2018-08) Criteria:
    • 9.2.4.1 Bypass Blocks (A)
    • 9.2.4.3 Focus Order (A)
    • 9.3.2.3 Consistent Navigation (AA)
4

To add stuff to the main tag, you can refer to this article.

1 Like
5

Which ones? I’ve never encountered that

6

Thanks a lot @jornes! I missed this one :smiling_face_with_three_hearts:

1 Like
7

You’re welcome. I always use this to inject attribute to my header, main tag and footer.

1 Like