locked
How to make a span text node accessible?

    Question

  • I'm trying to learn about making an app accessible. There are docs about making live regions accessible. "live region" means a div which is populated programmatically with other elements?

    Now I'm trying following code.

    <div id="output" aria-label="Saved  List" 
                    aria-live="assertive" aria-multiline="true"
                    aria-readonly="true" aria-relevant="additions" role="log" aria-atomic="true" class="textStyle scrolldiv">My To-Do List
                    &nbsp; &nbsp;<span id="date" aria-label="Date" aria-live="assertive" class="formSectionHeading "></span>
                </div>

    I'm population span with id="date" with today's date through javascript.

    When I check this with narrator, it reads out "Saved List" "log". After that it never reads value (date) written in next span. I'm giving it "aria-label" and "aria-live" attribute.


    sonal

    Thursday, September 5, 2013 6:03 AM

All replies

  • I cannot reproduce the problem with the following HTML and javascript. With the below code, when I start the Narrator and then focus on the "Set Date" button using the "tab" key, the Narrator mentions "Focus on Set Date button". When I click the button, the narrator narrates the current date that was set by the button click.

    HTML:
    ===== 
    <body>
        <p>Content goes here</p>
        <input type="button" id="btnChangeValue" value="Set Date"/>
        <div id="output" aria-label="Saved  List" 
            aria-live="assertive" aria-multiline="true"
            aria-readonly="true" aria-relevant="additions" role="log" aria-atomic="true" class="textStyle scrolldiv">My To-Do List
            &nbsp; &nbsp;<span id="date" aria-label="Date" aria-live="assertive" class="formSectionHeading "></span>
        </div>
    </body>
    
    JavaScript:
    =========== 
    
    args.setPromise(WinJS.UI.processAll().done(function () {
                    document.getElementById("btnChangeValue").addEventListener("click", btnChangeValue_click, false);
                }));
    
    function btnChangeValue_click() {
            var spDate = document.getElementById("date");
            var date = new Date();
            spDate.innerText = date.toDateString();
        };
    
    


    Windows Store Developer Solutions #WSDevSol || Want more solutions? See our blog, http://aka.ms/t4vuvz

    Monday, September 9, 2013 8:56 PM
    Moderator