Page Accessibility HTML Specific Improvement.

AbeerTannous commented 1 year ago

What page is this for?

https://jupyter.org/governance/software_steering_council.html

WAVE accessibility report

https://github.com/jupyterhub/outreachy/issues/38#issuecomment-1277869254

The HTML element to be changed

1. <script>
const THEBE_JS_URL = "https://unpkg.com/thebe@0.8.2/lib/index.js" const thebe_selector = ".thebe,.cell" const thebe_selector_input = "pre" const thebe_selector_output = ".output, .cell_output"
</script>

2.<html>

3.<label for="__navigation" class="headerbtn" data-toggle="tooltip" data-placement="right" title="" data-original-title="Toggle navigation">
<span class="headerbtn__icon-container">
<i class="fas fa-bars"></i>
</span>
</label>

4.<label for="__page-toc" class="headerbtn headerbtn-page-toc">
<span class="headerbtn__icon-container">
<i class="fas fa-list"></i>
</span>  we could still have the Icon with out rapping it with a <lable>
</label>

5.<label for="toctree-checkbox-1">
<i class="fas fa-chevron-down"></i>
</label>

6.<label for="toctree-checkbox-2">
<i class="fas fa-chevron-down"></i>
</label>

7.<button onclick="toggleFullScreen()" class="headerbtn" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Fullscreen mode">
<span class="headerbtn__icon-container">
<i class="fas fa-expand"></i>
</span>
</button>

8.<input type="checkbox" class="sidebar-toggle" name="__navigation" id="__navigation" aria-label="Toggle navigation sidebar">
Form label
<label class="overlay overlay-navbar" for="__navigation">
<div class="visually-hidden">
Toggle navigation sidebar
</div>
</label>
and 
<label for="__navigation" class="headerbtn" data-toggle="tooltip" data-placement="right" title="" data-original-title="Toggle navigation">
<span class="headerbtn__icon-container">
<i class="fas fa-bars"></i>
</span>
</label>

9.<input type="checkbox" class="sidebar-toggle" name="__page-toc" id="__page-toc" aria-label="Toggle in-page Table of Contents">
Form label
<label class="overlay overlay-pagetoc" for="__page-toc">
<div class="visually-hidden">
Toggle in-page Table of Contents
</div>
</label>
and <label for="__page-toc" class="headerbtn headerbtn-page-toc">
<span class="headerbtn__icon-container">
<i class="fas fa-list"></i>
</span>
</label>

10.<img src="https://licensebuttons.net/p/zero/1.0/88x31.png" style="border-style: none;" alt="CC0">

11.<ul class="nav bd-sidenav bd-sidenav__home-link">
<li class="toctree-l1">
<a class="reference internal" href="intro.html">
Project Jupyter Governance
</a>
</li>
</ul>

12.<ul class="nav bd-sidenav">
        <li class="toctree-l1">
        <a class="reference internal" href="governance.html">
        Governance of Project Jupyter
        </a>
        </li>
        <li class="toctree-l1">
        <a class="reference internal" href="decision_making.html">
        Decision-Making Guide
        </a>
        </li>
        </ul>

