@MahdiAljazairi
Posted
Hi There! I have some suggestions for you! I hope they will be useful.
-
Try to avoid using heading tags
<h1> ... <h6>only to adjust font size. Heading tags give assistive technology information about the hierarchy of the document, e.g. a section with a<h1>heading can contain another section with a<h2>heading and so on.To specify font size without giving any special role to text, use CSS.
**HTML** <div class="advice-id">ADVICE #117<div>**CSS** .advice-id { font-size: 0.8em; }
-
Turn your contents' wrapping element into
<main>and your attribution element into<footer>.<body> <main class="flex"> ... </main> <footer class="attribution"> ... </footer> </body>This way you can tell users of assistive technology which part of the page is important
<main>, and which is less important<footer>. Also, the accessibility report will stop yelling at you to put all of your page's content in landmarks 🙂
-
Use an actual
<input>or<button>tag to make an "offically" interactive element. Such elements can recieve focus by pressing the Tab key, and are announced by assistive technology to the user to be interacted with.<button type="button" class="circle-btn"> <img class="dice" src="images/icon-dice.svg" alt="dice-image"> </button>
-
You can use
<q>tags instead of hardcoded quoting marks. These tags insert appropriate quoting marks independently of how text inside them change. This means you can put them in the HTML and play with text without worrying about adding quote mark each time you change it.**HTML** <p><q>It is easy ... taking action</q></p>**Javascript** function renderAdvice(data){ const numAdvice = document.querySelector("h4") const textAdvice = document.querySelector("p > q") numAdvice.innerText = `ADVICE #${data.id}` textAdvice.innerText = `${data.advice}` // No need for quotes here }
This is it! May this can help. And as they say: Happy Coding!
Marked as helpful
@kazerpanol
Posted
@MahdiAljazairi Thanks for your helpful feedback. I appreciate it.
