html5 accessibility for screen readers

Question

How can I add accessibility to this

Text:

Buttons and Images and anchors:

<div class="btn-group" role="group">
    <button class="btn btn-default">
        <img class="profile-img">
        <span id="user-name">john</span>
    </button>
    <button class="btn btn-default">
         Log out
         <i class="fa fa-sign-out fa-lg"></i>
    </button>
</div>
<div>
    <a  href="" class="change-user-link">Change recipient</a> 
</div>

Answer 1

Only you are suited to properly add semantics to your code and content, so we really can't do this for you. But, here are some important things to remember/do/follow:

• Your HTML is not event valid, so start by correcting that.

• Don't ever use an HTML element because of the way it makes the visible page look (i.e. using a heading like <h4> to make text small and bold). CSS should be used for all layout and presentation.

• Use the most appropriate HTML elements to convey the semantics of the content you have. For example, go ahead and use the <table> element if you actually are trying to display tabular data and use <ul> and <li> to make menus.

• Despite the (many) myths, the HTML5 sectioning elements (section, article, nav, aside) are not recognized by most screen readers. Their use actually makes creating a valid document outline much more difficult.

• The proper use of heading (<h1>...<h6>) elements is the best thing you can do to convey a proper document structure.

• Use WAI-ARIA landmark roles where applicable as that has been a standard for many years and all the major screen readers understand it.