CompilED for Inclusion

In March, I restructured and redesigned the CTL DevTeam’s website CompilED to meet web accessibility standards, and to improve its overall user experience on all devices.

This latest iteration of CompilED follows the Web Content Accessibility Guidelines (WCAG) 2.0 level AA, and it is much more technically and usably accessible than the previous versions. It is keyboard accessible with improved focus styling. The site is also seamlessly adaptive to multi-size screen devices—smartphones, tablets, and desktops. The comprehensive design has also improved the readability of the site’s content.

In my work at the CTL, I consider accessibility as an integral part of my own development process. Lately, I’ve been mulling over an effective, broader integration of accessibility thinking, process, and policy across different groups in the whole department, as part of our commitment to accessibility, universal design, and inclusion in higher education.

The CompilED redesign in 2016 afforded some accessibility since my grasp of WCAG standards was limited at the time. Three years later with more experience and grounded understanding, I redesigned CompilED as an exercise to develop a website that conforms very well to the WCAG. This experience led me to best practices and a workable flow that I can share with my team for other development processes.

Steps on improving CompilED’s accessibility

User experience design

I thought carefully about CompilED content delivery and comparable user experience on different medium, from visual to auditory experience. Much of the UX design centered around the integrity of the visual UI and the browser’s rendering of the accessibility tree for screen readers. The elements and content on the pages were regrouped according to function, reordered according to priority, and restacked for responsive design. This regrouping and reordering was done so that the structure on each page make sense to all users regardless of their choice of devices—desktop, mobile, or assistive technologies.

I’ve written on similar design processes for the redesign of PHTC image map and two Dental School projects.

Semantic HTML and ARIA

In her demonstration on how a screen reader user accesses the web, accessibility engineer Léonie Watson recommended using semantic HTML and ARIA attributes to improve content accessibility and to clarify meaning for content groups. They serve as sign posts to help users chart a mental model of a page. In CompilED, I already used HTML5 landmark regions (header, nav, main, section, article, footer). This time, I paid more attention to ARIA labels to identify components on the pages so that they can be read by screen readers.

Keyboard accessibility

Keyboard navigation is markedly improved for CompilED pages—all functionality and interactive elements are available from a keyboard. I also redesigned the visual focus styling (hover, focus, active), thanks to the helpful tips from Eric Bailey.

While it is common knowledge that alternative text for images is necessary, what is less known is what sort of description should be used for the alt text. To put simply, image description depends on context.

All images on CompilED articles how have alt attribute built in the template. It is up to the authors to decide how the images are used to provide context in the alt text. W3C provides a good tutorial on image concepts. WebAIM also has a thorough explanation on alternative text and images.

CompilED also uses og:image:alt and twitter:image:alt structured properties to provide descriptions for social media poster images.

Audits and limitations

I used the following scanning tools to test accessibility compliance for CompilED :

[Siteimprove](https://chrome.google.com/webstore/detail/siteimprove- accessibility/efcfolpjihicnikpmhnmphjhhpiclljc) accessibility checker, by Siteimprove
Wave web accessibility evaluation tool by WebAIM
Axe web accessibility testing tool by Deque Systems
VoiceOver, the screen reader by Apple

The scan shows some color contrast errors, but for the most part, CompilED conforms to WCAG 2.0 Level AA.

Coda

Web content accessibility isn’t just about technology. CompilED could have passed all the scanning audits and still wouldn’t be very useful if I didn’t understand the user experience with screen readers or other assistive technologies. We should make POUR choices: we design and develop digital experience that __P__erceivable, __O__perable, __U__nderstandable, and __R__obust, for people of all abilities.

This experience has deepened my understanding of accessibility and inclusive design principles. There is still a lot to learn, and there are many more accessibility challenges to solve in web applications design and development, especially for complex web-based tools, data visualization, mapping, to name a few. I look forward to exploring these issues and coming up with creative solutions for them.

* * *

CompilED is built with Hugo, a general-purpose static site generator that renders HTML files as output from content files and layout templates. CompilED repository is available on Github.

The software development team at Columbia CTL is committed to making CompilED content inclusive and accessible for everyone of all abilities. We welcome your feedback on the accessibility of CompilED. Please email us at ctl-accessibility@columbia.edu