Accessibility Audit – learndigital.dev
Cognitive Load
Cognitive load refers to how much content people can realistically process at one time. Having items that are cluttered, fast-moving, and distracting, can negatively impact cognitive load and disrupt the user experience. On the DGL website, some items that have a positive impact on the cognitive load include the carousel, the navigation, the program options diagrams, and the chunking of content.
The carousel moves at an acceptable rate, not going so fast that someone can not process the images being displayed. The navigation on all screen sizes is easy to find and use throughout the home page. A sticky navigation bar is present which allows access to the entirety of the website at all times.
The program option diagrams are well laid out in order to best showcase the information. Having the information in something like a chart or graph instead of an illustration would make it a lot harder to understand.
All paragraphs are well within the parameters of cognitive load best practices. Some recommendations include having 3-4 lines per chunk of text with a maximum of 80 characters per line. Most lines came out at approximately 66 characters and there are not many chunks with more than 4 lines and if there are, they have lower character counts to balance it out.
I would say that the page meets the standards for cognitive load, not falling short in many aspects. The only downside, in my opinion, is that for a homepage the content is a little heavier than I would prefer. I think that some areas could be lightened up and moved onto their corresponding pages in order to shorten up the Home Page and make it a little more introduction friendly.
Language Usage
Having simple, easy-to-understand language is important to keeping users on your site engaged.
While some jargon is present, the language that is used is simple enough for anyone with a basic understanding of digital design and post-secondary education to understand and navigate. Lots of common education sector words are used, again something easy to navigate if you are in the market for education.
If someone wasn’t familiar with any design or development or was new in the market for post-secondary school, there could be some things that they find difficult, but could easily find information relevant to the topics on the website.
I would say that the page meets the standards for language use, not falling short in any real aspects.
Colour
Colour is important when talking about accessibility due to how many people have vision impairments and colour blindness. Making sure content is easy to read for all types of people is essential.
Multiple Accessibility tools found that there are some contrast issues present on the homepage. The buttons used to navigate to other pages on the website are not contrasting enough. The current ratio that the contrast is at, is between 3.95:1 and 4.06:1 depending on the audit software used. The contrast ratio should be at least 4.5:1. The recommendation is to increase the contrast by at least 13.92% in order to pass the ratio test. There are 9 other colour combinations all of which pass the ratio test with flying colours.
Aside from the technical element, the colours chosen are a mild and neutral palette that aids readability and does not distract from the content. Using the vision deficiencies emulator in Google Dev tools, almost every aspect of the website is still well contrasting and readable. The only area with a noticeable issue is with the buttons. While all were legible, they contrasted poorly under each of the emulator settings. Of course, this was expected following the results of the contrast test performed above.
While the contrast ratio for the buttons is a notable issue, it is not very pervasive. The page meets the standards for colour use.
Typography
Typography is key in readability because it plays a huge part in it. Being able to easily discern words is entirely dependent on the font used throughout a webpage.
A sans serif font in a high contrasting colour is used throughout most of the website which helps to alleviate cognitive load and aids readability. Letter spacing is adequate throughout the homepage, meeting the requirements that letter spacing shouldn’t be set below -1px.
Issues arise when you look at the sizing of the font. According to a couple of different audits, there are a few places where the font falls under the acceptable size of at least 11px with best practices being 16px. It seems the issues arise when using some dynamic units like ems and rems.
Overall the typography is a good choice, being readable, mostly well-sized, and contrasting, meeting the standards for typography use.
Done Well
- Good Carousel Timing
- Convenient Navigation
- Well Balanced Visuals
- Concise, Understandable Copy
- Mostly Accessible Colour Pallete
- Readable Typography
Done Poorly
- The Home Page is long and content heavy
- Buttons do not pass the contrast test
- Sizing issues with the font
Overall score:
3.9/5
Perceivable – 4.5/5
The website does not currently offer a way for the user to select their own preferences for colour, size, typeface, and sound. There is missing alternative text for some images throughout the whole website, there are some issues with button contrast, and there are some other items that were picked up by some audit software that would cause issues with screen readers like page landmarks not being tagged and empty links.
The website does offer great contrast throughout the majority of the homepage. When zooming in to increase the font size the page responds very well, scaling nicely and providing a larger, easier-to-read page. The home page also responds well to mobile devices, scaling appropriately and stacking in a readable order. The typeface is easy to read and the colour palette is mild and neutral, performing well with multiple colour blindness tests.
Overall I would give perceivable a 4.5/5 for the homepage.
Operable
The website does not have alternative text for all images and there are multiple links that do not have a discernible name. These all make it difficult for screen readers and other assistive technology to properly display pages to those using them.
The carousel runs smoothly and at a nice pace, giving people time to digest the information at their leisure. The website is coded properly so that people who use their keyboard for navigation can easily make their way throughout the website although there are a few where the order that is navigated doesn’t make much sense and could be improved. The navigation buttons have a large clicking area, making it easier to access them.
Overall I would give operable a 4/5 for the homepage.
Understandable
When it comes to intuitive operation, there is room for improvement. The way the navigation is laid out doesn’t follow how the home page is laid out. Navigation is listed as Home, Student Showcase, Programs, and Why Study with Us where the page layout goes, Student Showcase, Why Study with Us, and then Programs. Making them the same can aid in navigation. There are some abbreviations in the text as well as some industry-specific wording but they aren’t completely out of place.
The content is broken up into easy-to-read chunks that stick within the recommended length and character count. Headings are laid out throughout the page aiding in understanding what content is being explained at a glance.
Overall I would give understandable a 4/5 for the homepage.
Robust
The website seems to be a lot slower on some browsers over others, specifically Firefox and Safari on the desktop. It ended up being much slower on mobile devices, moreso with Safari on IOS than Chrome on Android but still a lot worse than the desktop counterpart. Fixing some of the issues bogging down the website like out of date image file formats, having unused JavaScript and Css, and properly sizing images can make it more cross-browser friendly. Some fixes can be made for using more semantic html. Most of it is done very well but there are some parts that are unlabelled and would prove hard to navigate with assistive technology. Ideally the page should be working well on all browsers, not better on one and not others.
With the site being rather heavy, the tools that I tested in Google Chrome seemed to perform better than those on the other browsers I tested. They did for the most part work, but speeding them up would be helpful for those using assistive tools.
Overall I would give robustness a 3/5 for the homepage.
References
- https://color.a11y.com/Contrast/
- https://www.accessibilitychecker.org/audit/
- https://www.linkedin.com/pulse/how-cognitive-load-can-destroy-your-website-charlene-h-j-anderson/
- https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/accessibility/test-color-blindness
- https://accessibe.com/accessscan
- https://www.accessi.org/
- https://www.audioeye.com/scan/results/
- https://www.w3.org/WAI/ER/tools/
- https://pagespeed.web.dev/report
- https://front.comparium.app/