Evaluating Accessibility

siff logo

 

Accessibility Review of SIFF. www.siff.net

I’ve chosen SIFF’s site to conduct a brief web accessibility review for Web  Content Accessibility Guidelines (WCAG) and Section 508 compliance. SIFF brings year round international and independent films to the Seattle area and promotes film education through several program offerings.

“SIFF’s mission is to create experience that bring people together to discover extraordinary films from around the world. It is through the art of cinema that we foster a community that is more informed, aware, and alive.”

Web accessibility is important to carry out their mission and the recommended enhancements can not only assist with compliance to the guidelines but also to reach a diverse audience.

For the analysis, I used an accessibility checklist and A Checkeran online tool that can test web pages for compliance with the WCAG 2.0 and Section 508 guidelines. Below is a snapshot of the results for SIFF.net.

A Check Report on SIFF
A Check Report on SIFF

The report was easy to read and follow how to “repair” elements and sections to fit the accessibility guidelines. It groups the fixes by guideline and provids a link to explain the reasoning for the guideline and how to change the webpage to meet the requirement. A Check also provids the example code so that you can see which part of the page they are referring to and the link leads to the code for the page.

Report breakdown
Report breakdown

siff-css-styles

Recommendations

Provide text alternatives for non-text content such as images. SIFF can add an Alt attribute to their img elements and add Alt text that will identify the function of the image. SIFF has video content to show the previews/trailers of their films. They can meet 508 compliance by providing synchronized captions or audio alternatives.

Make it easier for user to see and hear content including separating foreground from background by: Adding contrast between the color of the text and it’s background.

WCAG 1.4.3 Requirement
WCAG 1.4.3 Requirement
Example of the color contrast
Example of the color contrast
For the repair, A Check recommended using a color contrast evaluator to determine if the text and background colors provide a contrast ratio of 4.5:1 for standard text, or 3:1 for larger text. Then to change the color codes to produce sufficient contrast. I used webaim.org’s color contrast tool to check SIFF’s text.
Color Contrast Checker
Color Contrast Checker
The text on their site is color: #888888 which has a contrast ratio of 3.54:1 and failed both large and normal text. When I changed it two shades darker to #595959, it passed the contrast check.
ErrorLine 531, Column 24:

<span style="color: #888888;">SIFF Cinema Egyptian | Special Event</span>

Fixed size example: color contrast example

Real size example (12 points): color contrast example

Contrast fixed!
Contrast fixed!

Relay content without losing information or structure by distinguishing headers. A Check’s report noted that SIFF might be using the paragraph element in place of heading. Also, to help users avoid and correct mistakes, WCAG 3.3, SIFF can add text to the label element instead of leaving it empty.

Distinguish headings from paragraphs
Distinguish headings from paragraphs

paragrah-ex

 From initial review of the report, the changes/repairs seem reasonable and wouldn’t be as difficult (ie adding alt text for images and changing the color for contrast) if SIFF were interested in extending accessibility.

Leave a Reply

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