Untitled

<html>
    <body>
        <section title="notebooks">List of your notebooks.</section>
        <section title="notes">List of your notes.</section>

        <!-- div below will be read by it's aria-label and the "action" part will not be readed -->
        <div aria-label="save note" role="button" style="padding: 1rem; margin 5rem; bacground: blue;">action</div>
        <div aria-label="save note" role="button" style="padding: 1rem; margin 5rem; bacground: blue;">&times;</div>

        <input type="text" name="name" value="Note #1" title="enter note name">
        <input type="text" name="name" value="Note #1" aria-label="enter note name">
        <input type="text" name="name" value="Note #1" aria-labelledby="enter note name">

        <br/>

        <!-- These two aren't read -->
        <button placeholder="close note">&times;</button>
        <button title="close note">&times;</button>
        <!-- Only this one will read out properly cuz we use aria-label for elements with no text -->
        <button aria-label="close note">&times;</button>
        <!-- we would label the button like this if it had some text in it -->
        <button aria-labelledby="close note">&times;</button>
    </body>
</html>