Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Advice Generator App

Kianā€¢ 230

@ikianm

Desktop design screenshot for the Advice generator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
  • API
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hey! Any suggestion or tip is appreciated.

Community feedback

Amer Shahā€¢ 260

@fggdbdsbfd

Posted

Hello there šŸ‘‹. Congratulations on successfully completing the challenge! šŸŽ‰

Buttons with discernible text are essential for creating a user-friendly and accessible website. Here are some tips to help you ensure that your buttons are clear and easy to understand:

šŸ‘€ Make sure that each button has discernible text that clearly communicates its purpose.

šŸ“ Use descriptive, action-oriented text on your buttons, such as "Submit," "Cancel," or "Add to Cart."

šŸšØ Avoid using generic or vague labels, like "Click Here" or "Read More," as these can be confusing for users.

šŸ” Use ARIA attributes, like aria-label or aria-describedby, to provide additional context for users who may be using assistive technologies.

šŸ“± Keep in mind that buttons should be designed with mobile devices in mind, and should be easy to tap with a finger.

šŸ’» Consider the layout and design of your buttons, including their size, color, and placement on the page. Make sure that they are easy to find and interact with.

By following these tips, you can create buttons that are easy to use and understand, regardless of a user's abilities or device. Remember, the goal is to make your website as accessible and user-friendly as possible, so that all users can enjoy a positive experience.

enjoy the jopurny of coding

write in comfertable way use emojis make headings

Hello there! šŸ˜Š I'm glad you're enjoying your journey in coding! Here are some tips to help you create buttons with discernible text in a comfortable and easy-to-understand way:

šŸ§‘ā€šŸ’» Make sure to take breaks and stretch your fingers and arms to avoid discomfort while coding.

šŸ“ Use descriptive text that clearly conveys the purpose of your buttons, such as "Submit Form" or "Sign Up."

šŸ‘©ā€šŸ¦Æ Consider the needs of users with disabilities when designing your buttons, and use ARIA attributes to make them more accessible.

šŸ“± Keep in mind that many users will be accessing your website on mobile devices, so design your buttons with touch screens in mind.

šŸ’» Use contrasting colors and appropriate sizing to make your buttons stand out and easy to click.

šŸŽØ Experiment with different button designs and styles to find what works best for your website.

By following these tips, you can create buttons that are both comfortable for you to code and easy for users to interact with. Have fun on your coding journey and don't forget to take care of yourself! šŸ’Ŗ

0

@0xabdulkhaliq

Posted

Hello there šŸ‘‹. Congratulations on successfully completing the challenge! šŸŽ‰

  • I have other recommendations regarding your code that I believe will be of great interest to you.

BUTTONS šŸ–²ļø:

  • This solution had generated accessibility error reports due to lack discernible text for <button> element
  • The <button> must have discernible text that clearly describes the destination, purpose, function, or action for screen reader users.
  • Screen reader users are not able to discern the purpose of elements with role="link", role="button", or role="menuitem" that do not have an accessible name.
  • The <button> name rule has five markup patterns that pass test criteria:

<button id="al" aria-label="Name"></button>

<button id="alb" aria-labelledby="labeldiv"></button>

<div id="labeldiv">Button label</div>

<button id="combo" aria-label="Aria Name">Name</button>

<button id="buttonTitle" title="Title"></button>

  • Ensure that each <button> element and elements with role="button" have one of the following characteristics:

    • Inner text that is discernible to screen reader users.
    • Non-empty aria-label attribute.
    • aria-labelledby pointing to element with text which is discernible to screen reader users.
    • role="presentation" or role="none" (ARIA 1.1) and is not in tab order (tabindex="-1")

.

I hope you find this helpful šŸ˜„ Above all, the solution you submitted is great !

Happy coding!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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