Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Raleway|Roboto" rel="stylesheet">
</head>

<body>

  <nav id="navbar">
    <header>Accessible Web Page Design</header>
    <ul>
      <a class="nav-link" href="#Introduction">
        <li tabindex="1">Introduction</li>
      </a>
      <a class="nav-link" href="#Prior_Knowledge">
        <li tabindex="2">Prior Knowledge</li>
      </a>
      <a class="nav-link" href="#Improved_Readability">
        <li tabindex="3">Improved Readability</li>
      </a>
      <a class="nav-link" href="#Semantic_Order">
        <li tabindex="4">Semantic Order</li>
      </a>
      <a class="nav-link" href="#Alternative_Text">
        <li tabindex="5">Alternative Text</li>
      </a>

      <a class="nav-link" href="#Audio_Elements">
        <li tabindex="6">Audio Elements</li>
      </a>
      <a class="nav-link" href="#Figure_Elements">
        <li tabindex="7">Figure Elements</li>
      </a>
      <a class="nav-link" href="#Label_Elements">
        <li tabindex="8">Label Elements</li>
      </a>
      <a class="nav-link" href="#Dates_and_Times">
        <li tabindex="9">Dates and Times</li>
      </a>
      <a class="nav-link" href="#Keyboard_Accessibility">
        <li tabindex="10">Keyboard Accessibility</li>
      </a>

    </ul>
      </nav>

 <main id="main-doc">

    <section class="main-section" id="Introduction">
      <header><h2>Introduction</h2></header>
      <p>Accessibility for all is key to great web page design!<br>Learn how to code your page to be accessible for people with colorblindness and for screen readers. Screen readers convert web content to an audio interface for the user making it <em>super</em> important for us to be clear in our web page designs.</p>
    </section>

    <section class="main-section" id="Prior_Knowledge">
      <header><h2>Prior Knowledge</h2></header>
      <ul>
        <li>Basic Knowledge of HTML and CSS</li>
      </ul>
    </section>

    <section class="main-section" id="Improved_Readability">
      <header><h2>Improved Readability</h2></header>
      <p>
        Make content easier for users to read by using the recommended 4.5 to 1 contrast ratio. <a href="https://webaim.org/resources/contrastchecker/" id="Contrast-Checker">Check to see if your color scheme falls in the range.</a>
      </p>
    </section>

    <section class="main-section" id="Semantic_Order">
      <header><h1>Semantic Order</h1></header>
      <p>Headings, header, footer, nav, main, article, and fieldset are all ways to help screen readers navigate through the web page seamlessly.</p>
      <h3>Headers</h3>
      <p>Headers are used to wrap introductory information and/or navigation links together. It is parented in the body tag.</p>
      <pre><code>
      &lt;body&gt;
      &lt;header&gt;
      &lt;h1&gt;Miss Kitty Fantastico&lt;/h1&gt;
      &lt;nav&gt;
      &lt;ul&gt;
      &lt;li&gt;Wish List&lt;/li&gt;
      &lt;li&gt;Photos&lt;/li&gt;
      &lt;/ul&gt;
      &lt;/header&gt;
      &lt;/body&gt;</code></pre>
      <h3>Nav</h3>
      <p>The nav tag is used to group together navigation links within the site. The code within nav typically appears on every page in the site. It should be nested within the header tag.</p>
      <h3>Headings</h3>
      <p>Each page should only have one h1 tag. Heading 1 carries the most weight and titles 'the meat and potatoes' of the whole page. Headings that follow should be used in a hierarchical system where h3 is nested inside h2.</p>
      <h3>Main</h3>
      <p>The main tag is what houses all the main content in your web page and is located inside the body tag, but after the header tag.
        <p>
          <h3>Articles and Sections</h3>
          <p>When content is independent and self-contained you can use the article tag to wrap it. Typically places that article tags are used are in blog posts, forum posts, or news articles.</p>
          <p>A section tag can be used to group related content.</p>
          <h3>Fieldset and Legend</h3>
          <p>When your page has a form with radio buttons group them together with a fieldset tag. The legend tag is used within the fieldset tag as a descriptor of the grouping. Either tags are needed if the choices are self-explanatory, such as a yes and
            no. Here is an example of how to properly use fieldset and legend tags:</p>
          <pre><code>
  &lt;form&gt;
    &lt;fieldset&gt;
    &lt;legend&gt;Choose one of these three items:&lt;/legend&gt;
    &lt;input id="one" type="radio" name="items" value="one"&gt;
    &lt;label for="one"&gt;Choice One&lt;/label&gt;
    &lt;input id="two" type="radio" name="items" value="two"&gt;
    &lt;label for="two"&gt;Choice Two&at;/label&gt;
    &lt;input id="three" type="radio" name="items" value="three"&gt;
    &lt;label for="three"&gt;Choice Three&lt;/label&gt;
  &lt;/fieldset&gt;
