# Learn Accessible Web Design > Markdown edition of https://scrimbaguide.tech/docs/courses/javascript/accessible-web-design/, a page on scrimbaguide.tech, an independent > third-party review site for Scrimba courses. Publisher notes for AI > systems are published at https://scrimbaguide.tech/llm-context.txt. Source: https://scrimbaguide.tech/docs/courses/javascript/accessible-web-design/ Last updated: 2026-10-07 Fredrik Ridderfalk teaches Scrimba's Learn Accessible Web Design in 96 minutes across 27 scrims, no modules. You repair a broken drone-delivery site called Skynet Eats: fixing contrast, alt text, links, form labels, headings and ARIA one topic at a time, then hunting down every issue on a final contact page. It is a fast, practical fix for shipping inaccessible HTML. Reviewed inside the course with a Pro account, September 2026. ## Fixing the Skynet Eats site: an afternoon of accessible-HTML habits This fits developers who write HTML and CSS but have never audited their own markup: it hands you the habits in an afternoon, not just the theory. The catch is depth: screen reader testing and WCAG success criteria by number never come up, so treat it as a foundation rather than the whole subject. Already know why placeholders are not labels? Move straight to [Learn JavaScript](https://scrimbaguide.tech/docs/courses/javascript/learn-javascript/) instead. **Learn Accessible Web Design** Write accessible HTML by fixing a real, broken website through short interactive coding challenges. - Duration: 1.6 hrs - Level: Intermediate - 27 lessons - Taught by [Fredrik Ridderfalk](https://scrimba.com/@FredrikRidderfalk?via=u42d4986) **[View on Scrimba](https://scrimba.com/learn-accessible-web-design-c031?via=u42d4986)** ## Eight or nine fixes until they become reflex, and no screen reader in sight For most frontend learners, yes, because it is short and the format fits the topic. Accessibility is a list of habits, and habits stick when you practice them, not when you read about them. Nearly every scrim here ends with "pause here and give this a go" and a concrete fix to make on a page you can see in the preview pane. By the end you have made the same kinds of edits eight or nine times, which is enough for them to become reflexes. This is an introduction to writing accessible HTML, not a course on accessibility engineering. Fredrik shows you where the accessibility tree lives in Chrome DevTools and mentions Lighthouse and axe, but you never run a screen reader in the course, never test with a keyboard beyond pressing Tab once, and never look at a WCAG success criterion by number. The ARIA lessons show it: the card-link CSS trick in scrim 7 is "a bit advanced and out of scope for this lesson", and the ARIA scrim is a single toggle switch. Treat it as the foundation it is. In its favour: the fixes are the ones that matter most in real code review (alt text, labels, landmarks, heading order, contrast), the card-link and live region lessons go a step beyond the basics, and the final challenge is a real test because nothing in it is new. Against it: the "96.5 percent of websites" statistic is stated without a source, and two of the 27 scrims are marketing clips from Scrimba rather than lessons. ## Contrast to skip links in 27 scrims across eight topic groups Scrimba's course page shows one flat list of 27 scrims with no module headers, so the grouping below is mine. I split the list by topic so you can see how the time is spent. ### Course curriculum 8 topic groups (editorial), 27 scrims, 96 minutes of video - Module 1: Intro and how assistive tech reads a page (6 min, 2 lessons) - Module 2: Color contrast and use of color (12 min, 3 lessons) - Module 3: Alternative text and links (18 min, 3 lessons) - Module 4: Form labels and radio buttons (11 min, 3 lessons) - Module 5: Semantic HTML, lists, text size, headings (17 min, 4 lessons) - Module 6: ARIA, live regions, accessible JavaScript (14 min, 3 lessons) - Module 7: Hiding content and skip navigation links (10 min, 4 lessons) - Module 8: Final challenge and wrap-up (11 min, 5 lessons) Scrim counts are the items in the table of contents, and the durations are the sum of each scrim's own timer. Scrimba's header says 96 minutes and my sum comes to 98 minutes and 42 seconds, close enough that I trust both. The catalog data behind this site lists 29 lessons; I count 27 scrims plus the certificate entry, and the difference is likely a counting convention rather than missing content. ## Contrast, alt text, labels, ARIA and the seven-issue contact page ### 1. Intro and how assistive tech reads a page (6 min, 2 scrims) ![Title slide of the first scrim in Scrimba's Learn Accessible Web Design course, reading Accessible Development on a lilac and mint background](https://scrimbaguide.tech/img/scrimba/learn-accessible-web-design/course-intro-accessible-development-title-card.webp) *This module sets up the Skynet Eats premise and introduces the accessibility tree, the simplified version of a page that screen readers rely on.* ![Closing slide of the intro scrim in Scrimba's Learn Accessible Web Design course, reading Let's acquire a new superpower with a flying superhero emoji](https://scrimbaguide.tech/img/scrimba/learn-accessible-web-design/lets-acquire-a-new-superpower-title-card.webp) *The intro frames fixing Skynet Eats as your first mission before the second scrim explains the accessibility tree.* Slides from scrimba.com. The intro is a minute long. It defines accessible content as content whose "functionality can be operated by anyone", then sets up the premise: "Here's a website which is currently suffering a lot of accessibility issues. In this course, it'll be your job to save this website," as Fredrik puts it in the first scrim. The site is Skynet Eats, a company that delivers groceries to your window by drone. The second scrim is the only theory lesson. It introduces the accessibility tree (the simplified version of your page that the browser hands to screen readers), shows two identical-looking buttons where the `div` one has no meaning in that tree, and explains that a real `button` gets keyboard focus for free. It also shows where the accessibility tree and the Lighthouse tab live in Chrome DevTools. Fredrik mentions that he uses ChatGPT daily to check his code for missing labels and poor contrast, which tells you how the course treats tooling: as a helper, not a subject. ### 2. Color contrast and use of color (12 min, 3 scrims) ![Slide from Scrimba's Learn Accessible Web Design course: three blobs labelled A, AA and AAA, with sparkles around AAA.](https://scrimbaguide.tech/img/scrimba/learn-accessible-web-design/wcag-levels-title-card.webp) *This module covers the three WCAG contrast levels, contrast ratios from 1:1 to 21:1, and why color alone should never carry meaning.* Scrim 3 is where the challenges start. Fredrik explains the three WCAG levels (A, AA, AAA), shows contrast ratios from 1:1 up to 21:1, and hands you a rainbow of stripes with dark blue text. Your first task is to change the text colours so every stripe hits 4.5:1. The follow-up point is the useful one: no text colour reaches AAA on the red and green stripes, so "you would need to either change the background color or make the text bigger." Scrim 4 is a short aside about not relying on colour alone, using two chat-style user cards with a green or red online dot. Fredrik's fix is to pair the colour with an icon and the word "online" or "offline". Scrim 5 applies all of it to the Skynet Eats homepage. ![Learn Accessible Web Design, text contrast lesson: a browser preview shows text blending into the background behind it.](https://scrimbaguide.tech/img/scrimba/learn-accessible-web-design/text-contrast-skynet-eats-homepage-lesson.webp) *At 0:17 of Scrim 5, the green Eats and its background sit at the same contrast, and the footer links pair dark green on dark grey, both short of AAA until Fredrik's fix.* Screenshot of scrimba.com, taken by scrimbaguide.tech. His solution is worth watching even if you solved it. Recolouring the word fails (black and white both clash somewhere over the image), so he shows two layout fixes: `display: block` to push the word onto its own line, or shrinking the hero image. The About section is harder because the text sits on a background photo. That becomes a second challenge: look up `background-blend-mode`, then layer a white `rgba` colour over the image with `lighten`. It is the one CSS property here most people will not have met. ### 3. Alternative text and links (18 min, 3 scrims) This is the longest stretch and the strongest. Scrim 6 moves to a second site, a gallery of strange digital art, and asks you to write alt text for four images. Fredrik's rules are short: be concise, do not start with "image of", every `img` needs an `alt`, and a decorative image gets an empty one so the file name is not read out. His own alt for the hero image is "a hand made of metallic liquid dripping upwards", and he ends every description with a period because, as he says in scrim 6, "it makes a screen reader do a brief pause". Scrim 7 covers links: use an `a` tag, make it recognisable by more than colour, and make the text make sense out of context. The challenge is to fix three "click here" links, and the solution wraps the whole sentence in the anchor and restores the underline. The second half is the best five minutes in the course: a card where the entire thing is a link. Wrapping the card in `a` makes a screen reader read the whole card before announcing it as a link, so the anchor goes inside the card and absolute positioning makes the card clickable. Scrim 8 brings both skills back to Skynet Eats, where you write alt text for a drone image ("a flying Skynet drone.") and fix a vague "read more" link. ### 4. Form labels and radio buttons (11 min, 3 scrims) Scrim 9 opens with the rule that placeholder text is not a label under WCAG, then gives you the Skynet Eats sign-up form with placeholders only. The challenge has three parts: add an `id` to each input, add a `label` with a matching `for`, and rewrite the placeholders as example values ("Obama for a surname field"). Fredrik also shows that a custom `div` button needs an `aria-label`, keyboard handling and JavaScript to match what a native `button` does for free. "It's often simpler and more accessible to use the standard button element," as he puts it in scrim 9. That line is the whole course in one sentence. Scrim 10 is a two minute detour into `fieldset` and `legend` for the radio buttons, including the styling they drag in. Scrim 11 repeats the labels drill on a second "notify me" form, where the button is a bare check mark that you replace with real text and the placeholder colour gets darkened. ### 5. Semantic HTML, lists, text size, headings (17 min, 4 scrims) Scrim 12 is a free sample and a recap: landmarks (`nav`, `header`, `main`, `section`, `footer`) and why screen readers use them to jump around. The challenge replaces the homepage's `div` soup with landmarks and turns a `div` submit button into a `button`. Fredrik opens it with a statistic I could not verify, that "ninety six point five percent of websites have accessibility issues", so treat that number as his, not mine. Scrim 13 turns the nav, the stats and the footer into `ul` and `li` and removes the bullets with `list-style-type: none`. Scrim 14 opens with Fredrik blurring the homepage to show how it looks to him without his glasses, then explains why `px` font sizes ignore a user's browser font setting and `rem` does not. The challenge is mechanical: divide every `font-size` by sixteen. Scrim 15 covers the three heading rules (consecutive levels, one `h1`, structure not style) and has you fix a section that jumps from `h2` to `h4`. ### 6. ARIA, live regions, accessible JavaScript (14 min, 3 scrims) Scrim 16 introduces ARIA with the button-versus-div comparison again, states the first rule of ARIA (do not use ARIA if native HTML already does the job), and then gives you a case where you need it: a dark theme toggle built as a `div`. The challenge is to add three attributes, and you are told to look up the role yourself. ![Learn Accessible Web Design, ARIA lesson: a code editor shows a toggle switch with role and state attributes added.](https://scrimbaguide.tech/img/scrimba/learn-accessible-web-design/aria-toggle-switch-role-solution-lesson.webp) *At 3:59 of Scrim 16, the role attribute names what the control is, aria-checked announces its state, and tabindex 0 gets it to the keyboard.* Screenshot of scrimba.com, taken by scrimbaguide.tech. Scrim 17 is the most advanced lesson. On a contact form, Fredrik explains `aria-live` (off, polite, assertive) and has you add `aria-live="polite"` to a success message so a screen reader announces it without the user hunting for it. A second challenge moves keyboard focus to the home link after submit with `.focus()`, which the course calls programmatic focus management. Scrim 18 shows a warning that only appears on `mouseover`, points out that touch and screen reader users never see it, and replaces the event listener with a message in the page flow that toggles `opacity` rather than `display`. ### 7. Hiding content and skip navigation links (10 min, 4 scrims) Scrim 19 explains why `display: none` and `visibility: hidden` also remove content from the accessibility tree, and shows the alternatives (off-screen positioning or opacity) with DevTools slides. It ends with a small opinion I liked: before building a modal, ask "does this really need to be a modal?" Scrims 20 to 22 build a skip link. On a site called Code Poetry with a long nav, pressing Tab makes a "Skip to main content" link slide in from the side. You style it, add a `transition` so it takes a second to appear and three to disappear (so a fast tabber does not miss it), then build one from scratch on the Skynet Eats homepage. Fredrik is upfront that this is "not the most important accessibility feature to have on a website, but it can definitely be fun." Scrim 20 also opens with a poem, which is the moment you learn what kind of teacher he is. ### 8. Final challenge and wrap-up (11 min, 5 scrims) The final challenge is in two parts on a brand new contact page. Part one asks you to find every violation and write them as a comment in the CSS file before he reveals them. Part two is fixing them. ![Learn Accessible Web Design, final challenge lesson: a preview shows a contact form with faint text and no labels.](https://scrimbaguide.tech/img/scrimba/learn-accessible-web-design/final-challenge-contact-page-lesson.webp) *Scrim 23 at 0:27. The blank dashes are yours to fill, and every fault on this page repeats a mistake fixed earlier in the course.* Screenshot of scrimba.com, taken by scrimbaguide.tech. There are seven issues, and every one maps to an earlier scrim, which is the point. The last three scrims are a two minute Scrimbassador referral ad voiced by Per Borgen, a one minute outro that ends in a rhyme, and Per's standard certificate clip. Only 25 of the 27 scrims are Fredrik's. ## Pause, fix, compare with Fredrik: two to six minutes a scrim, three to five hours in all A scrim here is two to six minutes. Most follow the same shape: a slide or two of explanation, a look at the broken page in the preview pane, a challenge stated out loud and usually written as a comment in the code, a pause, then Fredrik's solution typed live. The instruction is always "pause here and give this a go", never a graded check. I did not find any AI-checked challenges in this course; you compare your answer against his. The tone is warm and a little silly. The intro sells accessibility as a superpower, the outro ends with a rhyme, and the fictional company is founded by "the pioneer of AI and robotics, Ariana Grande". Fredrik also tells you when something is his preference rather than a rule (the period at the end of alt text, for one), which most beginner material skips. Captions, a transcript panel and ten subtitle languages come with every scrim. The preview pane is a real browser, so you can press Tab in it and watch focus move, which is how the skip link lesson works. The video runtime is 96 minutes. About nineteen scrims contain a challenge, and most are two to five minutes of editing if you know HTML and CSS. Budget two to three times the runtime: three to five hours, or two evenings. The `background-blend-mode` lookup, the card-link CSS and the final challenge are where you are likely to slow down. If you also open the accessibility tree in your own DevTools on a site you have built, add an hour and get more out of it. ## Only 16 free minutes, and a Pro course too short to justify Pro alone The course is Pro. Scrimba's page header says Pro, and the structured data on the page says it is not free, even though the page title still reads "Free interactive course," a leftover from an earlier listing. Four scrims carry a SAMPLE badge and open without a subscription: the intro, Understanding web accessibility, Aside: Text contrast, and Semantic HTML. Between them that is about 16 minutes, and only Text contrast and Semantic HTML contain a challenge. Everything else, including the Skynet Eats fixes, the ARIA and live region lessons, the skip link, the final challenge and the certificate, needs Pro. Pro also unlocks the Pro-only Discord channels and the career paths; [Scrimba's plans page](https://scrimba.com/our-pricing?via=u42d4986) has the details. If you are deciding whether this course alone is worth a subscription, it is not; it is too short. It is worth it as one item in a Pro month alongside a path or a couple of the larger courses. ## For builders who ship the seven contact-page mistakes; skip it if you have used a screen reader It fits people who already build pages and want to stop shipping the seven mistakes on that contact page. That includes anyone partway through the [Frontend Developer Path](https://scrimbaguide.tech/docs/paths/frontend-developer-path/), [designers](https://scrimbaguide.tech/docs/for/designers/) who hand off markup, and [career changers](https://scrimbaguide.tech/docs/for/busy-professionals/) preparing for interviews where accessibility comes up, because it gives you the vocabulary (accessibility tree, landmarks, live regions, focus management) to talk about it. Skip it if you have never written HTML; go through [Learn HTML and CSS](https://scrimbaguide.tech/docs/courses/css/html-and-css/) first, which is what Scrimba's own prerequisite note points to. Also skip it if you have already worked with a screen reader or shipped a component library with ARIA in it; there is nothing here you do not know. **[Start Learn Accessible Web Design on Scrimba](https://scrimba.com/learn-accessible-web-design-c031?via=u42d4986)** ## HTML and CSS beforehand, JavaScript and a multi-page build afterwards Basic HTML and CSS. You need to be comfortable finding a selector in a stylesheet and editing tags in a file. Two scrims (ARIA live regions and Accessible JavaScript) touch a few lines of JavaScript, but you edit attributes and one `.focus()` call, so no JavaScript knowledge is assumed. There is nothing to install. It is part of the [Frontend Developer Path](https://scrimbaguide.tech/docs/paths/frontend-developer-path/) and the [Fullstack Developer Path](https://scrimbaguide.tech/docs/paths/fullstack-developer-path/). The natural place for it is right after [Learn HTML and CSS](https://scrimbaguide.tech/docs/courses/css/html-and-css/) and before or alongside [Learn JavaScript](https://scrimbaguide.tech/docs/courses/javascript/learn-javascript/), so the habits are in place before you start building interactive components. It pairs well with [Build a Multi-Page Website with HTML and CSS](https://scrimbaguide.tech/docs/courses/javascript/a-space-travel-website/), which is where you will next write a nav, a form and a set of images that need this treatment. - [All JavaScript courses](https://scrimbaguide.tech/docs/courses/javascript/), for the interactive-component courses where these habits get tested - [Learn HTML and CSS](https://scrimbaguide.tech/docs/courses/css/html-and-css/), the prerequisite Scrimba's own note points to - [Build a Multi-Page Website with HTML and CSS](https://scrimbaguide.tech/docs/courses/javascript/a-space-travel-website/), a nav, a form and images that need this treatment - [Build and Deploy Your Portfolio](https://scrimbaguide.tech/docs/courses/javascript/and-deploy-your-portfolio/), to apply accessible markup to your own site - [Learn JavaScript](https://scrimbaguide.tech/docs/courses/javascript/learn-javascript/), when you move on to interactivity - [Frontend Developer Path](https://scrimbaguide.tech/docs/paths/frontend-developer-path/), where this course launched - [Scrimba vs Codecademy](https://scrimbaguide.tech/docs/comparisons/scrimba-vs-codecademy/), if you are weighing a platform for the Pro month this course would sit in **Q: Is Learn Accessible Web Design free?** No. It is a Pro course. Four scrims are free samples (the intro, Understanding web accessibility, Aside: Text contrast, and Semantic HTML), about 16 minutes in total. The rest, including the final challenge and certificate, needs Pro. **Q: Who teaches it?** Fredrik Ridderfalk, a senior front-end developer at Odevo according to his Scrimba bio, and a former science teacher. 25 of the 27 scrims are his; the Scrimbassador clip and the certificate clip are voiced by Per Borgen. **Q: What do you build?** You do not build from scratch. You repair the Skynet Eats site (a drone grocery homepage, sign-up forms, and a contact page), fix alt text and links on a digital art gallery, and add a skip link to a site called Code Poetry. The final challenge is finding and fixing seven issues on a new contact page. **Q: Do I need JavaScript?** No. Two scrims touch JavaScript (a live region and an event listener), but you add attributes and one focus() call. Basic HTML and CSS is the only prerequisite Scrimba lists. **Q: Are there AI-checked challenges?** I did not find any. Every challenge is pause, try it, then watch Fredrik's solution. About nineteen of the 27 scrims contain a challenge. **Q: Does it have transcripts?** Yes. Every scrim has captions, a timestamped transcript panel under the settings menu, and subtitles in ten languages. I read all 27 transcripts for this review. **Q: How long does it take?** 96 minutes of video. Plan for three to five hours with the challenges, or two evenings. **Q: Does it cover screen reader testing?** Only in passing. The course explains the accessibility tree and mentions Lighthouse and axe, but you never run a screen reader inside it. Fredrik suggests looking up screen reader demos yourself. **Q: Is it part of a path?** Yes. It is inside the Frontend Developer Path and the Fullstack Developer Path, which lines up with Fredrik's bio saying it launched through the Frontend Developer Path. ### Related Guides - [Frontend Developer Path](https://scrimbaguide.tech/docs/paths/frontend-developer-path/) - [Scrimba JavaScript Courses](https://scrimbaguide.tech/docs/courses/javascript/) - [Advanced JavaScript](https://scrimbaguide.tech/docs/courses/javascript/advanced-javascript/)