search

mine-cetinkaya-rundel / html-cheatsheets

5 stars 2 forks source link

Data Import - Missing landmark markup and semantics #2

Open yan-ilumino opened 2 years ago

yan-ilumino commented 2 years ago

Page: https://mine-cetinkaya-rundel.github.io/accessible-cheatsheets/data-import/data-import-accessible.html

Issue:

The document has an obvious header and footer, but they are not markup as such. The lack of header and footer landmark might prevent screen reader users from understanding and navigating the webpage and its information.

How to fix it

Mark up different regions of web pages and applications, so that they can be identified by web browsers and assistive technologies.

Success Criteria

mine-cetinkaya-rundel commented 2 years ago

@yan-ilumino There seems to be a header, see https://github.com/mine-cetinkaya-rundel/accessible-cheatsheets/blob/23052acbe12632add89673b29e62890b1f00eeaa/data-import/data-import-accessible.html#L127-L129. Does this work or is there something that needs to be changed?

mine-cetinkaya-rundel commented 2 years ago

To do for us: Ask Quarto team if footer can be an option in format: html. If not, we can add footers to cheat sheets using include-after-body. Then, add https://github.com/mine-cetinkaya-rundel/accessible-cheatsheets/blob/23052acbe12632add89673b29e62890b1f00eeaa/data-import/data-import-accessible.qmd#L500-L510 to the footer.

yan-ilumino commented 2 years ago

@mine-cetinkaya-rundel

I would add the Table of content nav element in the header also. And if possible, take the header out of the main section.

Having the header inside the main means it is the header for the main section and not for the page. Small difference, but the screen reader users use header, main, footer, aside, list, and other landmarks to navigate.

The way to know if something should be in the header or not is to ask you that question:

"If I skip to the main content, where should I land?" Usually, it's under all the navigation, including breadcrumbs. Otherwise, a screen reader user might have to go through the navigation every time a page loads.

Hope this helps!