Section 508 Audit
MS Office 365 login page
The story: US Government legislation mandates that all electronic and information technology be made accessible to persons with disabilities.
I analyzed this website to demonstrate my accessibility skills. I focused on other ways of checking accessibility apart from using screen readers. The analysis was done on May 8, 2020.
Methods applied: Observation, Keyboard test, WAVE accessibility tool, AXE chrome extension tool, contrastchecker.com, Toptal color blindness tool.
508/Accessibility audit based on WCAG guidelines
Clutter: The design of the home page was clean and uncluttered which is essential for a good screen reading experience for the visually impaired
Keyboard test: The site could be navigated easily using the keyboard tab keys to move through sections: enter to select a link, arrow up and down for scrolling.
Focus state: As the tab was used to move across the page, there dashed borders round each element thereby improving the focus state. however, dashed lines may not be visible to some users.
Links: Links were clickable but not underlined. The links led to the required pages on office.com and opened on the same browser tab. This is good practice because links that open on new browser tabs would be difficult to access to a blind user.
Unordered lists: Unordered lists were used throughout the login page. This could increase difficulty for people with cognitive disabilities.
Headings: There was appropriate use of H1 and H2 headings which will make it easy for someone using a screen reader to differentiate between sections.
Fonts: Font family used throughout the page was sans serif which is good for reading from screens. Font size on the page was big enough to read except for the footer section in which the font size for the links were tiny.
Dynamic content: Motion graphics was used on decorative graphics. However, since the images are decorative, it will not be read by a screen reader. Although the movement livens up the page for fully sighted users, it needs to be checked by users with low vision and users with cognitive impairment to ensure that it is not overwhelming.
Red - Green color blindness check: Apart from the Microsoft logo and the Excel logo, there was no other use of the colors red or green on the page. Moreover, these are not used together, therefore color blind users will not be confused.
Contrast check : There was good contrast in the header region and the body of the page, because of the use of white lettering on black background, or black and blue lettering on white and light grey backgrounds in different sections. The footer had poor contrast because dark and medium grey were used on light grey. Also, there was still good contrast when I recolored the screen shots I took to grey scale (see screen shots above). However, I found the contrast of the sign in and get office buttons to be better in grey scale that the orange and white used on the website.
Evaluation with Wave Accessibility tool
The wave evaluation tool highlighted the following issues
1 error: an empty button
3 alerts: 2 redundant buttons and 1 Noscript element
12 null or empty ALT text:
37 structural elements:
88 Aria items were highlighted as follows:
18 Aria
30 Aria Labels
11 Aria tab index
29 Aria Hidden
Details of Wave Accessibility tool evaluation
Contrast analysis on contrastchecker.com
Based on the contrast issue I observed, which was also highlighted by the AXE evaluation tool, I checked the contrast of the ‘Sign in’ button on contrastchecker.com
The contrast ratio between the foreground and background colors was 3.2
Background color:
#DB3F08 / RGB 219, 63, 8
Foreground/Writing:#EFCDC9 / RGB 239 205 201
It failed the WCAG 2 AA contrast ratio threshold which is a minimum of 4.5 : 1
Analysis of color blindness using the Toptal colorblind web Page filter
Three color blindness issues examined were:
Protanopia red-green color blindness, with anomalous green cones
Deuteranopia red-green color blindness, with anomalous green cones
Tritanopia blue-Yellow color blindness, with anomalous blue cones
These did not affect contrast negatively but some icons for MS office programs changed color.
However, since the program icons were properly titled, it will not confuse the user.
Protanopia
Deuteranopia
Triptanopia
Recommended Actions
Based on the findings of the 7 stages of analysis, I have made the following recommendations:
For the footer, black or very dark grey would give better contrast with the light grey background.
Using a darker shade of orange in the get office and sign in buttons can increase the contrast
Focus states should be shown with solid lines and not dashed lines for better visibility
Empty or redundant buttons and links should be removed
All pictures should have alt text
All tab index attributes should be checked to ensure that they have a value of 0
All aria items should be appropriately labeled
Recommended Actions continued
To meet the contrast specifications but remain similar to the original colors, I suggest the color combination as follows:
Background color:
#9B3600 / RGB 155, 54, 0Foreground/Writing:
#FFE5E4 / RGB 255, 229, 228Contrast ratio: 6.02
Reflection
Carrying out this analysis, has helped me become more conscious, of the ways accessibility issues could be addressed at the design stage.
I also learnt that although screen readers aid accessibility, it is important to go beyond the use of various screen readers in determining accessibility of a web or mobile app.
Most importantly, it is essential to include users with disabilities in user research and testing, to ensure a good accessibility experience for all.
Acknowledgements
I would like to use this opportunity to thank the creators, of the images used for the sections:
Evaluation without accessibility tools - Photo by Bryan Geraldo from Pexels
Recommended actions - Photo by Breakingpic from Pexels
Thank you for looking at my case study
I would like to work with you, please contact me.
Contact Me
Let's create great experiences together!