How to get css and html in the code editor on free code campDesign a Business Card - Design a Business Card

HTML-CSS
1

hi, totally blind. doing the business card. now the html is fine, when i then paste or type in the css code, it fails. and i have found out cannot have both css and html files in the same window. so how to get this to pass, i know the css works, because i typed it up in visual studio code on my local machine, then pasted it. so any jaws screen reader users on here. using google chrome, windows 11 pro and jaws 2025. and then theres the index.html panel which i can collapse or expand. the styles. css file and the same interface. so how to get this to work. wonder if an accessibility issue. and then did try then pasting the html and then pasting in and the css. also so should i then just type in the css. but cannot go in the same editor. so how to get the css to pass using a screen reader when totally blind and cannot see. did do the last work shop and had both html and css and it passed. so any one able to help.
marvin.happening:
hi. doing the business card and using jaws for windows. it is failling the css. the html is fine. so how to get this to work.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="styles.css" />
        <meta charset="UTF-8">
        <title>Digital Business Card</title>
    </head>
    <body>
        <div class="business-card">
            <img class="profile-image" src="https://cdn.freecodecamp.org/curriculum/labs/flower.jpg" alt="A vibrant flower in full bloom">
            <img src="https://cdn.freecodecamp.org/curriculum/labs/flower.jpg" alt="A vibrant flower in full bloom />"
        <p class="full-name">Marvin Hunkin</p>
        <p class="designation">Software Developer</p>
        <p class="company">@freeCodeCamp</p>
        <hr>
        <p>Email: hunkinmarvin5@gmail.com</p>
<p>Phone: (123) 456-789</p>
<hr>
<a href="">Portfolio</a>
<hr> 
<div class="social-media">
    <a href="https://www.twitter.com">Twitter</a>
    <a href="https://www.linkedin.com">LinkedIn</a>
    <a href="https://www.github.com">GitHub</a>
<h2>Connect with me</h2>
</div>
</div>
</body>
</html>

/* file: styles.css */

Your browser information:

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

Challenge Information:

Design a Business Card - Design a Business Card

2

you have used the HELP button this time, and we can see the code that was in your editor, and it seems that no CSS has been added

when you toggle the “styles.css” button, a new editor to the right of the html one is created, do you have issues reaching this second editor?

3

hi. correct. just tried it either pressing enter, pressing the space bar, tried left clicking using the jaws left click button on a laptop insert 8 . not going to the new editor. have turned on accessibility options. so no way to get to the second editor. unless a keyboard short cut.
marvin.

4

hi. okay able to use the jaws cursor and then hear the editor for css, it does show my css in there, unless then have to paste it, and not liking it. so an accessibility issue. not able to get to the second editor. for css. so dont want to have to wait for days for this to be fixed. thats the issue.
marvin.

5

I am going to open an issue for this

6

hi, good. but how long will it take to fix. the code example raw text has been fixed, but will be in the next deployment . how long does it take to deploy new features or fix accessibility to the whole platform.
marvin.

7

hi, if have to wait for months for this issue to be fixed. no good for us blind students, not able to then complete the challenge because of accessibility issues with the platform. any possability of rmoting into a users account, and then able to then select the editor for that blind student, like me. could be waiting days, weeks and not able to proceed, becasue of the accessibilityc challenges.
marvin..

8

Fixing something is not istantaneous, it takes time, the devs that will work on it will try to fix it as soon as possible

But you have been coding for a bit now, it is impossible to know how long it takes for something to be fixed.

9

hi, okay for the time being, are you able to remote in to my account go to the lab project, and then select the css editor, so then i can then copy and paste, then it may then pass. if not, then stuck. cannot go on, as still got this, a nd with future projects int the workshop and labs, may face the same issue.
marvin..

10

hi, is there a keyboard shortcut to switch editors.
marvin.

11

No, I am not able to remote into your account

And I am not aware of a keyboard shortcut to switch editors

You should not face the same issue with other workshops, you did not have any issue so far

12

You may try to toggle both buttons, index.html and styles.css, you should be able to find the css editor in the same way you usually find the html editor as now there should be only one open

13

hi. no. not able to go to the editor. so either use enter or press space with jaws. maybe you can do an experiment. see if some one who is blind can then use jaws and not able to get to the second editor, not via the keyboard, will try my trackpad and see if i can get it, but i dont think so. so no way to do this, hear the index.html ui is collapsed and the styles.css is expanded, but when i press e to jump to the edit the edit field, the html code is not there and not a blank editor to enter in css. so a accessibility bug. so how to get it to pass. not able to paste css and html in the same window. so an issue with jaws. will try windows narrator and nvda and see if i get a different outcome.
marvin.

14

hi, tried with nvda and windows narrator. no would not move to the second css editor. so a serious bug with accessibility. so what to do, maybe have to remote in and do this for me to move to the css editor. was able to get the html and css editor for design a cafe menu in the workshop and passed. not sure why. maybe the lab setup is different. so going to need your help.
marvin.

15

hi, now i am facing this issue. so i cannot copy and paste html and css in the same editor window. and no way to switch to the css editor. so it does not pass the vallidator. so not sure why. a accessibility issue. so no keyboard short cut and no way to remote in. that means i am stuck still a fix, and cannot move on to other projects. until this is fixed or the next deployment.
what a pity. so that means other blind people may fix the same issue. okay will try my trackpad and see if i can then active the editor. for css. but i dont think so.
marvin.
ps:p can you show me the link to the github support issue you opened.

16

you do not need to do things in order, maybe you can start the JavaScript chapter? it has quite a few sections where a single file is used

meanwhile we are looking into things

17

Hey @BlindVisionMan, thank you for reporting the issue.

We have opened a ticket on GitHub to track the issue. You can follow it here:
multifile editor accessiblity issues · Issue #60704 · freeCodeCamp/freeCodeCamp · GitHub.

I just tried reproducing the issue, and I found that it was not possible to use the Tab key to focus on the second editor. Is this the issue you’re encountering?

You also said you weren’t able to copy and paste the code, but I don’t really follow the issue there. Could you help elaborate on that? Was the issue because you weren’t able to focus on the CSS editor in order to edit? Or you were able to focus on the CSS editor but could not paste the code into the editor?

Please know that we do not neglect accessibility issues. We have a few non-sighted users using the platform, and we’ve been addressing issues as we get bug reports from the users. We didn’t know this editor issue until now.

We’re a small team and as much as we want to address issues quickly, it will take some time. We really appreciate your understanding and patience.

18

I just tested the production site again and I was able to navigate to adjacent editors with the Tab key.

When you’re focusing on an editor, you can press Alt + F1 to open up an accessibility dialog. The dialog shows you more information on the keyboard shortcuts you can use, one of them is:

Pressing Tab in the current editor will insert the tab character. Toggle this behavior by pressing Ctrl+M.

I was able to tab to the other editors by toggling that tab behavior.

Please try again and let me know how it goes on your end.

19

hi, just pressed alt f 1, then control e then control m. does not switch to the css editor. so still a serious bug. some one suggested i do the javascript section while this issue is being investigated. no way to get to the css editor. when i go to the editor window my html code is there and the vallidator will fail. please advice.
marvin.

20

Hi, Marvin!

I’ve been working with freeCodeCamp exclusively using a screen reader for the past several months. I am not the biggest fan of JAWS due to several reasons and use NVDA (but I do have access to JAWS and have tested the following).

I want to preface this with a disclaimer: as an Access Technology Instructor, I have found that JAWS sometimes misrepresents announcements, making it seem as though something was not activated on a webpage when it actually was.

When in a lab (such as the Business Card lab), I use a lot of Single Letter navigation keys and switch between the PC Cursor and forms modes to get thigns done.

I don’t want to be redundant if you are already familiar with Single Letter navigation keys on the Web (e.g. “H” for headings, “E” for Edit Fields, “B” for buttons, etc.), but please allow me to share my workflow with labs.

When I open a lab, I first use Number Row 1 to navigate to the Heading 1 on the page. I then use Shift + B to navigate backward by Buttons until I find the buttons for HTML and CSS. Ensure that both are announced as “expanded”. You can then use “E” to navigate to the Edit fields. The first field will be for HTML, and the second for CSS. You can press SPACEBAR or ENTER to enter forms mode and work on your code. You can then press ESCAPE or NumPad + Plus to switch back to the PC Cursor and return to using Single Letter navigation.

I have been able to successfully work through coding excercises using Narrator, NVDA, and JAWS (though my least preferred way).

Please let me know if this helps or if I need to elaborate further.

I truly hope that this helps.

There is no need to skip ahead, and I do not believe that this is a bug. I have successfully completed all of the HTML and CSS sections using a screen reader with no issues (other than my own coding errors)! :slight_smile:

2 Likes