One of the more exciting aspects of contributing to CodeRed CMS has been, for me, the new-ness of it. There’s plenty of work to do, and I feel like something about it gets shinier and better every single week. Our latest angle for improving the project is to bring CodeRed CMS up to minimum accessibility standards so that sites built with our CMS pass Web Content Accessibility Guidelines (WCAG) Level A standards.


My focus was to improve CodeRed CMS for use with screen readers. Screen readers are technology that help people with vision problems use the internet, and I usually find that the easiest way to keep screen readers happy and to provide vision impaired folks with a seamless user experience is to keep html well labeled.


Our two main problems were these:


We needed to set a language in the html tags

My first thought was to hard code this one in by popping a quick “ lang=”en” “ inside the initial html tags and call it a day, but that would leave some international users in the dust. Instead, I used some django settings to make our CMS more friendly towards non-English speakers.


In base.py, I added these settings:

LANGUAGE_CODE = 'en-us'
LANGUAGES = [
('en-us', _('English'))

]


And in base.html, I pulled in I18N at the top, and used that to set the language of the page


{% load i18n %}
{% get_current_language as LANGUAGE_CODE %}
<html prefix="og: http://ogp.me/ns#" lang="{{ LANGUAGE_CODE }}">

And that’s it-- now we have a CMS that can tell screen readers what language to use, but that isn’t hard coded to one language only.


We needed to set title attributes to all iframe elements

CodeRedCMS uses iframes in two blocks: to embed a media block for videos and tweets, and in our map block. For videos, we added the video title as the title attribute for the iframe, and for maps, we added a new place_name attribute to the google map block to pass in a place location title where developers can pass in a sensible location title.  


Adding a title attribute to map iframes was pretty straightforward-- I added a map_title attribute to the map block so that developers can choose a sensible location title. Our new map_title then gets passed into the title attribute of the iframe.


Adding a title attribute to the embed media block was a little stickier because that one passes through a few places before landing on the DOM. From embedly, we receive the html of the embed and the title of the embed’s web page. Before rendering the html, we use beautifulsoup to inject the title tag into the iframe.


These are extremely do-able steps any developer can take to make their website more inclusive and accessible for all who surf the ‘net. For other tips on making accessible websites, see this Medium article for the basics and the WCAG website. You can look for these updates in the upcoming 0.16 release of CodeRed CMS.