Overview
This guide helps you ensure that any buttons you add directly in HTML to your Dornsife WordPress site are accessible to people using assistive technologies.
Caution!
This guide requires some familiarity with HTML. If you are unaccustomed to editing HTML, email websiteproject@dornsife.usc.edu: we can help you find a solution that doesn't require HTML knowledge.
Creating accessible buttons
If you are working with HTML code directly and are using the <button> element, make sure that your buttons have clear, understandable text. If your button does not have text (for instance, it uses a symbol), use an aria attribute to ensure that assistive technology can still read or describe the button.
The following two examples use clear, descriptive button text:
-
<button>Next Page</button>
-
<button type="submit">Submit</button>
The following two examples either use a symbol or have no button text, and so each button must be accompanied by either an aria-label attribute or an aria-labelledby attribute:
-
<button id="next-page" aria-label="Next Page">➔</button>
- The aria-label attribute is added to the button.
-
<button id="submit" aria-labelledby="submit-label"></button>
<div id="submit-label">Submit</div>- The aria-labelledby attribute is added to the button, and an additional element is added whose id attribute must be the same as the value of the aria-labelledby attribute.
Editing buttons in WordPress
Most buttons on your Dornsife WordPress site are already standardized and formatted for accessibility. If however you add your own custom buttons in HTML, you must ensure that these buttons are clearly labeled:
Quick guide
- Click the Text tab.
- Locate any buttons, which are indicated by the <button> tag.
- Make sure that each button has a clear name or description within the tag. If the button text is not clear or understandable, add a descriptive aria-label attribute in the following format:
- <button aria-label="description goes here"></button>
- For example:
<button aria-label="Next Page">➔</button>
- You can now save or update the Page.
Detailed guide (with screenshots)
- Click the Text tab.
- Locate any buttons, which are indicated by the <button> tag.
- Make sure that each button has a clear name or description within the tag. If the button text is not clear or understandable, add a descriptive aria-label attribute in the following format:
- <button aria-label="description goes here"></button>
- For example:
<button aria-label="Next Page">➔</button>
- You can now save or update the Page.
References
For this guide, the following resources were consulted: