CSEAS Website Redesign 2017: Accessibility

CSEAS launched its redesigned website in September 2017. Here is an overview of the accessibility considerations taken during the redesign.

The new CSEAS website was built with basic design and accessibility standards in mind. The design standards were based upon “Schneiderman’s Eight Golden Rules of Interface Design”, and the W3C’s “Web Content Accessibility Guidelines”. Above all, consistency, clarity, and accessibility were not to be sacrificed for the design, but rather woven into it.

(You can click on each section header below to read more about best-practice rules of interface design and the Web Content Accessibility Guidelines.)

Eight Golden Rules of Interface Design

(Selected; other rules are more applicable to application design than website design.)

1. 1. Strive for consistency
      1. Clutter was reduced so pages look more streamlined and more like one another, so that the user knows where they currently are on the site

1. 1. Seek universal usability
      1. See Web Content Accessibility Guidelines, below

1. 1. Offer informative feedback
      1. These were small things like making links change colors and include an underline (for those with color-deficient vision) when hovered on

1. Keep users in control & 5. Reduce short-term memory load
   1. The navigation was modified to add drop-downs and breadcrumbs to guide users through the site more easily. Resource pages were pared down and restructured for clarity, and some pages (such as the faculty specialist database) were combined into one so that users wouldn’t have to search several pages.

Web Content Accessibility Guidelines

Accessibility of electronic documents like websites is mandated in the United States by Section 508 of the Rehabilitation Act of 1973 as amended. Section 508 conformance can be achieved with WCAG 2.0 conformance at the AA level as most rules in Section 508 are substantially equivalent to rules in WCAG 2.0. WCAG, being a newer standard, includes additional recommendations allowing for newer technology and research.

The WCAG is a fairly long document, but to summarize, the emphasis is on labelling media and structuring pages so that assistive devices like screen readers, and users who navigate with keyboards instead of mice, are able to access and navigate the pages correctly. This makes use of several technologies and standards such as HTML5, descriptive CSS, and ARIA labels. This includes things like:

• • Using and labeling page regions explicitly using HTML5 elements (<header>, <nav>) and descriptive CSS classes (<div class=”content”>)

• • Making sure images have accompany alt tags (as well as descriptions and captions where appropriate) for screen readers

• • Making sure time-based media (audio and video) have transcripts, closed captioning, and descriptions (not always possible when using third-party content, unfortunately)

• • Using a clear page structure with header levels and content denoted appropriately

• • Making sure the pages still work even with CSS and JavaScript disabled (as required for some assistive devices, and also for people in areas with slow Internet — another facet of accessibility)

• • Having adequate contrast between text and background color for those with vision difficulties

• Avoiding code errors, which can confuse screen readers (solution: validate code with an external tool)

Representative pages on cseashawaii.org were validated for compliance using the Web Accessibility Evaluation Tool (WAVE). Nearly all errors on the new site were from old images which had not been annotated with alt tags. The work to correct this is ongoing.