Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
4 tasks done
travis-jeans opened this issue Jan 8, 2025 · 1 comment
Open
4 tasks done

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

travis-jeans opened this issue Jan 8, 2025 · 1 comment
Labels
bug Something isn't working

Comments

@travis-jeans
Copy link
Contributor

travis-jeans commented Jan 8, 2025 •
edited
Loading

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/
@travis-jeans travis-jeans added the bug Something isn't working label Jan 8, 2025
@dessalines
Copy link
Member

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

@travis-jeans travis-jeans mentioned this issue Feb 6, 2025
Merged
dessalines added a commit that referenced this issue Feb 25, 2025
@travis-jeans @dessalines @SleeplessOne1917
Improve screenreader accessibility by adding a main element to more p…
3e40b73 
…ages (issue #2891) (#2944)

* Changed a div with the classes mt-4 p-0 fl-1 to a main element for accessibility with screenreaders.

* Changed the definition of colorList to include CSS variables named like comment-node-#-color in _variables.scss. The values are currently the default values from hsl(#) so the look is the same, but this gives theme developers a way to edit the colour of comment borders. CSS themes would need to be re-exported. Importing hsl removed from color-list as it is no longer used.

* Ran pnpm themes:build.

* Changed the main element in home to a div, including its closing tag.

* Changed the main elements in community and post to divs.

* Ran prettier with -w on the variables file which corrected white space formatting.

* Changed HTMLElement to HTMLDivElement

---------

Co-authored-by: Dessalines <[email protected]>
Co-authored-by: SleeplessOne1917 <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@dessalines @travis-jeans