Accessibility Evaluation: Arts & Letters Daily

I conducted an accessibility evaluation on the human-curated, arts and humanities news aggregator, Arts & Letters Daily. To conduct this evaluation, I selectively used the “Web Accessibility Checklist” from the A11Y Project. This checklist incorporates principles and guidelines from WCAG 2.0, WAI-ARIA, and Section 508. These are my notes.

Header and Footer

The header does not explicitly include an ARIA banner landmark but since it’s in an HTML5 document and the header is a child element only of the body, this role is implicit.

There’s a language tag! Good.

This site does not use “main” or “articles” landmark roles to wrap the focal content of of the site and represent independent items of content. Wrapping the three columns with the main tag and assigning each article blurb an article role would likely contribute to this site’s accessibility.

A div element is used to contain the footer content. A better option would have been to either use an actual <footer> element, which in an HTML5 document can be mapped an ARIA landmark role of “contentinfo” or explicitly assign a landmark role of “contentinfo” to the div.

This site is all text save for a logo in the header, without any ALT text. That should be there. Who’s that supposed to be in the logo anyway?!

Site Logo

Site Logo

 

Navigation

An ARIA role landmark is not provided for the navigation menu. A semantic HTML5 <nav> element could be used in place of <div id=”leftnav”> in order to make this role implicit or a landmark role of navigation could have been assigned .

Main Content

Semantic headings are used but there are some issues. For one, heading levels were chosen in order to produce desired font size rather than to represent hierarchically organized information. Also, two are skipped, h1 and h2.

Curiously, no headings are used to mark the blurbs of content which are what the site’s all about really. This negatively impacts the experience of tabbing through in the normal display, since the only thing you can tab to and from are the “Read more” links which close each blurb.

Arts and Letters Daily, normal display

Normal Display

Blurbs on this site are arranged into three categories, yet they are not wrapped in HTML5 <sections>.  This is a lost opportunity to improve accessibility.

An alternate way of displaying content is provided. With this view, content is listed under dates with each blurb falling under a heading with the category. This arrangement of content seems like it would be easier for assistive tech to interpret than the table-view.

An alternate way of displaying content

Alternate View

Links

Focus is a CSS pseudo class used to apply styling to an element currently targeted or activated by an input device. Many elements have focus by default but this state can also be added to any HTML5 element. In addition to being able to uniquely style the targeted element, elements with focus can be tabbed through, which greatly contributes to accessibility.

So, one of the elements that get focus by default are anchor tags, which explains why the “more” links are what are available to tabbing in the normal, table display. These links are not underlined but are otherwise distinguishable as links.  But not to give them too much credit, there really should be a way to get focus at the beginning of each of these blurbs, not just the end.

The “More” links are semantically unclear and text should be provided to give greater indication of where they go, especially since they all point to external locations.

JavaScript

How a site implements JavaScript is also an accessibility concern. This site uses some inline JavaScript which is discouraged but I found that when I completely disabled JavaScript, no functionality was lost.

Color Contrast

The contrast ratio for background and text color was 6.09, a score of AA for normal text and AAA for large or bold text.

aldaily.com has a contrast ratio score of 6.09

Contrast Ratio Score

Color blindness

I viewed the site using filters simulating different types of colorblindness. There isn’t a lot of meaningful use of color on this site and the palette is very spare, so there isn’t any problematic use of color.

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *