Icons, Words, Accessibility and Learning
Introduction
When Emma Richardson posted the words “I do like the new Edit Mode button (especially the wording – nice job UX team!) – it makes much more sense to me to have it where it is and it will make it easier for the teachers to understand the purpose I think.” on moodle.org/mod/forum/discuss.php?d=433492#p1744163. This got me thinking again about the ‘Edit button’ and how it has been improved in M4.0 by Bas Brands in MDL-71610. In improving my Foundation theme (moodle.org/plugins/theme_foundation), I’d decided to remove the ‘Edit mode’ words on the screen because of the space it took up, when once you know what it is, then you don’t need the description. Or do you? In this post I’ll consider this point.
Disclaimers
I am independent from organisations mentioned and am in no way writing for or endorsed by them.
Names / logos can be trademarks of their respective owners. Please review their websites for details.
The information presented in this article is written according to my own understanding, there could be technical inaccuracies, so please do undertake your own research.
All screenshots are from Firefox 99.0 on Ubuntu 20.04.
References
- ARIA checked – developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked
- ARIA label – developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label
- Firefox – www.mozilla.org/en-GB/firefox/new
- Fordson and Moodle 4, a reply by Emma Richardson – moodle.org/mod/forum/discuss.php?d=433492#p1744163
- Foundation theme – moodle.org/plugins/theme_foundation
- MDL-71610 – tracker.moodle.org/browse/MDL-71610
- Moodle – moodle.org
- Ubuntu – ubuntu.com
Boost and Foundation
In order to understand what I’m about to discuss, then we need to look at the difference between the core Moodle Boost solution and my Foundation theme solution:
where Boost is on the left and Foundation is on the right.
With Boost, the ‘Edit mode’ text can be seen to the left of the sliding ‘radio button’ icon, this in the markup also describes the icon in terms of accessibility.
With Foundation, I have removed the ‘Edit mode’ text in favour of using the ‘aria-label’ and ‘title’ attributes on the actual ‘input’ tag for the icon so that it is described accessibility wise, and has a tooltip. From an accessibility point of view, the visual state is already described by the ‘aria-checked’ attribute.
Why Foundation is different
For me, icons are descriptive in a generic way, they are symbolic representation of a concept that we then learn and form within our minds in the language we are most comfortable with. Once you have learnt what they mean, then you don’t need the description. It is for this reason that I considered that the words ‘Edit mode’ were redundant and taking up precious space on the navigation bar, once you knew what the icon was. Indeed, its meaning won’t change, and yet if you look at the user menu, then the name confirms that a given session is a given user that you’ve logged in as, especially if you have more than one account.
Accessibility
When we look at an icon, the words that describe it are secondary to the icon itself. They are an aid to our understanding but not a requirement. But what happens when you are unable to visualise the icon? That’s when the secondary descriptive words become the primary means of indicating the functionality, those words are no longer an aid but the actual embodiment of the functionality itself and so transform to be of greater importance as they are the ‘icon’.
Learning
It is clear that learning takes time, that anything new has to be learnt and integrated into our existing knowledge, linking and binding itself within our framework of understanding that allows us to make sense of the world around us. Having the secondary descriptive element that we almost immediately understand speeds up the learning process of understanding the new associated icon, but what happens after we’ve learnt what the icon means? The secondary element is redundant and takes up unnecessarily space, we might as well not have the icon and change the functionality to a pure ‘Edit mode’ button. But then in English, that takes up more space than the icon, which additionally conveys visual state and such that’s why we have icons in the first place, to give us more specific descriptive capability in a small space than words alone can achieve.
Conclusion
What do you think? Please let me know in the comments.
- Moodle 4 Security – A Review – 16th April 2024
- A little bit #fab – 16th March 2024
- Static framework – 16th February 2024
