Text

1) Text structure

• Hierarchy of headings – I used a consistent approach of Title, Headings and Sub-headings to provide a clean text structure

• Short, concise paragraphs -  All through the website, I wrote content in concise paragraphs to improve readability and clear demarcation of ideas

• Enumeration using bullet points – Wherever needed, I used bullet points to enumerate information

2) Fonts

• Roboto (Sans serif) – I selected a Sans Serif font which offers easier readability than Serif fonts

• Font size – I stayed consistent with font sizes (Title 32, Headings 30, Subheadings 18 or 24, further Subheadings 18, Normal Text 12) to ensure clarity and hierarchy

3) Descriptive links

• Wherever I used hyperlinks, I ensured that the verbiage remained descriptive. Examples of this include links to pages on the Book Review page and text on Buttons

Colors and Images

1) Text as picture

• I avoided using text as a picture throughout the website to ensure screen readers can interpret text clearly 

2) Alt text 

• I provided alternative text for images used throughout the webpage to enable screen readers

3) Image Captions 

• I added simple captions for images where appropriate, to convey meaning through text rather than relying on the image alone

4) Color contrast

• The colors used on this website and their corresponding hex codes are: 

yellow: #ffdb58

purple: #B286B3

gray: #615e56

black: #000000

white: #ffffff

• I did a color contrast check on an online tool to ensure colors meet AA standards for accessibility. The results were as follows: 

Purple on White

My text color is #B286B3 at 18 px and bold weight

My background color is #FFFFFF

Passes AA (Required contrast ratio: 3; Your contrast ratio: 3.02)

Yellow on Gray

My text color is #FFDB58 at 18 px and regular weight

My background color is #615E56

Passes AA (Required contrast ratio: 4.5; Your contrast ratio: 4.79)

Buttons (Black on purple)

My text color is #000000 at 12 px and regular weight

My background color is #B286B3

Passes AA (Required contrast ratio: 4.5; Your contrast ratio: 6.95)

Page Title and Keyboard Focus

• I ensured all pages have a title (page name on Google sites) which shows up in the window title bar. 

• I checked keyboard focus using the bookmark script provided on the W3C site. I ensured 'Skip to main content' works and a user can navigate the website effectively using a keyboard

While this is not an exhaustive accessibility check, this approach has helped me understand and be aware of the nuances of accessible design. Going through this checklist considerably improved the look, feel and functionality of my website within a short amount of time.