Link "Toggle select all" should be a checkbox. Anachor is an incorrect tag at this point. It is not possible to communicate the status of the switch to the users of the screen reader.

    <div class="media-view-icons">
      <a href="#" aria-label="Toggle select all" class="media-toolbar-icon media-toolbar-select-all">
        <span aria-hidden="true" class="fa fa-square-o"></span>
      </a>
    </div> 

The part of the toolbar is the breadcrumbs. It should be included in the nav tag with aria-label="You are here" (e.g)

    <ol class="media-breadcrumb">
      <li class="media-breadcrumb-item">
        <a href="#">images</a>
      </li>
      <li class="media-breadcrumb-item">
        <a href="#">banners</a>
      </li>
    </ol> 

The toolbar should have the attribute role="toolbar" and the attribute aria-label="Media manager" (e.g).

  <div class="media-toolbar" role="toolbar" aria-label="COM_MEDIA_TOOLBAR">
    <!----> 
  </div>

In the toolbar we have a set of buttons. All of them are incorrectly tagged as links.
They should indicate to the user the status - a tag a cannot be used to indicate a state.

In addition: Grid switches (increase, decrease) should be hidden from screen readers.

Ok the toolbar role/label change is easy to do. What’s the recommended markup for the breadcrumbs? Should be easy enough

I’m leaving the checkboxes for another PR. Implementing a form element is going to be complicated and is not something I want to try doing as part of this PR

Look at the breadcrumbs module o think that's correct

OK Fixes to toolbar - it now has a role=toolbar, aria-label, and all the buttons are now <button> elements instead of <a> tags. Breadcrumbs fixes also pushed up. I deliberately didn't add the role=nav in the example @zwiastunsw gave because https://www.w3.org/TR/wai-aria-practices/examples/breadcrumb/index.html was missing it and added in the aria-current mentioned there. But happy to flip back if needed.

I think that's everything covered aside from the checkboxes you guys have asked for

@brianteeman Would you be ok to the changes of an action list to type button - it is just as simple as changing the markup where you commented - but the styling is more complicated and I don't really have a huge amount of time to invest into trying to make it all work nicely

I will bow to @zwiastunsw expertise

1. In my opinion role="navigation" is redundant, but we have agreed with Brian that it must be because Joomla supports IE11 (IE11 does not support HTML5 tags). So I suggest you add it.
2. The search field has no associated label. Add it.
3. Add role="search" to <div class="media-view-search-input">
4. Do not change the native role of the a tag. If you need to use a button, use the button. These are action buttons, not links. See in the illustration what happens when you use a tag instead of a button.
   

Code in file directory.vue is not correct. Change <a href="#"...> to <button ...

        <a href="#" class="media-browser-select"
          @click.stop="toggleSelect()"
          :aria-label="translate('COM_MEDIA_TOGGLE_SELECT_ITEM')"
          @focus="focused(true)" @blur="focused(false)">
        </a>
        <div class="media-browser-actions" :class="{'active': showActions}">
            <a href="#" class="action-toggle" role="button"
              :aria-label="translate('COM_MEDIA_OPEN_ITEM_ACTIONS')" @keyup.enter="openActions()"
               @focus="focused(true)" @blur="focused(false)" @keyup.space="openActions()">
                <span class="image-browser-action fa fa-ellipsis-h" aria-hidden="true"
                      @click.stop="openActions()"></span>
            </a>
            <div v-if="showActions" class="media-browser-actions-list">
                <a href="#" class="action-rename" ref="actionRename" @keyup.enter="openRenameModal()"
                  :aria-label="translate('COM_MEDIA_ACTION_RENAME')"
                  @focus="focused(true)" @blur="focused(false)" @keyup.esc="showActions = false">
                    <span class="image-browser-action fa fa-text-width" aria-hidden="true"
                          @click.stop="openRenameModal()"></span>
                </a>
                <a href="#" class="action-delete" @keyup.enter="openConfirmDeleteModal()"
                  :aria-label="translate('COM_MEDIA_ACTION_DELETE')"
                   @focus="focused(true)" @blur="focused(false)" @keyup.esc="showActions = false">
                    <span class="image-browser-action fa fa-trash" aria-hidden="true" @click.stop="openConfirmDeleteModal()"></span>
                </a>
            </div>
        </div>

Done 1, 2 and 3. 4 is what I was discussing with Brian. The CSS is slightly beyond my ability to fix - so I'll leave that for someone else to take a stab at in a different PR

Just figured it out. Links made into buttons

The button change makes the system tests fail - I think joomla/test-system#52 should fix that. Once you guys are happy with this PR i'll merge that up front

Back to the stage of I think it's only the checkboxes left

For the checkboxes see #23970

@wilsonge : read about links vs. button: Links vs. Buttons in Modern Web Applications

So can we run a last test on this and ensure that only the checkbox issue is left to solve in a separate place?

@wilsonge : Which files have you changed?

I will try to find some time tomorrow to take a look. because of the npm it takes a long time to build on windows (as you saw)

1. When the screen reader is on, the Enter and Space keys do not activate the action buttons (Download, Rename item...)
2. "Open item actions" button should be a menu button
3. The action buttons should be grouped by using a list elements (ul, li).
4. Use the arrow keys to move the focus between action items.

Done 1 and 3. I've done 2 and 4 on the image thing only. Unfortunately I need to head out but will try and find some time to do them on directory, file and video areas later today

Pushed - @zwiastunsw this should cover all the things you mentioned

@zwiastunsw @brianteeman Can you guys give this a final test - I understand there's more to do - but I'm being dragged back onto management responsibilities - handover to Harold and merging in j3 etc. So would like to get this in asap as a step in the right direction and then we can build up a list of next steps/you guys can try this yourselves (i promise it's not that bad!)

@wilsonge I will try to find some time tonight - I am working on some stuff for the marketing team thats taking my available time

@wilsonge: We've made an appointment today for a Skype session

Is it perfect - no
Is it better than it was yesterday - yes

If the non graphical view was also fixed then I believe that would be a reasonable accommodation

I'm going to do something separate for the list view - I was having issues with the icons showing - I can push what I had tonight - because I don't think it was a JS issue - it seemed something CSS - that I'm sure i was just being stupid with