Accessibility issues with page navigation on News page

[erosselli]

Hello! I noticed a couple of accessibility issues with the pagination navigation on the News page, shown on the screenshot below.

I think this would be a good first issue for one of the Djanognauts in the Djangonaut Space Session 6 Team Mars, which will be focused on accessibility improvements both for Django core and for djangoproject.com (I will be the Navigator for this team).

Semantic HTML

The markup for this section does not use semantic HTML, since it's using a <li> element within a parent that does not have a list role (since the <ul> element has role="navigation"). I think we should probably replace the <ul> and <li> elements with semantically appropriate ones.

Current HTML:

<ul class="nav-pagination" role="navigation">
      <span class="page-current">
        Page 1 of 84
      </span>
        <li>
               <a rel="next" class="next" href="?page=2"> ... </a>
         </li>
    </ul>

Screen reader support

When using a screen reader to navigate through the links, the "Page 1 out of XX" text isn't read as part of the link context. I tested on VoiceOver and just got "Link, next, navigation". I think making it so that the page number and total also get read by VoiceOver would probably be a better UX.

[mahicodes28]

heyyyy @erosselli , I’ve opened a PR addressing this issue: #2516