Build Quincy's Job Tips Page - Step 12

HTML-CSS
1

Tell us what’s happening:

My preview shows the first

element to be ok. Any suggestions?

Your code so far

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Quincy's Tips for Getting a Developer Job</title>
  </head>
  <body>
    <h1>Quincy's Tips for Getting a Developer Job</h1>
    <p>
      Learning to code is hard, but as Quincy Larson says,
      <q cite="https://www.freecodecamp.org/news/learn-to-code-book/">You can become a developer.</q>
    </p>

    <main>
      <section>
        <h2>Envisioning Success</h2>
        <blockquote cite="https://www.freecodecamp.org/news/learn-to-code-book/">
          Can you imagine what it would be like to be a successful developer? To have built software systems that people rely upon?
        </blockquote>
        <p cite="https://www.freecodecamp.org/news/learn-to-code-book/">
          —Quincy Larson, <cite>How to Learn to Code and Get a Developer Job [Full Book]</cite>
        </p>
      </section>
      <section>
        <h2>Importance of Networking</h2>

<!-- User Editable Region -->

        <blockquote cite="https://www.freecodecamp.org/news/learn-to-code-book/">
<p>1. So much of getting a job is who you know.</p>
<p>2. It's OK to be an introvert, but you do need to push your boundaries.</p>
<p>3. Create GitHub, Twitter, LinkedIn, and Discord accounts.</p>
<p>4. Go to tech meetups and conferences. Travel if you have to.</p>
        </blockquote>

<!-- User Editable Region -->

      </section>
      <section>

      </section>
    </main>
  </body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36

Challenge Information:

Build Quincy’s Job Tips Page - Step 12

2

The numbers, 1,2,3,4 are not part of the highlighted text in the instructions. It looks a bit misleading maybe, but if it’s not highlighted, don’t include it.

There is another way to do a numbered list in HTML

3

I would not have been able to figure this one out without your sighted help. I rely on NVDA. So, many thanks! I’ll check NVDA Preferences to see if there is a way to be notified of what you are visually seeing.

3 Likes
4

Ok thanks for letting me know.

The numbers here are not entirely necessary for the instructions so maybe they should be removed. I’ll open an Issue for this.

Here is a post with some guidance on using NVDA with freeCodeCamp, but it does not include anything specific for highlighted text unfortunately:

https://forum.freecodecamp.org/t/how-to-get-css-and-html-in-the-code-editor-on-free-code-campdesign-a-business-card-design-a-business-card/749609/20?u=pkdvalis

5

if it’s an accessibility issue we can certainly open an issue to remove the numbers at the start of each line, can you open the issue @pkdvalis ?

1 Like
6

I can. However, I was thinking it’s often pretty important to be able to identify the highlighted text in the instructions.

Hopefully there’s a setting for that.

Highlighted text seems to use the <code> HTML tag.

7

Here’s what I found from a google search: Yes, NVDA can notify you of highlighted or selected text on a web page in browsers like Chrome, Firefox, and Edge, although it behaves differently than in word processors. NVDA primarily identifies text that you have actively selected (highlighted) using keyboard commands rather than text that is pre-styled with a highlight color on a website.

WCAG 1.4.1 Use of Color

Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. So, hopefully the powers that are in charge of design for this and possibly other such conditions across FCC user instructions will allow for those of us relying on screen readers and include a note providing clarity.

8

That’s what I found too, references to text highlighted or selected. This text in contrast is differentiated by using the <code> HTML element.