index2018-10-15

Accessibility Audit: NYU Website

The NYU homepage gets a score of 68 for accessibility when using Chrome’s audit tool. This is kinda low right?

For element attribution::

Error: Some elements have a [tabindex] value greater than 0 Explanation: There are two links that come up on the left hand side of the homepage. <a id="bypass-globalnav" class="bypass-block" href="#global-menu-toggle" tabindex="1">Skip to All NYU Navigation</a> and <a id="bypass-main" class="bypass-block" href="#main-content" tabindex="2">Skip to Main Content</a>. Each of these allows the user to skip everything on the homepage and go directly to another section. While it isn’t great to user tabIndex because it can mess up ordering of navigation I think using it for these two links makes sense. I guess the question is why aren’t these link just built into the UI so that they show up first anyway.

Element naming:: Error: Links do not have a discernible name Explanation: Not all links had a title tag. This seems like one of the easiest tasks for making a website accessible.

Color contrast:: Error: Background and foreground colors do not have a sufficient contrast ratio. Explanation: This was referring to one small element on the page with an embedded tweet using the twitter blue: <a href="https://twitter.com/nyuniversity" data-title="Welcoming #NYU2022 + more from our week in #NYU community tweets and instas: https://t.co/ovPtLj46h9 https://t.co/KN4J0 ...">

For HTML structure:: Error: [id] attributes on the page are not unique

Meta-Tags:: Error: [user-scalable="no"] is used in the <meta name="viewport"> element or the [maximum-scale] attribute is less than 5.

After reviewing the page with voice over I did conclude that the page had a pretty logical tab order. Every link is clearly defined and it was relatively easy to move between them.

I did at one point get trapped when opening the All NYU button. It brought up a pop up that I couldn’t get inside of and couldn’t figure out how to close. At first it seemed like a good link for accessibility because it showed all of the possible links for the homepage!

Overall the NYU website seems to cover all the major points for accessibility. The site itself is so large I can imagine that it would be hard to make the design of the site itself organized in the most accessible way. I’m wondering what standards are in place for developing this site. Could there be a check to make sure that all a tags have a title tag before merging the code? It seems like the fixes needed for better accessibility are relatively easy to make but there are so many links and so many ways to get around the NYU site it’s probably an arduous task to cover all of them. How can accesibility be automated? Should developers be writing accessibility tests and enforcing them with CircleCi or some check when building the code?