13. 
<ul class="nav bd-sidenav">
<li class="toctree-l1 has-children">
<a class="reference internal" href="conduct/code_of_conduct.html">
Project Jupyter Code of Conduct
</a>
<input class="toctree-checkbox" id="toctree-checkbox-1" name="toctree-checkbox-1" type="checkbox">
Empty form label
<label for="toctree-checkbox-1">
<i class="fas fa-chevron-down"></i>
</label>
Unordered list
<ul>
<li class="toctree-l2">
<a class="reference internal" href="conduct/enforcement.html">
Enforcement Manual
</a>
</li>
<li class="toctree-l2">
<a class="reference internal" href="conduct/reporting_online.html">
Reporting Guide - Online Community
</a>
</li>
</ul>
</li>
<li class="toctree-l1 has-children">
<a class="reference internal" href="CodeofConductJupyterDay.html">
JupyterDay Code of Conduct
</a>
<input class="toctree-checkbox" id="toctree-checkbox-2" name="toctree-checkbox-2" type="checkbox">
Empty form label
<label for="toctree-checkbox-2">
<i class="fas fa-chevron-down"></i>
</label>
Unordered list
<ul>
<li class="toctree-l2">
<a class="reference internal" href="CodeofConductJupyterDayOrganizer.html">
JupyterDay Organizer Code of Conduct
</a>
</li>
<li class="toctree-l2">
<a class="reference internal" href="conduct/reporting_events.html">
Reporting Guide - Jupyter Events
</a>
</li>
</ul>
</li>
<li class="toctree-l1">
<a class="reference internal" href="conduct/faq.html">
Frequently Asked Questions
</a>
</li>
</ul>

14.<ul class="nav bd-sidenav">
<li class="toctree-l1">
<a class="reference internal" href="people.html">
Steering Council and Institutional Partners
</a>
</li>
<li class="toctree-l1">
<a class="reference internal" href="communitybuildingcommittee.html">
Community Building Committee
</a>
</li>
<li class="toctree-l1 has-children">
<a class="reference internal" href="software_subprojects.html">
Software Subprojects
</a>
<input class="toctree-checkbox" id="toctree-checkbox-3" name="toctree-checkbox-3" type="checkbox">
Empty form label
<label for="toctree-checkbox-3">
<i class="fas fa-chevron-down"></i>
</label>
Unordered list
<ul>
<li class="toctree-l2">
<a class="reference internal" href="list_of_subprojects.html">
List of Official Jupyter Subprojects
</a>
</li>
<li class="toctree-l2">
<a class="reference internal" href="newsubprojects.html">
New Subproject Process
</a>
</li>
</ul>
</li>
<li class="toctree-l1">
<a class="reference internal" href="distinguished_contributors.html">
Distinguished Contributors
</a>
</li>
</ul>

15.<ul class="nav bd-sidenav">
<li class="toctree-l1">
<a class="reference internal" href="papers.html">
Process for Authoring Jupyter Related Academic Papers
</a>
</li>
<li class="toctree-l1">
<a class="reference internal" href="trademarks.html">
Trademark Usage Policy
</a>
</li>
<li class="toctree-l1">
<a class="reference internal" href="projectlicense.html">
Licensing terms for Project Jupyter code
</a>
</li>
</ul>
<p aria-level="2" class="caption" role="heading">
<span class="caption-text">
Future Governance [work in progress]
</span>
</p>
Unordered list
<ul class="current nav bd-sidenav">
<li class="toctree-l1">
<a class="reference internal" href="overview.html">
Jupyter Governance Overview
</a>
</li>
<li class="toctree-l1">
<a class="reference internal" href="bootstrapping_decision_making.html">
Bootstrapping Subproject Councils
</a>
</li>
<li class="toctree-l1">
<a class="reference internal" href="executive_council.html">
Executive Council
</a>
</li>
<li class="toctree-l1 current active">
<a class="current reference internal" href="#">
Software Steering Council
</a>
</li>
<li class="toctree-l1">
<a class="reference internal" href="standing_committees_and_working_groups.html">
Standing Committees and Working Groups
</a>
</li>
<li class="toctree-l1">
<a class="reference internal" href="list_of_standing_committees_and_working_groups.html">
List of Standing Committees and Working Groups
</a>
</li>
</ul>