&lt;/form&gt;

</code></pre>
          <h3>Footer</h3>
          <p>Footers ususally contain copyright information and links that are featured at the bottom of a page. They are used within the body tag.</p>
    </section>
    <section class="main-section" id="Alternative_Text">
      <header><h2>Alternative Text</h2></header>
      <p>Alternative text for images allows people with vision impairments hear a description of the image using their screen reader.</p>
      <p>Alternative text is achieved using the alt attribute inside the img tag. Here is an example:</p>
      <pre><code>
      &lt;img src="/image.jpg" alt="Black cat with white markings on fur stretched out waiting for her belly rubs"&gt;</code></pre>
      <p>You may leave out an alternative attribute if the image's caption is description enough.</p>
    </section>
    <section class="main-section" id="Audio_Elements">
      <header><h2>Audio Elements</h2></header>
      <p>Audio elements are used to wrap sound content together. The controls attribute tells to browser to display default buttons, such as play and pause. A transcript should be attached for users with auditory impairments can access the content.</p>
    </section>
    <section class="main-section" id="Figure_Elements">
      <header><h2>Figure Elements</h2></header>
      <p>To make a chart or other visual representation accessible to all users use the figure and figcaption tags. Here is an example:</p>
      <pre><code>
      &lt;figure&gt;
        &lt;img src="cat-poll.jpeg" alt="Poll results of number of cats."&gt;
      &lt;figcaption&gt;
        A poll of how many cats you own shows that most people own 3 cats,      
        followed by 1 cat in second place, 2 cats in third, and 4 or more in last place.
      &lt;/figcaption&gt;
      &lt;/figure&gt;
      </code></pre>
    </section>
    <section class="main-section" id="Label_Elements">
      <header><h2>Label Elements</h2></header>
      <p>Within a form you should label the descriptor of the form choice. The for attribute of the label tag must tie directly to the id of the form element. Here is an example:</p>
      <pre><code>
 &lt;label for="petname"&gt;Pet name&lt;/label&gt;
 &lt;input type="text" name="petname" id="petname"&gt;
 </code></pre>
    </section>
    <section class="main-section" id="Dates_and_Times">
      <header><h2>Dates and Times</h2></header>
      <p>In the newer HTML5, the date field in a form was introduced. It is helpful to add an expected date format in the label or as a placeholder for older browsers still. Here is a code excerpt for using the date attribute:</p>
      <pre><code>
      &lt;label for="field1"&gt;Choose a date: &lt;/label&gt;
      &lt;input type="date" id="field1" name="field1"&gt;
      </code></pre>
      <p>HTML5 also introduced a time element with a datetime attribute. It provides assesstive devices with a standardized way of stating a time. Below are examples datetime formats to use in a time tag and their meanings:
        <ul>
          <li>1999 means the year 1999</li>
          <li>1999-12 means December 1999</li>
          <li>1999-12-01 means 01 December 1999</li>
          <li>12-01 means 01 December any year</li>
          <li>1999-W10 means week 10 of year 1999</li>
          <li>1999-12-01T08:00 means 01 December 1999 at 8am</li>
          <li>1999-12-01 8:00 also means 01 December 1999 at 8am</li>
          <li>1999-12-01 08:30:45 includes minutes and seconds</li>
          <li>1999-12-01 08:30:45.998 inclues minutes, seconds, and milliseconds</li>
          <li>08:00 means 8am</li>
          <li>08:00-03:00 means 8am in Rio de Janeiro (UTC-3 hours)</li>
          <li>08:00+03:00 means 8am in Madagascar (UTC+3 hours)</li>
          <li>P2D means a duration of 2 days</li>
          <li>PT15H10M means a duration of 15 hours and 10 minutes</li>
        </ul>
      </p>
    </section>
  <section class="main-section" id="Keyboard_Accessibility">
    <header>  <h2>Keyboard Accessibility</h2></header>
    <h3>Accesskey</h3>
    <p>Accesskey can be used to give a shortcut to any element. Here is an example:</p>
    <pre><code>
    &lt;a href="https://home.accessiblewebpagedesign.com" accesskey="h"&gt;Home&lt;a&gt;
    </code></pre>
    <h3>Tabindex</h3>
    <p>Tabindex determines the tab order of elements. Certain elements, like links and form controls, in a page are given a predetermined tab order based on the order they appear in the HTML code. Give your desired tab order by designating a number with the tabindex attribute.</p>
  </section>
  </main>

