0

I'd like to build a website like the following, and am wondering if is accessible: https://webapp.library.uvic.ca/uvicrecords/recordsList2.php

I think yes: when I hit the tab button (which is my understanding of how screen readers navigate web content), the tabbing eventually takes me to the search feature. Once I type in my search terms, the tab button takes me to the major headings and the search results underneath those headings.

Is there anything else I should be aware of?

Many thanks in advance.

1
  • 1
    Please add images of the design instead of a link.
    – Danielillo
    Apr 16 at 0:10

1 Answer 1

1

Yes, there are a ton of offer things, as keyboard navigation is a great foundation for accessibility, but only one of many criteria to take into consideration.

It’s great that you are interested in the topic, and if you want to learn more about the user archetypes you need to design for, I invite you to read up on Accessibility Resources for Designers by the Web Accessibility Initiative..

The specific page in question has a ton of issues, just doing a very quick audit. Here are some issues I found manually:

  • Yes, tab order makes sense and is coherent, but
  • The language of the page is not indicated, a screen reader might pick the user’s system language and read garbage
  • The search field doesn’t have a label, neither does the form have a name. Screen reader users don’t know that it is a search field, and voice control users wont be able to set focus on it easily
  • The search button has an icon without any text alternative, the same issue is repeated here
  • The contrast of that icon with the blue background is insufficient (3.12 instead of 4.5)
  • The search results are structured in a table, which is highly disorienting for screen reader users and poses issues with responsive design
  • The button-style links like “Administration” are not exposed as buttons, but request additional content, of which neither the screen reader is informed, nor is there a visual indication of the progress, or the result
  • On a 320 px wide viewport, users need to scroll both horizontally and vertically
  • etc.

While involving concerned people in a human-centred design process would be the best practice, there is a catalogue of criteria to take into consideration.

These are the Web Content Accessibility Guidelines. For a page to be considered accessible, it must satisfy these criteria. Some legislations require at least a certain amount of them.

If you are using Chrome, you can start an automatic accessibility audit in the developer tools, under Lighthouse. Keep in mind though, that this can only cover up to ⅓ of accessibility issues, and that to go further, a manual audit is necessary.

A screenshot from a lighthouse report, indicating 69 of 100 points for Accessibility. The first two issues are shown, in the group Names and Labels: Buttons do not have an accessible name, Image elements do not have alt attributes.

1
  • Hello Andy, thank you for the knowledge, and the very helpful resources. I've been floundering in my research of this for days and this is such an important topic. Thank you!
    – oymonk
    Apr 16 at 16:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.