Submitted almost 3 years ago

Todo-app using css and vanilla javascript

accessibility

Pranshu Sahu•770

@Pranshu-Sahu

A solution to the Todo app challenge

Preview Code

Solution retrospective

completing bonus part , that is , drag and drop functionality was quite difficult but learnt a lot in the process.

I hope to receive help so that I can remove accessibility issue. All suggestion and feedback are welcome.

Code

Please log in to post a comment

Community feedback

Ajayi Michael•400

@Michaelajayi150

Posted almost 3 years ago

Hi there @Pranshu-Sahu.... Concerning your accessibility issues

There must be an "h1" tag in your project... Headers tags are not just for font customization only, they serve greater purpose to screen readers... I'd advice your text "TODO" place it in an h1 tag

<h1 class="heading-tag">TODO</h1>

then style it to fit the font size and weight you want

.heading-tag {
   font-size: blah blah
   font-weight: blah blah blah
}

Organize your div's properly into main tags, header tags and footer tags... The order must be:

<body>
    <header>
        All other elements/tags must be a sub element of either of this three element
    </header>
    <main>
        All other elements/tags must be a sub element of either of this three element
    </main>
    <footer>
        All other elements/tags must be a sub element of either of this three element
    </footer>
</body>

Then the HTML issue...

Remove the role attribute you placed in the img tag, role is not needed as soon as you have an alt attribute already

    <img src="blah blah" alt="description of blah blah" />

Glad to help 😊 Kindly mark if this was helpful to you 🤗

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord