Use <main> on more pages or use role="main" on more pages (Accessibility, ARIA Landmarks)

[travis-jeans]

Requirements

• This is a bug report, and if not, please post to https://lemmy.ml/c/lemmy_support instead.
• Please check to see if this issue already exists.
• It's a single bug. Do not report multiple bugs in one issue.
• It's a frontend issue, not a backend issue; Otherwise please create an issue on the backend repo instead.

Summary

This is half way between a bug and an enhancement. I say it's a bug because it will cause "buggy" behaviour for screenreader users who don't realize the cause of the Landmark inconsistencies.

Issue:

Other than the homepage which has <main class="col-12 col-md-8 col-lg-9" role="main"> other pages like Admin Settings for example are missing the <main> element and a role="main" instead having a custom class on a <div> like .admin-settings. Others include .person-profile, .inbox, .person-reports, .registration-applications, and there might be more I missed. An example code snippet for the Admin Settings page is <div class="admin-settings container-lg">.

Why is this a problem

Theme development

From the perspective of a theme developer this means targeting the main area of the document and excluding the header navigation and footer means targeting <main> plus a series of custom classes for different pages as defined above. It is inefficient.

Accessibility

Although the skip link works properly, the missing main and role="main" means screenreader users will have an inconsistent experience - they can quickly navigate to main on the homepage but for other pages such a landmark is missing. It would be better if the main element was on every page with the custom classes like .person-profile for profile pages added to the class of main with the role="main". This would be the best option. More about this in Using ARIA landmarks to identify regions of a page (WCAG 2.1 Techniques).

An intermediate step would be to add role="main" to the divs with custom classes like .admin-settings so the divs are identified as landmarks by screenreaders.

My suggestion is to add <main> to more all pages for a consistent screenreader experience plus to make theme development easier by allowing developers to target CSS changes to main rather than main plus a lot of other classes.

Steps to Reproduce

1. Go to any page other than the home feed
2. Open view-source
3. Ctrl+F search for "<main" or "role="main"
4. Notice the missing element

Technical Details

This is how the HTML of Lemmy is coded on RBlind (BE: 0.19.8) as far as I can tell - I noticed this mainly with the local instance of lemmy-ui and lemmy I installed to my computer (UI: unknown version
BE: 0.19.6-beta.7)

Lemmy Instance Version

UI: unknown version BE: 0.19.6-beta.7

Lemmy Instance URL

https://rblind.com/

[dessalines]

I don't have time to add these, but if anyone else would like to, feel free.