16.<ul class="current nav bd-sidenav">
<li class="toctree-l1">
<a class="reference internal" href="overview.html">
Jupyter Governance Overview
</a>
</li>
<li class="toctree-l1">
<a class="reference internal" href="bootstrapping_decision_making.html">
Bootstrapping Subproject Councils
</a>
</li>
<li class="toctree-l1">
<a class="reference internal" href="executive_council.html">
Executive Council
</a>
</li>
<li class="toctree-l1 current active">
<a class="current reference internal" href="#">
Software Steering Council
</a>
</li>
<li class="toctree-l1">
<a class="reference internal" href="standing_committees_and_working_groups.html">
Standing Committees and Working Groups
</a>
</li>
<li class="toctree-l1">
<a class="reference internal" href="list_of_standing_committees_and_working_groups.html">
List of Standing Committees and Working Groups
</a>
</li>
</ul>

17.<ul class="simple">
<li>
<p>
Defining the submission, review, and approval process for Jupyter Enhancement Proposals.
</p>
</li>
<li>
<p>
Stewarding the JEP process to ensure that it is inclusive and participatory, and solicits feedback from the right stakeholders. As a starting point,
<a class="reference external" href="https://github.com/numfocus/DISCOVER-Cookbook">
the NumFOCUS DISCOVER Cookbook
</a>

may offer some useful starting pointers.
</p>
</li>
<li>
<p>
Making decisions on JEPs after receiving community feedback (JEPs are the mechanism for elevating any software decision/idea up to the broader Project, while individual Subprojects can make decisions within their scope via their regular mechanisms).
</p>
</li>
<li>
<p>
Owning, managing and implementing the Jupyter Incubation process (
<a class="reference external" href="https://github.com/jupyter-incubator">
https://github.com/jupyter-incubator
</a>

).
</p>
</li>
<li>
<p>
Owning, managing and implementing the Jupyter Attic process (
<a class="reference external" href="https://github.com/jupyter-attic">
https://github.com/jupyter-attic
</a>

).
</p>
</li>
<li>
<p>
Stewarding discussions and activities beyond JEPs that involve cross-cutting concerns, standards, protocols and other architectural issues that impact the entire project.
</p>
</li>
<li>
<p>
Owning and managing anything related to security vulnerabilities across the project, including the Jupyter security lists, any private security repositories, etc.
</p>
</li>
<li>
<p>
Voting to accept Working Groups nominated by the EC to have a representative on the SSC.
</p>
</li>
</ul>

18.<ul class="simple">
<li>
<p>
Changes to the Jupyter Governance model.
</p>
</li>
<li>
<p>
Creation of new Jupyter Subprojects.
</p>
</li>
<li>
<p>
Removal of Subprojects from Jupyter.
</p>
</li>
</ul>

19.<ul class="visible nav section-nav flex-column">
<li class="toc-h2 nav-item toc-entry active">
<a class="reference internal nav-link active" href="#purpose">
Purpose
</a>
</li>
<li class="toc-h2 nav-item toc-entry">
<a class="reference internal nav-link" href="#responsibilities">
Responsibilities
</a>
Unordered list
<ul class="nav section-nav flex-column">
<li class="toc-h3 nav-item toc-entry">
<a class="reference internal nav-link" href="#sole-responsibilities">
Sole responsibilities
</a>
</li>
<li class="toc-h3 nav-item toc-entry">
<a class="reference internal nav-link" href="#shared-responsibilities-with-the-executive-board">
Shared responsibilities with the Executive Board
</a>
</li>
</ul>
</li>
<li class="toc-h2 nav-item toc-entry">
<a class="reference internal nav-link" href="#membership">
Membership
</a>
Unordered list
<ul class="nav section-nav flex-column">
<li class="toc-h3 nav-item toc-entry">
<a class="reference internal nav-link" href="#member-composition">
Member composition
</a>
</li>
<li class="toc-h3 nav-item toc-entry">
<a class="reference internal nav-link" href="#term-length">
Term length
</a>
</li>
<li class="toc-h3 nav-item toc-entry">
<a class="reference internal nav-link" href="#selecting-ssc-members">
Selecting SSC members
</a>
</li>
<li class="toc-h3 nav-item toc-entry">
<a class="reference internal nav-link" href="#bootstrapping-the-ssc">
Bootstrapping the SSC
</a>
</li>
</ul>
</li>
</ul>

20.<nav class="bd-links" id="bd-docs-nav" aria-label="Main">....</nav>

21.<nav id="bd-toc-nav" aria-label="Page">

22.<main id="main-content" role="main">

23.<footer class="footer-article noprint">..</footer>

24.<p aria-level="2" class="caption" role="heading">

25.<input type="checkbox" class="sidebar-toggle" name="__navigation" id="__navigation" aria-label="Toggle navigation sidebar">

26.<input type="checkbox" class="sidebar-toggle" name="__page-toc" id="__page-toc" aria-label="Toggle in-page Table of Contents">

27.<input type="search" class="form-control" name="q" id="search-input" placeholder="Search this book..." aria-label="Search this book..." autocomplete="off">

Your proposed HTML (or CSS), after change

1. add ; after declaring const.

2.should be <html lang="en">

3.<label for="__navigation" class="headerbtn" data-toggle="tooltip" data-placement="right" data- 
     original-title="Toggle navigation">Hide navigation side bar</label>
  <span class="headerbtn__icon-container">
     <i class="fas fa-bars"></i>
  </span>

4.<label for="__page-toc" class="headerbtn headerbtn-page-toc">download this page</label>
     <span class="headerbtn__icon-container">
        <i class="fas fa-list"></i>  we could still have the Icon with out rapping it with a <lable>
     </span>

5.<label for="toctree-checkbox-1">project jupyter code of conduct page</label>
  <i class="fas fa-chevron-down"></i>

6.<label for="toctree-checkbox-2"> JupyterDay code of conduct page</label>
  <i class="fas fa-chevron-down"></i>

7.<button onclick="toggleFullScreen()" class="headerbtn" data-toggle="tooltip" data-placement="bottom" title="show in full sreen" aria-label="show in full sreen" full data-original-title="Fullscreen mode">
      <span class="headerbtn__icon-container">
         <i class="fas fa-expand"></i>
      </span>
  </button>

8.<label for="this sould not be __navigation" class="headerbtn" data-toggle="tooltip" data-placement="right" title="" data-original-title="Toggle navigation">
     <span class="headerbtn__icon-container">
        <i class="fas fa-bars"></i>
     </span>
  </label> 

9.<label for="this should not be __page-toc " class="headerbtn headerbtn-page-toc">
     <span class="headerbtn__icon-container">
        <i class="fas fa-list"></i>
     </span>
  </label>

10.<img src="https://licensebuttons.net/p/zero/1.0/88x31.png" style="border-style: none;" alt="public 
    domain page">

11. <a class="reference internal toctree-l1" href="intro.html">
         Project Jupyter Governance
    </a>

12.<ol class="nav bd-sidenav" type="1">
        <li class="toctree-l1">
            <a class="reference internal" href="governance.html">
                Governance of Project Jupyter
        </a>
        </li>
        <li class="toctree-l1">
            <a class="reference internal" href="decision_making.html">
                Decision-Making Guide
            </a>
        </li>
    </ol>

