Accessibility Design Guidelines:

It is always best practice to use semantic HTML when developing webpages, particularly when creating <button> and <a> links. However, if a <div> tag is used, be sure to identify it's role to the screen reader by adding the <role="button"> attribute. See Figure A and B.

"The value of aria-pressed="" describes the state of the button. The values include aria-pressed="false" when a button is not currently pressed, aria-pressed="true" to indicate a button is currently pressed, and aria-pressed="mixed" if the button is considered to be partially pressed. If the attribute is omitted or set to its default value of aria-pressed="undefined", the element does not support being pressed." [Reference: MDN]

                    <div role="button" aria-pressed="false" type="submit" tabindex="0">Add to Cart</div>
                

Figure A: Assigning the role="button" attribute allows the screen reader to appear as a button.

                    <buttonaria-pressed="false" type="submit">Add to Cart</button>
                

Figure B: The semantic button tag automatically identifies itself as a button to screen readers.

Text links are hyperlinks that fall within the context of a sentence or description. Text links do not contain images. Developers should use the <a> tag when creating hyperlinks. By default, the <a> tag has accessibility features built in to it.

The text used within the clickable area must contain certain characteristics that make it accessible to users:

• Use meaningful hyperlink text that clearly explains the destination of the resource being hyperlinked. See Figure B
• Check mark icon Hyperlink text should not include the entire URL as it is not reliably comprehensive information.
• Check mark icon The text notifies the user if the link is to download a file.
• Check mark icon The text notifies the user if the link opens in a new window/tab. See Figure C and D

                    <a href="#" role="link" target="_blank">Buy Now</a>
                    <i class="fa fa-external-link" aria-hidden="true"></i>
                    <span class="sr-only"> external link icon</span>
                

Fig D: The <span> element is visually hidden, but read by screen readers.

"The intent of Success Criterion 2.4.4 Link Purpose (In Context) help users understand the purpose of each link so they can decide whether they want to follow the link. Whenever possible, provide link text that identifies the purpose of the link without needing additional context."

WAI, WCAG Read more about this success criteria.

Figure A: 'Click here' does not provide meaning to the user.

Figure B: Use meaningful hyperlink text that explains the destination.

Figure C: Use a visual indicator that a link will open in a new tab.

The focus state is a 'selector' used in css to help people who use a keyboard navigate a web page. When users tab through navigational menus items, links and form fields, the selected element has a highlighted border; visually identifying which HTML element is selected.

While they do require mark-up to apply and it may not be the desired visual effect the designer is striving for, adding a focus state indicates the 'selected' location to aid people using keyboards while navigating a webpage. See working example below:

[role="button"], button:focus{
                      outline: 2px solid blue;
                    }
                

NOTE: Browsers have different ways of displaying the focus of a link. Use CSS to apply the desired look, but remember that legibility is key to achieving web-accessibility.

Example 4

Icons Images as Buttons

Images icons are intended to generate a meaning or purpose to a user, such a as a 'share' icon. These buttons are often presented as symbols. In these cases, the icon image should have a text description assigned to it to translate it's meaning. This benefits individuals with elderly persons and people with cognitive and visual impairments.

                    <button class="button">
                      <img src="cart.svg" alt="cart button">CART
                </button>
                

NOTE: If you do not use text, be sure to add this code below so that the icon names can still be identified by screen readers:

                    <span class="visually-hidden"> CART</span>

                    .visually-hidden{
                          border:0;clip:rect(0,0,0,0);height:1px;overflow: hidden;padding:0;position:absolute;width:1px;                  
                        }   
                

TOP: The top set of icon images have no related text description to support the symbols meaning.

BOTTOM: The bottom set of icon images relay the meaning of the button to a user. In this case, the text should not be embedded into the image but rather, as part of the website code. See example.

In addition to including text as a accessible name for a button, also ensure it has a meaningful text alternative.

Logo images usually appear at the top of every webpage in the same location throughout a website. These link to the website's homepage. If the logo image used does not contain the name of the company or convey information to that affect, a descriptive text link should be provided in conjunction with alternative text.

example pop up icon Friendly Flower Shop example pop up icon

                    <a href="" role="link">
                      <img src="flowerlogo.svg" alt="flower shop logo">
                      Friendly Flower Shop
                    </a>
                

NOTE: It is recommended to add a visible text link to convey the purpose of a logo when it is used as a link. (Ref: W3C]external link