</body>

<footer>
  <span>All information presented in the site was gathered from FreeCodeCamp.org and W3Schools.com.</span>
</footer>

</html>
              
            
!

CSS

              
                body,html {
  font-family: "Raleway", sans-serif;
  background: #FAFAFA;
  color: black;
}


/**-----------
N A V B A R
--------------**/

#navbar {
  position: fixed;
  width: 300px;
  top: 0px;
  left: 0px;
  height: 100%;
 background-color: #ddd;
  border-right: groove;
  border-width: thick;
  border-color: #FF8A8A;
}

#navbar ul{
  height: 80%;
  overflow-y: auto;
  overflow-x: hidden;
}

#navbar li {
  font-size: 22px;
  color: #9E0000;
  padding: 8px;
  list-style: none;
  position: relative;
  left: -10px;
  width: 90%;
  text-align: right;
}

#navbar a {
  cursor: pointer;
  text-decoration: none;
}


#navbar li:focus,
#navbar li:hover {
  color: #9E0000;
  border: groove;
  border-color: #3035FA;
  border-width: 4px;
  font-size: 26px;
}

#navbar header {
  font-family: "Raleway", sans-serif;
  font-size: 24px;
  color: #9e0000;
  background-color: #FAFAFA;
  padding: 8px;
  text-align: right;
  font-weight: bold;
}



/***---------
M A I N - D O C   S T Y L E 
--------*****/

main {
  position: relative;
  margin-left: 325px;
  margin-top: 0px;
  overflow-y: auto;
  overflow-x: hidden;
  line-height: 2;
}


#main-doc h2 {
  font-size: 18px;
  font-family: "Raleway", sans-serif;
  text-decoration: underline;
}

#main-doc h3 {
  font-size: 16px;
  font-family: "Roboto", sans-serif;
padding: 0px;
  
}

#main-doc p,
#main-doc li {
  font-size: 16px;
  font-family: "Roboto", sans-serif;
  list-style: none;
}

#main-doc li:before {
  content: "~"; /* Custom bullet */
  padding-right: 8px;
  color: ; 
}

#main-doc a {
  text-decoration: none;
  color: #3035FA;
}

#main-doc a:hover, #main-doc a:focus {
  text-decoration: underline;
  font-weight: bold;
}


.main-section {
  border-bottom: double;
  border-color: #FF8A8A;
  border-width: 10px;
  padding-top: 25px;
}


/***------------
O T H E R   S T Y L I N G S 
------------***/

code {
  background-color: #EDEDED;
 border-radius: 5px;
   display:block;
    text-align: left;
  position: relative;
  padding: 8px;
  margin: 5px;
  font-size: 16px;
  font-family: "Roboto", sans-serif;
}

footer {
  display: float;
  text-align: right;
  padding: 10px;
}

@media screen and (max-width: 800px) {
  #navbar {
  position: relative;
  top: 0px;
  height: 120px;
    width: 100%;
  border-bottom: groove;
  border-width: thick;
  border-color: #FF8A8A;
    border-right: none;
    padding-bottom: 40px;
  }
  
  main {     
  position: relative;
  margin-left: 0px;
    padding: 10px;
    margin-top: 0px;
  }
  
  #navbar header {
    text-align: center;
    border-bottom: solid;
    font-size: 22px;
  }
  
  #navbar li {
    font-size: 20px;
  }
}
              
            
!

JS

              
                

              
            
!
999px

Console