Accessibility Design Patterns
Accessibility Guidelines for UX Designers
Did any recommendation feel particularly meaningful?
The article presents several categories of guidelines and items comprising the categories (items in bold are ones that caught my attention):
- Content and Structure – meaningful links, colour, consistent navigation, consistent components, use of headings, and multiple ways (to locate pages)
- Device-independent design – interactions, sensory characteristics, an alternative to device motion, complex pointer gestures, the orientation of content
- Keyboard only – focus visible, keyboard shortcuts, logical tab order, option to skip
- For touch targets
- Opening links in new windows with advanced notice
- Animation (focus on flashing and blinking considerations)
- Layout – linear and consistent, responsive design
- Media – alternative text, enough time, audio and video elements
- Visual Design – typography, colour contrast
- User Research and Testing – research, testing, designing forms
I could probably speak to every item here with regards to creating online courses in my day job, but I have decided to focus on just a few items that are either timely with things I’ve noticed, or that play a large (but often overlooked) role in suggestions I make.
Both consistent navigation and multiple ways to access information come up regularly in student feedback and more now than ever, programs are requesting assistance with a “consistent look and feel”. Creating consistency across courses is actually quite tricky in higher ed because you don’t see as many course production houses as you used to. Often now it is up to individual instructors to build courses in the learning management system and everyone has their own approach to it. Even if they consulted with the same person on how to build a course you can end up with radically different navigation and lose consistency in language, iconography, functionality, and navigation.
A brief story about multiple ways to find information. I took a course in graduate school, and at about week three I felt like I was missing something. I checked the syllabus again and could not figure out where the only quiz in the entire course I was supposed to complete was located. I had to scrub through everypage in Blackboard to find it, and by the time I did it was due in just a couple of hours. I share this story frequently with faculty when talking about providing instructions and access to course materials.
Logical tab order was something I recognized for form design, but recently I worked on an elearning project that made use of the course presentation type from H5P. What I didn’t realize until way too late was that you have to build slides in a particular order to get the tab order the way you want it and there is no way to reorder items without completely rebuilding the slides. Lesson learned.
Opening links in new tabs had been my only approach until someone I followed on Twitter mentioned it was not recommended from an accessibility standpoint. It’s been a hard habit to break, but one I am more conscious of when developing digital content.
One of the items mentioned in the OLC OSCQR (on online learning quality rubric) is presenting content in a linear fashion and avoiding tables. I personally tend to default to lists, but I often get content in tables which needs to be reformatted. I also still see some instructional designers using tables for webpage layout, which is all I will say about that.
Finally, form design. This was on my mind this week as I had to apply for a grading process earlier this week, and the form was a little painful in that fields often had single word labels and no instruction or sample of what data should be provided.
How accessible are your previous designs?
Reflecting on the list from the reading, many of the elements are there by default in the learning platforms I use. For example, multiple ways to get to a page, size of text, responsive to device size and orientation. There are definitely weak areas in online courses created in the prairies. Alternative text, especially during the pandemic is almost never present. Captions for video are only provided strictly due to the video platform having auto captions (about 70% accurate), and audio files often do not have transcripts included. Plenty of bad habits have also been revealed, for example, just this week I came across courses that had large tables inserted (which was the correct way to present the information) but they were inserted as images and did not include any alt text. Given where my hopes for accessibility are for online courses, there is still a lot of work to be done.
What is one thing you will consider in future designs?
Given what is provided by the learning platforms I use regarding accessibility, and other items (e.g. proper use of headings) that are already included in the course design process, I would like to add alt text, audio transcriptions, and closed captions to the process as a next step in improving accessibility for our courses.
Designing for Web Accessibility
Do you observe any common accessible design patterns?
If I had to pick one common pattern from the list provided in this reading, it would be that designers should always use multiple means to convey meaning. It might be simpler or faster or easier to just use colour to convey meaning, for example, but we should instead make use of text, shape, colour, and size, etc. to convey meaning. If there is an error in filling out a form, you can use red as a colour, maybe include a little “x” icon, and provide corrective suggestions through text. Any one of these strategies alone may only convey information to a subset of users, and each additional strategy reaches more and more users.
Is an accessible design a good design?
There are various ways to evaluate a design. Judging a design as good or not, is a value judgement and therefore I would have to say, of course an accessible design is a good design.
Is a good design an accessible design?
The corollary to the above question is also true, again as a value statement.
Accessibility Originates with UX: A BBC iPlayer Case Study
What did you learn from this case study?
The second issue was how verbose the page was to the screen reader user. Instead of hearing a link to a program once, the program would be announced twice because the thumbnail image and the heading for the program were presented as two separate links.
This quote above really stood out to me, as when I was testing a recent H5P elearning project with a screen reader I noticed the same thing, each slide was very verbose using the screen reader because of the way items were read out.
Part of the issue is that standards and guidelines tend to focus more on code than design, more on output than outcome, more on compliance than experience. As such, technically compliant pages could be built that are not the most usable for disabled users.
This statement also stands out to me as I begin to consider redesigning processes to support accessibility in online course development. It might be simple enough to build a checklist, but the question remains whether that will result in compliance only, or if the student learning experience will actually be enhanced.
“Don’t send us into disability silos!”
The feedback from this user refers to specific categories for searching audio transcription content and signed content. If you have a searchable database these may be how users want to search the content, but they should still be able to find accessible content through the same portal as any other user, and the use of tags might be a way to do that.
The idea of Annotated UX I think is a really interesting one that could also apply to instructional design. I often will leave notes in design documents for the course build for specific types of content blocks or interactions. The example provided in this reading is one format/approach I might try in the future.
Is this case study specific to accessibility or general usability?
If the definition of usability hinges on whether users can achieve their goals, then this article is primarily about usability, and how accessibility decisions prevented users from being able to achieve their goals.
What is the difference between user accessibility and usability?
Again, if the purpose of usability is that a user can achieve a goal or complete a task, then there is an important relationship between accessibility and usability. Accessibility can often be viewed as strictly technical standards, but as presented in this case, it has an observable effect on usability. While technically accessible, the site in the case study was not very usable for users who use assistive technologies. I think the more broadly you consider accessibility to be, the more it begins to overlap with usability.
Hulu Accessibility UX Case Study
What did you learn from this case study?
Two insights presented in the case study are things I have heard from users who are also marginalized but have different needs than those presented in this case study:
- “SADLY, OUR USER BLAMED HERSELF FOR IMPERFECT TECHNOLOGIES.”
- “They abandoned their technology in sheer frustration because its not worth the aggravation.”
Another takeaway from this particular case study is that I think because touch screen devices do not use peripheral input devices (i.e. keyboard and mouse) that they are universally accessible for users. This case study demonstrates that designing for multiple ways to interact with an app (as stated as an important consideration in the first article) is important regardless of the platform you are designing for.
Is this case study specific to accessibility or general usability?
If the definition of usability hinges on whether users can achieve their goals, then this article is primarily about usability, and how accessibility decisions prevented users from being able to achieve their goals.
What is the difference between user accessibility and usability?
Again, if the purpose of usability is that a user can achieve a goal or complete a task, then there is an important relationship between accessibility and usability. Accessibility can often be viewed as strictly technical standards, but as presented in this case, it has an observable effect on usability. While technically accessible, the site in the case study was not very usable for users who use assistive technologies. I think the more broadly you consider accessibility to be, the more it begins to overlap with usability.
Multicolor Background by Manuchi on Pixabay