The current page actions code looks like this:
```lang=html
<ul id="page-actions" class="hlist ">
<li id="ca-edit" class="mw-ui-icon mw-ui-icon-element mw-ui-icon-edit-enabled" title="Edit the lead section of this page.">
<a class="edit-page" href="#/editor/0" title="Edit the lead section of this page.">Edit</a>
</li>
<li id="ca-watch" class="mw-ui-icon mw-ui-icon-element icon-32px watch-this-article mw-ui-icon-watch view-border-box" title="Watch this page">
<button>Watch this page</button>
</li>
<li class="mw-ui-icon mw-ui-icon-element mw-ui-icon-language-switcher language-selector disabled" title="Read in another language"></li>
</ul>
```
Potentially all three buttons are links to other pages (when JS is disabled). We should make sure that the buttons are links not `li` elements. This will be useful for screen readers and search engines and us developers because it's easier to see what is an actionable item and what is not.
Here is a screencast of Mac OS X voiceover. Notice how the page actions are described:
{F4351723}
Suggested fixes:
* Move the ID, classes, and titles from `li` elements to their corresponding children.
* The watch button will be dealt with in T141936. It's rendered as a link in the back-end, but replaced with a button element in the front end.
* Add a link child to the language button.
* Change JS code to work with child `a`'s rather than `li`'s.