13.<ol class="nav bd-sidenav" type="1">
            <li class="toctree-l1 has-children">
                <a class="reference internal" href="conduct/code_of_conduct.html">
                Project Jupyter Code of Conduct
                </a>
            <input class="toctree-checkbox" id="toctree-checkbox-1" name="toctree-checkbox-1" type="checkbox">
                Empty form label
            <label for="toctree-checkbox-1">
                 <i class="fas fa-chevron-down"></i>
            </label>
        Unordered list
            <ol type="a">
                <li class="toctree-l2">
                    <a class="reference internal" href="conduct/enforcement.html">
                        Enforcement Manual
                    </a>
                </li>
                <li class="toctree-l2">
                    <a class="reference internal" href="conduct/reporting_online.html">
                    Reporting Guide - Online Community
                    </a>
                </li>
            </ol>
            </li>
            <li class="toctree-l1 has-children">
                <a class="reference internal" href="CodeofConductJupyterDay.html">
                JupyterDay Code of Conduct
                 </a>
            <input class="toctree-checkbox" id="toctree-checkbox-2" name="toctree-checkbox-2" type="checkbox">
            Empty form label
            <label for="toctree-checkbox-2">
            <i class="fas fa-chevron-down"></i>
             </label>
            <ol type="a">
                <li class="toctree-l2">
                    <a class="reference internal" href="CodeofConductJupyterDayOrganizer.html">
                    JupyterDay Organizer Code of Conduct
                     </a>
                </li>
                <li class="toctree-l2">
                    <a class="reference internal" href="conduct/reporting_events.html">
                    Reporting Guide - Jupyter Events
                     </a>
                </li>
             </ol>
            </li>
            <li class="toctree-l1">
                <a class="reference internal" href="conduct/faq.html">
                Frequently Asked Questions
                </a>
            </li>
        </ol>

14. <ol class="nav bd-sidenav" type="1">
        <li class="toctree-l1">
            <a class="reference internal" href="people.html">
            Steering Council and Institutional Partners

15.<ol class="nav bd-sidenav" type="1">
        <li class="toctree-l1">
            <a class="reference internal" href="papers.html">
            Process for Authoring Jupyter Related Academic Papers
            </a>
        </li>
        <li class="toctree-l1">
            <a class="reference internal" href="trademarks.html">
            Trademark Usage Policy
            </a>
        </li>
        <li class="toctree-l1">
            <a class="reference internal" href="projectlicense.html">
            Licensing terms for Project Jupyter code
            </a>
        </li>
        </ol>

16.<ol class="current nav bd-sidenav" type="1">
        <li class="toctree-l1">
            <a class="reference internal" href="overview.html">
             Jupyter Governance Overview
            </a>
        </li>
        <li class="toctree-l1">
            <a class="reference internal" href="bootstrapping_decision_making.html">
            Bootstrapping Subproject Councils
            </a>
        </li>
        <li class="toctree-l1">
            <a class="reference internal" href="executive_council.html">
            Executive Council
            </a>
        </li>
        <li class="toctree-l1 current active">
            <a class="current reference internal" href="#">
            Software Steering Council
            </a>
        </li>
        <li class="toctree-l1">
            <a class="reference internal" href="standing_committees_and_working_groups.html">
            Standing Committees and Working Groups
            </a>
        </li>
        <li class="toctree-l1">
            <a class="reference internal" href="list_of_standing_committees_and_working_groups.html">
            List of Standing Committees and Working Groups
            </a>
        </li>
    </ol>

17.<ol class="simple" type="1">
        <li>
            <p>
                Defining the submission, review, and approval process for Jupyter Enhancement Proposals.
            </p>
        </li>
        <li>
            <p>
                Stewarding the JEP process to ensure that it is inclusive and participatory, and solicits feedback from the right stakeholders. As a starting point,
                <a class="reference external" href="https://github.com/numfocus/DISCOVER-Cookbook">
                the NumFOCUS DISCOVER Cookbook
                </a>

                may offer some useful starting pointers.
            </p>
        </li>
        <li>
            <p>
                 Making decisions on JEPs after receiving community feedback (JEPs are the mechanism for elevating any software decision/idea up to the broader Project, while individual Subprojects can make decisions within their scope via their regular mechanisms).
            </p>
        </li>
        <li>
            <p>
                Owning, managing and implementing the Jupyter Incubation process (
                <a class="reference external" href="https://github.com/jupyter-incubator">
                 https://github.com/jupyter-incubator
                </a>

                ).
            </p>
        </li>
        <li>
            <p>
                Owning, managing and implementing the Jupyter Attic process (
                <a class="reference external" href="https://github.com/jupyter-attic">
                https://github.com/jupyter-attic
                </a>

                ).
            </p>
        </li>
        <li>
            <p>
                Stewarding discussions and activities beyond JEPs that involve cross-cutting concerns, standards, protocols and other architectural issues that impact the entire project.
            </p>
        </li>
        <li>
            <p>
                Owning and managing anything related to security vulnerabilities across the project, including the Jupyter security lists, any private security repositories, etc.
            </p>
        </li>
        <li>
            <p>
                Voting to accept Working Groups nominated by the EC to have a representative on the SSC.
            </p>
        </li>
    </ol>

18.  <ol class="simple" type="1">
        <li>
            <p>
                Changes to the Jupyter Governance model.
             </p>
        </li>
        <li>
            <p>
                Creation of new Jupyter Subprojects.
            </p>
        </li>
        <li>
            <p>
                Removal of Subprojects from Jupyter.
            </p>
        </li>
    </ol>

19.<ol class="visible nav section-nav flex-column" type="1">
        <li class="toc-h2 nav-item toc-entry active">
            <a class="reference internal nav-link active" href="#purpose">
                Purpose
            </a>
        </li>
        <li class="toc-h2 nav-item toc-entry">
            <a class="reference internal nav-link" href="#responsibilities">
                Responsibilities
            </a>
        <ol class="nav section-nav flex-column" type="a">
            <li class="toc-h3 nav-item toc-entry">
                <a class="reference internal nav-link" href="#sole-responsibilities">
                    Sole responsibilities
                </a>
            </li>
            <li class="toc-h3 nav-item toc-entry">
                <a class="reference internal nav-link" href="#shared-responsibilities-with-the-executive-board">
                    Shared responsibilities with the Executive Board
                </a>
            </li>
        </ol>
        </li>
        <li class="toc-h2 nav-item toc-entry">
            <a class="reference internal nav-link" href="#membership">
                 Membership
            </a>
        <ol class="nav section-nav flex-column" type="a">
            <li class="toc-h3 nav-item toc-entry">
                <a class="reference internal nav-link" href="#member-composition">
                    Member composition
                </a>
            </li>
            <li class="toc-h3 nav-item toc-entry">
                <a class="reference internal nav-link" href="#term-length">
                    Term length
                </a>
            </li>
            <li class="toc-h3 nav-item toc-entry">
                <a class="reference internal nav-link" href="#selecting-ssc-members">
                    Selecting SSC members
                </a>
            </li>
            <li class="toc-h3 nav-item toc-entry">
                <a class="reference internal nav-link" href="#bootstrapping-the-ssc">
                    Bootstrapping the SSC
                </a>
            </li>
        </ol>
        </li>
    </ol>

20.<nav class="bd-links" id="bd-docs-nav" aria-label="navigation links">....</nav>

21.<nav id="bd-toc-nav" aria-label="Page content navegation links">

22.<main id="main-content" role="page content">

23.<section class="previous-next-pages>...</section>

24.<p class="caption"> no need for ARIA here.

25.<input type="checkbox" class="sidebar-toggle" name="__navigation" id="__navigation"> no need for 
       aria-label since its displayed none.

26.<input type="checkbox" class="sidebar-toggle" name="__page-toc" id="__page-toc"> no need for aria- 
     label since its displayed none.

