Web Design Guide for GMU Students

Accessibility Changes Made

• Updated the alt attribute of the image to be more descriptive: From:

  img src="design.jpg" alt="Planning Image" class="content-image"

  To:

  img src="design.jpg" alt="A rough sketch for the layout of a website" class="content-image"

• Added a text size slider to allow users to adjust the font size for better readability.
• Created a new CSS class dynamic-font-size and applied it to a div that wraps the main content. This class will be used to adjust the font size dynamically based on the text size slider input.
• Added JavaScript code to handle the slider input event and update the font size for the elements with the dynamic-font-size class.

Justification for Changes

When running my site through checkers and checklists such as the Priority 1 W3 List, the W3C CSS Validator etc my site score perfect for accessibility, outside of missing proper image alternate tags.

In General (Priority 1)	Yes	No	N/A
1.1 Provide a text equivalent for every non-text element...	X
2.1 Ensure that all information conveyed with color is also available without color...	X
4.1 Clearly identify changes in the natural language of a document's text...	X
6.1 Organize documents so they may be read without style sheets...	X
6.2 Ensure that equivalents for dynamic content are updated when the dynamic content changes...			X
7.1 Until user agents allow users to control flickering, avoid causing the screen to flicker...	X
14.1 Use the clearest and simplest language appropriate for a site's content...	X
And if you use images and image maps (Priority 1)	Yes	No	N/A
1.2 Provide redundant text links for each active region of a server-side image map...			X
9.1 Provide client-side image maps instead of server-side image maps...			X
And if you use tables (Priority 1)	Yes	No	N/A
5.1 For datatables, identify row and column headers.			X
5.2 For data tables that have two or more logical levels of row or column headers, use markup to associate data cells and header cells.			X
And if you use frames (Priority 1)	Yes	No	N/A
12.1 Title each frame to facilitate frame identification and navigation.			X
And if you use applets and scripts (Priority 1)	Yes	No	N/A
6.3 Ensure that pages are usable when scripts, applets, or other programmatic objects are turned off or not supported...	X
And if you use multimedia (Priority 1)	Yes	No	N/A
1.3 Until user agents can automatically read aloud the text equivalent of a visual track, provide an auditory description of the important information of the visual track of a multimedia presentation...			X
1.4 For any time-based multimedia presentation, synchronize equivalent alternatives with the presentation...			X
And if all else fails (Priority 1)	Yes	No	N/A
11.4 If, after best efforts, you cannot create an accessible page, provide a link to an alternative page...		X

After running usability tests, I found the main feedback to be related to font / content size. So I used that feedback as the main motivation to add a simple text size slider. This slider above the bulk of text content allows users to customize their reading experience and better fit their own individual needs.