Visual Design/Accessibility Questions, Resources, and Discussion (January 2018 Cohort)

@yoizfefisch I think it means don’t wrap the <u> tag around the entire div like this:

<!-- DON'T DO THIS! -->
  <u>
    <div class="cardText">
      <h4>Google</h4>
      <p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at <strong>Stanford University</strong>.</p>
    </div>
  </u>

I’m not sure why the wording warns about this when it seems kind of obvious not to do it. Did anyone here accidentally wrap the <u> tag around the entire div, like in my example above? If so, what was the reasoning?

2 Likes

I found the accessibility challenges to be very well done and enlightening! One tool I’ve been using a lot lately is the WAVE Accessbility Extension for Firefox. I find it handy to be able to click on the icon and have the page I’m viewing reviewed by the WAVE tool. No copying and pasting and it works for local sites too! I HIGHLY recommend everyone use this tool on their own projects prior to submitting to the cohort … either as a browser extension or via the browser at the WebAIM site – link is in the first post above.

Colors

Also, in the Applied Accessibility: Avoid Colorblindness Issues by Carefully Choosing Colors that Convey Information challenge, it states the following in the note towards the end:

Some online color picking tools include visual simulations of how colors appear for different types of colorblindness. These are great resources in addition to online contrast checking calculators.

  • Paletton.com is the tool that I use that simulates how colors appear to different types of colorblindness.

  • Coolors.co is another tool. I don’t think it deals with colorblindness, but it’s a helpful tool nonetheless. I found the tutorial to be helpful.

  • WebAIM Contrast Checker is the color contrast tool I use when I’m reviewing projects.

  • Colorsafe.co - I found this one just now and think I’ll end up using it in the future because it only shows colors that pass the WCAG color guidelines.

  • List of web safe colors for links that fit the following criteria on black and white backgrounds:

    • A 4.5:1 contrast between the non-link text color and the background.
    • A 4.5:1 contrast between the link text color and the background.
    • A 3:1 contrast between the link text color and the surrounding non-link text color.

    This WebAIM blog post on link colors has info about this in case you’re interested in more details.

    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.

  • I hadn’t considered this previously, from the Applied Accessibility: Give Links Meaning by Using Descriptive Link Text challenge:

    Having a list of “click here” or “read more” links isn’t helpful. Instead, you should use brief but descriptive text within the a tags to provide more meaning for these users.

That’s a lot of links and extra reading. I don’t think it’s necessary, but I think it’s worth it if one is interested in understanding more about making sites accessible to more people.

4 Likes

Accessibility is a topic that I can’t seem to learn enough about fast enough.
It’s wonderful that FCC dedicated an entire section to raise awareness.

The tool you mentioned is also available for Chrome.
search for the extension called WAVE Evaluation Tool
I can’t wait to try it.

I also enabled the image description option for Twitter. Now if I include an image with a tweet, I can add a description in field at the bottom of the image. It doesn’t show on screen, but is available for screen readers, for example.

3 Likes

Even though Visual Studio is great for writing actual programs, I found that it’s a bit too much for web development. I like Visual Studio Code for making web pages and stuff.

1 Like
Yikes! -- Semantic HTML => It's `<article>` versus `<section>` that confuses me the most.
Just when I think I've got a handle on the correct usage, FCC includes the following:
<main>
    <section id="stealth">
      <h2>Stealth &amp; Agility Training</h2>
      <article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
      <article><h3>No training is NP-complete without parkour</h3></article>
    </section>
    <section id="combat">
      <h2>Combat Training</h2>
      <article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
      <article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
    </section>
    <section id="weapons">
      <h2>Weapons Training</h2>
      <article><h3>Swords: the best tool to literally divide and conquer</h3></article>
      <article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
    </section>
  </main>
I would have used `<article>` when FCC used `<section>` and vice versa. The example FCC gave was:
>*>   For example, if a book is the`<article>`, then each chapter is a `<section>`.    <*<

So you agree with FCC choices? How do you separate these two closely related elements? Thx.
1 Like

I know the post regarding Semantic HTML article vs section is not correctly redacted, but you get the idea.
I’m too tired to fiddle with making it perfect… sorry

Have you guys finished this section of the cohort. I am nowhere near done. Cant seem to concentrate

I’m at the <audio> bonfire. So that’s about 1/3 through the Accessibility section.

i’m also there, luckily i started early so was ahead. I couldn’t access FCCbeta to continue. I could see the page but when i clicked on the section heading i would get “we incurred an error” for both chrome and ff for the whole of last week.

I agree that the accessibility section has been highly informative. I remember reading about some of the basic stuff a while ago but it was put like it was nice to include, rather than very strongly recommended ie important.

hopefully i don’t fall too far behind. You guys are amazing with the resource recomendations! there’s so much info out there so later on i can come back and refresh

I do agree with the current FCC choices, here’s why:

The lesson explains the difference between these elements as follows:

<div> - groups content
<section> - groups related content
<article> - groups independent, self-contained content

The example website in the lesson is a blog’s landing page.
The content in each of the <article> elements are blog posts and are therefore “self-contained content”. Each of the blog posts actually resides on it’s own page in a full website and is only shown alongside others on the landing page.
Within each <article> element you can also add a <p> element to display the first paragraph of the blog post. That is still part of the same article.
In each of the <section> elements is a set of “related content”, in this case multiple blog posts about the same topic along with a <h2> heading that describes the topic.

1 Like

cheers Yoizfefisch, I have found the same info about Ids that’s why i’ve asked. I wasn’t using Ids as selectors but when fcc doesn’t let me go I did some changes and I have got some styling by ID. Code pen doesn’t show any errors(double checked right now). Doesn’t matter really, good practice is important, but if you ask 5 people about something you could get 3 different answers.

Thanks for helping me sort through that doubt! I’m determined to include accessibility support.

hi
i know we moved on the next topic but i found this interesting article; The Engine Driving Web Accessibility Standardization

1 Like

Differences between <strong>, <b>, <em> and in HTML5


<strong>

  • indicates that its contents have strong importance, seriousness, or urgency.
  • It is also used for notes or warning.
  • It renders using a bold font weight.

<b>

  • is used to draw attention without indicating a higher level of importance; just highlighting key words

<em>

  • represents stress emphasis of its contents (like spoken emphasis does: “I love carrots” vs. “Ilove carrots”)

<i>

  • represents a span of text in an alternate voice or mood,
  • used for technical terms, idiomatic phrases, phrases from other languages, thoughts

More here:
(https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong)
(https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-strong-element)

2 Likes

Really appreciate this; I’m currently doing the beta course as a refresher after some time away from coding. I remember last time I was trying to get to grips with semantic elements to use I ended up really tangled and confused. Your explanation is really clear and concise, and think I’ll be able to remember it going forwards!

Hope people don’t mind my comments popping up on previous topics! Am trying to steam through to catch up. Have entered a minor edit to add the W3 orgs main accessibility page as it has lots of useful links (including one already listed), as well as a nice section on the whys. whats, and hows of the issue.

@camper great job with the thoughts and links you’ve been putting in the threads, definitely inspiring stuff

Now, I’ve got to get back to the grind :slight_smile:

2 Likes

i certainly appreciate all inputs.
I have fallen way behind due to school taking up all my energy. but even so, i will most definitely come back to previous topics as a refresher and even later discussions/info is most helpful

2 Likes

HI, did anyone have problems submitting code for the “Improving Accessibility of Audio Content” section?

I keep failing on requirement
ensure your audio element has a closing tag
with an error msg of
cannot read property 'length' of null

I’ve tried placing the audio section between the <p> and </p> as well as after, with the same result. Anyone spot the issue?

POSSIBLE SPOILERS INSIDE
  <header>
    <h1>Real Coding Ninjas</h1>
  </header>
  <main>
    <p>
      <audio controls>
        <source src="https://s3.amazonaws.com/freecodecamp/screen-reader.mp3" type="audio/mpeg"/>
      </audio>A sound clip of Zersiax's screen reader in action.</p>
  </main>
</body>
<body>
  <header>
    <h1>Real Coding Ninjas</h1>
  </header>
  <main>
    <p>A sound clip of Zersiax's screen reader in action.</p>
      <audio controls>
        <source src="https://s3.amazonaws.com/freecodecamp/screen-reader.mp3" type="audio/mpeg"/>
      </audio>
   
  </main>
</body>

@silentgamelan The second example you have is the correct way to do this:

<body>
  <header>
    <h1>Real Coding Ninjas</h1>
  </header>
  <main>
    <p>A sound clip of Zersiax's screen reader in action.</p>
      <audio controls>
        <source src="https://s3.amazonaws.com/freecodecamp/screen-reader.mp3" type="audio/mpeg"/>
      </audio>
   
  </main>
</body>

I also get the error you’re getting. I didn’t get this error when I did this challenge initially, or if I did, I chalked it up to the beta status and forgot to follow up. It might be helpful to create an issue about this. If you’re interested in creating the issue, read through and follow the fCC Contribution process.

1 Like

Thanks, will do!
Still have a comment to put on the other issue raised by yoizefefish, and an entry for the <label> tag in the guide too… my to-do list keeps growing :slight_smile: