I have just completed a redesign of the Journal of Interactive Technology and Pedagogy website, and had some thoughts to share about the process of making an accessible website. You can visit the newly designed website here: The Journal of Interactive Technology and Pedagogy.
Crosspost from the Journal of Interactive Technology and Pedagogy website:
Greetings, and welcome to the new Journal of Interactive Technology and Pedagogy website! We are excited to unveil a new website design that is clean, responsive, easier to navigate, and easier to read. We have incorporated several new features to make our website accessible to more readers, including skip links and an accessibility toolbar that gives readers the option to adjust the font size and toggle the contrast. Please have a look around – and enjoy!
Designing for Accessibility
Although our newly designed website has more accessibility features, it is not as accessible as we would like it to be – yet. Prior to designing this website, I had not had any experience designing for accessibility, and I wasn’t really aware of how different the design principles were. I was excited to take on such an exciting and important project, but I was a little unsure about where to begin. There seem to be many approaches to making a website accessible, and as a result, different degrees of accessibility. For instance, some resources suggest that the inclusion of alt tags and text descriptions on all media is one of the most important steps toward creating an accessible website, while others suggest that ease of operability (easy to understand navigation choices, site maps, alternatives to keyboard and mouse navigation) and alternative presentations of content (visual adjustment options of text size, contrast, color, and alternative media formats) are paramount. So, it was difficult to find a starting place for implementing the changes I wanted to make to the site.
After researching accessibility plugins for WordPress themes, I decided to focus on alternative displays and presentation of site content. The JITP website already featured alt tags on the majority of its content, so I thought that the best way to immediately improve and expand our site’s accessibility was to incorporate alternative visual and screen-reading features.
Using the plugin WP-Accessibility, I was able to include an accessibility toolbar to enhance the browsing experience of the site. This toolbar enables readers to adjust the color scheme, the font size, and the contrast of the website. Another feature that I was able to add with WP-Accessibility is skip linksfor screen readers. Skip links enable screen readers to immediately jump down to an anchor that displays the main content of the page instead of requiring the user to manually move through every link and navigation option. The process for making the skip links was not obvious, and I’m sure that I will need to revise the anchors that I specified. Still, I thought that adding these features was a step in the right direction for our site, and a foundation for making our site as accessible as possible.
Over the next few weeks, I will work to expand the accessibility of our site even further, ensuring a better experience for a variety of readers. I plan to verify that all site elements have alt tags, and to comb through these alt tags to make sure that they are as descriptive and relevant to their respective media as possible. I also plan to verify that all of our images, videos, and other interactive media have appropriate captions and, if possible, provide transcripts for video and audio files. Lastly, I will verify that all of our form elements are properly labeled and avoid redirecting or interrupting users in the face of submission errors.
We will provide updates as the site is continuously improved, and we look forward to having as close to a fully accessible site as possible in the very near future.