27.<input type="search" class="form-control" name="search field" id="search-input" placeholder="Search 
     this book..." aria-label="Search this book..." autocomplete="off">

            </a>
        </li>
        <li class="toctree-l1">
            <a class="reference internal" href="communitybuildingcommittee.html">
            Community Building Committee
             </a>
        </li>
        <li class="toctree-l1 has-children">
            <a class="reference internal" href="software_subprojects.html">
             Software Subprojects
            </a>
        <input class="toctree-checkbox" id="toctree-checkbox-3" name="toctree-checkbox-3" type="checkbox">
        <label for="toctree-checkbox-3">
        <i class="fas fa-chevron-down"></i>
        </label>
        <ol type="a">
            <li class="toctree-l2">
                <a class="reference internal" href="list_of_subprojects.html">
                 List of Official Jupyter Subprojects
                </a>
            </li>
            <li class="toctree-l2">
                <a class="reference internal" href="newsubprojects.html">
                New Subproject Process
                </a>
            </li>
        </ol>
        </li>
        <li class="toctree-l1">
            <a class="reference internal" href="distinguished_contributors.html">
            Distinguished Contributors
            </a>
        </li>
        </ol>

More info

In general the HTML document has very poor indentation as well as semantic classes and structure for example the following block of code is just to display a link to the Project Jupyter Governance page , this could be done with out a list.

<ul class="nav bd-sidenav bd-sidenav__home-link">
<li class="toctree-l1">
<a class="reference internal" href="intro.html">
 Project Jupyter Governance
</a>
</li>
</ul>
another example 
<ul class="simple">
<li>
<p>
Defining the submission, review, and approval process for Jupyter Enhancement Proposals.
</p>
</li>

why are we using <p> inside the <li>? lastly the classes names are not descriptive and that makes it hard for developers to keep track.

welcome[bot] commented 1 year ago

Thank you for opening your first issue in this project! Engagement like this is essential for open source projects! :hugs:
If you haven't done so already, check out Jupyter's Code of Conduct. Also, please try to follow the issue template as it helps other other community members to contribute more effectively. welcome You can meet the other Jovyans by joining our Discourse forum. There is also an intro thread there where you can stop by and say Hi! :wave:
Welcome to the Jupyter community! :tada:

AbeerTannous commented 1 year ago

Just for clarification In the MORE INFO section I have used some code blocks that didn't show . instead its displayed as page elements .

minrk commented 1 year ago

Thanks for the suggestions! Can you elaborate on what you mean about indentation? Indentation of HTML code is not related to accessibility, or meaningful in HTML.

I have used some code blocks that didn't show

In markdown, code blocks must be esaped with back-ticks:

I have used a `<p>` tag and a `<li>`

produces:

I have used a <p> tag and a <li>

AbeerTannous commented 1 year ago

Thanks for the review! My note about indentation is not related to accissability , rather its related to the HTML code , and what I meant was instead of formatting the code this way

<ul class="nav bd-sidenav bd-sidenav__home-link"> <li class="toctree-l1"> <a class="reference internal" href="intro.html"> Project Jupyter Governance </a> </li> </ul>

to be like this

<ul class="nav bd-sidenav bd-sidenav__home-link"> <li class="toctree-l1"> <a class="reference internal" href="intro.html"> Project Jupyter Governance </a> </li> </ul>

by formatting the code using indentation it becomes more readable by other developers and shows the relationship between the child and parent HTML elements , so for any time we need to come back to the code just like what we are doing now trying to implement the accessibility related changes, it would be much easer to track the code and find the specific elements that need to be changed .

This suggestion was under the following section "Anything more you want to share? Suggestions that don't fit in HTML/CSS changes? Add it here.".

minrk commented 1 year ago

Ah, thank you. You're right. Often, HTML is compressed for efficiency in transmission rather than human readability. Very often, the final HTML is ultimately written by machines for machines, rather than by humans for humans.

The nice thing about HTML's space-insensitivity is that you can always take the HTML that's delivered to the browser and view it in the browser's inspector - then you will see the HTML indented based on its logical hierarchy, regardless of the formatting of the file itself. That means the served HTML doesn't need to be nicely formatted to have all the benefits of nicely formatted HTML.

AbeerTannous commented 1 year ago

Got it ,Thanks for clarifying that to me .

sgibson91 commented 1 year ago

Thank you for your contribution! Since the contribution period is now over, we will close this issue.

jupyterhub / outreachy